在前端开发中，我们经常需要对数组进行遍历和操作，ES6 中引入了 for...of 和 forEach 方法来方便地操作数组。这两种方法都非常实用，但是它们有不同的使用方式和适用场景，本文将详细介绍它们的使用方法和区别。
for...of 方法
for...of 是 ES6 中新增的一种遍历数组的方法，它可以快速地在数组中获取每个元素进行操作。for...of 方法的语法如下：
for (let [value] of array) {
// code
}其中，value 为每个遍历到的元素的值。我们可以通过这个方法快速地遍历数组来进行操作。例如，下面是一个简单的示例：
let arr = [1, 2, 3, 4];
for (let item of arr) {
console.log(item);
}输出结果为：
1 2 3 4
我们可以看到，for...of 方法遍历输出了数组中的每个元素。
除了获取元素的值，我们还可以使用解构语法来获取每个元素的完整内容。例如，下面是一个示例：
-- -------------------- ---- ------- --- ----- - - ------- ------------------- ------- --------- ---------- ------- ----------------- ------- ----- -------- ------- ----------------- ------- ------ ---------- -- --- ---- - ------ ------ - -- ------ - ----------------- - ------ - -------- -
输出结果为：
JavaScript高级程序设计的作者是Nicholas C.Zakas JavaScript忍者秘籍的作者是John Resig JavaScript权威指南的作者是David Flanagan
我们可以看到，使用解构语法可以方便地获取每个元素的完整内容，进行相关操作。
forEach 方法
forEach 方法也是遍历数组的一种方式，它可以用来在每个数组元素上执行一些操作，例如，修改、删除、或执行其他操作等。forEach 方法的语法如下：
array.forEach(function(currentValue, index, array) {
// code
});其中，currentValue 为当前遍历到的元素的值，index 为当前遍历到元素的下标，array 为操作的数组。我们可以在函数中进行操作，例如，下面是一个简单的示例：
let arr = [1, 2, 3, 4];
arr.forEach(function(item) {
console.log(item);
});输出结果为：
1 2 3 4
我们可以看到，forEach 方法也可以遍历输出数组中的每个元素。
除了输出元素的值外，我们还可以在函数中进行操作，例如，下面是一个示例：
let arr = [1, 2, 3, 4];
arr.forEach(function(item, index) {
arr[index] = item * 2;
});
console.log(arr);输出结果为：
[2, 4, 6, 8]
我们可以看到，使用 forEach 方法可以快速地对数组中的每个元素进行修改，以达到我们想要的结果。
for...of 和 forEach 方法的区别
for...of 和 forEach 方法都可以用来遍历数组并执行相关操作，但它们也有不同之处。下面是两者之间的一些区别：
- for...of 方法基于迭代器，可以遍历任何可迭代对象，包括数组、字符串、Set 和 Map 等。forEach 方法仅仅只能遍历数组。
- for...of 方法使用 break 和 continue 关键字可以控制循环。forEach 方法无法使用这些关键字来控制循环。
- for...of 方法可以使用解构语法来获取每个元素的完整内容。forEach 方法无法使用解构语法来获取每个元素的完整内容。
- for...of 方法可以使用 return 语句返回方法的值，可以在遍历完成后返回一些结果。forEach 方法无法这样做。
基于不同的需求和适用场景，我们可以根据具体的需求来选择使用 for...of 或 forEach 方法。
总结
本文详细介绍了 ES6 中的 for...of 和 forEach 方法，它们是遍历数组的两种实用方式。for...of 方法基于迭代器，可以遍历任何可迭代对象，可以使用 break 和 return 等命令来控制循环，可以使用解构语法获取每个元素的完整内容。forEach 方法只能遍历数组，无法使用 break 和 continue 等命令来控制循环，无法使用解构语法获取每个元素的完整内容。根据具体的需求和适用场景，我们可以选择使用不同的方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651bc6bf95b1f8cacd365548