一、.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 ]