JavaScript对象索引器定义：如何重写[]运算符实现下标访问

当然可行！在JavaScript里，你完全可以实现让对象通过obj[3]这种下标形式直接访问内部数组的元素——核心是通过Proxy代理或者（在特定场景下）**存取器（get/set）**来拦截下标访问的行为。下面我给你详细拆解两种方案：

方案一：用Proxy实现通用的下标拦截 #

Proxy是ES6引入的特性，专门用来拦截对象的各种操作，包括下标读取（get）和设置（set）。它能处理任意动态下标，是最灵活通用的方案。

假设你的对象内部有一个innerArray数组，我们可以用Proxy包装它，让所有下标访问都直接映射到内部数组：

// 原始对象，包含内部数组
const myObj = {
  innerArray: [10, 20, 30, 40],
  name: "Wrapped Array" // 测试其他属性不受影响
};

// 创建Proxy代理
const proxyObj = new Proxy(myObj, {
  // 拦截下标/属性读取
  get(target, prop) {
    // 判断当前访问的是不是数字下标（包括字符串形式的数字，比如"3"）
    const index = Number(prop);
    if (!isNaN(index)) {
      return target.innerArray[index];
    }
    // 非下标的属性，正常返回原始值
    return target[prop];
  },
  // 拦截下标/属性设置
  set(target, prop, value) {
    const index = Number(prop);
    if (!isNaN(index)) {
      target.innerArray[index] = value;
      return true; // 必须返回true表示设置成功
    }
    // 非下标的属性，正常设置
    target[prop] = value;
    return true;
  }
});

// 测试效果
console.log(proxyObj[3]); // 输出40（直接访问内部数组的第3个元素）
proxyObj[1] = 25; // 修改下标1对应的元素
console.log(proxyObj.innerArray[1]); // 输出25（内部数组确实被修改了）
console.log(proxyObj.name); // 输出"Wrapped Array"（其他属性正常访问）

方案二：用存取器（get/set）处理特定下标 #

如果你只需要支持固定的几个下标，可以直接在对象里定义对应的getter和setter。不过这种方式局限性很大，没法覆盖所有动态下标，适合场景非常有限：

const obj = {
  innerArray: [10, 20, 30],
  // 定义下标0的getter
  get '0'() {
    return this.innerArray[0];
  },
  // 定义下标0的setter
  set '0'(value) {
    this.innerArray[0] = value;
  }
};

console.log(obj[0]); // 输出10
obj[0] = 100;
console.log(obj.innerArray[0]); // 输出100
// 但obj[1]会返回undefined，因为没定义对应的getter

总结 #

• 如果你需要全面支持任意下标读写，优先用Proxy，它能覆盖所有可能的下标（数字、字符串形式的数字），而且不影响对象其他属性的正常使用。
• 如果你只需要处理少数固定下标，可以用存取器，但这种方式扩展性很差，一般不推荐。

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