0

0

ES6 Proxy 实现可迭代数组的正确方式

心靈之曲

心靈之曲

发布时间:2026-01-30 13:30:02

|

444人浏览过

|

来源于php中文网

原创

ES6 Proxy 实现可迭代数组的正确方式

本文讲解如何使用 es6 proxy 创建一个始终返回自身(且可被 for...of 正确遍历)的代理数组,关键在于拦截 `symbol.iterator` 等内置符号属性,而非仅处理字符串键。

在 JavaScript 中,for...of 循环并非简单访问 length 或调用 push,而是依赖对象是否具备有效的 Symbol.iterator 方法——即该对象是否实现了可迭代协议(iterable protocol)。当你用 Proxy 包裹空数组并返回自身(如 return p)时,若未显式透传 Symbol.iterator,for...of 就会因找不到合法迭代器而抛出 TypeError: ... is not iterable。

✅ 正确做法:透传 Symbol 属性与关键数组方法

核心原则是:所有 symbol 类型的属性(尤其是 Symbol.iterator)必须原样返回目标对象(obj)上的对应值;同时,首次访问时自动将代理自身推入数组,确保 length === 1 且内容为循环引用。

以下是完整、健壮的实现:

行业贸易网站管理系统 2007 Beta 1
行业贸易网站管理系统 2007 Beta 1

1.修正BUG站用资源问题,优化程序2.增加关键词搜索3.修改报价4.修正BUG 水印问题5.修改上传方式6.彻底整合论坛,实现一站通7.彻底解决群发垃圾信息问题。注册会员等发垃圾邮件7.彻底解决数据库安全9.修改交易方式.增加网站担保,和直接交易两中10.全站可选生成html.和单独新闻生成html(需要装组建)11. 网站有10中颜色选择适合不同的行业不同的颜色12.修改竞价格排名方式13.修

下载
const p = new Proxy([], {
  get(obj, prop) {
    // 首次访问任意属性时,向原数组中推入自身(确保 length === 1)
    if (obj.length === 0) {
      obj.push(p);
    }
    // 透传所有 Symbol 属性(含 Symbol.iterator、Symbol.toStringTag 等)
    // 以及关键数组方法(避免 for...of / Array.isArray / JSON.stringify 失败)
    if (typeof prop === 'symbol' || 
        ['length', 'push', 'pop', 'forEach', 'map', 'filter', 'reduce', 'toString', 'join'].includes(prop)) {
      return obj[prop];
    }
    // 其他任意字符串属性均返回代理自身,形成链式响应
    return p;
  }
});

? 验证效果

// ✅ 可被 for...of 正确遍历
for (let v of p) {
  console.log(v === p); // true(输出一次)
}

// ✅ 支持嵌套访问(p.any.any.any... 均为同一代理)
console.log(p.any.any === p); // true

// ✅ 兼容数组常用方法
console.log(p.map(x => x === p)); // [true]
console.log(p.length); // 1
console.log(Array.isArray(p)); // true(因 Proxy 继承自 Array 原型且透传 isArray 所需内部逻辑)

// ✅ JSON 序列化安全(避免循环引用报错)
console.log(JSON.stringify(p, null, 2));
// 输出:[ "[Circular]" ](取决于环境,但不会崩溃)

⚠️ 注意事项

  • 不要写 p.push(p):这会触发 get 拦截器再次执行,导致无限递归。应始终操作原始目标对象 obj.push(p)。
  • 仅透传必要方法:过度透传(如 __proto__、constructor)可能破坏代理语义;聚焦于迭代、长度、基础操作即可。
  • Symbol.iterator 是关键:它是 for...of、扩展运算符([...p])、解构赋值等语法的底层依赖,缺失即失效。
  • 调试提示:可通过 console.dir(p) 查看代理结构,并用 Object.getOwnPropertySymbols(p) 检查符号属性是否可用。

通过精准控制 get 拦截器对 symbol 和关键字符串属性的响应策略,你就能构建出既符合数组语义、又具备“自引用+可迭代”特性的 Proxy 对象——完美适配数据映射层的测试与模拟需求。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
es6新特性
es6新特性

es6新特性有:1、块级作用域变量;2、箭头函数;3、模板字符串;4、解构赋值;5、默认参数;6、 扩展运算符;7、 类和继承;8、Promise。本专题为大家提供es6新特性的相关的文章、下载、课程内容,供大家免费下载体验。

106

2023.07.17

es6新特性有哪些
es6新特性有哪些

es6的新特性有:1、块级作用域;2、箭头函数;3、解构赋值;4、默认参数;5、扩展运算符;6、模板字符串;7、类和模块;8、迭代器和生成器;9、Promise对象;10、模块化导入和导出等等。本专题为大家提供es6新特性的相关的文章、下载、课程内容,供大家免费下载体验。

195

2023.08.04

JavaScript ES6新特性
JavaScript ES6新特性

ES6是JavaScript的根本性升级,引入let/const实现块级作用域、箭头函数解决this绑定问题、解构赋值与模板字符串简化数据处理、对象简写与模块化提升代码可读性与组织性。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

222

2025.12.24

java基础知识汇总
java基础知识汇总

java基础知识有Java的历史和特点、Java的开发环境、Java的基本数据类型、变量和常量、运算符和表达式、控制语句、数组和字符串等等知识点。想要知道更多关于java基础知识的朋友,请阅读本专题下面的的有关文章,欢迎大家来php中文网学习。

1502

2023.10.24

Go语言中的运算符有哪些
Go语言中的运算符有哪些

Go语言中的运算符有:1、加法运算符;2、减法运算符;3、乘法运算符;4、除法运算符;5、取余运算符;6、比较运算符;7、位运算符;8、按位与运算符;9、按位或运算符;10、按位异或运算符等等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

232

2024.02.23

php三元运算符用法
php三元运算符用法

本专题整合了php三元运算符相关教程,阅读专题下面的文章了解更多详细内容。

87

2025.10.17

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

320

2023.08.03

js截取字符串的方法
js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容,供大家免费下载体验。

212

2023.09.04

C++ 设计模式与软件架构
C++ 设计模式与软件架构

本专题深入讲解 C++ 中的常见设计模式与架构优化,包括单例模式、工厂模式、观察者模式、策略模式、命令模式等,结合实际案例展示如何在 C++ 项目中应用这些模式提升代码可维护性与扩展性。通过案例分析,帮助开发者掌握 如何运用设计模式构建高质量的软件架构,提升系统的灵活性与可扩展性。

14

2026.01.30

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 4.3万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 2.5万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号