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方法
区别是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的两个项目组成

更多数组方法：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach