Iterator和循环

Iterator (迭代器)

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

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

Iterator 的作用有三个:

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

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

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

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

javascript 复制代码
const str = "hello";
// 可以看作 ['h', 'e', 'l', 'l', 'o']

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

Iterator 的模拟实现: 创建一个指针对象 next,不断调用指针返回 valuedone 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的变种就不一起介绍了; whilefor 都是基于索引的计算机语言底层实现所以只介绍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);
相关推荐
独立开阀者_FwtCoder几秒前
大制作!在线 CSS 动效 编辑神器!太炫酷了!
前端·javascript·github
一只卡比兽3 分钟前
全栈Node.js开发:集成第三方AI提供商Token的完整指南
javascript
徐小夕6 分钟前
牛!用vue3实现的多维表格编辑器,小白也能轻松构建复杂数据报表!
前端·javascript·vue.js
程十六8 分钟前
工匠指南:从 Vue 3 源码中学习高质量代码的艺术
javascript·vue.js
cccyi710 分钟前
vue前置知识-end
前端·javascript·vue.js
DoraBigHead16 分钟前
for...in 和 for...of 的终极区别:一文彻底解决你的困惑
前端·javascript·面试
FairyDiana20 分钟前
【JavaScript】✨0、1与"true"的恋爱物语:JS类型转换大揭秘
javascript·面试
namehu36 分钟前
从 ESLint 到 Oxlint:一次提速百倍的前端 Lint 工具链升级实战
前端·javascript·eslint
凯心38 分钟前
前端学习 vben 之 axios interceptors
前端·javascript
挽淚42 分钟前
防抖与节流:前端开发中的高频事件优化
javascript