javascript - 在 javascript 的 Array 子类中使用 .splice 方法？

Question

我正在尝试创建 javascript 数组的子类。我想用数组类型的参数启动子类，并添加一个方法来从数组(子类)中删除一个元素。

我的代码是这样的:

class CustomArray extends Array {
        
  constructor(array) {
    console.log('Initiating array:', array)
    super(...array);
  }

  remove(element) {
    let index = this.indexOf(element);
    if (index > -1) {
      return this.splice(index, 1);
    } 
    return [];
  }

}

var a = ['a', 'b', 'c', 'd', 'e'];

var list = new CustomArray(a)
console.log('list:', list);
console.log('remove:', list.remove('c'));
console.log('list:', list);

问题是当我调用 .splice() 时它从数组中删除元素，但也返回已删除元素的数组，实际上它返回我的子类 CustomArray 的新实例，它应该用数组类型的参数启动，但是 .splice() 用整数类型的参数启动它。

这是我认为在调用 .splice() 时会发生什么的示例:

假设我们有 CustomArray 类的实例 list，参数 ['a','b','c','d',' e'] 然后我们调用方法 list.remove('c')。 (就像在代码片段中一样)。
CustomArray 类的方法 remove 检查 c 的索引是否在数组 ['a','b','c', 'd','e']，即 2 然后调用 方法 this.splice(2,1) 应该删除索引 2 处的 1 个元素在数组 ['a','b','c','d','e'] 中。方法 splice 从数组中删除元素 c，但也返回类似 new CustomArray(1) 的内容，因为一个元素已从数组中删除，因此它尝试创建长度为 1 的数组，但失败了，因为类 CustomArray 是预期的数组。

我想阻止 splice 方法启动 CustomArray 类的新实例，而是返回普通数组(Array 对象的实例)。

Jsbin link.

Answer 1

splice 可能会返回一个标准数组——因此无需调用您的构造函数。它是通过改变 @@species property你的自定义类，它决定了将使用哪个构造函数。但请注意，这不仅会影响 splice，还会影响 所有 其他会创建新实例的方法，包括 map、过滤, 切片, ...

您可以通过覆盖相应的静态 getter 来更改 @@species 属性:

class CustomArray extends Array {
  static get [Symbol.species]() { return Array; } // <-----------

  constructor(array) {
    console.log('Initiating array:', array)
    super(...array);
  }

  remove(element) {
    let index = this.indexOf(element);
    if (index > -1) {
      return this.splice(index, 1); // Now calls Array constructor, not CustomArray
    } 
    return [];
  }

}

var a = ['a', 'b', 'c', 'd', 'e'];

var list = new CustomArray(a)
console.log('list:', list);
console.log('remove:', list.remove('c'));
console.log('list:', list);

// Some examples of effects on other methods
console.log(list.map(x => x) instanceof CustomArray); // false
console.log(list.filter(x => 1) instanceof CustomArray); // false
console.log(list.slice() instanceof CustomArray); // false
console.log(list.concat() instanceof CustomArray); // false
// Other methods, that do not return a new instance, are not affected:
console.log(list.reverse() instanceof CustomArray); // true
console.log(list.sort() instanceof CustomArray); // true