for of、for in 、forEach使用方法对比

一. 概述

for of、for in 、forEach这三种方法在平常工作当中使用较多，但是有的时候可能能实现功能，但是可能并不是最佳实践，现在从遍历的对象类型、遍历顺序、遍历过程中是否可以修改对象、遍历过程中能否使用 break 和 continue、各自适用的场景这几个方面来对比介绍。

二. 遍历的对象类型

for-in：遍历的是对象的可枚举属性，包括自身属性和继承属性。
for-of：遍历的是具有迭代器的对象，例如数组、字符串、Set、Map 等。
forEach：遍历的是数组的每一个元素

三.遍历顺序

for-in：遍历的顺序是不确定的，因为对象属性的顺序并不是固定的。
for-of：遍历的顺序是有序的，因为具有迭代器的对象都有一个明确的遍历顺序。
forEach：遍历的顺序是从数组的第一个元素到最后一个元素。

四.遍历过程中是否可以修改对象

for-in：可以修改对象的属性。
for-of：不能修改遍历的对象。
forEach：不能修改遍历的数组，但是可以修改数组元素的值。

五.遍历过程中能否使用 break 和 continue

for-in：可以使用 break 和 continue
for-of：可以使用 break 和 continue
forEach：不能使用 break 和 continue

六.各自适用场景

for-in

适用场景：

遍历对象的属性，包括自身属性和继承属性。
遍历对象时，不关心属性的顺序。
需要动态获取对象的属性值。

示例代码：

const obj = {a: 1, b: 2, c: 3};
for (const key in obj) {
  console.log(key, obj[key]);
}

for-of

适用场景：

遍历具有迭代器的对象，例如数组、字符串、Set、Map 等。
需要保证遍历的顺序是有序的。
遍历数组或字符串时，需要直接获取元素值本身。

示例代码：

const arr = [1, 2, 3];
for (const item of arr) {
  console.log(item);
}

forEach

适用场景：

遍历数组的每一个元素，不需要获取索引或数组本身。
对数组元素进行操作，例如修改元素的值、删除元素等。

示例代码：

const arr = [1, 2, 3];
arr.forEach((item, index) => {
  console.log(item);
});

七.性能比较

for-in、for-of 和 forEach 都有各自的使用场景，具体的选择要根据实际需求和语境来决定。需要注意的是，在遍历对象时，for-in 的性能会比 for-of 和 forEach 差一些，因为它需要查找对象的属性，而查找属性是比直接遍历数组元素要慢的。