JavaScript：如何用索引数组拦截类数组类的数组访问及长度？

要实现通过索引数组拦截底层数组访问、同时保留类原有方法的需求，最适合的方案是使用ES6 Proxy。Proxy可以精准捕获目标对象的属性访问，针对需要修改行为的方法（n()、valueAt()、values()）进行包装，其他方法直接转发给原对象，完全保留原有逻辑。

完整实现代码 #

class ArrayLike {
  constructor(private array: number[]) {}

  n() {
    return this.array.length;
  }

  valueAt(index: number) {
    return this.array[index];
  }

  values() {
    const result = [] as number[];
    const n = this.n()
    for (let i = 0; i < n; i++) result.push(this.valueAt(i));
    return result;
  }

  otherMethod() {
    return "foo"
  }
}

function proxyfy(arrayLike: ArrayLike, indices: number[]) {
  return new Proxy(arrayLike, {
    get(target, prop) {
      // 拦截需要修改行为的方法
      switch (prop) {
        case 'n':
          // 返回索引数组的长度
          return () => indices.length;
        case 'valueAt':
          // 根据索引数组映射到底层数组的下标
          return (index: number) => {
            const mappedIndex = indices[index];
            // 保持和原方法一致的边界行为：超出范围返回undefined
            return mappedIndex === undefined ? undefined : target.valueAt(mappedIndex);
          };
        case 'values':
          // 基于索引数组生成结果数组
          return () => indices.map(idx => target.valueAt(idx));
        default:
          // 其他属性/方法直接返回原对象的对应值
          return Reflect.get(target, prop);
      }
    }
  });
}

// 测试
const arrlike = new ArrayLike([3, 2, 1])
const arrlikeProxy = proxyfy(arrlike, [0, 0, 1, 1, 2, 2])

console.log(arrlikeProxy.n()); // 输出 6
console.log(arrlikeProxy.values()); // 输出 [3, 3, 2, 2, 1, 1]
console.log(arrlikeProxy.otherMethod()); // 输出 "foo"

关键细节说明 #

1. 精准拦截：通过Proxy的get陷阱，只对n、valueAt、values三个与数组访问相关的方法做修改，其他方法（如otherMethod）完全保留原逻辑。
2. 行为一致性：valueAt方法处理了索引超出范围的情况，返回undefined，和原方法的行为保持一致，避免引入额外的异常。
3. 无侵入式修改：不需要修改原ArrayLike类的任何代码，所有拦截逻辑都在代理层实现，符合开闭原则。
4. 性能友好：Proxy是语言层面的拦截机制，性能开销极小，且只在访问属性时触发拦截逻辑。

内容的提问来源于stack exchange，提问作者Adam B.