详解JavaScript中for...in与for...of循环的区别

for...in与for...of循环概述

回顾编程基础，for循环的标准结构通常包含初始化、条件判断和步进操作三个部分，其基本语法格式如下：

for(init;test;step ){
 statement
}
//例如
for(int i=0,i<10;i++){
 ...
}

随后接触到Python语言，发现其for循环语法更为简洁优雅，仅需通过for...in语句即可直接遍历对象。

例如在Python中遍历数组的写法为：for i in arry

for...in循环的遍历机制

近期阅读廖雪峰官网教程时，发现了JavaScript中更为灵活的for...of循环，其功能类似于Python中的for...in。尽管JavaScript也保留了传统的for...in循环，但它主要用于遍历对象的属性名（即键key）。当使用for...in遍历数组时，实际获取的是数组元素的索引值。

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

for...of循环的ES6新特性

for...of循环是ES6标准引入的新语法，专门用于遍历集合类型的数据，具体用法示例如下：

var a = ['A', 'B', 'C'];
var s = new Set(['A', 'B', 'C']);
var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
for (var x of a) { // 遍历Array
 alert(x);//'A', 'B', 'C'
}
for (var x of s) { // 遍历Set
 alert(x);//'A', 'B', 'C'
}
for (var x of m) { // 遍历Map
 alert(x[0] + '=' + x[1]);//1='x',2='y',3='z'
}

遍历数组时的差异对比

由于历史原因，for...in循环实际遍历的是对象的属性名称。在JavaScript中，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'
}

以上即为JavaScript中for...in与for...of循环用法的详细解析，希望能帮助读者理解两者的区别。如有任何疑问，欢迎留言交流，小编会及时回复。感谢大家对本站的支持！