JS数组的高级用法（map、reduce、filter、sort）

一、map

参数：接收两个参数，一个是回调函数，另一个是回调函数的this值（可选）。回调函数接收三个参数，分别是当前值，当前索引和整个数组。

返回：函数返回一个新创建的数组，数组中的每个元素都经过了回调函数的处理，结果不改变原数组。

 

let nums = [1, 2, 3];
let obj = {val: 5};
let newNums = nums.map(function(item,index,array) {
  return item + index + array[index] + this.val; 
  //对第一个元素，1 + 0 + 1 + 5 = 7
  //对第二个元素，2 + 1 + 2 + 5 = 10
  //对第三个元素，3 + 2 + 3 + 5 = 13
}, obj);
console.log(newNums);//[7, 10, 13]

二、reduce

参数：接收两个参数，一个是回调函数，另一个是初始值（可选）。回调函数接收三个参数，分别是积累值、当前值和整个数组。

返回：函数返回一个值，该值由数组中的元素通过回调函数进行处理后积累得到的最终值。

let nums = [1, 2, 3];
// 多个数的加和
let newNums = nums.reduce(function(preSum,curVal,array) {
  return preSum + curVal; 
}, 0);
console.log(newNums);//6

 注：若没传初始值，则会将数组中的第一个元素作为积累值，从数组的第二个元素开始进行函数调用

三、filter

参数：接收一个函数参数。函数接收一个默认参数，就是数组正在遍历的当前元素，函数参数的返回值是一个布尔值，若返回true，则数组元素得到保留。

返回：函数返回一个新创建的数组，数组元素为通过函数参数调用返回true的元素，此函数不会改变原数组。

let oldnums=[1,2,3,4,5,6,7,8,9];
let newnums=oldnums.filter(function(val){
    return val%2;
});
console.log(newnums);// [1,3,5,7,9]

四、sort

参数：接收一个用于比较的函数，比较函数默认接收两个参数，分别是代表比较的两个元素。

返回：返回一个经过比较函数调用的数组，此函数会改变原数组。

let nums = [2, 3, 1];
//两个比较的元素分别为a, b
nums.sort(function(a, b) {
  if(a > b) return 1;
  else if(a < b) return -1;
  else if(a == b) return 0;
})

当比较函数返回值大于0，则 a 在 b 的后面，即a的下标应该比b大。反之，则 a 在 b 的后面，即 a 的下标比 b 小。整个过程就完成了一次升序的排列。

注：若没有传入比较函数，则会将数字转换成字符串，然后根据字符的unicode值进行升序排序，也就是根据字符串的比较规则进行升序排序。