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。
一站式研发项目管理平台 PingCode
支持敏捷\瀑布、知识库、迭代计划&跟踪、需求、缺陷、测试管理，同时满足非研发团队的流程规划、项目管理和在线办公需要。
