JavaScript 可迭代对象探究：用法、内部实现

可迭代对象是 JavaScript 中一项强大的特性，它具有统一的遍历数据集合方式。这里将深入探讨一下 JavaScript 的可迭代对象，包括使用方法以及内部实现。

可迭代对象的概念和原理

1. 可迭代协议

• 可迭代对象需遵循可迭代协议，即对象必须具备一个名为 Symbol.iterator 的方法，该方法返回一个迭代器对象。

const iterableObject = {
  data: [1, 2, 3],
  [Symbol.iterator]() {
    let index = ;
    return {
      next: () => {
        if (index < this.data.length) {
          return {
            value: this.data[index++],
            done: false,
          };
        } else {
          return { done: true };
        }
      },
    };
  },
};

2. 可迭代对象与迭代器对象

• 可迭代对象是具有迭代器方法的对象。
• 迭代器对象是一个拥有 next 方法的对象，按特定顺序迭代可迭代对象的值。
• next() 方法返回的结果的格式必须是 {done: Boolean, value: any}，当 done=true 时，表示循环结束，否则 value 是下一个值。

const iterator = iterableObject[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 }

3. 内置的可迭代对象

• JavaScript 内置对象如字符串、数组、Set、Map 等都是可迭代对象，可以直接使用 for...of 循环遍历它们的值。

// 字符串遍历
const str = "Hello";
for (const char of str) {
  console.log(char);
}

// 数组遍历
const arr = [1, 2, 3];
for (const item of arr) {
  console.log(item);
}

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

// Map遍历
const map = new Map([
  ["key1", "value1"],
  ["key2", "value2"],
]);
for (const [key, value] of map) {
  console.log(key, value);
}

可迭代对象的使用方式

1. 扩展运算符和解构赋值

• 扩展运算符和解构赋值可利用可迭代对象的特性，在操作数组或类数组对象时使用。
• 通过扩展运算符转换为数组，或使用解构赋值给变量分配可迭代对象的值。

const iterableArr = [...iterableObject];
console.log(iterableArr); // [1, 2, 3]

const [firstValue, secondValue, thirdValue] = iterableObject;
console.log(firstValue, secondValue, thirdValue); // 1 2 3

2. 自定义可迭代对象

• 我们可以自定义可迭代对象，以便在代码中充分利用可迭代对象的特性。
• 实现对象的 Symbol.iterator 方法返回一个迭代器对象，即可自定义可迭代对象。

const myIterable = {
  data: [1, 2, 3],
  [Symbol.iterator]() {
    let index = ;
    return {
      next: () => {
        if (index < this.data.length) {
          return {
            value: this.data[index++],
            done: false,
          };
        } else {
          return { done: true };
        }
      },
    };
  },
};

for (const item of myIterable) {
  console.log(item);
}

生成器函数创建迭代器

• 生成器函数为一种特殊的函数，可以以简洁而灵活的方式创建迭代器对象。
• 通过使用 yield 关键字在生成器函数中返回值，实现逐步生成值的迭代器。

function* myGenerator() {
  yield 1;
  yield 2;
  yield 3;
}

const generatorIterator = myGenerator();
console.log(generatorIterator.next()); // { value: 1, done: false }
console.log(generatorIterator.next()); // { value: 2, done: false }
console.log(generatorIterator.next()); // { value: 3, done: false }
console.log(generatorIterator.next()); // { value: undefined, done: true }

JavaScript 的可迭代对象使我们能以一种统一的方式遍历数据集合，提高代码的可读性和灵活性。我们可以使用 for...of 循环、扩展运算符和解构赋值来操作可迭代对象。同时，还可以自定义可迭代对象和迭代器，以满足个性化需求。了解可迭代对象的内部实现可以更好地掌握其工作原理和应用场景。