ES6 中的 for...of 循环与 ES5 中的 forEach 的区别及使用

前言

在前端开发中，使用循环操作数组和对象是常见的需求。在 ES5 中，我们通常使用 forEach 方法来进行遍历，但是这种方法比较局限，而在 ES6 中，我们引入了 for...of 循环来操作数组和字符串。在本篇文章中，我们将详细介绍 ES6 中的 for...of 循环与 ES5 中的 forEach 的区别及使用，并提供一些示例代码。

ES5 中的 forEach

ES5 中引入了 forEach 方法用于遍历数组，并且可以在每一项上执行指定的操作。下面是 forEach 方法的语法：

array.forEach(function(currentValue, index, arr), thisValue)

其中，function(currentValue, index, arr) 是一个必填的回调函数，分别表示当前项的值、当前项的索引和数组本身。thisValue 是可选的指定回调函数内部 this 的值。下面是一个 forEach 的用法示例：

let arr = [1, 2, 3];
arr.forEach(function(item, index) {
    console.log(item, index); // 输出 1 0、2 1、3 2
})

虽然 forEach 方法可以用于数组的遍历操作，但是它有很大的局限性。例如，forEach 无法直接跳出循环，也无法操作类数组对象（例如 arguments 对象等），而且无法使用 return 语句来返回任何值。

ES6 中的 for...of 循环

在 ES6 中，我们引入了 for...of 循环来操作数组和字符串。下面是 for...of 循环的语法：

for (variable of iterable) {
    statement
}

其中，variable 表示每次迭代时得到的当前项的值，iterable 是可迭代对象（例如数组和字符串）。

下面是一个 for...of 的用法示例：

let arr = [1, 2, 3];
for (let item of arr) {
    console.log(item); // 输出 1、2、3
}

相比于 forEach 方法，for...of 循环更为灵活，可以直接使用 break 和 continue 语句来跳出循环或者跳过当前项。而且，for...of 循环还可以操作类数组对象，例如 arguments 对象等。下面是一些 for...of 循环的示例：

// 通过 for...of 循环实现数组求和
let arr = [1, 2, 3];
let sum = 0;
for (let item of arr) {
    sum += item;
}
console.log(sum); // 输出 6

// 通过 for...of 循环遍历字符串
let str = 'hello';
for (let char of str) {
    console.log(char); // 输出 h、e、l、l、o
}

// 通过 for...of 循环操作类数组对象
function test() {
    for (let arg of arguments) {
        console.log(arg);
    }
}
test(1, 2, 3); // 输出 1、2、3

总结

通过对比，可以发现 for...of 循环相比于 forEach 方法更为灵活，可以直接使用 break 和 continue 语句来跳出循环或者跳过当前项。因此，在实际开发中，我们应该优先选择使用 for...of 循环来操作数组和字符串。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/659f3e8aadd4f0e0ff7ecaee