引子
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;
}