实现 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']
相关推荐
Danny_FD1 小时前
Vue2 + Node.js 快速实现带心跳检测与自动重连的 WebSocket 案例
前端
uhakadotcom1 小时前
将next.js的分享到twitter.com之中时,如何更新分享卡片上的图片?
前端·javascript·面试
韦小勇1 小时前
el-table 父子数据层级嵌套表格
前端
奔赴_向往1 小时前
为什么 PWA 至今没能「掘进」主流?
前端
小小愿望1 小时前
微信小程序开发实战:图片转 Base64 全解析
前端·微信小程序
掘金安东尼1 小时前
2分钟创建一个“不依赖任何外部库”的粒子动画背景
前端·面试·canvas
电商API大数据接口开发Cris1 小时前
基于 Flink 的淘宝实时数据管道设计:商品详情流式处理与异构存储
前端·数据挖掘·api
小小愿望1 小时前
解锁前端新技能:让JavaScript与CSS变量共舞
前端·javascript·css
程序员鱼皮1 小时前
爆肝2月,我的 AI 代码生成平台上线了!
java·前端·编程·软件开发·项目
天生我材必有用_吴用1 小时前
一文搞懂 useDark:Vue 项目中实现深色模式的正确姿势
前端·vue.js