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

for…of循环与for…in循环的区别

1.for…of循环可以代替数组实例的forEach方法

const arr = ['red', 'green', 'blue'];

arr.forEach(function (element, index) {
  console.log(element); // red green blue
  console.log(index);   // 0 1 2
});

2.JavaScript 原有的for…in循环，只能获得对象的键名，不能直接获取键值。ES6 提供for…of循环，允许遍历获得键值

var arr = ['a', 'b', 'c', 'd'];

for (let a in arr) {
  console.log(a); // 0 1 2 3
}

for (let a of arr) {
  console.log(a); // a b c d
}

3.for…of循环调用遍历器接口，数组的遍历器接口只返回具有数字索引的属性。

let arr = [3, 5, 7];
arr.foo = 'hello';

for (let i in arr) {
  console.log(i); // "0", "1", "2", "foo"
}

for (let i of arr) {
  console.log(i); //  "3", "5", "7"
}

4.for…of循环会正确识别 32 位 UTF-16 字符。

for (let x of 'a\uD83D\uDC0A') {
  console.log(x);
}
// 'a'
// '\uD83D\uDC0A'

• for…in循环的缺点

1. 数组的键名是数字，但是for…in循环是以字符串作为键名“0”、“1”、“2”等等。
2. for…in循环不仅遍历数字键名，还会遍历手动添加的其他键，甚至包括原型链上的键。
3. 某些情况下，for…in循环会以任意顺序遍历键名。
   总之，for…in循环主要是为遍历对象而设计的，不适用于遍历数组。

• for…of函数的优点

1. 有着同for…in一样的简洁语法，但是没有for…in那些缺点。
2. 不同于forEach方法，它可以与break、continue和return配合使用。
3. 提供了遍历所有数据结构的统一操作接口。

该文章参考于《ES6 标准入门》

仅用于学习笔记