使用Proxy代理数组后出现map不是函数错误，如何保留所有数组方法？

错误信息 #

Uncaught TypeError: array.map is not a function

问题代码 #

let array = [1, 2, 3];

array = new Proxy(array, {
  get(target, prop) {
    return Reflect.get(target, prop > 1 ? 1 : 2);
  }
});

array.map() // 触发上述错误

问题原因 #

当前的get陷阱对所有属性访问做了统一处理，包括数组的方法名（比如map）。当访问array.map时，prop是字符串"map"，与数字1比较时会被转换为NaN，NaN > 1结果为false，因此会返回数组索引2对应的元素3，而非数组原型上的map方法，调用自然报错。

解决方案 #

在get陷阱中先区分数字索引属性和非索引属性（包括数组方法），仅对数字索引执行自定义逻辑，其余属性直接返回原对象对应值：

let array = [1, 2, 3];

array = new Proxy(array, {
  get(target, prop) {
    // 非数字索引的属性（方法、length等）直接返回原属性
    const propNum = Number(prop);
    if (isNaN(propNum)) {
      return Reflect.get(target, prop);
    }
    // 处理数字索引的自定义逻辑
    return Reflect.get(target, propNum > 1 ? 1 : 2);
  }
});

// 测试数组方法
console.log(array.map(item => item * 2)); // 输出: [2, 2, 2]
console.log(array.length); // 输出: 3
array.push(4);
console.log(array); // 输出: [1, 2, 3, 4]

补充说明 #

这种方式既保留了对数组索引的自定义拦截逻辑，又确保数组的原生方法、length等属性可以正常访问和调用，完全兼容数组的所有原生行为。

内容的提问来源于stack exchange，提问作者Andrew Ourst