JS中常用的处理数组的方法

JS中常用的几个处理数组的方法

前端经常会对后端返回的数组做处理，今天分享几个常用的方法来帮助大家书写更加简洁，性能更高的代码！

.filter()

该方法会返回一个符合函数条件的新的数组，不会改变原来的数组 (筛选数组，返回符合条件的值)。

比如，创建一组年龄的数组，该数组的值必须大于等于18岁:

let ages=[12,24,16,17,28,37,27,19];
let filterAges=ages.filter(age=>age>=18)
console.log(filterAges);
//[24,28,37,27,19]

.map()

该方法会返回一个符合函数条件的新的数组，不会改变原来的数组（对数组中的每一项做处理，返回处理后的数组）。

比如，把数组的每一项都乘以2：

let number=[1,2,3,4,5,6]
let doubleNumber=number.map(item=>item*2)
console.log(doubleNumber)
//[2,4,6,8,10,12]

.reduce()

reduce的用法很多，今天来为大家一一介绍，首先先了解一下函数的基本构成：

arr.reduce(function(prev,cur,index,arr){
...
}, init);

其中，
arr 表示原数组；
prev 表示上一次调用回调时的返回值，或者初始值 init;
cur 表示当前正在处理的数组元素；
index 表示当前正在处理的数组元素的索引，若提供 init 值，则索引为0，否则索引为1；
init 表示初始值。

看着复杂，其实常用的参数只有两个，prev和cur

1. 求数组项值之和

let arr = [3,9,4,3,6,0,9];
let sum = arr.reduce(function (prev, cur) {
    return prev + cur;
},0);

由于传入了初始值0，所以开始时prev的值为0，cur的值为数组第一项3，相加之后返回值为3作为下一轮回调的prev值，然后再继续与下一个数组项相加，以此类推，直至完成所有数组项的和并返回。

2. 求数组项值的最大值

let max = arr.reduce(function (prev, cur) {
    return Math.max(prev,cur);
});

由于未传入初始值，所以开始时prev的值为数组第一项3，cur的值为数组第二项9，取两值最大值后继续进入下一轮回调。

3. 数组项去重

var newArr = arr.reduce(function (prev, cur) {
    prev.indexOf(cur) === -1 && prev.push(cur);
    return prev;
},[]);

实现的基本原理如下：
① 初始化一个空数组
② 将需要去重处理的数组中的第1项在初始化数组中查找，如果找不到（空数组中肯定找不到），就将该项添加到初始化数组中
③ 将需要去重处理的数组中的第2项在初始化数组中查找，如果找不到，就将该项继续添加到初始化数组中
④ ……
⑤ 将需要去重处理的数组中的第n项在初始化数组中查找，如果找不到，就将该项继续添加到初始化数组中
⑥ 将这个初始化数组返回

.some()

判断数组中是否又符合函数条件的元素，对于符合的元素返回true，在测试数组元素的过程中，只要有一个truthy值返回，就会立即终止循环。

比如，检查数组中知否至少有一个‘admin’存在：

let ratings=['user','user','user','admin'];
let adminArr=ratings.some(item=>item==='admin');
console.log(adminArr);
//true

.every()

检查是否数组中的每个值都满足条件，只有每个值都满足条件才会返回true。

比如检查数组中的每个值是否都大于3颗星：

let ratings=[4,5,6,7,8,9];
let overRating=ratings.every(item=>item>=3);
console.log(overRating);
//true