for...of 循环和 for...in 循环有何区别？

for…in 循环由于历史遗留问题，它遍历的实际上是对象的属性名称。一个Array数组实际上也是一个对象，它的每个元素的索引被视为一个属性。

当我们手动给Array对象添加了额外的属性后，for…in 循环将带来意想不到的意外效果：

var a = ['A', 'B', 'C'];
a.name = 'Hello';
for (var x in a) {
    alert(x); // '0', '1', '2', 'name'
}

for…in 循环将把name包括在内，但Array的length属性却不包括在内。

for…of 循环则完全修复了这些问题，它只循环集合本身的元素，不能循环出自定义的属性：

var a = ['A', 'B', 'C'];
a.name = 'Hello';
for (var x of a) {
    alert(x); // 'A', 'B', 'C'
}

这就是为什么要引入新的 for…of 循环。

使用for…in遍历数组

遍历结果是key,数组下标

var a=[1,2,3];
for(let i in a){
    console.log(i);//0 1 2
    console.log(a[i]);//1 2 3
}

使用for…of遍历数组

遍历结果是value,数组值

var a=[1,2,3];
for(let i of a){
    console.log(i);//1 2 3
}