JavaScript數(shù)組對象高階函數(shù)reduce的妙用詳解
更新時間：2023年04月19日 16:37:43 作者：思學(xué)堂
這篇文章主要為大家介紹了JavaScript數(shù)組對象高階函數(shù)reduce的妙用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
reduce 是 JavaScript 數(shù)組對象上的一個高階函數(shù)
它可以用來迭代數(shù)組中的所有元素，并返回一個單一的值。
其常用的語法為： array.reduce(callback[, initialValue])
其中，callback 是一個回調(diào)函數(shù)，它接受四個參數(shù)：累加器（初始值或上一次回調(diào)函數(shù)的返回值）、當(dāng)前元素、當(dāng)前索引、操作的數(shù)組本身。initialValue 是一個可選的初始值，如果提供了該值，則作為累加器的初始值，否則累加器的初始值為數(shù)組的第一個元素。 reduce 函數(shù)會從數(shù)組的第一個元素開始，依次對數(shù)組中的每個元素執(zhí)行回調(diào)函數(shù)?；卣{(diào)函數(shù)的返回值將成為下一次回調(diào)函數(shù)的第一個參數(shù)（累加器）。最后，reduce 函數(shù)返回最終的累加結(jié)果。 以下是一個簡單的 reduce 示例，用于計算數(shù)組中所有元素的和：
const arr = [1, 2, 3, 4, 5]; const sum = arr.reduce((accumulator, currentValue) => accumulator + currentValue); console.log(sum); // 15
在上面的代碼中，reduce 函數(shù)從數(shù)組的第一個元素開始，計算累加值，返回最終的累加結(jié)果 15。 除了數(shù)組的求和，reduce 函數(shù)還可以用于其他各種用途，如數(shù)組求平均數(shù)、最大值、最小值等。此外，reduce 函數(shù)還可以與 map、filter、forEach 等函數(shù)組合使用，實現(xiàn)更加復(fù)雜的數(shù)據(jù)操作。
當(dāng)然，以下是一些 reduce 的實際應(yīng)用案例，幫助你更好地理解它的用法：
計算數(shù)組的平均數(shù)
const arr = [1, 2, 3, 4, 5];
const average = arr.reduce((accumulator, currentValue, index, array) => {
accumulator += currentValue;
if (index === array.length - 1) {
return accumulator / array.length;
} else {
return accumulator;
}
});
console.log(average); // 3
求數(shù)組的最大值
const arr = [1, 2, 3, 4, 5]; const max = arr.reduce((accumulator, currentValue) => Math.max(accumulator, currentValue)); console.log(max); // 5
求數(shù)組的最小值
const arr = [1, 2, 3, 4, 5]; const min = arr.reduce((accumulator, currentValue) => Math.min(accumulator, currentValue)); console.log(min); // 1
數(shù)組去重
const arr = [1, 2, 3, 3, 4, 4, 5];
const uniqueArr = arr.reduce((accumulator, currentValue) => {
if (!accumulator.includes(currentValue)) {
accumulator.push(currentValue);
}
return accumulator;
}, []);
console.log(uniqueArr); // [1, 2, 3, 4, 5]
計算數(shù)組中每個元素出現(xiàn)的次數(shù)
const arr = [1, 2, 3, 3, 4, 4, 5];
const countMap = arr.reduce((accumulator, currentValue) => {
if (!accumulator[currentValue]) {
accumulator[currentValue] = 1;
} else {
accumulator[currentValue]++;
}
return accumulator;
}, {});
console.log(countMap); // {1: 1, 2: 1, 3: 2, 4: 2, 5: 1}
實現(xiàn)數(shù)組分組
const arr = [1, 2, 3, 4, 5];
const result = arr.reduce((accumulator, currentValue) => {
if (currentValue % 2 === 0) {
accumulator.even.push(currentValue);
} else {
accumulator.odd.push(currentValue);
}
return accumulator;
}, { even: [], odd: [] });
console.log(result); // {even: [2, 4], odd: [1, 3, 5]}
計算數(shù)組中連續(xù)遞增數(shù)字的長度
const arr = [1, 2, 3, 5, 6, 7, 8, 9];
const result = arr.reduce((accumulator, currentValue, index, array) => {
if (index === 0 || currentValue !== array[index - 1] + 1) {
accumulator.push([currentValue]);
} else {
accumulator[accumulator.length - 1].push(currentValue);
}
return accumulator;
}, []);
const maxLength = result.reduce((accumulator, currentValue) => Math.max(accumulator, currentValue.length), 0);
console.log(maxLength); // 5
計算對象數(shù)組的屬性總和
const arr = [
{ name: 'Alice', age: 25 },
{ name: 'Bob', age: 30 },
{ name: 'Charlie', age: 35 },
];
const result = arr.reduce((accumulator, currentValue) => accumulator + currentValue.age, 0);
console.log(result); // 90
將對象數(shù)組轉(zhuǎn)換為鍵值對對象
const arr = [
{ name: 'Alice', age: 25 },
{ name: 'Bob', age: 30 },
{ name: 'Charlie', age: 35 },
];
const result = arr.reduce((accumulator, currentValue) => {
accumulator[currentValue.name] = currentValue.age;
return accumulator;
}, {});
console.log(result); // {Alice: 25, Bob: 30, Charlie: 35}
計算數(shù)組中出現(xiàn)次數(shù)最多的元素
const arr = [1, 2, 3, 4, 4, 4, 5, 5, 6, 6, 6, 6];
const result = arr.reduce((accumulator, currentValue) => {
accumulator[currentValue] = (accumulator[currentValue] || 0) + 1;
return accumulator;
}, {});
const maxCount = Math.max(...Object.values(result));
const mostFrequent = Object.keys(result).filter(key => result[key] === maxCount).map(Number);
console.log(mostFrequent); // [6]
實現(xiàn) Promise 串行執(zhí)行
const promise1 = () => Promise.resolve('one');
const promise2 = (input) => Promise.resolve(input + ' two');
const promise3 = (input) => Promise.resolve(input + ' three');
const promises = [promise1, promise2, promise3];
const result = promises.reduce((accumulator, currentValue) => {
return accumulator.then(currentValue);
}, Promise.resolve('start'));
result.then(console.log); // 'one two three'
對象屬性值求和
const obj = {
a: 1,
b: 2,
c: 3
};
const result = Object.values(obj).reduce((accumulator, currentValue) => accumulator + currentValue);
console.log(result); // 6
按屬性對數(shù)組分組
const arr = [
{ id: 1, name: 'John' },
{ id: 2, name: 'Mary' },
{ id: 3, name: 'Bob' },
{ id: 4, name: 'Mary' }
];
const result = arr.reduce((accumulator, currentValue) => {
const key = currentValue.name;
if (!accumulator[key]) {
accumulator[key] = [];
}
accumulator[key].push(currentValue);
return accumulator;
}, {});
console.log(result);
/*
{
John: [{ id: 1, name: 'John' }],
Mary: [
{ id: 2, name: 'Mary' },
{ id: 4, name: 'Mary' }
],
Bob: [{ id: 3, name: 'Bob' }]
}
*/
扁平化數(shù)組
// 如果你有一個嵌套的數(shù)組，可以使用reduce將其扁平化成一個一維數(shù)組。例如： const nestedArray = [[1, 2], [3, 4], [5, 6]]; const flattenedArray = nestedArray.reduce((acc, curr) => acc.concat(curr), []); console.log(flattenedArray); // [1, 2, 3, 4, 5, 6]
合并對象
// 可以使用reduce將多個對象合并成一個對象。例如：
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const obj3 = { e: 5, f: 6 };
const mergedObj = [obj1, obj2, obj3].reduce((acc, curr) => Object.assign(acc, curr), {});
console.log(mergedObj); // {a: 1, b: 2, c: 3, d: 4, e: 5, f: 6}以上就是JavaScript數(shù)組對象高階函數(shù)reduce的妙用詳解的詳細(xì)內(nèi)容，更多關(guān)于JavaScript數(shù)組對象reduce的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
今天小編就為大家分享一篇關(guān)于4個頂級JavaScript高級文本編輯器，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2018-10-10
這篇文章主要介紹了ECharts框架分段視覺映射在移動端適配詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
這篇文章主要介紹了移動開發(fā)之自適應(yīng)手機(jī)屏幕寬度的相關(guān)資料,網(wǎng)上關(guān)于這方面的文章有很多，重復(fù)的東西本文不再贅述，僅提供思路，并解釋一些其他文章講述模糊的地方,需要的朋友可以參考下2016-11-11
詳解JavaScript實現(xiàn)簡單的詞法分析器示例
這篇文章主要為大家介紹了詳解JavaScript實現(xiàn)簡單的詞法分析器示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
JavaScript專題之underscore防抖實例學(xué)習(xí)
這篇文章主要為大家介紹了JavaScript專題之underscore防抖實例學(xué)習(xí)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
微信小程序 使用picker封裝省市區(qū)三級聯(lián)動實例代碼
這篇文章主要介紹了微信小程序 使用picker封裝省市區(qū)三級聯(lián)動實例代碼的相關(guān)資料,需要的朋友可以參考下2016-10-10
這篇文章主要介紹了Express框架view對象使用解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
判斷Spartacus?SSR的Transfer?State是否正常工作技巧
這篇文章主要為大家介紹了判斷Spartacus?SSR的Transfer?State是否正常工作技巧，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-10-10
微信小程序 網(wǎng)絡(luò)請求(GET請求)詳解
這篇文章主要介紹了微信小程序 網(wǎng)絡(luò)請求(GET請求)詳解的相關(guān)資料,需要的朋友可以參考下2016-11-11
這篇文章主要為大家介紹了Immer功能最佳實踐示例教程，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10