關(guān)于reduce的介紹及用法說明
reduce總的來說用的不多,但最近看一些文章上的reduce的用法真的是騷氣,其實(shí)reduce跟常用的map,forEach一樣,也是用于遍歷循環(huán),只不過它可以設(shè)置初始值,這樣可以大大增強(qiáng)代碼的可讀性。
參數(shù)介紹
array.reduce((pre, cur, index, arr)=>{ ... }, init);
pre
: 必需。初始值, 或者計(jì)算結(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) ? //31
3.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); ? //234
4.求最大值和最小值
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,3
5.扁平數(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)文章
定義JavaScript二維數(shù)組采用定義數(shù)組的數(shù)組來實(shí)現(xiàn)
javaScript沒有提供直接定義二維數(shù)組的方法,但可以使用定義數(shù)組的數(shù)組來定義JavaScript二維數(shù)組,需要的朋友可以了解下2012-12-12javascript學(xué)習(xí)筆記(九)javascript中的原型(prototype)及原型鏈的繼承方式
在javascript學(xué)習(xí)筆記(八)中,我們主要學(xué)習(xí)了在使用javascript面向?qū)ο缶幊虝r,如何創(chuàng)建對象及添加對象的屬性和方法。2011-04-04javascript學(xué)習(xí)筆記(十) js對象 繼承
javascript學(xué)習(xí)筆記之js對象 繼承介紹,需要的朋友可以參考下2012-06-06ECMAScript 5嚴(yán)格模式(Strict Mode)介紹
這篇文章主要介紹了ECMAScript 5嚴(yán)格模式(Strict Mode)介紹,本文講解了如何啟用嚴(yán)格模式、啟用嚴(yán)格模式后對變量和屬性、函數(shù)、with語句的影響,需要的朋友可以參考下2015-03-03

javascript函數(shù)中的arguments參數(shù)

從未有過的JavaScript運(yùn)算符詳細(xì)解釋