创建可按索引与key访问的数组：继承Array还是用Proxy？

我想实现一种「带键（keyed）」数组，元素既能像普通数组那样通过索引访问，也能通过元素对象的.key属性直接访问。

目前我尝试了继承Array的方式，但遇到几个问题：

• 数据一致性风险：比如修改数组元素的.key后，无法同步更新对象上的键映射
• Array原生方法可能被覆盖，而且需要手动实现所有数组方法（比如slice、splice）才能保证键映射同步
• 测试中调用slice时抛出错误：TypeError: Spread syntax requires ...iterable[Symbol.iterator] to be a function

我的实现代码：

class Commands extends Array {
  constructor(items) {
    super(...items);

    items.forEach(item => {
      this[item.key] = item;
    });
  }

  push(...items) {
    super.push(...items);

    items.forEach(item => {
      this[item.key] = item;
    });
  }
}

const commands = new Commands([
  {
    key: "a",
    name: "A",
  },
  {
    key: "b",
    name: "B",
  },
  {
    key: "c",
    name: "C",
  },
]);

console.log("commands", commands);

console.log("item a", commands.a);
console.log("item c", commands[2]);

commands.a.name = "foo";
// commands.slice(0, 1); // 抛出错误 "TypeError: Spread syntax requires ...iterable[Symbol.iterator] to be a function"

console.log(commands);

我想知道：这种继承Array的方式适合大多数场景吗？还是应该用其他方案，比如用Proxy包装数组在get陷阱里处理键访问，或者有其他更好的实现思路？

补充：我需要一种快捷访问方式，在大型数组里直接用commands.c获取元素，比下面这种遍历查找高效太多：

const index = commands.findIndex(item => item.key === "c");
const element = commands[index];

1. 继承Array的方式：不推荐 #

你遇到的问题都是这种方案的硬伤：

• 数据一致性难维护：除了push，还有pop、shift、unshift、splice、sort、reverse等一堆数组方法，每一个都要重写来同步键映射，稍有遗漏就会出现数据不一致（比如调用splice删除元素后，对象上的键还存在）。
• 原生方法兼容性问题：你遇到的slice报错就是典型例子——Array的原生方法返回的是普通数组，不是你的Commands实例，当后续操作期望带键数组时就会出错；而且有些数组方法的内部实现依赖Symbol.iterator，继承后可能破坏原有逻辑。
• 键名冲突风险：如果元素的.key是数组的原生属性名（比如length、push），会直接覆盖原生方法，导致数组功能完全失效。

2. Proxy包装数组：更灵活，但有局限性 #

用Proxy包装普通数组，在get陷阱里判断访问的是键还是索引，这种方案能避免继承带来的问题：

function createKeyedArray(items) {
  const array = [...items];
  // 维护一个键到元素的映射表，避免每次访问都遍历数组
  const keyMap = new Map(items.map(item => [item.key, item]));

  return new Proxy(array, {
    get(target, prop) {
      // 如果是数字索引或数组原生属性，直接返回
      if (!isNaN(Number(prop)) || prop in Array.prototype) {
        return Reflect.get(target, prop);
      }
      // 否则尝试从映射表获取
      return keyMap.get(prop);
    },
    set(target, prop, value) {
      // 处理索引赋值的情况
      if (!isNaN(Number(prop))) {
        // 如果原有位置有元素，先从映射表删除旧键
        if (target[prop]) {
          keyMap.delete(target[prop].key);
        }
        // 添加新元素的键到映射表
        keyMap.set(value.key, value);
      }
      return Reflect.set(target, prop, value);
    },
    // 处理删除索引时同步删除映射表
    deleteProperty(target, prop) {
      if (!isNaN(Number(prop)) && target[prop]) {
        keyMap.delete(target[prop].key);
      }
      return Reflect.deleteProperty(target, prop);
    }
  });
}

// 使用示例
const commands = createKeyedArray([
  { key: "a", name: "A" },
  { key: "b", name: "B" },
  { key: "c", name: "C" }
]);

console.log(commands.a); // { key: "a", name: "A" }
console.log(commands[2]); // { key: "c", name: "C" }
commands.push({ key: "d", name: "D" });
console.log(commands.d); // { key: "d", name: "D" }

这种方案的优势：

• 不需要重写任何数组原生方法，所有数组操作都能正常工作
• 映射表维护了键和元素的关联，访问速度O(1)，比遍历高效
• 避免了键名冲突，因为只有非索引、非原生属性的访问才会走映射表

局限性：

• Proxy在IE等旧环境不支持，若需兼容旧浏览器则无法使用
• 数组的一些方法（比如slice）返回的是普通数组，不是Proxy实例，新数组没有键访问功能，需额外处理

3. 双存储方案：数组+Map（最稳妥） #

如果追求兼容性和稳定性，最推荐维护一个普通数组和一个Map，封装成自定义类，对外暴露需要的方法：

class KeyedArray {
  constructor(items) {
    this.array = [...items];
    this.keyMap = new Map(items.map(item => [item.key, item]));
  }

  // 按索引访问
  at(index) {
    return this.array[index];
  }

  // 按键访问
  get(key) {
    return this.keyMap.get(key);
  }

  // 添加元素
  push(...items) {
    this.array.push(...items);
    items.forEach(item => this.keyMap.set(item.key, item));
  }

  // 删除元素（按索引）
  splice(start, deleteCount, ...items) {
    const deletedItems = this.array.splice(start, deleteCount, ...items);
    deletedItems.forEach(item => this.keyMap.delete(item.key));
    items.forEach(item => this.keyMap.set(item.key, item));
    return deletedItems;
  }

  // 实现迭代器，支持for...of循环
  [Symbol.iterator]() {
    return this.array[Symbol.iterator]();
  }

  // 其他需要的数组方法，比如pop、shift等，按需实现
  pop() {
    const item = this.array.pop();
    if (item) this.keyMap.delete(item.key);
    return item;
  }
}

// 使用示例
const commands = new KeyedArray([
  { key: "a", name: "A" },
  { key: "b", name: "B" },
  { key: "c", name: "C" }
]);

console.log(commands.get("a")); // { key: "a", name: "A" }
console.log(commands.at(2)); // { key: "c", name: "C" }
commands.push({ key: "d", name: "D" });
console.log(commands.get("d")); // { key: "d", name: "D" }

// 支持for...of循环
for (const cmd of commands) {
  console.log(cmd.name);
}

这种方案的优势：

• 完全兼容所有浏览器，无环境限制
• 数据一致性完全可控，所有修改操作都能同步更新数组和Map
• 无键名冲突问题，键访问通过get方法实现，不会覆盖原生属性
• 可按需实现需要的方法，避免冗余代码

唯一小缺点是不能像commands.c这样直接访问，需要调用commands.get("c")，但牺牲一点语法糖换来了稳定性和兼容性，在大多数生产场景里是更合理的选择。

总结 #

• 若环境支持Proxy，且能接受返回的新数组可能不带键访问功能，Proxy方案最简洁
• 若需兼容旧环境或追求绝对稳定性，双存储（数组+Map）的自定义类是最优解
• 继承Array的方案不推荐，维护成本太高，容易出现各种隐藏问题

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