JavaScript 语言自诞生以来，就有一大段时间没有更新过，导致其语法功能有些落后，不能满足开发者更高效的需求。ES6 引入了许多新特性，其中就包含了遍历器（Iterator）和 for...of 循环。本文将介绍 ES6 中多种遍历器的用法和实际应用场合。
什么是遍历器？
在 ES6 中，遍历器是一种接口，为各种不同的数据结构提供统一的访问机制。开发者通过遍历器，可以像访问数组一样，对任意数据结构进行遍历。
一个对象，用 Symbol.iterator 方法来返回一个遍历器对象。调用该对象的 next 方法，就会依次返回数据结构的每一个成员。如下是一个简单的示例：
const arr = [1, 2, 3];
const iter = arr[Symbol.iterator]();
console.log(iter.next()); // {value: 1, done: false}
console.log(iter.next()); // {value: 2, done: false}
console.log(iter.next()); // {value: 3, done: false}
console.log(iter.next()); // {value: undefined, done: true}可以看到，通过遍历器访问数组时，会一次返回一个成员，直到最后一个成员返回，遍历结束。每次调用 next 方法，都会返回当前成员和遍历是否结束（done）的信息。
多种遍历器用法
ES6 中提供了多种遍历器的用法，我们将逐一进行介绍。
字符串遍历器
在 ES6 中，字符串被认为是一种类似数组的数据结构，因此也可以使用遍历器进行遍历。每次遍历返回的是字符串中的一个字符。
const str = 'hello';
const iter = str[Symbol.iterator]();
console.log(iter.next()); // {value: "h", done: false}
console.log(iter.next()); // {value: "e", done: false}
console.log(iter.next()); // {value: "l", done: false}
console.log(iter.next()); // {value: "l", done: false}
console.log(iter.next()); // {value: "o", done: false}
console.log(iter.next()); // {value: undefined, done: true}数组遍历器
在 ES6 中，数组是一种常见的数据结构，因此也可以使用遍历器进行遍历。每次遍历返回的是数组的一个元素。
const arr = [1, 2, 3];
const iter = arr[Symbol.iterator]();
console.log(iter.next()); // {value: 1, done: false}
console.log(iter.next()); // {value: 2, done: false}
console.log(iter.next()); // {value: 3, done: false}
console.log(iter.next()); // {value: undefined, done: true}Set 和 Map 遍历器
在 ES6 中，Set 和 Map 是两种新的数据结构，因此也可以使用遍历器进行遍历。每次遍历分别返回 Set 和 Map 中的一个值和键。
-- -------------------- ---- ------- ----- --- - --- ------- -- ---- ----- ---- - ----------------------- ------------------------- -- ------- -- ----- ------ ------------------------- -- ------- -- ----- ------ ------------------------- -- ------- -- ----- ------ ------------------------- -- ------- ---------- ----- ----- ----- --- - --- ------------ --- ------- ----- ----- ------- - ----------------------- ---------------------------- -- ------- ------- --- ----- ------ ---------------------------- -- ------- ------- --- ----- ------ ---------------------------- -- ------- ---------- ----- -----
自定义遍历器
在 ES6 中，开发者可以自定义遍历器。只需要在一个对象中，实现 Symbol.iterator 方法，该方法返回一个可遍历对象。
-- -------------------- ---- -------
----- --- - -
-- --
-- --
-- --
------------------ ---------- -
----- ---- - ------------------
--- ----- - --
------ -
----- -- -- -
-- ------ -- ------------ -
------ ------ ------
- ---- -
----- --- - ------------
--------
------ ------- -------- -------------- ----- -------
-
-
-
-
--
--- ------ ---- -- ---- -
------------------ -- --- --- --- --- --- --
-遍历器的实际应用场合
遍历器在前端开发中，应用非常广泛。下面列举了一些实际应用场合。
for...of 循环
for...of 循环是 ES6 中新添加的一种循环方式，可以对各种集合对象进行遍历。for...of 循环的本质是一次遍历器遍历过程。
const arr = [1, 2, 3];
for (const item of arr) {
console.log(item); // 1, 2, 3
}合并多个数组
使用遍历器可以将多个数组合并成一个数组。
const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; const arr3 = [7, 8, 9]; const result = [...arr1, ...arr2, ...arr3]; console.log(result); // [1, 2, 3, 4, 5, 6, 7, 8, 9]
使用访问器函数
访问器函数 get 和 set 提供了一种更为可读、可写、更易于检测的属性访问方式。这种访问方式可以让开发者更好地控制对属性的访问。
-- -------------------- ---- -------
----- --- - -
----- --- -- ---
--- -------- -
------ -----------------
--
--- ------------- -
---------------- - ------
--
------------------ ---------- -
----- ---- - -----------------------------
------ -----
-
--
------------------------ -- -
---------- - --
------------------------ -- -总结
遍历器是 ES6 中新添加的一种接口，它为访问各种数据结构提供了统一的访问机制。本文介绍了 ES6 中多种遍历器用法，其中包括字符串遍历器、数组遍历器、Set 和 Map 遍历器、以及自定义遍历器等。我们还介绍了遍历器的实际应用场合，包括 for...of 循环、合并多个数组、以及使用访问器函数等。希望本文对您的学习和工作有所指导和帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6492ea0648841e98940b44c8