首页 > 技术文章 > for...of 循环和 for...in 循环有何区别?

ZJTL 2020-04-27 21:18 原文

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
}

 

推荐阅读