实现 Symbol.iterator 方法 让一个普通对象变成 可迭代对象(iterable)

fakeArray 是一个类数组我们把它赋能为数组 可以利用数组的方法来实现快捷的操作

比如可以使用 1 for of

特性 for...of for...in
遍历内容 可迭代对象的值 对象的可枚举属性(包括原型链上的)
适用对象 数组、字符串、Map、Set 等可迭代对象 普通对象
顺序保证 按迭代器定义的顺序 不保证顺序(依赖于 JavaScript 引擎)
原型链属性 不遍历 会遍历

2 ...arr 方式赋值

方法1

js 复制代码
const fakeArray = { 0: 'a', 1: 'b', length: 2 };
fakeArray[Symbol.iterator] = function () {
    return Array.prototype.values.call(this);
}
console.log([...fakeArray]); // ['a', 'b']

方法2

js 复制代码
const fakeArray = { 0: 'a', 1: 'b', length: 2 };
fakeArray[Symbol.iterator] = function (){
    let idx = 0;
    return { // 迭代器,每次迭代的时候调用的方法
        next:()=>{
            return {value:this[idx],done:idx++ === this.length}
        }
    }
}
console.log([...fakeArray]); // ['a', 'b']

方法3

js 复制代码
const fakeArray = { 0: 'a', 1: 'b', length: 2 };
fakeArray[Symbol.iterator] = function* () {
    for (let i = 0; i < this.length; i++) {
      yield this[i];
    }
  }

console.log([...fakeArray]); // ['a', 'b']
相关推荐
IT_陈寒6 分钟前
React中useEffect的依赖项把我坑惨了
前端·人工智能·后端
广州华水科技37 分钟前
单北斗GNSS在变形监测中的优势与应用分析
前端
程序员爱钓鱼1 小时前
Rust 变量与不可变性:为什么默认不能修改变量?
前端·后端·rust
随风一样自由2 小时前
【前端工程化】前端工程化解耦实践:从问题分析到架构重构
前端·重构·架构
vortex52 小时前
Web 渗透测试:未授权与越权漏洞全流程挖掘思路
前端
我有满天星辰2 小时前
【前端模块化】前端模块化演进之路:从脚本堆砌到标准统一
前端
我有满天星辰2 小时前
Vue 3 响应式双雄:ref 与 reactive 完全指南
前端·javascript·vue.js
随风一样自由11 小时前
【前端独角兽】刚进入前端领域的前端开发用jQuery还是Vue3?
前端·javascript·vue3·jquery
IMPYLH11 小时前
HTML 的 <data> 元素
前端·html
YHHLAI12 小时前
[特殊字符] 面试中的 Promise —— 从入门到精通
前端·javascript·面试