js中数组的高逼格操作（filter、sort、map、reduce）

小灰灰 2022-10-07 10:53 91阅读 0赞

# 说在前面的话 #

> ES6全称ECMAScript 6.0， 成为JavaScript  
> 的下一个版本标准。它提供了一些很牛逼的东西，使我们写的代码更加简洁、方便。比如模板字符串、箭头函数、promise、class等等。ES6的出现就是为了弥补ES5的不足，正因为有了这些完善我们才有了后面的一些骚操作。

# 正片 #

###  带着问题学习才有效果 ###

<table> 
 <tbody> 
  <tr> 
   <td> <font> 有一个数组：let score = [24,83,79,64,97,88,50]</font></td> 
  </tr> 
 </tbody> 
</table>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODE2NTQwNw_size_16_color_FFFFFF_t_70_pic_center]

###  上需求 ###

*  需求一、选出成绩优秀的学生(成绩不低于80分的同学)
 *  需求二、对成绩优秀的学生从高到底进行排序
 *  需求三、给这里成绩优秀的学生加上2分(奖励分)
 *  需求四：对成绩优秀的学生成绩进行汇总(求和)

一个个来解决以上的问题☟☟☟

# 一、分部解决 #

## first ##

需求一、选出成绩优秀的学生(成绩不低于80分的同学)。  
正常的操作1：

let score = [24,83,79,64,97,88,50];
     let excellent1 = [];
       	for(let i = 0; i < score.length; i++) { 
           	if(score[i] >= 80) { 
              	excellent1.push(score[i]);
         	}
    	}
    console.log(excellent1);//[83, 97, 88]

正常的操作2：(ES6)

let score = [24,83,79,64,97,88,50];
    let excellent2 = [];
     	for(let s of score) { 
         	if(s >= 80) { 
              	excellent2.push(s);
         	}
    	}
    console.log(excellent2);//[83, 97, 88]

高逼格操作：filter()

> ###### filter的使用: ######
> 
> filter(function(s) \{  
> return boolean;  
> \})  
> filter()方法的参数是一个函数,函数里面有一个参数，可以任意起名  
> filter()中的回调函数有一个要求：必须返回一个 boolean值  
> true：当返回值为true时，函数内部会自动将这次回调的s加入到新的数组中  
> false：当返回false时，函数内部会过滤掉这次的s

//filter(funcion(s) { 
    // return ....
    })
    //这里使用的是es6里的箭头函数
    let excellent3 = score.filter(s => s >= 80);
    console.log(excellent3);

![在这里插入图片描述][20210617201153163.JPG_pic_center]  
很显然，运行结果完全一致。而使用filter()方法的代码相对于前两次的代码少了很多。解决完第一个问题，接下来到第二个问题

## second ##

需求二、对成绩优秀的学生从高到底进行排序  
正常操作：使用冒泡排序

console.log(excellent3);//[83, 97, 88]
    
    let len = excellent3.length;
    for(let i = 0; i < len; i++) { 
        for(let j = 0; j <len - i; j++) { 
            if(excellent3[j] < excellent3[j + 1]) { 
                let temp = 0;
                temp = excellent3[j];
                excellent3[j] = excellent3[j + 1];
                excellent3[j + 1] = temp;
            }
        } 
    }
    console.log(excellent3);

高逼格操作：sort()

> sort()  
> 有一个回调函数，函数里有两个参数： sort(function(a, b) \{\})  
> 当返回值为正数：转进来的两个参数位置互换，(后面的数跑到前面)  
> 当返回值为负数：前面的数在前面  
> 当返回值为0：不发生变化  
> 如果不传回调函数，那么他会默认按照字符编码的顺序进行排序

//sort(function(a, b) { 
    // return 正数/负数/零
    })
    //我还是使用es6的箭头函数
    excellent3.sort((a ,b) => b - a);
    console.log(excellent3);

![在这里插入图片描述][20210617203405474.JPG_pic_center]

运行代码都是一毛一样的。使用冒泡排序的方法代码很多，看起来不好阅读，更不好写，而sort()只需要一行代码。 sort()方法不只是能按顺序排序，只要懂得它的使用，您可以让它按照您的意愿来排序。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODE2NTQwNw_size_16_color_FFFFFF_t_70_pic_center 1]

## third ##

需求三、给这里成绩优秀的学生加上2分(奖励分)

正常操作(es6)

let reward = [];
    for(let s of excellent3) { 
        reward.push(s + 2);
    }
    console.log(reward);

高逼格操作：map()

> map(function(s) \{  
> return …  
> \})  
> 数组的值一个一个的被传入回调函数的参数中，且每次都会有返回值，被传进新的数组中

//map(function(s) { 
    // return ....
    })
    let reward1 = excellent3.map(s => s +2);
    console.log(reward1);

![在这里插入图片描述][20210617205113430.JPG_pic_center]  
 第三个问题轻轻松松解决，只剩下最后一个问题了。

## fourth ##

需求四：对成绩优秀的学生成绩进行汇总(求和)  
正常操作(es6)

let total = 0;
    for(let s of reward1) { 
        total += s;
    }
    console.log(total);

高逼格操作：reduce()

> reduce函数作用：对数组中所有的内容进行汇总  
> reduce(function(pre, cur) \{  
> return …  
> \},0）

// 第一次： preS:0 s:99
    // 第二次： preS:99 s:90
    // 第三次： preS:189 s:85
    // 最终返回最后一次相加的结果：189 + 85 = 274
    let total1 = reward1.reduce((preS,s) => preS + s);
    console.log(total1);

![在这里插入图片描述][20210617205736840.JPG_pic_center]  
运行代码结果还是一毛一样。而这些方法都是一行代码实现上面的需求的。而且还可以一次性解决所有问题。

# 二、终结者 #

//需求一、选出成绩优秀的学生(成绩不低于80分的同学)
    //需求二、对成绩优秀的学生从高到底进行排序
    //需求三、给这里成绩优秀的学生加上2分(奖励分)
    //需求四：对成绩优秀的学生成绩进行汇总(求和)
    let score = [24,83,79,64,97,88,50];
    
    let total = score.filter(s => s >= 80).sort((a, b) => b - a).map(s => s + 2).reduce((pre, s) => pre + s);
    console.log(total);

![在这里插入图片描述][20210617213555252.JPG_pic_center]

###  这四个需求结合在一起也是一行代码实现，非常简洁。 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODE2NTQwNw_size_16_color_FFFFFF_t_70_pic_center 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODE2NTQwNw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221005/b7dbfaa25479426bac8a95263b66eace.png
[20210617201153163.JPG_pic_center]: /images/20221005/af1883e763b44bb881f32f552ca9eea8.png
[20210617203405474.JPG_pic_center]: /images/20221005/35b37a9be40f4545abb29d9d8e4c3f90.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODE2NTQwNw_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221005/c659a09d4a6642548494be46ebaed01e.png
[20210617205113430.JPG_pic_center]: /images/20221005/cf2f15fbfb634509917a04eaf5bdadf1.png
[20210617205736840.JPG_pic_center]: /images/20221005/ce91edff7e4b4083a8f97a96f41721bd.png
[20210617213555252.JPG_pic_center]: /images/20221005/88895d4effcf41be9f70b30e43072f59.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODE2NTQwNw_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221005/0dbe2eb1508747c8a2f206de690fb282.png