關(guān)于reduce的介紹及用法說明
更新時間：2022年07月28日 11:33:41 作者：尼克_張
這篇文章主要介紹了關(guān)于reduce的用法及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
reduce總的來說用的不多，但最近看一些文章上的reduce的用法真的是騷氣，其實(shí)reduce跟常用的map，forEach一樣，也是用于遍歷循環(huán)，只不過它可以設(shè)置初始值，這樣可以大大增強(qiáng)代碼的可讀性。
參數(shù)介紹
array.reduce((pre, cur, index, arr)=>{
...
}, init);pre: 必需。初始值, 或者計算結(jié)束后的返回值。cur： 必需。當(dāng)前元素。index： 可選。當(dāng)前元素的索引。arr： 可選。當(dāng)前元素所屬的數(shù)組對象。init: 可選。傳遞給函數(shù)的初始值，相當(dāng)于pre的初始值。
reduce里面有一定要return，return出去的值也要注意
const b = [1, 2, 3, 4] b.reduce((x, y) => console.log(x, y), 0)
如果有初始值，先取初始值為0，然后取數(shù)組第一個值，再取它們(x,y)的返回值為undefined，然后再取數(shù)組的第二個值，依次類推
舉例說明
1.把數(shù)組合并為一個對象
//正常使用forEach循環(huán)
let arr = [{ a: 1, b: 10 }, { a: 2, b: 20 }, { a: 3, b: 30 }]
let obj = {}
arr.forEach((item, index) => {
Object.keys(item).forEach(each => {
obj[`${each}${index + 1}`] = item[each]
})
})
console.log(obj); //{a1:1,a2:2,a3:3,b1:10,b2:20,b3:30}
//使用reduce遍歷，可以看出區(qū)別在于初始值，以及reduce中必須要return你想要的值
let a = arr.reduce((pre, cur, index) => {
Object.keys(cur).forEach((item) => {
pre[`${item}${index + 1}`] = cur[item]
})
return pre
}, {})
console.log(a); //{a1:1,a2:2,a3:3,b1:10,b2:20,b3:30}2.去重
2.1.基本數(shù)據(jù)類型去重
let arr2 = [9, 4, 3, 6, 9];
//基本類型去重
let set = arr2.reduce((pre, cur) => {
!pre.includes(cur) && pre.push(cur)
return pre
}, [])
console.log(set); //[9,4,3,6]2.2.引用數(shù)據(jù)類型去重
let list = [
{
subject: "數(shù)學(xué)",
marks: 80
},
{
subject: "語文",
marks: 90
},
{
subject: "英語",
marks: 80
},
]
function arrSet(value,arr) {
let obj = {}
let res = arr.reduce((pre, cur) => {
if (!obj[cur[value]]) {
obj[cur[value]] = true
pre.push(cur)
}
return pre
}, [])
return res
}
let result = arrSet("marks",list);
console.log(result); //[{subject:"數(shù)學(xué)",marks:80}，{subject:"語文"：90}]3.求和
3.1.基本數(shù)據(jù)類型求和
let arr2 = [9, 4, 3, 6, 9];
let sum = arr2.reduce((pre, cur) => {
? ? return pre + cur
},0)
console.log(sum) ? //313.2.引用數(shù)據(jù)類型求和
let arr = [
? {
? ? value: 45,
? },
? {
? ? value: 88,
? },
? {
? ? value: 101,
? },
];
let newArr = arr.reduce((pre, cur) => {
? return pre + cur.value;
}, 0);
console.log(newArr); ? //2344.求最大值和最小值
let arr2 = [9, 4, 3, 6, 9];
let max = arr2.reduce((prev, cur)=> {
? ? return Math.max(prev, cur);
})
let min= arr2.reduce((prev, cur)=> {
? ? return Math.min(prev, cur);
})
console.log(max,min); ? //9,35.扁平數(shù)組
5.1 二維數(shù)組轉(zhuǎn)化為一維
let arr = [[1, 2, 8], [3, 4, 9], [5, 6, 10]];
let res = arr.reduce((pre, cur) => {
? ? return pre.concat(cur)
},[]);
console.log(res) ?//[1, 2, 8, 3, 4, 9, 5, 6, 10]5.2 多維數(shù)組轉(zhuǎn)化為一維
let arr = [[1, [2, 8]], [3, 4, 9], [5, [6, 10]]]
function fn(arr) {
? return arr.reduce((pre, cur) => {
? ? return pre.concat(Array.isArray(cur) ? fn(cur) : cur);
? }, []);
}
const newArr = fn(arr);
console.log(newArr); //[1, 2, 8, 3, 4, 9, 5, 6, 10]6.求字符串中各個字符出現(xiàn)的次數(shù)
const str = 'jordanbryantjamescurrydurant';
const res1 = str.split('').reduce((pre, cur) => {
pre[cur] ? pre[cur]++ : pre[cur] = 1;
return pre;
}, {});
console.log(res1); //{j:2,o:1,r:5,d:2,...}
let arr = []
let num = Math.max(...new Set(Object.values(res1)))
let value;
for (let keys in res1) {
if (res1[keys] == num) {
value = keys
break
}
}
console.log(`出現(xiàn)最多的字母為${value},出現(xiàn)的次數(shù)為${num}次`); //出現(xiàn)最多的字母為r,出現(xiàn)的次數(shù)為5次以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
![JS 操作符整理[推薦收藏]](http://img.jbzj.com/images/xgimg/bcimg0.png)
JS 操作符主要包括算術(shù)運(yùn)算符,賦值運(yùn)算符,比較（關(guān)系）運(yùn)算符,邏輯運(yùn)算符,串符（連接作用）,條件運(yùn)算符等2011-11-11
<script defer> defer 是什么意思
好多朋友不知道 script后面加個defer是什么意思有什么作用。2009-05-05
javascript模塊化是什么及其優(yōu)缺點(diǎn)介紹
模塊化是一種將系統(tǒng)分離成獨(dú)立功能部分的方法，可將系統(tǒng)分割成獨(dú)立的功能部分，嚴(yán)格定義模塊接口、模塊間具有透明性2013-09-09
溫故知新——JavaScript中的字符串連接問題最全總結(jié)（推薦）
這篇文章主要介紹了JS中的字符串連接問題，ECMAScript 中最常見的一個問題是字符串連接的性能。在調(diào)用 join() 方法時才會發(fā)生連接操作，具體操作步驟大家可查看下文的詳細(xì)講解，感興趣的小伙伴們可以參考一下。2017-08-08
這篇文章主要介紹了JavaScript的DOM基礎(chǔ)知識,需要的朋友可以參考下2015-04-04
2008-01-01
Javascript 實(shí)現(xiàn)簡單計算器實(shí)例代碼
這篇文章主要介紹了Javascript 實(shí)現(xiàn)簡單計算器實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下
2016-10-10 
下面的方法是常用的向html頁面中輸入值，一般是將要輸出的內(nèi)容放到別的js文件中，調(diào)用。這里只是測試。
2008-11-11 
Javascript & DHTML 實(shí)例編程（教程）（四）初級實(shí)例篇2—動畫
Javascript & DHTML 實(shí)例編程（教程）（四）初級實(shí)例篇2—動畫...
2007-06-06