JavaScript 可迭代对象(Iterable)深度解析

JavaScript 可迭代对象(Iterable)深度解析

zh.javascript.info 现代 JavaScript 教程（The Modern JavaScript Tutorial），以最新的 ECMAScript 规范为基准，通过简单但足够详细的内容，为你讲解从基础到高阶的 JavaScript 相关知识。 项目地址: https://gitcode.com/gh_mirrors/zh/zh.javascript.info

什么是可迭代对象？

可迭代对象是 JavaScript 中一个重要的概念，它扩展了数组的特性，使得我们可以用统一的方式处理各种集合数据。简单来说，任何实现了 Symbol.iterator 方法的对象都可以被称为可迭代对象。

为什么需要可迭代对象？

在日常开发中，我们经常需要处理各种集合数据：数组、字符串、Map、Set 等。可迭代协议提供了一种统一的方式来遍历这些不同的数据结构，使得我们可以用相同的语法（如 for...of 循环）处理它们。

可迭代协议详解

要使一个对象可迭代，必须实现 Symbol.iterator 方法。这个方法需要返回一个迭代器对象，该迭代器对象必须包含一个 next() 方法。

next() 方法返回的对象格式如下：

{
  done: Boolean,  // 是否迭代完成
  value: any      // 当前迭代的值
}

自定义可迭代对象示例

让我们创建一个表示数字范围的简单可迭代对象：

const numberRange = {
  from: 1,
  to: 5,
  
  [Symbol.iterator]() {
    let current = this.from;
    const last = this.to;
    
    return {
      next() {
        if (current <= last) {
          return { done: false, value: current++ };
        } else {
          return { done: true };
        }
      }
    };
  }
};

for (const num of numberRange) {
  console.log(num); // 依次输出 1, 2, 3, 4, 5
}

内置可迭代对象

JavaScript 中有许多内置的可迭代对象：

1. 数组：最常用的可迭代对象
2. 字符串：可以逐个字符迭代
3. Map 和 Set：ES6 新增的数据结构
4. NodeList：DOM 查询返回的结果
5. arguments：函数参数对象

可迭代对象 vs 类数组对象

这两个概念经常被混淆，但它们有本质区别：

| 特性 | 可迭代对象 | 类数组对象 | |------|-----------|-----------| | 定义 | 实现了 Symbol.iterator | 有 length 和索引属性 | | 是否可用 for...of | 是 | 不一定 | | 示例 | 数组、字符串、Map、Set | arguments、DOM 集合 |

实用技巧：Array.from 方法

Array.from() 是一个非常有用的方法，它可以将可迭代对象或类数组对象转换为真正的数组：

// 将类数组对象转换为数组
const arrayLike = { 0: 'a', 1: 'b', length: 2 };
const realArray = Array.from(arrayLike);
console.log(realArray); // ['a', 'b']

// 处理字符串中的代理对（如表情符号）
const str = '𝒳😂';
const chars = Array.from(str);
console.log(chars); // ['𝒳', '😂']
console.log(chars.length); // 2

Array.from 还支持映射函数：

const range = Array.from({ length: 5 }, (_, i) => i + 1);
console.log(range); // [1, 2, 3, 4, 5]

高级应用：无限迭代器

迭代器不一定要有终点，我们可以创建无限迭代器：

const infiniteNumbers = {
  [Symbol.iterator]() {
    let n = 0;
    return {
      next() {
        return { done: false, value: n++ };
      }
    };
  }
};

// 注意：需要手动中断，否则会无限循环
for (const num of infiniteNumbers) {
  if (num > 10) break;
  console.log(num); // 0 到 10
}

实际应用场景

1. 统一处理不同集合类型：用相同的方式处理数组、Set、Map 等
2. 惰性求值：只在需要时计算下一个值，节省内存
3. 自定义数据结构：为自定义集合类型提供标准迭代接口
4. 异步迭代：ES2018 引入的异步迭代器的基础

常见问题解答

Q：为什么我的自定义对象不能用 for...of 遍历？ A：确保你的对象实现了 Symbol.iterator 方法，并且该方法返回的对象有正确的 next() 方法。

Q：如何判断一个对象是否可迭代？ A：可以检查对象是否有 Symbol.iterator 方法：

function isIterable(obj) {
  return typeof obj?.[Symbol.iterator] === 'function';
}

Q：迭代器和可迭代对象有什么区别？ A：可迭代对象是实现了 Symbol.iterator 方法的对象，而迭代器是这个方法返回的对象，负责实际的迭代过程。

总结

可迭代对象是 JavaScript 中强大的抽象概念，它提供了一种统一的方式来处理各种集合数据。理解并掌握可迭代协议，可以让我们写出更通用、更优雅的代码。无论是处理内置集合类型，还是创建自定义数据结构，可迭代接口都能提供极大的便利。

zh.javascript.info 现代 JavaScript 教程（The Modern JavaScript Tutorial），以最新的 ECMAScript 规范为基准，通过简单但足够详细的内容，为你讲解从基础到高阶的 JavaScript 相关知识。 项目地址: https://gitcode.com/gh_mirrors/zh/zh.javascript.info