js数组的map⽅法和filter⽅法
⽂章⽬录
Map⽅法
⽅法定义与说明
js中的map⽅法配合箭头函数，能够减少很多代码量，⽽且代码看起来也会更加清晰简洁(ie9+) map⽅法的主要作⽤是，根据原数组⽣成⼀个新的数组，并且不会修改原数组
使⽤语法是array.map(function(currentValue, index, arr), thisValue)
currentValue 必填项 当前元素的值
index 当前元素索引值
arr 原数组 当然⼀般由currentValue这个较少⽤到
thisValue 可选 较少⽤到 官⽅说法：对象作为该执⾏回调时使⽤，传递给函数，⽤作 “this” 的值。
如果省略了 thisValue，或者传⼊ null、undefined，那么回调函数的 this 为全局对象。
举例查看⽅法对代码的优化
举例，有⼀个对象数组，数组中的每个元素都包含id name age3个字段，现在我们只需要获取id字段组成新数组如果不⽤map⽅法需要这样写
var oldArr=[
{id:1,name:'Paul',age:22},
{id:2,name:'Mary',age:21},
];
var idArr=[];
for(var i=0;i<oldArr.length;i++){
idArr.push(oldArr[i].id);
}
console.log(idArr.valueOf());//[1,2]
使⽤map⽅法是这样的
var oldArr=[
{id:1,name:'Paul',age:22},
{id:2,name:'Mary',age:21},
];
var idArr=oldArr.map(function(item){
return item.id;
});
//使⽤箭头函数更简单当然箭头函数要考虑兼容性问题使⽤babel等
//let idArr=oldArr.map(item=>{return item.id});
console.log(idArr.valueOf());//[1,2]
甚⾄可以省略return
let oldArr=[1,2,3];
let newArr=oldArr.map(item=>item*2);
console.log(newArr.valueOf());//[2,4,6]
尤其是使⽤箭头函数配合map⽅法使⽤，可以减少不少的代码量
不适⽤map⽅法要先定义新数组，循环旧数组，根据规则修改数组再push到新数组
⽽map⽅法配合箭头函数，使⽤极少的代码量就可以完成
常见使⽤⽅式
当然前端经常会有需求，将普通的数组构造成⼀个对象数组来满⾜接⼝的要求，因为多项选择框的model绑定值⼀般都是普通数组，这时候⽤map就很⽅便
let oldArr=[1,2];
let newArr=oldArr.map((item,index)=>({
id:item,
index:index,
name:''
}));
console.log(newArr.valueOf());
//[{id:1,index:0,name:""},{id:2,index:1,name:""}]
预先定义处理函数
查看map⽅法的定义就知道，我们也可以预先定义好处理的函数⽅法，实现⽅法共⽤
要注意处理函数的参数！
let oldArr=[1,2];
let myMethod=function(item){
return item*2;
};
let newArr=oldArr.map(myMethod);
console.log(newArr.valueOf());//[2,4]
Filter⽅法
filter⽅法⽤于根据⼀定的过滤条件，删选原数组的数据，形成⼀个新的数组（不会修改原数组）
语法是array.filter(function(currentValue, index, arr), thisValue)
参数同map⽅法
javascript全局数组区别是map的function是⽤来返回新的条⽬值，⽽filter的function是返回true/false来进⾏判断筛选
filter⽅法可以在后台获取到下拉列表的数据之后，⽐如因为级联选择要修改下拉列表的内容显⽰，
可以考虑使⽤filter⽅法来过滤数据，减少后台请求。
⽰例代码
let oldArr=[
{
id:11,
name:'Peter',
parentId:1
},
{
id:13,
name:'Paul',
parentId:2
},
{
id:12,
name:'Mary',
parentId:2
}
];
let myMethod=function(item){
return item.parentId===2;
};
let newArr=oldArr.filter(myMethod);
console.log(newArr.valueOf());//得到的新数组是parentId为2的两个项⽬组成

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。