JavaScript filter()方法混淆
JavaScript filter() method confusion
作为"正确学习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
的。以下是我认为正在发生的事情:
i
(a[]
的索引)正在通过函数x
传递,该函数将谓词应用于a[]
的每个元素并返回[4, 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
- electronic BrowserWindow的最小高度和宽度在hide()show()方法之后不起作用
- 有没有任何方法可以将控制器从文件加载到ui路由器$stateProvider中
- 数组在递归方法中设置为null
- 打破承诺链的好方法是什么
- 在使用Polymer'加载所有json文件后执行方法;s的核心ajax
- 使用filter和map方法将数组中某些元素的第一个字母大写-JavaScript
- 回调函数的定义以及它如何适用于array.prototype.forEach/map/filter方法
- JavaScript filter()方法混淆
- rxjs的filter方法没有返回过滤器数组
- 使用filter方法检查数组中每个元素的首字母是否为大写.但我还是得到了整个数组
- EmberJS“set"对象上的方法在使用filter与Ember Data时似乎不起作用
- 在filter()方法中返回值而不是对象
- 如何在Javascript .filter()方法中传递一个额外的参数给回调函数
- 对象不支持'filter'属性或方法
- 本机map, filter等方法是否优化为尽可能在单个中间数组上操作
- 如何在客户端正确使用getGridMasterTableView().filter()方法
- 我不理解Javascript中删除重复项的filter()方法
- 是否有任何方法来形成Odata过滤器,如$filter= email /any(s: s eq 'somestr
- 使用一个接受两个参数的函数实现 JS 本机“filter”方法
- Filter 方法将一个数组替换为另一个数组