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

小开

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


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


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

小开

最佳答案

使 startsWith接受单词比较，然后使用 返回一个函数作为过滤/回调函数:

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


addressBook.filter(startsWith(wordToCompare));

另一种选择是使用 Function.prototype.bind < em > < sup > [ MDN ] (只能在支持 ECMAScript 5的浏览器中使用，点击一个链接可以找到老式浏览器的垫片)并“修复”第一个参数:

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


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

我并不真正理解它所接受的默认参数是如何传递的

There is nothing special about it. At some point, filter just calls the callback and passes the current element of the array. So it's a function calling another function, in this case the callback you pass as argument.

下面是一个类似函数的例子:

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;
}

小开

Filter 的第二个参数将在回调内部设置这个。

arr.filter(callback[, thisArg])

所以你可以这样做:

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

小开

You can use the arrow function inside a filter, like this:

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

Arrow functions on MDN

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

小开

基于奇怪的乌鸦答案还有 Https://developer.mozilla.org/en-us/docs/web/javascript/reference/global_objects/array/filter

我用了两种不同的方法。 1)使用函数方式。 2) using inline way .

//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) ;

小开

For those looking for an ES6 alternative using arrow functions, you can do the following.

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);
}

小开

如果有人想知道为什么他们的胖箭头函数忽略了 [, thisArg]，例如，为什么

["DOG", "CAT", "DOG"].filter(animal => animal === this, "DOG") 返回 []

it's because this inside those arrow functions are bound when the function is created and are set to the value of this in the broader encompassing scope, so the thisArg argument is ignored. I got around this pretty easily by declaring a new variable in a parent scope:

让最好的宠物 = “狗”; [“ DOG”，“ CAT”，“ DOG”]过滤器(动物 = > 动物 = = 最佳宠物) ; = > [“ DOG”，“ DOG”]

小开

There is an easy way to use the filter function, access all params, and not over complicate it.

除非回调的 这个 Arg被设置为另一个范围过滤器，否则它不会创建自己的范围，而且我们可以访问当前范围内的参数。我们可以将‘ this’设置为定义一个不同的作用域，以便在需要时访问其他值，但默认情况下将其设置为从中调用的作用域。你可以看到这个被用于角度范围在这堆里。

使用 indexOf 会破坏筛选器的作用，并增加更多的开销。过滤器已经遍历了数组，那么为什么我们需要再次遍历它呢？我们可以把它改成一个简单的纯粹的功能。

下面是 React 类方法中的一个用例场景，其中状态有一个名为物品的数组，通过使用 filter 我们可以检查现有状态:

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
});
}