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

说在前面的话

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

正片

带着问题学习才有效果

有一个数组：let score = [24,83,79,64,97,88,50]

上需求

• 需求一、选出成绩优秀的学生(成绩不低于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);

很显然，运行结果完全一致。而使用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);

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

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);

第三个问题轻轻松松解决，只剩下最后一个问题了。

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);

运行代码结果还是一毛一样。而这些方法都是一行代码实现上面的需求的。而且还可以一次性解决所有问题。

二、终结者

//需求一、选出成绩优秀的学生(成绩不低于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);

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