当我扩展 Array 类时，filter() 是错误的

Question

我认为在 javascript 中扩展数组会很有用，可以通过一些自定义方法和业务逻辑来增强它们。 到目前为止，它运行良好，直到我尝试过滤我的实例。

似乎数组filter 方法用一个参数调用我的构造函数（0，如果没有找到）并返回一个新实例。不是我所期望的。

class MyArray extends Array {
  constructor(x, y, z) {
    super(x, y, z);
    // do custom stuff
  }
}

let numbers = new MyArray(1, 2, 3);
console.log(numbers.filter((v) => v === 0));

不过，如果我将一些参数传递并传播到一个变量中，一切都会正常进行。

从技术上讲，我认为两者之间没有区别，我不明白！

class MyArray extends Array {
  constructor(x, ...args) {
    super(x, ...args);;
    // do custom stuff
  }
}

let numbers = new MyArray(1, 2, 3);
console.log(numbers.filter((v) => v === 0));

1. 为什么第一种方法会遇到这个问题？
2. 为什么第二种方法没有遇到这种情况？

（扩展数组或其他核心 js 类是不好的做法吗？）

Answer 1

Array 构造函数的行为取决于它接收的参数的数量和类型。

如果它接收到包含整数的单个参数，则此参数是数组的初始大小。它返回一个该大小的数组，其中元素未初始化。

在其他情况下，参数是数组的初始元素。

所以当您调用super(x, y, z) 时，您使用的是第二种格式，它会创建一个最初包含值x, y, z 的数组。

filter() 使用第一种格式调用您的构造函数，因此x 是它请求的数组的大小（如您所说的0）。但是你的构造函数有额外的参数y 和z，所以它们被设置为undefined。所以你调用super(0, undefined, undefined)，它正在创建一个数组[0, undefined, undefined]。

您的第二个构造函数几乎是正确的，但真正的 Array 构造函数可以不带参数调用，返回一个空数组。如果以这种方式调用您的构造函数，它将调用super(undefined)，创建一个包含undefined 的单个元素的数组。定义构造函数的正确方法是使用单个展开参数。这不会对filter() 产生影响，但可能会影响其他代码。

class MyArray extends Array {
  constructor(...args) {
    super(...args);;
    // do custom stuff
  }
}

let numbers = new MyArray(1, 2, 3);
console.log(numbers.filter((v) => v === 0));