JavaScript 循环遍历方法对比：for/forEach/map/for...in/for...of 用法与区别

JavaScript 循环遍历概述

本文旨在总结 JavaScript 中常见的循环与遍历机制。

首先定义一个包含字符串元素的数组和一个包含数值的对象，作为后续遍历示例的基础数据结构。

基础数据结构定义

const arr = ['a', 'b', 'c', 'd', 'e', 'f'];
const obj = {
  a: 1,
  b: 2,
  c: 3,
  d: 4
}

for 循环遍历数组

for 循环是 JavaScript 中最基础的循环结构。

该结构通常用于遍历数组中的各个元素。

在遍历过程中，循环变量代表当前元素的索引值。

for (let i = 0; len = arr.length, i < len; i++) {
  console.log(i);      // 0 1 2 3 4 5
  console.log(arr[i]);   // a b c d e f
}

forEach 方法遍历

forEach 方法是 Array 原型上提供的一种遍历方法。

它专门用于遍历数组中的元素。

其回调函数接收三个参数：第一个参数是当前数组元素的值，第二个参数是该元素的索引，第三个参数是原数组本身（此参数为可选）。

forEach 方法执行后没有返回值，即返回 undefined。

arr.forEach((item, index) => {
  console.log(item);   // a b c d e f 
  console.log(index);  // 0 1 2 3 4 5
})

map 方法遍历与返回值

map 方法同样是 Array 原型上提供的遍历方法。

它用于遍历数组中的元素。

其回调函数的参数定义与 forEach 相同：第一个参数为数组元素，第二个参数为索引，第三个参数为原数组（可选）。

与 forEach 不同，map 方法有返回值，它会返回一个由回调函数返回值组成的新数组。

every()，some()，filter()，reduce()，reduceRight()不再一一介绍，详细请看Js中Array方法有哪些？
let arrData = arr.map((item, index) => {
  console.log(item);   // a b c d e f 
  console.log(index);  // 0 1 2 3 4 5
  return item;
})
console.log(arrData);  // ["a", "b", "c", "d", "e", "f"]

for...in 遍历对象与数组

for...in 循环是一种键值对遍历结构。

它可以用于循环对象和数组，但在实际开发中，推荐将其用于遍历对象。

当使用 for...in 循环对象时：

循环变量代表对象的属性名（键）。

for (let key in obj) {
  if (obj.hasOwnProperty(key)) {
    console.log(key);      // a b c d 属性
    console.log(obj[key]);  // 1 2 3 4 属性值
  }
}

当使用 for...in 遍历数组时：

循环变量代表数组的索引。

for (let index in arr) {
  console.log(index);     // 0 1 2 3 4 5 数组索引
  console.log(arr[index]);  // a b c d e f 数组值
}

如果在数组上手动添加自定义属性，例如：

arr.name = '我是自定义的属性'

for (let index in arr) {
  console.log(index);      // 0 1 2 3 4 5 name (会遍历出我们自定义的属性)
  console.log(arr[index]);  // a b c d e f 我是自定义属性name
}

for...of 遍历数组与对象限制

for...of 循环是 ES6 引入的可迭代协议遍历方法。

它既可用于循环对象也可用于数组，但推荐用于遍历数组。

当使用 for...of 遍历数组时：

循环变量直接代表数组中的元素值。

for (let value of arr) {
  console.log(value);    // a b c d e f 数组值
}

当尝试使用 for...of 直接循环普通对象时：

必须配合 Object.keys() 方法一起使用，若直接用于循环普通对象会报错，因此不推荐使用 for...of 直接循环对象。

若通过 Object.keys() 获取键名后使用 for...of，循环变量代表对象的属性名。

for (let value of Object.keys(obj)) {
  console.log(value);  // a b c d 对象属性
}

遍历方法总结与建议

综上所述：

遍历数组元素推荐使用 for 循环、forEach、map 以及 for...of；遍历对象属性则推荐使用 for...in。

以上介绍了 JavaScript 中几种主要的循环遍历方式及其特点，希望对读者有所帮助。如有任何疑问，欢迎留言交流，作者会及时回复。感谢对本站的支持！

JavaScript 循环遍历详解：for、forEach、map、for...in 与 for...of 对比