JavaScript filter(）方法混淆

JavaScript filter() method confusion

本文关键字：方法 filter JavaScript      更新时间：2023-09-26

作为"正确学习JavaScript"的一部分，我正在学习JavaScript:The Definition Guide，在第7章关于数组方法的部分中，我很难推理filter()方法。

以下是提供的示例：

filter()方法返回一个数组，该数组包含在其上调用它的数组的元素。传递给的函数它应该是谓词：一个返回true或false的函数。这个谓词的调用与CCD_ 3和CCD_。如果返回value为true，或者一个转换为true的值，则元素传递给谓词的是子集的成员，并添加到将成为返回值的数组。

示例：

a = [5, 4, 3, 2, 1];
smallvalues = a.filter(function(x) { return x < 3 });   // [2, 1]
everyother = a.filter(function(x,i) { return i%2==0 }); // [5, 3, 1]

我感到困惑的是i在everyother行中究竟是如何应用于x的。以下是我认为正在发生的事情：

  1. i（a[]的索引）正在通过函数x传递，该函数将谓词应用于a[]的每个元素并返回[4, 2]。

  2. 然后函数显示"从a[]中过滤[4, 2]"。。。我真的不知道该怎么做。

当我在控制台里乱搞的时候，我试过：

everyother = a.filter(function(i) { return i%2==0 });  // returns [4, 2]

这是我所期望的，但我不明白当我将上面的代码更改为时，JS如何处理参数会在内部发生什么

everyother = a.filter(function(x,i) { return i%2==0 }); // returns [5, 3, 1]

（我知道数组方法是这样应用的：function(element, index, array)）

对于这个特定的例子，我很明显，我可以通过另一种方式获得预期的结果：

everyother = a.filter(function(x) { return x%2!=0 }); // returns [5, 3, 1]

但我怀疑，这种思路恰恰没有抓住这个例子试图传达的要点。。。我只是错过了。

您的示例非常简单明了：

a = [5, 4, 3, 2, 1];
smallvalues = a.filter(function(x) { return x < 3 });   // [2, 1]
everyother = a.filter(function(x,i) { return i%2==0 }); // [5, 3, 1]

第一个是：»返回每个元素（x），它小于3«。结果并不惊人。

第二个是：«返回每个元素，其索引（i）是偶数（包括0）«

x只是被忽略。

你也可以写[5, 4, 3, 2, 1].filter(function(_,x){return x%2===0})

参见Array.prototype.filter()的MDN。

使用两个参数的函数调用filter时，第一个参数绑定到数组元素值，第二个参数（可选参数）绑定到元素索引。

您的困惑源于输入数组[5,4,3,2,1]有些特定——具有偶数索引（5，3，1）的元素是奇数，而具有奇数索引（4，2）的元素则是偶数。

这使得这个过滤谓词...%2总是选择相同"种类"的元素，这取决于你传递的谓词参数（值或索引），你会得到奇数或偶数元素。

我的建议是选择一个不同的数组来测试你的过滤方法。数组应该混合奇怪的索引和值，类似于[1,3,4,5,7,8]。当谓词考虑一个值或一个索引时，您将立即观察到会发生什么。

还要记住，在创建筛选谓词时，形式参数的名称是任意的，重要的是它们的位置。无论如何调用，第一个参数都代表值，第二个参数代表索引。如果您意外地与参数名称发生冲突，并且您调用了第一个参数i，然后调用了第二个参数i，那么在这两种情况下，它都会绑定到其他参数。

a = [5, 4, 3, 2, 1];
everyother = a.filter(function(x,i) { return i%2==0 }); // [5, 3, 1]

x是数组中的每个元素。（第一次迭代x=5，第二次迭代x=4，依此类推。）
i是索引-（第一次迭代i=0，第二次迭代i=1，依此类推。）

因此，在问题中（对于第一次迭代，i%2变为0%2，等于0，条件变为true。第一个元素返回到数组。因此返回5，）。下一个，1%2=0，因此删除了4。2%2==0，因此停留3次。（依此类推..）

在这个语法中：-x为每个迭代都有一个值，但它不会在条件中用完。

提示：filter（）总是需要一个布尔值。返回的值（true或false）决定值（或元素）是否留在数组中。

它很简单。。。在everyother中，i是每个元素的索引，i的唯一可能值是0,1,2,3,4，因为数组中有五个元素。

现在，在i的所有值中，只有0,2,4可以被2整除，这就是为什么你得到这些指数的值，即[5,3,1]。

a = [5, 4, 3, 2, 1];
smallvalues = a.filter(obj => obj < 3); console.log(smallvalues)
everyother = a.filter(ele => ele % 2); console.log(everyother)//

过滤函数可以简单的我们可以这样编码；

const state.contactList = [{
name: 'jane',
email: 'jane@gmail.com'
},{},{},...]
const fileredArray = state.contactsList.filter((contactItem) => {
  const regex = new RegExp(`${action.payload}`, 'gi');
  return contactItem.nameProperty.match(regex) || contactItem.emailProperty.match(regex);
});
// contactList: all the contacts stored in state
// action.payload: whatever typed in search field

相关文章：