Javascript数组详解-Array.prototype.reduce

引子

Javascript数组详解。

了解Array.prototype.reduce

我们在原程序中，利用Array.forEach去实现了一个累加，ChatGPT优化成了Array.prototype.reduce。相对于Array.forEach，Array.prototype.reduce可能很多人用的不多，接下来我们稍微解释下。

Array.prototype.reduce((t, v, i, a) => {}, initValue)
参数：
        callback：回调函数(必选)
        initValue：初始值(可选)
回调函数参数：
        total(t)：累计器完成计算的返回值(必选)
        value(v)：当前元素(必选)
        index(i)：当前元素的索引(可选)
        array(a)：当前元素所属的数组对象(可选)

使用场合

给大家列举几个场合，大家自行学习体会。

// 累加累乘
function acc(type, ...vals) {
    if (type === 'add') {
        return vals.reduce((t, v) => t + v, 0);
    } else if (type === 'multiply') {
        return vals.reduce((t, v) => t * v, 1);
    }
}
let a = acc('add', 1, 2, 3, 4, 5); // 15
let b = acc('multiply', 1, 2, 3, 4, 5); // 120

//加权求和
const scores = [
    { score: 90, subject: "chinese", weight: 0.5 },
    { score: 95, subject: "math", weight: 0.3 },
    { score: 85, subject: "english", weight: 0.2 }
];
const result = scores.reduce((t, v) => t + v.score * v.weight, 0); // 90.5

//数组分割
function chunk(arr = [], size = 1) {
    return arr.reduce((t, v) => (t[t.length - 1].length === size ? t.push([v]) : t[t.length - 1].push(v), t), [[]]);
}
const arr = [1, 2, 3, 4, 5];
chunk(arr, 2); 
/* 分割后的结果
(3) [Array(2), Array(2), Array(1)]
0: (2) [1, 2]
1: (2) [3, 4]
2: [5]
length: 3
__proto__: Array(0)
*/

//数组去重
const arr = [1,2,2,4,4,1];
const newArr = arr.reduce((t,v) => {
    if(!t.includes(v)) {
      return t.concat(v)
    } else {
      return t
    }
},[]);
//简写方式如下：
const newArr2 = arr.reduce((t, v) => t.includes(v) ? t : t.concat(v), []);
console.log(newArr);// [1, 2, 4]

//数组平铺，将二维数组平铺成一维数组
const arr = [[0, 1], [2, 3], [4, 5]]
const newArr = arr.reduce((t,v) => {
    return t.concat(v)
},[])
console.log(newArr); // [0, 1, 2, 3, 4, 5]
//多维数组平铺成一维数组
const tileArr = arr => arr.reduce((acc,cur) =>acc.concat(Array.isArray(cur)?tileArr(cur):cur),[])
tileArr([1,2,[3,4,[5,6,7]]]) // [1,2,3,4,5,6,7]

//一次遍历多次运算，同时求出最大最小值
let numArray = [1, 2, 3, 0.2, 3.6, 0.1, 10, 12, 1, 2];
let minMax = numArray.reduce((t,v)=>{
    return {
        min: Math.min(t.min,v),
        max: Math.max(t.max,v)
    }
},{
    min: Number.MAX_VALUE,
    max: Number.MIN_VALUE
});
console.log(minMax);
//{min: 0.1, max: 12}

模拟实现

Array.prototype.reduceFn = function(callback,initValue){
  var preValue = initValue || this[0];
  for(var i = initValue ? 0 : 1; i<this.length; i++){
    preValue = callback(preValue,this[i],i,this);
  }
  return preValue;
 }