版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請進行舉報或認領(lǐng)
文檔簡介
第JavaScript數(shù)組reduce()方法的語法與實例解析reduce()方法接收一個函數(shù)作為累加器(accumulator),數(shù)組中的每個值(從左到右)開始縮減,最終為一個值。
reduce為數(shù)組中的每一個元素依次執(zhí)行回調(diào)函數(shù),不包括數(shù)組中被刪除或從未被賦值的元素,接受四個參數(shù):初始值(或者上一次回調(diào)函數(shù)的返回值),當前元素值,當前索引,調(diào)用reduce的數(shù)組。
Javascript數(shù)組方法中,相比map、filter、forEach等常用的迭代方法,reduce常常被我們所忽略,今天一起來探究一下reduce在我們實戰(zhàn)開發(fā)當中,能有哪些妙用之處,下面從reduce語法開始介紹。
array.reduce(function(prev,cur,index,arr),initialValue)
//簡寫方便解釋
arr.reduce(callback,[initialValue])
參數(shù)含義:
callback(執(zhí)行數(shù)組中每個值的函數(shù),包含四個參數(shù))
1、previousValue(上一次調(diào)用回調(diào)返回的值,或者是提供的初始值(initialValue))
2、currentValue(數(shù)組中當前被處理的元素)
3、index(當前元素在數(shù)組中的索引)
4、array(調(diào)用reduce的數(shù)組)
initialValue(作為第一次調(diào)用callback的第一個參數(shù)。)類似相當于設置初始值
2、實例解析initialValue參數(shù)
先看第一個例子:
vararr=[1,2,3,4];
varsum=arr.reduce(function(prev,cur,index,arr){
console.log(prev,cur,index);
returnprev+cur;
console.log(arr,sum);
//打印結(jié)果:
//121
//332
//643
//[1,2,3,4]10
這里可以看出,上面的例子index是從1開始的,第一次的prev的值是數(shù)組的第一個值。數(shù)組長度是4,但是reduce函數(shù)循環(huán)3次。
再看第二個例子:
vararr=[1,2,3,4];
varsum=arr.reduce(function(prev,cur,index,arr){
console.log(prev,cur,index);
returnprev+cur;
},0)//注意這里設置了初始值
console.log(arr,sum);
//打印結(jié)果:
//010
//121
//332
//643
//[1,2,3,4]10
這個例子index是從0開始的,第一次的prev的值是我們設置的初始值0,數(shù)組長度是4,reduce函數(shù)循環(huán)4次。
結(jié)論:如果沒有提供initialValue,reduce會從索引1的地方開始執(zhí)行callback方法,跳過第一個索引。如果提供initialValue,從索引0開始。
注意:如果這個數(shù)組為空,運用reduce是什么情況?
vararr=[];
varsum=arr.reduce(function(prev,cur,index,arr){
console.log(prev,cur,index);
returnprev+cur;
//報錯,"TypeError:Reduceofemptyarraywithnoinitialvalue"
但是要是我們設置了初始值就不會報錯,如下:
vararr=[];
varsum=arr.reduce(function(prev,cur,index,arr){
console.log(prev,cur,index);
returnprev+cur;
console.log(arr,sum);//[]0
所以一般來說我們提供初始值通常更安全
3、reduce的簡單用法
當然最簡單的就是我們常用的數(shù)組求和,求乘積了。
vararr=[1,2,3,4];
varsum=arr.reduce((x,y)=x+y)
varmul=arr.reduce((x,y)=x*y)
console.log(sum);//求和,10
console.log(mul);//求乘積,24
4、reduce的高級用法
(1)計算數(shù)組中每個元素出現(xiàn)的次數(shù)
letnames=['Alice','Bob','Tiff','Bruce','Alice'];
letnameNum=names.reduce((pre,cur)={
if(curinpre){
pre[cur]++
}else{
pre[cur]=1
returnpre
},{})
console.log(nameNum);//{Alice:2,Bob:1,Tiff:1,Bruce:1}
(2)數(shù)組去重
letarr=[1,2,3,4,4,1]
letnewArr=arr.reduce((pre,cur)={
if(!pre.includes(cur)){
returnpre.concat(cur)
}else{
returnpre
},[])
console.log(newArr);//[1,2,3,4]
(3)將二維數(shù)組轉(zhuǎn)化為一維
letarr=[[0,1],[2,3],[4,5]]
letnewArr=arr.reduce((pre,cur)={
returnpre.concat(cur)
},[])
console.log(newArr);//[0,1,2,3,4,5]
(3)將多維數(shù)組轉(zhuǎn)化為一維
letarr=[[0,1],[2,3],[4,[5,6,7]]]
constnewArr=function(arr){
returnarr.reduce((pre,cur)=pre.concat(Array.isArray(cur)newArr(cur):cur),[])
console.log(newArr(arr));//[0,1,2,3,4,5,6,7]
(4)對象里的屬性求和
varresult=[
subject:'math',
score:10
subject:'chinese'
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會有圖紙預覽,若沒有圖紙預覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間,僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負責。
- 6. 下載文件中如有侵權(quán)或不適當內(nèi)容,請與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 2026年【就業(yè)】上海市第一社會福利院招聘養(yǎng)老護理員備考題庫及參考答案詳解1套
- 2026年九江市專業(yè)森林消防支隊(九江市綜合應急救援支隊)招聘10人備考題庫完整答案詳解
- 2026年中鐵工程設計咨詢集團有限公司社會招聘備考題庫及答案詳解一套
- 2026年中交海峰風電發(fā)展股份有限公司招聘備考題庫帶答案詳解
- 2026年中國特種飛行器研究所招聘備考題庫及一套完整答案詳解
- 2026年平果市協(xié)力初級中學教師招聘備考題庫及參考答案詳解
- 2026年關(guān)于龍江縣第一人民醫(yī)院公開招聘編外醫(yī)生的備考題庫及參考答案詳解
- 2026年南海區(qū)大瀝鎮(zhèn)漖表小學臨聘教師招聘備考題庫及答案詳解一套
- 2026年賓陽縣祥盛人力資源管理有限公司招聘備考題庫及參考答案詳解一套
- 2026年中電建生態(tài)環(huán)境集團有限公司招聘備考題庫含答案詳解
- 2021年云南公務員考試行測試題及答案
- 如何撰寫優(yōu)秀的歷史教學設計
- GB/Z 42217-2022醫(yī)療器械用于醫(yī)療器械質(zhì)量體系軟件的確認
- 2021高考語文核按鈕電子版(教師用書)
- GM/T 0109-2021基于云計算的電子簽名服務技術(shù)要求
- GB/T 20308-2020產(chǎn)品幾何技術(shù)規(guī)范(GPS)矩陣模型
- 承運商質(zhì)量體系調(diào)查表
- 高等工程流體力學課件
- 教育心理學電子書
- 發(fā)電部副職、巡檢六月第二期考試(集控)
- 施工電梯通道方案
評論
0/150
提交評論