实现 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']
相关推荐
掘金安东尼6 分钟前
Chrome 17 岁了——我们的浏览器简史
前端·javascript·github
袁煦丞6 分钟前
群晖NAS FTP远程文件仓库全球访问:cpolar内网穿透实验室第524个成功挑战
前端·程序员·远程工作
前端小巷子10 分钟前
JS 打造动态表格
前端·javascript·面试
excel22 分钟前
从卷积到全连接:用示例理解 CNN 的分层
前端
UNbuff_024 分钟前
HTML 各种事件的使用说明书
前端·html
Mr. Cao code27 分钟前
探索OpenResty:高性能Web开发利器
linux·运维·服务器·前端·nginx·ubuntu·openresty
li35748 小时前
将已有 Vue 项目通过 Electron 打包为桌面客户端的完整步骤
前端·vue.js·electron
Icoolkj9 小时前
VuePress 与 VitePress 深度对比:特性、差异与选型指南
前端·javascript·vue.js
excel9 小时前
CNN 分层详解:卷积、池化到全连接的作用与原理
前端
excel9 小时前
CNN 多层设计详解:从边缘到高级特征的逐层学习
前端