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);