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);
相关推荐
萌萌哒草头将军几秒前
🔥🔥🔥 NuxtLabs 宣布加入了 Vercel !
前端·javascript·vue.js
LuciferHuang7 小时前
震惊!三万star开源项目竟有致命Bug?
前端·javascript·debug
GISer_Jing7 小时前
前端实习总结——案例与大纲
前端·javascript
姑苏洛言8 小时前
编写产品需求文档:黄历日历小程序
前端·javascript·后端
知识分享小能手9 小时前
Vue3 学习教程,从入门到精通,使用 VSCode 开发 Vue3 的详细指南(3)
前端·javascript·vue.js·学习·前端框架·vue·vue3
姑苏洛言9 小时前
搭建一款结合传统黄历功能的日历小程序
前端·javascript·后端
hackchen9 小时前
Go与JS无缝协作:Goja引擎实战之错误处理最佳实践
开发语言·javascript·golang
你的人类朋友10 小时前
🤔什么时候用BFF架构?
前端·javascript·后端
知识分享小能手11 小时前
Bootstrap 5学习教程,从入门到精通,Bootstrap 5 表单验证语法知识点及案例代码(34)
前端·javascript·学习·typescript·bootstrap·html·css3
我命由我1234512 小时前
前端开发问题:SyntaxError: “undefined“ is not valid JSON
开发语言·前端·javascript·vue.js·json·ecmascript·js