js代码-ES6 系列之迭代器与 for of

在JavaScript的世界里，ES6（ECMAScript 2015）引入了许多新的特性，极大地丰富了编程方式，其中迭代器（Iterators）和`for...of`循环就是两个非常重要的概念。它们使得处理数组、对象和其他可迭代数据结构变得更加方便和高效。 ### 迭代器（Iterators） 迭代器是ES6中一个核心的概念，它提供了一种统一的方式来遍历任何可迭代对象。可迭代对象包括数组、Set、Map等，甚至自定义的数据结构也可以通过实现迭代器协议变得可迭代。迭代器的核心是`next()`方法，每次调用都会返回一个包含`value`和`done`属性的对象，`value`表示当前项的值，`done`表示是否遍历结束。 ```javascript // 自定义迭代器 let iterable = { [Symbol.iterator]: function*() { yield 1; yield 2; yield 3; } }; let iterator = iterable[Symbol.iterator](); console.log(iterator.next()); // { value: 1, done: false } console.log(iterator.next()); // { value: 2, done: false } console.log(iterator.next()); // { value: 3, done: false } console.log(iterator.next()); // { value: undefined, done: true } ``` ### `for...of`循环 `for...of`循环是ES6引入的新语法，用于遍历可迭代对象。与传统的`for`循环或`forEach`方法不同，`for...of`会自动调用迭代器的`next()`方法，直到`done`为`true`为止，这使得遍历更加简洁。 ```javascript let arr = [1, 2, 3]; for (let item of arr) { console.log(item); // 1, 2, 3 } let map = new Map([[1, 'one'], [2, 'two']]); for (let [key, value] of map) { console.log(key, value); // 1 "one", 2 "two" } ``` ### 迭代器与`for...of`结合 `for...of`循环与迭代器结合，可以轻松遍历各种数据结构，包括自定义的迭代器： ```javascript let myIterable = { [Symbol.iterator]: function*() { yield 'Hello'; yield 'World'; } }; for (let word of myIterable) { console.log(word); // "Hello", "World" } ``` ### 扩展运算符与迭代器 扩展运算符（...）也可以与迭代器一起使用，常用于数组拼接、函数参数传递等场景： ```javascript let arr1 = [1, 2]; let arr2 = [3, 4]; let combined = [...arr1, ...arr2]; // [1, 2, 3, 4] function printArgs(...args) { console.log(args); } printArgs('a', 'b', 'c'); // ["a", "b", "c"] printArgs(...['d', 'e']); // ["d", "e"] ``` ### 总结 在JavaScript ES6中，迭代器和`for...of`循环提供了强大的遍历能力，让开发者能够更灵活地处理数据。通过实现迭代器协议，自定义数据结构也可以变得可迭代，从而充分利用这些新特性。同时，扩展运算符进一步增强了迭代器的应用，使代码更加简洁和易读。在实际开发中，熟练掌握这些概念将极大提高编写高效、可维护的代码的能力。