JavaScript中reduce方法的用法及使用場景
更新時間：2023年08月28日 10:30:00 作者：編程三昧
reduce()方法對數(shù)組中的每個元素按序執(zhí)行一個提供的reducer函數(shù),每一次運行 reducer會將先前元素的計算結(jié)果作為參數(shù)傳入,最后將其結(jié)果匯總為單個返回值,今天我們就介紹一下reduce的幾種簡單使用場景,需要的朋友可以參考下
求數(shù)組的累計值
簡單數(shù)組的累計值獲?。?/p>
const arr = [12, 3, 7, 34, 6, 22, 15]; const total = arr.reduce((acc, cur) => acc + cur, 0); console.log(total); // 99
復(fù)雜數(shù)組的累計值獲?。?/p>
const people = [
{ name: "Alice", age: 21 },
{ name: "Max", age: 20 },
{ name: "Jane", age: 20 }
];
const ages = people.reduce((acc, cur) => acc + cur.age, 0);
console.log(ages); // 61按屬性對對象進(jìn)行分組
假設(shè)有以下數(shù)組：
const people = [
{ name: "Alice", age: 21 },
{ name: "Max", age: 20 },
{ name: "Jane", age: 20 }
];現(xiàn)要求根據(jù)年齡值將上面的數(shù)組換換為對象，返回格式為 年齡值:obj。使用 reduce 的實現(xiàn)代碼如下：
const ageGroups = people.reduce((acc, cur) => {
const age = cur.age;
if (!acc[age]) {
acc[age] = [];
}
acc[age].push(cur.name);
return acc;
}, {});
console.log(ageGroups);
// {
// 20: ["Max", "Jane"],
// 21: ["Alice"]
// }展開嵌套數(shù)組
我們可以利用 reduce 會累積的特性，逐層展開嵌套數(shù)組：
const arr = [
[0, 1],
[2, 3],
[4, 5, 6,7]
];
const flattenArr = arr.reduce((acc, cur) => acc.concat(cur), []);
console.log(flattenArr);
// [0, 1, 2, 3, 4, 5, 6, 7]到此這篇關(guān)于JavaScript中reduce方法的用法及使用場景的文章就介紹到這了,更多相關(guān)JavaScript reduce方法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
下面小編就為大家?guī)硪黄猨s控制一個按鈕是否可點擊(可使用)disabled的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
最近想實現(xiàn)一個uniapp取色器組件,實現(xiàn)后發(fā)現(xiàn)效果還不錯,下面這篇文章主要給大家介紹了關(guān)于uni-app低成本封裝一個取色器組件的相關(guān)資料,文中通過圖文介紹的介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
javascript 控制超級鏈接的樣式代碼...2007-08-08
這篇文章主要介紹了JS如何根據(jù)當(dāng)前日期獲取一周所有日期,文中通過實例代碼補充介紹了js獲取當(dāng)前一周的時間,代碼簡單易懂,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-09-09
作為瀏覽器腳本語言，如果JavaScript不是單線程，那么就有點棘手了。比如，與用戶交互或者對DOM進(jìn)行操作時，在一個線程上修改某個DOM，另外的線程刪除DOM，這時瀏覽器該如何抉擇呢?2021-05-05
這篇文章主要介紹了nuxt中使用路由守衛(wèi)的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-01-01
javascript 獲取網(wǎng)頁標(biāo)題代碼實例
這篇文章主要介紹了javascript 獲取網(wǎng)頁標(biāo)題代碼實例，有需要的朋友可以參考一下2014-01-01
JS獲取后臺Cookies值的小例子，需要的朋友可以參考一下2013-03-03
柯里化是將接受多個參數(shù)的函數(shù)轉(zhuǎn)換成一系列只接受單個參數(shù)的函數(shù)的過程，而反柯里化是將柯里化函數(shù)轉(zhuǎn)換成接受多個參數(shù)的函數(shù)的過程，本文將帶大家理解 js 中的柯里化與反柯里化,需要的朋友可以參考下2023-07-07
escape()、encodeURI()、encodeURIComponent()三種方法都能對一些影響URL完整性的特殊字符進(jìn)行過濾。2010-11-11