什么是reduce函數(shù)
- reduce 方法對(duì)數(shù)組中的每個(gè)元素按序執(zhí)行一個(gè)提供的 reducer 函數(shù)
- 每一次運(yùn)行 reducer 會(huì)將先前元素的計(jì)算結(jié)果作為參數(shù)傳入岳守，最后將其結(jié)果匯總為單個(gè)返回值艾杏。
函數(shù)組成
reduce(callbackFn)
reduce(callbackFn, initialValue)
函數(shù)具體內(nèi)容
- reduce 方法是一個(gè)迭代方法。
- 它按升序?qū)?shù)組中的所有元素運(yùn)行一個(gè)“reducer”回調(diào)函數(shù)极颓，并將它們累積到一個(gè)單一的值中朱盐。
- 每次調(diào)用時(shí)，callbackFn 的返回值都作為 accumulator 參數(shù)傳遞到下一次調(diào)用中菠隆。
- accumulator 的最終值（也就是在數(shù)組的最后一次迭代中從 callbackFn 返回的值）將作為 reduce() 的返回值兵琳。
函數(shù)示例
1.求和函數(shù)
const sum = (arr) => arr.reduce((acc, cur) => acc + cur, 0);
//累計(jì)值為acc
//當(dāng)前值為cur
//初始值為initialValue 為0
let arr = [1, 2, 3, 4, 5];
console.log("參數(shù)為：", arr);
console.log("總和為：", sum(arr));
[圖片上傳失敗...(image-d77c86-1711469154118)]
2.求積函數(shù)
const product = (arr) => arr.reduce((acc, curr) => acc * curr, 1);
let arr1 = [1, 2, 3, 4, 5];
console.log("參數(shù)為：", arr1);
console.log("乘積為：", product(arr1));
[圖片上傳失敗...(image-1eff1b-1711469154118)]
3.扁平化數(shù)組
const flatten = (arr) => arr.reduce((acc, curr) => acc.concat(curr), []);
let arr = [[1, 2], [3, 4], [5]];
console.log("參數(shù)為：", arr);
console.log("結(jié)果為：", flatten(arr));
[圖片上傳失敗...(image-96e497-1711469154118)]
4.計(jì)算平均值（類似求和）
const average = (arr) => arr.reduce((acc, curr) => acc + curr, 0) / arr.length;
let arr = [1, 2, 3, 4, 5];
console.log("參數(shù)為：", arr);
console.log("結(jié)果為：", average(arr));
[圖片上傳失敗...(image-86a41-1711469154118)]
5.最大值
const max = (arr) => arr.reduce((acc, curr) => Math.max(acc, curr), Number.NEGATIVE_INFINITY);
let arr = [1, 2, 3, 4, 5];
console.log("參數(shù)為：", arr);
console.log("結(jié)果為：", max(arr));
[圖片上傳失敗...(image-4d61ab-1711469154118)]
6.最小值
const min = (arr) => arr.reduce((acc, curr) => Math.min(acc, curr), Number.POSITIVE_INFINITY);
let arr = [1, 2, 3, 4, 5];
console.log("參數(shù)為：", arr);
console.log("結(jié)果為：", min(arr));
[圖片上傳失敗...(image-10c0e1-1711469154118)]
7.階乘函數(shù)
const factorial = (n) => Array.from({ length: n }, (_, i) => i + 1).reduce((acc, curr) => acc * curr, 1);
// Array.from({ length: n }, (_, i) => i + 1) 生成數(shù)組數(shù)據(jù) [1,2,3,4,5]
console.log("參數(shù)為：", 5);
console.log("結(jié)果為：", factorial(5));
[圖片上傳失敗...(image-70c822-1711469154118)]
8.數(shù)組去重
const unique = (arr) => arr.reduce((acc, curr) => acc.includes(curr) ? acc : [...acc, curr], []);
let arr = [1, 2,3,4,2, 3, 4, 5];
console.log("參數(shù)為：", arr);
console.log("結(jié)果為：", unique(arr));
[圖片上傳失敗...(image-6d598b-1711469154118)]
9.元素計(jì)數(shù)
const countOccurrences = (arr) => arr.reduce((acc, curr) => {
acc[curr] = (acc[curr] || 0) + 1;
return acc;
}, {});
let arr = [1, 2,3,4,2, 3, 4, 5];
console.log("參數(shù)為：", arr);
console.log("結(jié)果為：", countOccurrences(arr));
[圖片上傳失敗...(image-994351-1711469154118)]
10.并集函數(shù)
const union = (...arrays) => arrays.reduce((acc, curr) => [...new Set([...acc, ...curr])], []);
let arr = [1, 2,3,4,2, 3, 4, 5];
let arr1 = [1, 2, 3, 4, 5];
console.log("參數(shù)為：", arr,arr1);
console.log("結(jié)果為：", union(arr,arr1));
[圖片上傳失敗...(image-8ac0b-1711469154118)]
11.交集函數(shù)
const intersection = (...arrays) => arrays.reduce((acc, curr) => acc.filter(value => curr.includes(value)));
let arr = [1, 2,3,4,2, 3, 4, 5];
let arr1 = [1, 2, 3, 4, 5];
console.log("參數(shù)為：", arr,arr1);
console.log("結(jié)果為：", intersection(arr,arr1));
[圖片上傳失敗...(image-91d77a-1711469154118)]
12.差集函數(shù)
const difference = (arr1, arr2) => arr1.reduce((acc, curr) => arr2.includes(curr) ? acc : [...acc, curr], []);
let arr = [1, 2,3,4,2, 3, 4, 5,9];
let arr1 = [1, 2, 3, 4, 5,7,8];
console.log("參數(shù)為：", arr,arr1);
console.log("結(jié)果為：", difference(arr,arr1));
[圖片上傳失敗...(image-bae439-1711469154118)]
13.對(duì)稱差集函數(shù)
const difference = (arr1, arr2) => arr1.reduce((acc, curr) => arr2.includes(curr) ? acc : [...acc, curr], []);
const symmetricDifference = (arr1, arr2) => [...difference(arr1, arr2), ...difference(arr2, arr1)];
let arr = [1, 2,3,4,2, 3, 4, 5,9];
let arr1 = [1, 2, 3, 4, 5,7,8];
console.log("參數(shù)為：", arr,arr1);
console.log("結(jié)果為：", symmetricDifference(arr,arr1));
[圖片上傳失敗...(image-3c4a0a-1711469154118)]
14.切片函數(shù)
const chunk = (arr, size) => arr.reduce((acc, _, i) => i % size === 0 ? [...acc, arr.slice(i, i + size)] : acc, []);
let arr = [1, 2,3,4,2, 3, 4, 5,9];
console.log("參數(shù)為：", arr);
console.log("結(jié)果為：", chunk(arr,4));
[圖片上傳失敗...(image-43860f-1711469154118)]
15.分組函數(shù)
const groupBy = (arr, key) => arr.reduce((acc, obj) => {
const groupKey = obj[key];
acc[groupKey] = [...(acc[groupKey] || []), obj];
return acc;
}, {});
let arr = [{ id: 1, name: '微芒不朽' }, { id: 2, name: '微芒' }, { id: 1, name: '微芒不朽' }];
console.log("參數(shù)為：", arr);
console.log("結(jié)果為：", groupBy(arr,"name"));
[圖片上傳失敗...(image-5ea117-1711469154118)]
16.去除falsy值
// 16. 數(shù)組去除假值
const compact = (arr) => arr.reduce((acc, curr) => curr ? [...acc, curr] : acc, []);
let arr = [0, 1, false, 2, '', 3]
console.log("參數(shù)為：", arr);
console.log("結(jié)果為：", compact(arr,"name"));
[圖片上傳失敗...(image-cec661-1711469154118)]
17.去除空元素
const removeEmpty = (arr) => arr.reduce((acc, curr) => curr ? [...acc, curr] : acc, []);
let arr = [0, 1, null, 2,undefined, '', 3]
console.log("參數(shù)為：", arr);
console.log("結(jié)果為：", removeEmpty(arr,"name"));
[圖片上傳失敗...(image-4a545f-1711469154118)]
18.去除指定元素
const removeItem = (arr, item) => arr.reduce((acc, curr) => curr === item ? acc : [...acc, curr], []);
let arr = [1, 2, 3, 4, 2, 5]
console.log("參數(shù)為：", arr);
console.log("結(jié)果為：", removeItem(arr,2));
[圖片上傳失敗...(image-fe5c98-1711469154118)]
19.元素映射
const mapArray = (arr, fn) => arr.reduce((acc, curr) => [...acc, fn(curr)], []);
let arr = [1, 2, 3, 4, 2, 5]
console.log("參數(shù)為：", arr,(x)=>x+2);
console.log("結(jié)果為：", mapArray(arr,(x)=>x+2));
[圖片上傳失敗...(image-fcceda-1711469154118)]
19.元素過濾
const filterArray = (arr, fn) => arr.reduce((acc, curr) => fn(curr) ? [...acc, curr] : acc, []);
let arr = [1, 2, 3, 4, 2, 5]
console.log("參數(shù)為：", arr,(x) => x % 2 === 0);
console.log("結(jié)果為：", filterArray(arr,(x) => x % 2 === 0));
[圖片上傳失敗...(image-eab9c3-1711469154118)]
console.log樣式函數(shù)【重寫console.log】
function randomColor() {
let r = Math.floor(Math.random()*256);
let g = Math.floor(Math.random()*256);
let b = Math.floor(Math.random()*256);
//返回隨機(jī)生成的顏色
return "rgb("+r+","+g+","+b+")";
}
console.log = (function(oriLogFunc){
return function(...data)
{
const icons = ["??", "??", "??", "??", "??", "??", "??", "??", "??", "??", "??", "??", "??", "??", "??", "??", "??", "??", "??", "??", "??", "??", "??", "??", "??", "??", "??", "??", "??", "??", "??", "??", "??", "??", "??", "??", "??", "??", "??", "??", "??", "??", "??", "??", "??", "??", "??", "??", "?", "??", "??", "??", "?", "?", "?", "?", "??"]
const icon = icons[Math.floor(Math.random() * icons.length)];
const bgColor = randomColor()
const color = randomColor()
oriLogFunc.call(console,`%c ${icon} `, `border-radius:5px;padding:12px;border:1px solid #000;color: #43bb88;font-size: 16px;font-weight: bold;text-decoration: underline;`, ...data);
}
})(console.log);
[圖片上傳失敗...(image-484e38-1711469154119)]
