主要介绍map,reduce,filter,forEach,然后介绍箭头函数的用法,并在最后给出实例
-
map 映射(一个对一个) 对于数组中的每一个项,都有一个返回值
//对于每个item都有一个改变后的返回值 let arr=[1,2,3,4]; let result=arr.map(function(item){ //item是数组中的每一项 return item*2; }); -> result=[1,4,9,16] let score=[19,58,80,97]; let result=score.map(function(){ return item>=60?'及格':'不及格'; }) -> result=[不及格,不及格,及格,及格];
-
reduce 汇总(一堆出来一个)计算总数,计算平均值 比较费劲
//求和 let arr=[11,122,333,344]; let result=arr.reduce(function(tmp,item,index){ return tmp+item; })
- 过程是这样滴:假如我们要计算一个加法运算,11+122+333+344;第一步我们要计算11+122,得到一个中间结果133,然后用中间结果去加333,,然后又会得到一个中间结果466,然后用466去加344得到最终结果810
- reduce的工作原理也是这样,首先因为刚开始没有中间结果,所以tmp被赋值为数组中的第一项 item是数组中第二项,index是1,然后计算11+122,把得到的结果133 return出去,第二次计算时tmp就是12+122的结果133,item是数组中的第三项333,index是2,把tmp+item的结果466返回出去;第三次计算时的tmp就是466,item是344,index是3,把结果返回出去,因为这是数组中最后一项,所以把结果返回给result.
计算次数 tmp item index 第0次 11 122 1 第1次 11+122 333 2 第2次 (11+122)+333 344 3 第3次 ((11+122)+333)+344 把结果return出去
//计算平均数 最后一次要求平均数
//求和
let arr=[11,122,333,344];
let result=arr.reduce(function(temp,item,index){
if(index!=arr.length){//不是最后一次,求和
return temp+item;
}else{//最后一次
return (temp+item)/arr.length;
}
})
* 应用:计算购物车的总价格
-
filter 过滤器(留一部分,消失一部分)
//通过返回的是true还是false来决定是否返回出去 //例子:返回能被3整除的数 let arr=[12,5,8,9]; let result=arr.filter(function(item){ if(item%3==0){ return true; }else{ return false;34567812 } //简写 return item%3==0; })
-
forEach 和for循环一样滴,没有返回值,就是for循环换了种写的方式
let arr=[12,12,33,45]; arr.forEach(function(item,index){ console.log(item); -> 12,12,33,45 })
-
数组的操作方法配合箭头函数更好用
5.1 为什么要使用箭头函数?
为了简写,箭头函数就是使用()=>代替function关键字,它有两条简写规则,可以写的更少。
5.2 箭头函数语法
//普通函数语法 let showName=function(name){ return name; } //使用箭头函数 let showName=(name)=>{ return name; }
5.3 简写规则
<!-- 1.只有一个参数,()可以不写 --> // 上面的例子 let showName=name=>{ return name; } <!-- 2. 只有一条return语句(只有一条语句,那条语句是return语句),return和{}可以省略 --> //上面的例子再简写 let showName=name=>name;
5.4 数组方法配合箭头函数
<!-- 例: 假如有一个购物车中的商品列表--> let shoppingCart=[ {id:1,name:'袜子',price:56,imgs:'1.jpg,2.jpg'}, {id:2,name:'内裤',price:156,imgs:'3.jpg,4.jpg'}, {id:3,name:'上衣',price:1156,imgs:'5.jpg,6.jpg'}, {id:4,name:'裤子',price:4156,imgs:'7.jpg,8.jpg'}, {id:5,name:'胸罩',price:14156,imgs:'9.jpg,10.jpg'}, ] //1. 过滤掉价格小于1000的衣服 let result=shoppingCart.filter(item=>item.price>=1000); -> result=[ {id:3,name:'上衣',price:1156,imgs:'5.jpg,6.jpg'}, {id:4,name:'裤子',price:4156,imgs:'7.jpg,8.jpg'}, {id:5,name:'胸罩',price:14156,imgs:'9.jpg,10.jpg'}, ] //2. 把图片转化为数组格式 let result=shoppingCart.map(item=>{ item.imgs=item.imgs.split(','); return item; }) ->result=[ { id: 1, name: '袜子', price: 56, imgs: [ '1.jpg', '2.jpg' ] }, { id: 2, name: '内裤', price: 156, imgs: [ '3.jpg', '4.jpg' ] }, { id: 3, name: '上衣', price: 1156, imgs: [ '5.jpg', '6.jpg' ] }, { id: 4, name: '裤子', price: 4156, imgs: [ '7.jpg', '8.jpg' ] }, { id: 5, name: '胸罩', price: 14156, imgs: [ '9.jpg', '10.jpg' ] } ] //3. 计算总价格 首先使用map把价格映射出来,然后使用reduce计算和 let total_price=shoppingCart.map(item=>item.price) .reduce((temp,item)=>temp+item);
写博客新手,如有错误,请在评论中指正,谢谢。