常用for循环和for in 以及for of 的区别

Posted 2020-09-25 千と千寻の

用Es6对象扩展运算符（…）与rest运算符说明

function test (...a) {
  for (let val = 0; val < a.length; val++) {
    console.log(val + \' \' + \'常用的 for循环\') // 0-7 便利出下标
  }

  for (let val in a) {
    console.log(val + \' \' + \'for in  0-7 便利出下标\') // 0-7 便利出下标
  }

  for (let val of a) {
    console.log(val + \' \' + \'for of 1-8 便利值\') // 1-8 便利值
  }
}
test(1, 2, 3, 4, 5, 6, 7, 8)

 补充一个可以用for of 同样能实现for in效果的方式

for…of数组索引:有时候开发中是需要数组的索引的，那我们可以使用下面的代码输出数组索引。

let arr=[\'xzblogs\',\'小智\',\'zachary\']
for (let index of arr.keys()){
    console.log(index);
}

可以看到这时的控制台就输出了0,1,2，也就是数组的索引。

用for of还可以同时输出对应的索引值和对应的内容，也就是键值对

我们用entries()这个实例方法，配合我们的for…of循环就可以同时输出内容和索引了。

let arr=[\'xzblogs\',\'小智\',\'zachary\']
for (let [index,val] of arr.entries()){
    console.log(index+\':\'+val);
}

 利用in来遍历 key 为数字的数据列表

let data = {
  \'6\': { \'value\': 10 },
  \'7\': { \'value\': 12 }
}

for (const key in data) {
  console.log(key, data[key].value) 
  // 打印出 
 6 10
 7 12 
}

let arr = [
  { \'sort\': 1, \'nane\': 1 },
  { \'sort\': 2, \'nane\': 2 },
  { \'sort\': 3, \'nane\': 3 }
]

for (const keys in arr[0]) {
  console.log(keys) // 打印出   sort  nane
}

for (const keys in arr) {
  console.log(keys) // 打印出   0 1 2
}