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 且内容为循环引用。

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

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 对象——完美适配数据映射层的测试与模拟需求。