实现 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']
相关推荐
xkxnq几秒前
第二阶段:Vue 组件化开发(第 19天)
前端·javascript·vue.js
技术净胜44 分钟前
Python 操作 Cookie 完全指南,爬虫与 Web 开发实战
前端·爬虫·python
神奇的程序员1 小时前
Nginx日志分析工具-NginxPulse开源了
前端
我是小疯子661 小时前
前端开发入门:HTML、CSS与JS学习指南
前端
知了清语1 小时前
是的,微信小程序的 show-menu-by-longpress 真的会让你无语
前端
Hao_Harrision1 小时前
50天50个小项目 (React19 + Tailwindcss V4) ✨| RangeSlider(范围滑块组件)
前端·typescript·react·tailwindcss·vite7
CC码码1 小时前
不修改DOM的高亮黑科技,你可能还不知道
前端·javascript·面试
虚诚1 小时前
vue2中树形表格怎么实现
前端·javascript·vue.js·ecmascript·vue2·树形结构
wuhen_n2 小时前
Promise与async/await
前端
LYFlied2 小时前
前端路由核心原理深入剖析
前端