在 ES6 中使用 for...of 语法

在 ES6 中使用 for...of 语法

ES6 (ECMAScript 2015) 是 JavaScript 的最新标准，引入了许多新的语法和特性，其中一个重要的特性就是 for...of 语法。for...of 语法允许你遍历可迭代对象 (Iterable)，例如数组、字符串、Map 和 Set 等等。它比传统的 for 循环语法更加简洁、易读、易用，适用于各种场景，特别是在前端中使用广泛。

for...of 的语法形式如下：

for (variable of iterable) {
  // code block to be executed
}

其中，variable 是用于存储每个迭代元素的变量名，iterable 是要迭代的可迭代对象。在每次迭代时，variable 将被赋值为 iterable 中的下一个元素，直到遍历完所有元素为止。

下面通过一些示例来说明 for...of 的使用。

遍历数组

首先，我们可以使用 for...of 来遍历数组，例如：

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

for (let item of array) {
  console.log(item);
}

这将输出数组中的每个元素：

1
2
3
4
5

遍历字符串

我们也可以使用 for...of 来遍历字符串，例如：

const str = "Hello, World!";

for (let char of str) {
  console.log(char);
}

这将输出字符串中的每个字符：

-- -------------------- ---- -------
-
-
-
-
-
-
 
-
-
-
-
-
-
展开代码

遍历 Map

使用 for...of 来遍历 Map，可以很方便地遍历 Map 中的所有键值对 (key-value pairs)。例如：

-- -------------------- ---- -------
----- --- - --- -----
  -------- ----------
  -------- ----------
  -------- ---------
---

--- ---- ----- ------ -- ---- -
  ---------------- -------
-
展开代码

这将输出 Map 中的每个键值对：

key1 value1
key2 value2
key3 value3

遍历 Set

最后，我们可以使用 for...of 来遍历 Set，例如：

const set = new Set([1, 2, 3, 4, 5]);

for (let item of set) {
  console.log(item);
}

这将输出 Set 中的每个唯一元素：

1
2
3
4
5

总结

通过以上示例，我们可以看到 for...of 的简洁、易读、易用，使得我们可以更加方便地遍历各种可迭代对象。除了上述对象之外，for...of 也可以遍历生成器函数 (Generator Function) 和 TypedArray 等。

需要注意的是，for...of 仅遍历可迭代对象中的值，而不会遍历它们的索引 (index)。如果需要索引值，可以使用传统的 for 循环语法或使用 Array.prototype.entries() 方法来返回索引-值对。

在实践中，我们可以结合其它 ES6 的特性，如箭头函数、解构赋值、默认参数等等，来更加高效地处理各种任务。因此，掌握 for...of 的使用对于前端开发是非常重要的。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/654d8b5c7d4982a6eb6ef34f