实现 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']
相关推荐
流***陌7 分钟前
手办盲盒抽赏小程序前端功能设计:兼顾收藏需求与抽赏乐趣
前端·小程序
岁月宁静35 分钟前
在富文本编辑器中封装实用的 AI 写作助手功能
前端·vue.js·人工智能
金士顿39 分钟前
为什么MainWindow.xaml绑定的datacontext,EtherCATSuiteCtrl.xaml直接用了?
前端
533_44 分钟前
[css] flex布局中的英文字母不换行问题
前端·css
浮游本尊1 小时前
React 18.x 学习计划 - 第四天:React Hooks深入
前端·学习·react.js
future_studio1 小时前
聊聊 Unity(小白专享、C# 小程序 之 日历、小闹钟)
前端·html
Yeats_Liao2 小时前
Go Web 编程快速入门 · 04 - 请求对象 Request:头、体与查询参数
前端·golang·iphone
祈祷苍天赐我java之术2 小时前
Redis 数据类型与使用场景
java·开发语言·前端·redis·分布式·spring·bootstrap
草莓熊Lotso3 小时前
C++ 方向 Web 自动化测试入门指南:从概念到 Selenium 实战
前端·c++·python·selenium
Olrookie3 小时前
若依前后端分离版学习笔记(二十)——实现滑块验证码(vue3)
java·前端·笔记·后端·学习·vue·ruoyi