在我们过滤数组的时候,如果熟练使用以上3种方法,会让js程序更加的简洁我们先用ES6之前传统的方法来返回id值为1的数组,示例代码如下
Let a=[{id:0},{id:1},{id:2}]
首先根据上面的代码,我们可以使用for循环,如果id等于1那么久赋值给相应的变量。
let b; for (let i in a){ if (a[i].id===1){ b=a[i] } }
Map()方法使用指南
现在我们使用map来返回这个数组。
let b a.map(v=> { if (v.id===1){ b= v } });
map()方法会返回一个新的数组,数组中的元素为函数处理后的值。它具体语法如下
array.map(function(currentValue,index,arr),thisValue)
我们可以打印一下看效果
a.map((currentValue,index,arr)=> { console.log(currentValue,index,arr) });
可以看到,currentValue为当前元素值如({id:0}),index为当前元素的索引如(0),arr为当前的元素对象即a本身。thisValue是一个可选参数
如果上面我们不使用变量来接收id为1的值,看看效果如何
let b=a.map(v=> v.id===1); //返回 false true false let b=a.map(v=> { if (v.id===1){ return v } }); //返回[undefined,{"id": 1},undefined] ]
通过上面的例子我们看到为什么会出现undefined呢?上面说了map方法会返回处理后的值。比如第二个,它只指定了v.id===1的值的返回值,而其他没有。所以才会出现undefined。记住,以下两点.
1、map()方法是按照从上到下的顺序执行。
2、map()方法不会改变原始数组。
3、map()只返回处理过后的值。如改造一下上面的示例
let b=a.map(v=>v.id+1); 数组每个元素的id值将加1
4、map()方法不会检查空数组。
filter()的使用方法
还是根据文章开头,来查找id等于1的值,现在我们使用filter()方法
let b=a.filter(v=>v.id===1)//打印b后返回值为[{"id": 1}]
可以看到,filter()方法比map方法处理的效果更好,直接就可以赋值了啊。filter的语法如下
array.filter(function(currentValue,index,arr), thisValue)
可以看到,它跟map的语法是一致的。不同于map不改变元素的数组,filter它将返回一个新的数组,并且过滤掉不符合条件的其他元素。比如上面的代码就过滤掉id不等于1的值。下面是一个比较实用的方法,使用filter除去重复的数组。
let a=[1,1,1,2,2,2,3,3,3,3] let b=a.filter( (e,i,s)=>{ return s.indexOf(e) === i; } ) //打印后获得结果[1, 2, 3]
find()使用方法
最后面我们使用find()方法来实现id等于1的数据获取,代码如下
let b=a.find(v=>v.id===1)//返回结果{id:1}
我们可以看到find不返回数组,只返回符合条件的值。当我们不需要返回数组,只需要获得符合条件的元素时,明显使用find()更合理。fide()的语法跟map和filter是一样的。
array.find(function(currentValue, index, arr),thisValue)
find()返回第一个符合条件的元素,如下示例
let a=[0,1,1,1,1,2,3,2,5] let b=a.find(v=>v===2); //它返回索引为5的数值(a[5]),其他的不返回,如果没有符合条件的值返回undefined
最后总结
可以看到,map find filter在语法上它们是一致的,map返回修改后的原始数组,只是数组里的值是被函数修改后的。filter它返回一个新的数组,并且过滤掉函数里不匹配的元素。而find仅仅只返回函数里首条符合记录的值。它们都是用于操作数组的,只是每个方法操作的方法不一致而已。