JavaScript中常用的数组操作方法

一、.map方法

用法说明（自己的体会）：数组的.map方法用于在原有数组的基础上生成一个新的数组，更改新数组中的数据不会影响到原有数据。接收三个参数分别是（当前项、下标、数组本身）。

var arr=[0,1,2,3,4]
console.log(arr.map(item=>item));//[ 0, 1, 2, 3, 4 ]

应用场景1：需要在原有数据中补充数据。

var arr = [{name:'张三'},{name:'李四'},{name:'王二'},{name:'麻子'}]
//生成一个新数组，数组中用户的信息新增年龄字段，暂时为空。
console.log(arr.map(item=>{return{...item,age:''}}));
// [
//   { name: '张三', age: '' },
//   { name: '李四', age: '' },
//   { name: '王二', age: '' },
//   { name: '麻子', age: '' } 
// ]

 应用场景2：接口字段更改，前端字段保持不变。

var arr = [{name:'张三'},{name:'李四'},{name:'王二'},{name:'麻子'}]
// 由于接口更改需要将name改为_name
console.log(arr.map(item=>{return {_name:item.name}}));
//[ { _name: '张三' }, { _name: '李四' }, { _name: '王二' }, { _name: '麻子' } ]

二、.find方法

用法说明（自己的体会）：返回满足条件的值，只返回第一个满足条件的值，常用于精确查找。

var arr=[0,1,2,3,4]
console.log(arr.find(item=>item));//1

应用场景：获取指定项

var arr = [{name:'张三',id:1},{name:'李四',id:2},{name:'王二',id:3},{name:'麻子',id:4}]
//获取id为3的name值
console.log(arr.find(item=>item.id===3).name)//王二

三、.filter方法

用法说明（自己的体会）：用于返回满足条件的值，可以返回躲过，过滤出需要的值。

var arr=[0,1,2,3,4]
console.log(arr.filter(item=>item));//[ 1, 2, 3, 4 ]

应用场景：拿到符合某类条件的所有值

var arr = [{ name: '张三', id: 1, type: 1 }, { name: '李四', id: 2, type: 1 }, { name: '王二', id: 3, type: 1 }, { name: '麻子', id: 4, type: 2 }]
//获取到A类用户（type唯一的用户）信息
console.log(arr.filter(item=>item.type===1));
// [
//   { name: '张三', id: 1, type: 1 },
//   { name: '李四', id: 2, type: 1 },
//   { name: '王二', id: 3, type: 1 }
// ]

四、.forEach方法

用法说明（自己的体会）：遍历数据，不会更改原数组的值。默认返回undefined。

var arr=[0,1,2,3,4]
console.log(arr.forEach(item=>item+1));//1
console.log(arr);//[ 0, 1, 2, 3, 4 ]