JS的迭代器

在JavaScript中，迭代器（Iterator）是一种遍历任何可迭代对象（Iterable）的通用接口。迭代器是ES6规范中引入的一种新的数据类型，用于遍历各种数据结构，包括数组、对象、Map、Set等。在语言层面上，迭代器可以被看做一个有next方法的对象，每次调用next方法都可以返回一个值对象（Value）和一个布尔值（Done），表示是否遍历结束。其中，Value代表当前迭代项的取值，Done代表迭代是否结束。

基础语法

JavaScript中的迭代器和生成器都使用关键字function*来声明。function*定义始终返回一个生成器对象。

function* genFunc(){
  yield 'a';
  yield 'b';
  yield 'c';
}
const genObj = genFunc(); // 获取生成器对象
console.log(genObj.next()); // { value: 'a', done: false }
console.log(genObj.next()); // { value: 'b', done: false }
console.log(genObj.next()); // { value: 'c', done: false }
console.log(genObj.next()); // { value: undefined, done: true }复制

上述代码中，我们定义了一个名为genFunc的生成器函数，并在函数体中使用命令yield定义一个可生成的值。生成器函数返回一个生成器对象，该对象可以使用next()方法获取生成值和指示生成器是否完成。

生成器传参

像普通函数一样，生成器函数也可以接收参数。可以使用next()方法传入参数，并在生成器函数中访问它们。

function* greet(names) {
  for (const name of names) {
    yield `Hello ${name}!`;
  }
}
 
const genObj = greet(['John', 'Jane', 'Jim']);
console.log(genObj.next().value); // Hello John!
console.log(genObj.next().value); // Hello Jane!
console.log(genObj.next().value); // Hello Jim!复制

上述代码中，我们定义了一个名为greet的生成器函数，接收一个数组names作为参数。在每次循环中，我们通过调用yield返回一个新的字符串。返回值可以通过调用next()方法获取，该方法可以传入一个值，该值将作为上一个yield的结果（此例中为字符串）的值。

生成器委托

在一些情况下，您可能希望在两个或多个生成器函数之间共享控制流。生成器函数可以相互转移控制权，这被称为“生成器委托”。

function* greet() {
  yield 'Hello';
  yield* politeGreet();
}
 
function* politeGreet() {
  yield 'Mr.';
  yield 'and Mrs.';
  yield 'Smith';
}
 
const greetings = [];
for (const greeting of greet()) {
  greetings.push(greeting);
}
console.log(greetings.join(' ')); // Hello Mr. and Mrs. Smith复制

在上述代码中，我们定义了两个生成器函数greet()和politeGreet()。greet函数通过调用yield* politeGreet()语句将其控制流委托给politeGreet函数。我们将两个函数的结果推入一个数组中，然后将它们连接成一句话。

这是一些JavaScript中关于迭代器和生成器的基础知识。当学习迭代对象和循环逻辑时，它们可以变得非常有用。

下面是一个简单的迭代器实例：

function createIterator(arr) {
  let index = 0;
  return {
    next() {
      return index < arr.length ?
        { value: arr[index++], done: false } :
        { done: true };
    }
  };
}复制

在上面的代码中，我们定义了一个createIterator函数，用于返回一个迭代器对象。该函数接收一个数组作为参数，创建并返回一个迭代器对象，该对象包含一个next方法，通过迭代访问数组中的元素，每次返回一个包含当前迭代值和是否遍历结束的对象。使用该迭代器对象可以通过如下方式遍历数组：

const arr = [1, 2, 3, 4];
const iterator = createIterator(arr);
 
let result = iterator.next();
while (!result.done) {
  console.log(result.value); // 输出 1 2 3 4
  result = iterator.next();
}复制

在上面的代码中，我们首先创建了一个数组arr，然后使用createIterator函数创建了一个该数组的迭代器iterator。接着，我们定义了一个while循环，使用迭代器的next方法来遍历该数组，输出其所有元素。

迭代器可以对很多数据结构进行遍历操作，例如ES6中新引入的Set和Map等。下面是Set迭代器的使用示例：

const set = new Set([1, 2, 3, 4]);
const iterator = set.values();
 
let result = iterator.next();
while (!result.done) {
  console.log(result.value); // 输出 1 2 3 4
  result = iterator.next();
}复制

在上面的代码中，我们首先创建了一个Set对象set，然后用其values方法创建了一个set的迭代器iterator。接着，我们同样使用while循环和迭代器的next方法来遍历该Set对象。

总的来说，JavaScript中的迭代器是一种非常实用的工具，可以方便地遍历各种数据结构，简化编码，并提高代码的可读性和可维护性。