Question

我尝试通过扩展通用Array类来创建自定义Array类。在这个类中，我想创建一个自定义的查找/过滤器。当我调用自定义find时，效果很好，但是当我调用filter时，迭代器出现问题。有我的代码

class MyClass extends Array {
  constructor(inArray){
    super();
    this.push(...inArray);
  }

  myFind(callback) {
    return this.find(callback);
  }

  myFilter(callback) {
    return this.filter(callback);
  }
}
//Works
console.log(new MyClass(["a","b"]).myFind(item => item === "a"));
//Do not work
console.log(new MyClass(["a","b"]).myFilter(item => item === "a"));

Answer 1

区别在于.filter(...)创建一个新数组。而且该数组非常特殊，因为它与调用它的数组具有相同的类型：

 (new MyClass(["a", "b"])).filter(/*...*/) // MyClass(...)

因此，当您调用filter时，它将通过首先传递数组长度来调用数组构造函数：

 Array.prototype.filter = function(cb) {
  const result = new this.constructor(0); // <---
  for(const el of this) 
    if(cb(el) result.push(el);
  return result;
};

现在该构造函数是：

 constructor(inArray){ // inArray = 0
   super();
   this.push(...inArray); // ...0
}

和传播0是不可能的。要解决此问题，请使构造函数的行为与数组构造函数相同，或者不添加自己的构造函数。

Answer 2

尝试添加：

class MyClass extends Array {
  constructor(inArray){
    super();
    if(inArray !== 0 ) this.push(...inArray); // Condition
  }

  myFind(callback) {
    return this.find(callback);
  }

  myFilter(callback) {
    return this.filter(callback);
  }
}

问题在于覆盖ARRAY类非常危险构造函数，filter的功能是创建一个空的数组，然后用找到的匹配项填充它，因此在创建空数组inArray === 0，这将导致this.push (... inArray)给出一个错误。

如何使从数组扩展的类上的工作过滤器功能

2 个答案: