如何让自定义Array子类返回原生Array实例以避免嵌套数组？

嘿，我懂你遇到的麻烦了——用new MyArray([1,2,3,4])赋值时，得到的是嵌套数组[[1,2,3,4]]，而不是你想要的单个数组[1,2,3,4]。这其实是Array构造函数的默认特性在作祟，咱们一步步来搞定它：

为什么会出现嵌套？ #

Array的构造函数有两种行为逻辑：

• 如果你传入多个独立参数（比如new Array(1,2,3)），它会把这些参数直接作为数组元素；
• 但如果你传入单个数组参数（比如new Array([1,2,3])），它会把这个数组当作新数组的第一个元素，自然就形成了嵌套结构。
  因为你的MyArray继承自Array，所以默认继承了这个行为。

两种实用解决方案 #

方案1：创建实例时手动展开数组元素 #

最简单的办法就是在调用MyArray构造函数时，用扩展运算符把传入的数组展开：

class MyArray extends Array {
  static get [Symbol.species]() {
    return Array; // 重写species，确保方法返回Array实例
  }
}

class Player {
  constructor() {
    // 用...展开数组元素，避免嵌套
    this.CustomArray = new MyArray(...[1,2,3,4]);
  }
}

const player = new Player();
console.log(player.CustomArray); // 输出: [1,2,3,4]
console.log(player.CustomArray instanceof Array); // true
console.log(player.CustomArray instanceof MyArray); // true（实例本身还是MyArray，只是方法返回Array）

方案2：修改MyArray构造函数自动处理数组参数 #

如果你不想每次都手动展开，可以给MyArray加个构造函数逻辑，让它自动识别并展开单个数组参数：

class MyArray extends Array {
  constructor(...args) {
    // 判断是否传入单个数组参数
    if (args.length === 1 && Array.isArray(args[0])) {
      super(...args[0]); // 展开数组元素传入父类构造函数
    } else {
      super(...args); // 其他情况正常处理
    }
  }

  static get [Symbol.species]() {
    return Array;
  }
}

class Player {
  constructor() {
    this.CustomArray = new MyArray([1,2,3,4]); // 直接传数组也不会嵌套了
  }
}

const player = new Player();
console.log(player.CustomArray); // 输出: [1,2,3,4]
// 验证species的作用：调用map方法返回的是Array实例
console.log(player.CustomArray.map(x => x*2) instanceof Array); // true
console.log(player.CustomArray.map(x => x*2) instanceof MyArray); // false

这样不管你是直接传数组还是展开传，都能得到单个数组实例，同时Symbol.species的设置也能保证调用MyArray的方法（比如map、filter）时，返回的是Array类的实例，完全符合你的需求。

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