ES6的Iterator 和 for...of 循环

写在前面

在JavaScript中，Iterator（遍历器）是一种接口，用于遍历数据结构（如数组、对象等）中的元素。它提供了一种统一的方式来访问集合中的每个项，包括值和位置。

默认 Iterator 接口

许多内置的JavaScript对象都有默认的Iterator接口，例如：

• Array对象：可以使用for...of循环或Array.prototype[Symbol.iterator]()方法来获取其Iterator对象。
• Map和Set对象：同样可以使用for...of循环或Map.prototype[Symbol.iterator]()和Set.prototype[Symbol.iterator]()方法来获取其Iterator对象。
• String对象：可以使用for...of循环或String.prototype[Symbol.iterator]()方法来获取其Iterator对象。

调用 Iterator 接口的场合

当你需要遍历一个数据结构中的所有元素时，可以使用Iterator接口。例如：

const arr = [1, 2, 3];
const iterator = arr[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 }

字符串的 Iterator 接口

字符串的Iterator接口允许我们逐个字符地遍历字符串。例如：

const str = 'hello';
const iterator = str[Symbol.iterator]();console.log(iterator.next()); // { value: 'h', done: false }
console.log(iterator.next()); // { value: 'e', done: false }
console.log(iterator.next()); // { value: 'l', done: false }
console.log(iterator.next()); // { value: 'l', done: false }
console.log(iterator.next()); // { value: 'o', done: false }
console.log(iterator.next()); // { value: undefined, done: true }

Iterator 接口与 Generator 函数

Generator函数是一种特殊的函数，它可以用来生成Iterator对象。例如：

function* generateNumbers() {yield 1;yield 2;yield 3;
}const iterator = generateNumbers();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 }

遍历器对象的 return() 和 throw()

遍历器对象有两个额外的方法：return()和throw()。

• return()：可以在遍历器完成之前强制结束遍历，并返回一个指定的值。
• throw()：可以在遍历器中抛出一个错误。

例如：

function* generateNumbers() {yield 1;yield 2;yield 3;
}const iterator = generateNumbers();console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.return(42)); // { value: 42, done: true }
console.log(iterator.next()); // { value: undefined, done: true }// throw() example
try {console.log(iterator.throw(new Error('Something went wrong')));
} catch (error) {console.error(error); // Something went wrong
}

for…of 循环

for...of循环是JavaScript中的一种语法结构，用于遍历可迭代对象（如数组、字符串、Map、Set等）。它会自动调用对象的Iterator接口来获取每个元素。例如：

const arr = [1, 2, 3];for (const num of arr) {console.log(num);
}
// Output: 1, 2, 3const str = 'hello';for (const char of str) {console.log(char);
}
// Output: h, e, l, l, o

总之，Iterator和for...of循环提供了一种强大而灵活的方式来遍历和处理各种类型的数据结构。