Iterator和循环 - 技术栈

Iterator (迭代器)

Iterator 是 JavaScript 中一种特殊的对象，提供了一种标准的方式访问集合中的元素,它是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Symbol.iterator 方法），就可以完成遍历操作（即依次处理该数据结构的所有成员）。

可遍历的数据包括 Array String Map set NodeList TypedArray 函数的 arguments 对象等;

Iterator 的作用有三个：

为各种数据结构提供统一的、方便的访问接口。
数据结构的成员可以按照某种顺序排列。
为 for of循环提供底层实现。

Object类型为什么没有iterator接口：

属性顺序不确定；
与 Map 的职责区分；
性能考虑避免为所有对象默认实现迭代器带来的性能开销；

String类型为什么有iterator接口：字符串本质上是字符序列，也就是可以把字符串看作数组。

javascript 复制代码

const str = "hello";
// 可以看作 ['h', 'e', 'l', 'l', 'o']

为了保证和数组行为一致，所以也实现了迭代器接口。

Iterator 的模拟实现：创建一个指针对象 next,不断调用指针返回 value 和 done value: 当前成员的值； done: 表示遍历是否结束；

javascript 复制代码

var it = makeIterator(["a", "b"]);
it.next(); // { value: "a", done: false }
it.next(); // { value: "b", done: false }
it.next(); // { value: undefined, done: true }

function makeIterator(array) {
  var nextIndex = 0;
  return {
    next: function () {
      return nextIndex < array.length
        ? { value: array[nextIndex++], done: false }
        : { value: undefined, done: true };
    },
  };
}

循环

我认为 JS 中的循环本质上分为四种，Map filter reducer 本质上是forEach的变种就不一起介绍了； while 和 for 都是基于索引的计算机语言底层实现所以只介绍for。

for: 基于索引
forEach: 基于索引的函数式
for...in: 属性枚举遍历对象的所有可枚举属性
for...of: 基于迭代器，直接获取值

关于使用循环语句需要注意的：

for 是性能最好的，所以在有性能压力或者速度需求的时候首选for,相对而言可读性不如其他几种循环更直观。

forEach 需要注意不可中断，有些面试题会问如何中断forEach，抛出错误可以强行中断不推荐。

for...in 需要遍历对象的时候用到，某些场景需要配合hasOwnProperty()不推荐性能不好，推荐Object.keys() + forEach以及更优雅的object.entries()

for...of 基于Interator实现的更现代的循环语句，性能接近传统 for 循环推荐。

本质上这些循环的性能并不是约束我们项目性能的桎梏，在日常开发的场景里我们更需要写出可读性更强的代码，所以需要更优雅的组合循环语句，可以多使用find这类更具备现代语义化的方法。

补充

为什么Object没有Iterator接口却可以使用扩展运算符

Object 默认没有实现 Iterator 接口（即没有 Symbol.iterator 方法），但在 ES2018 中，JavaScript 为对象引入了专门的扩展运算符（Spread Operator）行为，这与数组的扩展运算符有本质区别

javascript 复制代码

const obj = { a: 1, b: 2 };
const copy = { ...obj };
// 等价于
const copy = Object.assign({}, obj);