javascript - filter() 有问题，当我扩展 Array 类时

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. 为什么第二种方法不会遇到这种情况？

(扩展 Arrays 或其他核心 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));