如何将额外的参数传递给 Javascript .filter() 方法中的回调函数？

Question

我想将数组中的每个字符串与给定的字符串进行比较。我当前的实现是：

function startsWith(element) {
    return element.indexOf(wordToCompare) === 0;
}
addressBook.filter(startsWith);

这个简单的函数可以工作，但只是因为现在 wordToCompare 被设置为全局变量，但我当然想避免这种情况并将其作为参数传递。我的问题是，我不确定如何定义 startsWith() 因此它接受一个额外的参数，因为我不太明白它所采用的默认参数是如何传递的。我已经尝试了所有我能想到的不同方法，但没有一个有效。

如果您还可以解释传递给“内置”回调函数的参数（抱歉，我不知道更好的术语）如何工作，那就太好了

Answer 1

让 startsWith 接受要比较的单词并返回一个函数，然后将其用作过滤器/回调函数：

function startsWith(wordToCompare) {
    return function(element) {
        return element.indexOf(wordToCompare) === 0;
    }
}

addressBook.filter(startsWith(wordToCompare));

另一种选择是使用 Function.prototype.bind ^[MDN]（仅在支持 ECMAScript 5 的浏览器中可用，请点击旧版浏览器的垫片链接）并“修复”第一个参数：

function startsWith(wordToCompare, element) {
    return element.indexOf(wordToCompare) === 0;
}

addressBook.filter(startsWith.bind(this, wordToCompare));

---

我不太明白它的默认参数是如何传递的

它没有什么特别的。在某些时候，filter 只是调用回调并传递数组的当前元素。所以它是一个调用另一个函数的函数，在本例中是您作为参数传递的回调。

下面是一个类似函数的示例：

function filter(array, callback) {
    var result = [];
    for(var i = 0, l = array.length; i < l; i++) {
        if(callback(array[i])) {  // here callback is called with the current element
            result.push(array[i]);
        }
    }
    return result;
}

Answer 2

过滤器的第二个参数将在回调内部设置this。

arr.filter(callback[, thisArg])

所以你可以这样做：

function startsWith(element) {
    return element.indexOf(this) === 0;
}
addressBook.filter(startsWith, wordToCompare);

Answer 3

对于那些寻找使用箭头函数的 ES6 替代方案的人，您可以执行以下操作。

let startsWith = wordToCompare => (element, index, array) => {
  return element.indexOf(wordToCompare) === 0;
}

// where word would be your argument
let result = addressBook.filter(startsWith("word"));

使用包括更新版本：

const startsWith = wordToCompare => (element, index, array) => {
  return element.includes(wordToCompare);
}

Answer 4

function startsWith(element, wordToCompare) {
    return element.indexOf(wordToCompare) === 0;
}

// ...
var word = "SOMETHING";

addressBook.filter(function(element){
    return startsWith(element, word);
});

Answer 5

您可以在过滤器内使用箭头函数，如下所示：

result = addressBook.filter(element => element.indexOf(wordToCompare) === 0);

箭头函数在 MDN 上

与函数表达式相比，箭头函数表达式的语法更短，并且在词法上绑定 this 值（不绑定自己的 this、arguments、super 或 new.target）。箭头函数始终是匿名的。这些函数表达式最适合非方法函数，并且不能用作构造函数。

Answer 6

对于任何想知道为什么他们的胖箭头函数忽略 [, thisArg] 的人，例如为什么

["DOG", "CAT", "DOG"].filter(animal =>animal == =这个，“狗”）
返回 []

这是因为这些箭头函数中的 this 在创建函数时被绑定，并在更广泛的范围内设置为 this 的值范围，因此 thisArg 参数被忽略。我通过在父作用域中声明一个新变量很容易地解决了这个问题：

let bestPet = "DOG";
["狗", "猫", "狗"].filter(动物 => 动物 === bestPet);
=> ["DOG", "DOG"]

以下是更多阅读内容的链接：
https://developer.mozilla.org/ en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#No_separate_this

Answer 7

基于 oddRaven 答案
和
https://developer.mozilla.org/en -US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

我用两种不同的方式做到了。
1）使用函数方式。
2）采用内联方式。

//Here  is sample codes : 

var templateList   = [
{ name: "name1", index: 1, dimension: 1 }  ,
{ name: "name2", index: 2, dimension: 1 }  ,
{ name: "name3", index: 3, dimension: 2 }  ];


//Method 1) using function : 

function getDimension1(obj) {
                if (obj.dimension === 1) // This is hardcoded . 
                    return true;
                else return false;
            } 

var tl = templateList.filter(getDimension1); // it will return 2 results. 1st and 2nd objects. 
console.log(tl) ;

//Method 2) using inline way 
var tl3 = templateList.filter(element => element.index === 1 || element.dimension === 2  ); 
// it will return 1st and 3rd objects 
console.log(tl3) ;

Answer 8

有一种简单的方法可以使用过滤器功能，访问所有参数，并且不会使其过于复杂。

除非回调的 thisArg 设置为另一个作用域，否则过滤器不会创建自己的作用域，并且我们可以访问当前作用域内的参数。我们可以设置“this”来定义不同的范围，以便在需要时访问其他值，但默认情况下它被设置为调用它的范围。您可以看到这个用于 Angular 范围 在此堆栈中。

使用indexOf违背了过滤器的目的，并增加了更多的开销。 Filter 已经遍历了数组，那么为什么我们需要再次遍历它呢？我们可以把它变成一个简单的 纯函数。

这是 React 类方法中的一个用例场景，其中状态有一个名为 items 的数组，通过使用过滤器，我们可以检查现有状态：

checkList = (item) => {  // we can access this param and globals within filter
  var result = this.state.filter(value => value === item); // returns array of matching items

  result.length ? return `${item} exists` : this.setState({
    items: items.push(item) // bad practice, but to keep it light
  });
}