JavaScript中reduce方法的用法及使用場景
更新時(shí)間：2023年08月28日 10:30:00 作者：編程三昧
reduce()方法對數(shù)組中的每個(gè)元素按序執(zhí)行一個(gè)提供的reducer函數(shù),每一次運(yùn)行 reducer會將先前元素的計(jì)算結(jié)果作為參數(shù)傳入,最后將其結(jié)果匯總為單個(gè)返回值,今天我們就介紹一下reduce的幾種簡單使用場景,需要的朋友可以參考下
求數(shù)組的累計(jì)值
簡單數(shù)組的累計(jì)值獲取：
const arr = [12, 3, 7, 34, 6, 22, 15]; const total = arr.reduce((acc, cur) => acc + cur, 0); console.log(total); // 99
復(fù)雜數(shù)組的累計(jì)值獲?。?/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 的實(shí)現(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)文章
JavaScript 短路運(yùn)算的實(shí)現(xiàn)
本文主要介紹了JavaScript 短路運(yùn)算的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
有時(shí)候我們需要?jiǎng)討B(tài)的加入適合的js，因?yàn)橛袝r(shí)候不需要將所有的js都加載進(jìn)來，以來提高效率，但這種方法比較適合單個(gè)js文件比較大的情況2009-05-05
這篇文章主要為大家詳細(xì)介紹了JS表格組件神器bootstrap table使用指南，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04
這篇文章主要介紹了微信小程序制作扭蛋機(jī)代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09
layui中使用jquery控制radio選中事件的示例代碼
今天小編就為大家分享一篇layui中使用jquery控制radio選中事件的示例代碼，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
JS中for,for...in,for...of和forEach的區(qū)別和用法實(shí)例
JS遍歷數(shù)組（循環(huán)數(shù)組）的方式有多種,可以使用傳統(tǒng)的for循環(huán),也可以使用升級版的for in循環(huán),還可以使用Array類型的forEach() 方法,這篇文章主要給大家介紹了關(guān)于JS中for、for...in、for...of和forEach的區(qū)別和用法的相關(guān)資料,需要的朋友可以參考下2021-11-11
這篇文章主要介紹了小程序分享模塊超級詳解(推薦)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
webpack打包時(shí)如何修改文件名的實(shí)現(xiàn)示例
本文主要介紹了webpack打包時(shí)如何修改文件名的實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)字體背景跑馬燈，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-01-01
風(fēng)吟的小型JavaScirpt庫 (FY.JS).
此庫非常的迷你壓縮之后只有1.54KB.但是卻有類似jquery的語法有COOKIE操作還有DOM以及AJAX跟綁定事件函數(shù).2010-03-03