JavaScript 的 for…in、for…of和forEach有什么区别

JavaScript 的 for…in、for…of和forEach的区别：一、遍历对象和数组；二、遍历顺序；三、遍历的内容；四、可用性；五、使用场景；六、支持性；七、使用方式；八、迭代器支持。遍历对象和数组是指，for…in用于遍历对象的可枚举属性，for…of用于遍历可迭代对象，forEach只能用于遍历数组。

一、遍历对象和数组

• for…in：用于遍历对象的可枚举属性，无法直接遍历数组。
• for…of：用于遍历可迭代对象，包括数组、字符串、Set、Map等，无法直接遍历普通对象。
• forEach：只能用于遍历数组，不能用于遍历对象。

二、遍历顺序

• for…in：遍历对象属性时，顺序不确定，取决于JavaScript引擎实现。
• for…of：遍历数组元素时，按照元素在数组中的顺序进行遍历。
• forEach：按照数组中元素的顺序依次遍历，不会跳过任何元素。

三、遍历的内容

• for…in：遍历的是对象的属性名（键）。
• for…of：遍历的是可迭代对象的元素值。
• forEach：遍历的是数组的元素值。

四、可用性

• for…in：可以用于遍历普通对象的可枚举属性，也可以用于遍历数组的索引。
• for…of：可以用于遍历具有迭代器的可迭代对象，如数组、字符串、Set、Map等。
• forEach：只能用于遍历数组，不支持遍历普通对象。

五、使用场景

• for…in：适用于遍历对象的属性，在需要遍历对象的属性名或键时使用。
• for…of：适用于遍历可迭代对象的元素值，在需要遍历数组、字符串等可迭代对象的元素时使用。
• forEach：适用于遍历数组的元素值，在需要遍历数组并对每个元素执行相同操作时使用。

六、支持性

• for…in：在所有现代浏览器中均支持。
• for…of：在较新版本的浏览器中支持，不支持旧版本的Internet Explorer（IE）浏览器。
• forEach：在较新版本的浏览器中支持，不支持旧版本的Internet Explorer（IE）浏览器。

七、使用方式

• for…in：使用for…in循环时，需要使用hasOwnProperty()方法过滤原型链上的属性，以确保只遍历对象本身的属性。
• for…of：直接遍历可迭代对象的元素值，不需要额外的过滤操作。
• forEach：使用forEach方法时，需要传入一个回调函数作为参数，该函数会在每个数组元素上调用一次，执行特定的操作。

八、迭代器支持

• for…in：不支持遍历迭代器对象。
• for…of：支持遍历具有迭代器的可迭代对象，可以遍历类似数组的自定义对象。
• forEach：不支持直接遍历迭代器对象，需要先将迭代器转换为数组再进行遍历。

延伸阅读

forEach方法

forEach 是一种常见的数组方法，用于对数组的每个元素执行指定的操作或回调函数。forEach 方法接受一个回调函数作为参数，并在数组的每个元素上调用该函数。回调函数可以接受三个参数：当前元素的值、当前元素的索引和正在遍历的数组本身。

下面是一个使用 forEach 方法的示例：

const numbers = [1, 2, 3, 4, 5];

numbers.forEach((number, index, array) => {
  console.log(`当前元素：${number}`);
  console.log(`当前索引：${index}`);
  console.log(`当前数组：${array}`);
});

在这个例子中，我们定义了一个名为 numbers 的数组，并对其应用 forEach 方法。回调函数中的参数 number 表示当前元素的值，index 表示当前元素的索引，array 表示正在遍历的数组。

在回调函数中，我们可以执行任意操作。在示例中，我们简单地将当前元素、索引和数组打印到控制台。

forEach 方法对于遍历数组并对每个元素执行相同的操作非常有用。然而，它不会返回新的数组，也不能在遍历过程中中止或跳过循环。如果需要返回新的数组或具有更多控制权的遍历操作，可以考虑使用其他数组方法，如 map、filter 或 reduce。