JavaScript數(shù)組reduce常見(jiàn)實(shí)例方法
更新時(shí)間：2022年05月18日 14:56:22 作者：沉靜地閃光
reduce方法在數(shù)組的每個(gè)元素上執(zhí)行用戶提供的回調(diào)函數(shù),即"reducer",它傳入對(duì)前一個(gè)元素進(jìn)行計(jì)算的返回值,結(jié)果是單個(gè)值,它是在數(shù)組的所有元素上運(yùn)行reducer的結(jié)果,下面這篇文章主要給大家介紹了關(guān)于JavaScript數(shù)組reduce常見(jiàn)實(shí)例方法的相關(guān)資料,需要的朋友可以參考下
前言
對(duì)比map、 forEach、 filter 等數(shù)組方法，reduce比它們更強(qiáng)。
一、 reduce定義和用法
reduce() 方法接收一個(gè)函數(shù)作為累加器，數(shù)組中的每個(gè)值（從左到右）開始縮減，最終計(jì)算為一個(gè)值。
reduce() 可以作為一個(gè)高階函數(shù)，用于函數(shù)的 compose。
注意: reduce() 對(duì)于空數(shù)組是不會(huì)執(zhí)行回調(diào)函數(shù)的。
語(yǔ)法：
array.reduce(function(prev, cur, index, arr), init)
- prev （上一次調(diào)用回調(diào)返回的值，或者是提供的初始值（initialValue））
- cur （數(shù)組中當(dāng)前被處理的元素）
- index （當(dāng)前元素在數(shù)組中的索引)
- arr （調(diào)用的數(shù)組）
- init （傳遞給函數(shù)的初始值）
二、reduce瀏覽器支持情況
三、reduce累加
帶初始值
var arr = [1,2,3,4]
var sum = arr.reduce((pre, item) => {
return pre + item
}, 10)
console.log(sum) // 20不帶初始值
var arr = [1,2,3,4]
var sum = arr.reduce((pre, item) => {
return pre + item
},)
console.log(sum) // 10四、reduce數(shù)組去重
var arr = [1,2,3,3,2,1,4]
arr.reduce((acc, cur) => {
if (!(acc.includes(cur))) {
acc.push(cur)
}
return acc
}, [])
// [1, 2, 3, 4]五、reduce求數(shù)組項(xiàng)最大值
var arr = [1, 2, 3, 4];
arr.reduce((prev, cur) => {
return Math.max(prev,cur);
});
//4六、reduce將二維數(shù)組轉(zhuǎn)為一維數(shù)組
var arr = [[1,2], [3,4], [5,6]]
arr.reduce((acc, cur) => {
return acc.concat(cur)
}, [])
// [1,2,3,4,5,6]七、reduce對(duì)象里的屬性求和
var arr = [
{subject: 'Math', score: 90},
{subject: 'Chinese', score: 90},
{subject: 'English', score: 100}
]
arr.reduce((pre, cur) => {
return cur.score + pre
}, 0)
//280八、reduce計(jì)算數(shù)組中每個(gè)元素出現(xiàn)的個(gè)數(shù)
var arr = [1, 2,3,3,2,1,2,1]
arr.reduce((acc, cur) => {
if (!(cur in acc)) {
acc[cur] = 1
} else {
acc[cur] += 1
}
return acc
}, {})
//{1: 3, 2: 3, 3: 2}九、reduce按屬性給數(shù)組分類
var arr = [
{subject: 'Math', score: 90},
{subject: 'Chinese', score: 90},
{subject: 'English', score: 100},
{subject: 'Math', score: 80},
{subject: 'Chinese', score: 95}
];
arr.reduce((acc, cur) => {
if (!acc[cur.type]) {
acc[cur.type] = [];
}
acc[cur.type].push(cur)
return acc
}, {})
十、reduce實(shí)現(xiàn)map
var arr = [1, 2, 3, 4]
Array.prototype.reduceMap = function(callback) {
return this.reduce((acc, cur, index, array) => {
const item = callback(cur, index, array)
acc.push(item)
return acc
}, [])
}
arr.reduceMap((item, index) => {
return item + index
})
// [1, 3, 5, 7]十一、reduce實(shí)現(xiàn)forEach
var arr = [1, 2, 3, 4]
Array.prototype.reduceForEach = function(callback) {
this.reduce((acc, cur, index, array) => {
callback(cur, index, array)
}, [])
}
arr.reduceForEach((item, index, array) => {
console.log(item, index)
})
// 1234
// 0123十二、reduce實(shí)現(xiàn)filter
var arr = [1, 2, 3, 4]
Array.prototype.reduceFilter = function (callback) {
return this.reduce((acc, cur, index, array) => {
if (callback(cur, index, array)) {
acc.push(cur)
}
return acc
}, [])
}
arr.reduceFilter(item => item % 2 == 0) // 過(guò)濾出偶數(shù)項(xiàng)。
// [2, 4]十三、reduce實(shí)現(xiàn)find
var arr = [1, 2, 3, 4]
var obj = [{ a: 1 }, { a: 2 }, { a: 3 }, { a: 4 }]
Array.prototype.reduceFind = function (callback) {
return this.reduce((acc, cur, index, array) => {
if (callback(cur, index, array)) {
if (acc instanceof Array && acc.length == 0) {
acc = cur
}
}
if ((index == array.length - 1) && acc instanceof Array && acc.length == 0) {
acc = undefined
}
return acc
}, [])
}
arr.reduceFind(item => item % 2 == 0) // 2
obj.reduceFind(item => item.a % 2 == 0) // {a: 2}
obj.reduceFind(item => item.a % 9 == 0) // undefined碰到數(shù)組復(fù)雜操作的時(shí)候，就是reduce大顯身手的時(shí)候。深入研究reduce的用法，對(duì)開發(fā)大有裨益。
總結(jié)
到此這篇關(guān)于JavaScript數(shù)組reduce常見(jiàn)實(shí)例的文章就介紹到這了,更多相關(guān)js數(shù)組reduce實(shí)例內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
下面小編就為大家?guī)?lái)一篇JS中的forEach、$.each、map方法推薦。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-04-04
JavaScript實(shí)現(xiàn)簡(jiǎn)單的計(jì)算器功能
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)單的計(jì)算器功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-03-03
JavaScript判斷數(shù)組的方法總結(jié)與推薦
這篇文章主要給大家介紹了關(guān)于JavaScript判斷數(shù)組方法的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-02-02
關(guān)于JavaScript中的this指向問(wèn)題總結(jié)篇
在小編面試過(guò)程中經(jīng)常會(huì)遇到j(luò)avascript中this指向問(wèn)題，可以說(shuō)是前端面試必問(wèn)，下面小編給大家總結(jié)了一下js中this的指向，感興趣的朋友一起學(xué)習(xí)吧2017-07-07
這篇文章主要介紹了JS模擬并美化的表單控件實(shí)現(xiàn)方法,涉及javascript結(jié)合css樣式美化表單的功能,非常美觀實(shí)用,需要的朋友可以參考下2015-08-08
JS計(jì)算兩個(gè)數(shù)組的交集、差集、并集、補(bǔ)集（多種實(shí)現(xiàn)方式）
本文通過(guò)多種實(shí)現(xiàn)方式給大家介紹了JS計(jì)算兩個(gè)數(shù)組的交集、差集、并集、補(bǔ)集 的相關(guān)知識(shí)，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05
Html和JS字符串中間加空格的簡(jiǎn)單實(shí)例
最近遇到了個(gè)需求,需要在字符串的中間加上一兩個(gè)字符串,所以下面這篇文章主要給大家介紹了關(guān)于Html和JS字符串中間加空格的相關(guān)資料,文中介紹的挺詳細(xì),需要的朋友可以參考下2023-02-02
在 TypeScript 中，有兩種主要的定義自定義類型的方式，接口和類型，盡管它們?cè)谕庥^上可能相似，但它們之間有一些關(guān)鍵的區(qū)別，本文就詳細(xì)的介紹一下，感興趣的可以了解下2023-05-05
這篇文章主要介紹了JS?Date時(shí)間格式化的方法,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-01-01
關(guān)于Webpack dev server熱加載失敗的解決方法
下面小編就為大家分享一篇關(guān)于Webpack dev server熱加載失敗的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02