ES6 中的 Iterator，隐藏实现，简化访问

前端

2024-01-10 11:14:26

一、Iterator的起源和意义

Iterator模式最早在设计模式中提出，它是一种设计模式，允许您遍历任何集合的数据而无需了解该集合的内部结构。Iterator模式的目的是封装集合的实现细节，使您可以专注于集合中的数据本身。

在ES6中，Iterator通过for...of循环实现。for...of循环是一种语法糖，它使您可以轻松遍历任何可迭代对象（即实现了Iterator接口的对象）。

二、Iterator的具体作用

Iterator在ES6中主要有以下作用：

遍历数组和字符串：使用for...of循环遍历数组或字符串时，Iterator会被自动创建并使用。Iterator会将数组或字符串中的每个元素依次返回，您可以在循环体中访问这些元素。
遍历其他可迭代对象：除了数组和字符串之外，Iterator还可以遍历其他可迭代对象，例如Map、Set和NodeList。
作为参数传递：Iterator可以作为函数的参数传递。这使您可以将Iterator中的元素传递给函数，从而对这些元素进行操作。

三、Iterator的使用示例

以下是一些Iterator的使用示例：

// 遍历数组
const numbers = [1, 2, 3, 4, 5];
for (const number of numbers) {
  console.log(number); // 1 2 3 4 5
}

// 遍历字符串
const str = 'Hello, world!';
for (const char of str) {
  console.log(char); // H e l l o ,  w o r l d !
}

// 遍历Map
const map = new Map([
  ['name', 'John'],
  ['age', 30]
]);
for (const [key, value] of map) {
  console.log(`${key}: ${value}`); // name: John age: 30
}

// 遍历Set
const set = new Set([1, 2, 3, 4, 5]);
for (const number of set) {
  console.log(number); // 1 2 3 4 5
}

// 遍历NodeList
const elements = document.querySelectorAll('li');
for (const element of elements) {
  console.log(element); // <li>...</li> <li>...</li> ...
}