for...of...与for...in...的区别

for...of...与for...in...的区别

for...of...

• 定义：for of是ES6新增的循环方法。

• 使用范围：只能遍历数组。

• 功能：可以正确响应break、continue和return语句

• 注意：

  • for of遍历的只是数组内的元素，而不包括数组的原型属性method和索引index
  • key是数组中每一项的具体值
  • for of遍历对象会报错

• 如果想用for of遍历数组的索引用Array.prototype.keys:

  • for (const index of [1, 2, 3, 4, 5].keys()) {
      console.log(index);
    }
    // index的值书数字类型的索引
    

• 如果要同时访问键和值，可以使用Array.prototype.entries()

  • for (const [index, value] of [1, 2, 3, 4, 5].entries()) {
      console.log(index, value);
    }
    

for...in...

• 定义：for in是ES5的循环方法。

• 使用范围：可以遍历对象或者数组，但是适用与遍历对象

• 功能：不能响应break、continue和return语句

• 注意：

  • 如果用来遍历数组，key是数组的索引（字符串类型），如果是对象key是对象的键名
  • for in遍历数组的毛病
    • 1.index索引为字符串型数字，不能直接进行几何运算
    • 2.遍历顺序有可能不是按照实际数组的内部顺序
    • 3.使用for in会遍历数组所有的可枚举属性，包括原型。例如上栗的原型方法method和name属性

• 总结：所以for in更适合遍历对象，不要使用for in遍历数组。

总结

• for..of适用遍历数/数组对象/字符串/map/set等拥有迭代器对象的集合.但是不能遍历对象,因为没有迭代器对象.与forEach()不同的是，它可以正确响应break、continue和return语句
• for-of循环不支持普通对象，但如果你想迭代一个对象的属性，你可以用for-in循环（这也是它的本职工作）或内建的Object.keys()方法：