js数组常用操作及实例

主要介绍map,reduce,filter,forEach,然后介绍箭头函数的用法，并在最后给出实例

1. 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=[不及格，不及格，及格，及格];
   

---

2. 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;
            }
        })
* 应用：计算购物车的总价格

---

3. 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;
    })
   

---

4. forEach 和for循环一样滴，没有返回值，就是for循环换了种写的方式

    let arr=[12,12,33,45];
    arr.forEach(function(item,index){
        console.log(item);
        -> 12,12,33,45
    })
   

---

5. 数组的操作方法配合箭头函数更好用

   5.1 为什么要使用箭头函数?

    为了简写，箭头函数就是使用()=>代替function关键字，它有两条简写规则,可以写的更少。
   

   5.2 箭头函数语法

    //普通函数语法
    let showName=function(name){
        return name;
    }
    //使用箭头函数
    let showName=(name)=>{
        return name;
    }
   

   5.3 简写规则

    
    // 上面的例子
    let showName=name=>{
        return name;
    }
    
    //上面的例子再简写
    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);
   

写博客新手，如有错误，请在评论中指正，谢谢。