JavaScript中创建派生数组类型的实现问题与优化方案咨询

核心错误原因 #

• 你创建的对象不是真实的Array实例：JS数组有专属内部插槽[[ArrayLength]]和索引相关的特殊内部逻辑，仅通过Object.create(Array.prototype)创建的是普通对象，不具备这些内部特性，无法触发数组的长度自动更新、索引访问的特殊处理，所有数组原生方法运行都会不符合预期。
• 队列方法绑定逻辑完全错误：队列的标准行为是队尾入队、队首出队，你把enq（入队）绑定到了Array.prototype.shift（删除队首元素），deq（出队）绑定到了Array.prototype.pop（删除队尾元素），逻辑完全反了，就算实例是合法数组，功能也完全不对。

思路合理性评估 #

通过继承Array原型扩展队列方法的方向是对的，但实现路径错误，普通对象继承Array.prototype无法获得数组的内部特性，这个实现思路走不通。

推荐两种不同场景的实现方案：

方案1：ES6 Class 继承（首选，兼容性覆盖绝大多数现代场景） #

直接用ES6的extends语法继承内置Array，JS引擎会自动处理数组的内部插槽，生成的实例是100%功能完整的数组，同时扩展队列方法：

class Queue extends Array {
  // 入队：支持批量添加元素，返回队列新长度
  enq(...elements) {
    return this.push(...elements);
  }
  // 出队：移除并返回队首元素，空队列返回undefined
  deq() {
    return this.shift();
  }
  // 可选扩展：查看队首元素不修改队列
  peek() {
    return this[0];
  }
}

使用示例：

const q = new Queue();
q.enq('a', 'b', 'c');
console.log(q.length); // 3 数组长度特性正常
console.log(q.deq()); // 'a'
console.log(q.filter(item => item > 'a')); // ['b', 'c'] 所有数组原生方法均可正常使用

方案2：ES5兼容实现（适配老式运行环境） #

如果需要兼容不支持ES6 Class的旧环境，直接创建原生数组实例，再挂载自定义方法即可：

function makeQueue() {
  const queue = [];
  queue.enq = function(...elements) {
    return this.push(...elements);
  };
  queue.deq = function() {
    return this.shift();
  };
  return queue;
}

这个方案返回的也是原生数组实例，所有数组特性、方法均能正常运行。

内容的提问来源于stack exchange，提问作者A.N.