迭代协议实现差异

Tue, 04 Mar 2025 06:58:24 +0000

考察点分析

本题主要考察以下三个核心维度：

迭代协议理解：区分可迭代协议（Iterable Protocol）与迭代器协议（Iterator Protocol）的差异
循环机制原理：掌握for…in（枚举属性）与for…of（迭代值）的底层实现差异
原型扩展能力：通过实现Symbol.iterator使普通对象支持迭代协议

具体技术评估点：

属性枚举与值迭代的底层机制差异
Symbol.iterator接口的实现规范
迭代器对象的next()方法控制逻辑
原型链对属性遍历的影响
生成器函数在迭代协议中的应用

技术解析

关键知识点

Symbol.iterator > 迭代器协议 > 属性枚举顺序 > 生成器函数

原理剖析

for…in：

基于对象属性描述符的[[Enumerate]]机制
遍历对象自身及原型链上的可枚举属性（enumerable:true）
输出顺序：当前对象属性按数字升序 → 字符串插入序 → Symbol插入序

for…of：

调用对象的Symbol.iterator方法获取迭代器
通过迭代器对象的next()方法按需获取值
遵循可迭代协议（返回包含done/value的对象）

常见误区

混淆属性遍历与值迭代的顺序（如数组索引的特殊处理）
忽视通过Object.defineProperty设置的enumerable属性对for…in的影响
未正确处理迭代器终止状态（无限循环）

问题解答

实现差异：

for…in遍历对象的可枚举字符串键，包含原型链，输出顺序由ECMA规范定义
for…of调用@@iterator方法，按迭代器协议逐个取值，不遍历原型链

实现方案：

 const plainObject = {
 a: 1,
 b: 2,
 // 实现迭代协议
 [Symbol.iterator]: function() {
 const keys = Object.keys(this) // 仅获取自身可枚举属性
 let index = 0
 return {
 next: () => ({
 value: this[keys[index++]], // 返回属性值
 done: index > keys.length
 })
 }
 }
}

// 使用示例
for(const val of plainObject) {
 console.log(val) // 输出1, 2
}

解决方案

编码示例优化

 function makeIterable(obj) {
 obj[Symbol.iterator] = function* () {
 for(const key of Object.keys(this)) { 
 yield this[key] // 使用生成器简化迭代逻辑
 }
 }
 return obj
}

const optimizedObj = makeIterable({x: 10, y: 20})
console.log([...optimizedObj]) // [10, 20]

优化说明：

迭代器 on ZiYang FrontEnd Interview

迭代协议实现差异

考察点分析 link

技术解析 link

关键知识点 link

原理剖析 link

常见误区 link

问题解答 link

解决方案 link

编码示例优化 link

考察点分析

技术解析

关键知识点

原理剖析

常见误区

问题解答

解决方案

编码示例优化