JavaScript 数组与对象遍历：for、for-in、forEach 与 for-of 详解

本文通过具体示例，详细解析JavaScript中forEach、for-in以及for-of这几种循环结构的实际用法，旨在帮助开发者理解并正确选择遍历方式。

常规for循环遍历数组

一、常规数组遍历方法

var array = [1,2,3,4,5,6,7];
for (var i = 0; i < array.length; i++) {
  console.log(i,array[i]);
}

for-in遍历：索引与对象

二、使用for-in遍历数组，其返回值为索引

var array = [1,2,3,4,5,6,7];
for(let index in array) {
  console.log(index,array[index]);
};

forEach遍历：元素处理

三、使用forEach遍历，其回调函数接收的是数组元素

var array = [1,2,3,4,5,6,7];

array.forEach(e=>{
  console.log(e);
});

array.forEach(function(e){
  console.log(e);
});

四、for-in不仅适用于数组，还可用于具有可枚举属性的对象，同样返回索引

var table = {
  a : 10,
  b : true,
  c : "jadeshu"
};

for(let index in table) {
  console.log(index, table[index]);
}

for-of循环：ES6迭代器

五、ES6引入了for-of循环，其直接获取数组或可迭代对象的元素值

var array = [1,2,3,4,5,6,7];

for(let ele of array) {
  console.log(ele);
};

var str = "helloabc";
for(let ele of str) {
  console.log(ele);
}

需要注意的是，for-of无法直接用于普通对象

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

PS：这里再为大家推荐一款JS数组遍历方式分析对比工具供大家参考：

在线JS常见遍历方式性能分析比较工具：http://tools.jb51.net/aideddesign/js_bianli

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript数组操作技巧总结》、《JavaScript遍历算法与技巧总结》、《javascript面向对象入门教程》、《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。