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

Question

我想比较一个Array中的每个字符串与给定的字符串.我目前的实施是:

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

filter的第二个参数将在回调内部设置它.

arr.filter(callback[, thisArg])

所以你可以这样做:

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

Answer 3

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

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

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

Answer 4

对于那些使用箭头功能寻找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 5

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

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

MDN 上的箭头函数

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