JavaScript reduce和reduceRight詳解
reduce 方法(升序)
語法:
array1.reduce(callbackfn[, initialValue])
|
參數(shù) |
定義 |
|---|---|
|
array1 |
必需。一個數(shù)組對象。 |
|
callbackfn |
必需。一個接受最多四個參數(shù)的函數(shù)。對于數(shù)組中的每個元素,reduce 方法都會調(diào)用 callbackfn 函數(shù)一次。 |
|
initialValue |
可選。如果指定 initialValue,則它將用作初始值來啟動累積。第一次調(diào)用 callbackfn 函數(shù)會將此值作為參數(shù)而非數(shù)組值提供 |
返回值:
通過最后一次調(diào)用回調(diào)函數(shù)獲得的累積結(jié)果。
異常:
當滿足下列任一條件時,將引發(fā) TypeError 異常:
- callbackfn 參數(shù)不是函數(shù)對象。
- 數(shù)組不包含元素,且未提供 initialValue。
回調(diào)函數(shù)語法:
function callbackfn(previousValue, currentValue, currentIndex, array1)
可使用最多四個參數(shù)來聲明回調(diào)函數(shù)。
下表列出了回調(diào)函數(shù)參數(shù)。
|
回調(diào)參數(shù) |
定義 |
|---|---|
|
previousValue |
通過上一次調(diào)用回調(diào)函數(shù)獲得的值。如果向 reduce 方法提供 initialValue,則在首次調(diào)用函數(shù)時,previousValue 為 initialValue。 |
|
currentValue |
當前數(shù)組元素的值。 |
|
currentIndex |
當前數(shù)組元素的數(shù)字索引。 |
|
array1 |
包含該元素的數(shù)組對象。 |
第一次調(diào)用回調(diào)函數(shù)
在第一次調(diào)用回調(diào)函數(shù)時,作為參數(shù)提供的值取決于 reduce 方法是否具有 initialValue 參數(shù)。
如果向 reduce 方法提供 initialValue:
previousValue 參數(shù)為 initialValue。
currentValue 參數(shù)是數(shù)組中的第一個元素的值。
如果未提供 initialValue:
previousValue 參數(shù)是數(shù)組中的第一個元素的值。
currentValue 參數(shù)是數(shù)組中的第二個元素的值。
修改數(shù)組對象
數(shù)組對象可由回調(diào)函數(shù)修改。
下表描述了在 reduce 方法啟動后修改數(shù)組對象所獲得的結(jié)果。
|
reduce 方法啟動后的條件 |
元素是否傳遞給回調(diào)函數(shù) |
|---|---|
|
在數(shù)組的原始長度之外添加元素。 |
否。 |
|
添加元素以填充數(shù)組中缺少的元素。 |
是,如果該索引尚未傳遞給回調(diào)函數(shù)。 |
|
元素被更改。 |
是,如果該元素尚未傳遞給回調(diào)函數(shù)。 |
|
從數(shù)組中刪除元素。 |
否,除非該元素已傳遞給回調(diào)函數(shù)。 |
實例:
1.下面的示例將數(shù)組值連接成字符串,各個值用“::”分隔開。由于未向 reduce 方法提供初始值,第一次調(diào)用回調(diào)函數(shù)時會將“abc”作為 previousValue 參數(shù)并將“def”作為 currentValue 參數(shù)。
function appendCurrent (previousValue, currentValue) {
return previousValue + "::" + currentValue;
}
var elements = ["abc", "def", 123, 456];
var result = elements.reduce(appendCurrent);
document.write(result);
// Output:
// abc::def::123::456
2.下面的示例向數(shù)組添加舍入后的值。使用初始值 0 調(diào)用 reduce 方法。
function addRounded (previousValue, currentValue) {
return previousValue + Math.round(currentValue);
}
var numbers = [10.9, 15.4, 0.5];
var result = numbers.reduce(addRounded, 0);
document.write (result);
// Output: 27
3.下面的示例向數(shù)組中添加值。 currentIndex 和 array1 參數(shù)用于回調(diào)函數(shù)
function addDigitValue(previousValue, currentDigit, currentIndex, array) {
var exponent = (array.length - 1) - currentIndex;
var digitValue = currentDigit * Math.pow(10, exponent);
return previousValue + digitValue;
}
var digits = [4, 1, 2, 5];
var result = digits.reduce(addDigitValue, 0);
document.write (result);
// Output: 4125
此題分析:
首先賦予了初始值0,那么currentDigit就是從4開始的,調(diào)用方法四次,這樣可以把四次方法調(diào)用的參數(shù)都寫出來:(0,4,0,array)、(4,1,1,array)、(1,2,2,array)、(2,5,3,array),再一次進行計算,由于初始值是0,所有只需要計算出每個方法的返回值最后相加即可。array.length始終為4,則四次計算的值分別為4000+100+20+5=4125
reduceRight 方法(降序)
reduceRight的語法以及回調(diào)函數(shù)的規(guī)則和reduce方法是一樣的,區(qū)別就是在與reduce是升序,即角標從0開始,而reduceRight是降序,即角標從arr.length-1開始。如果有初始值,則從最后一個數(shù)開始計算,如果沒有初始值,則previousValue參數(shù)是數(shù)組中最后一個元素的值,currentValue是數(shù)組中倒數(shù)第二個元素的值。
示例:
1.下面的示例獲取數(shù)組中值為 1 到 10 之間的元素。提供給 reduceRight 方法的初始值是一個空數(shù)組。
function Process2(previousArray, currentValue) {
var nextArray;
if (currentValue >= 1 && currentValue <= 10)
nextArray = previousArray.concat(currentValue);
else
nextArray = previousArray;
return nextArray;
}
var numbers = [20, 1, -5, 6, 50, 3];
var emptyArray = new Array();
var resultArray = numbers.reduceRight(Process2, emptyArray);
document.write("result array=" + resultArray);
// Output:
// result array=3,6,1
2.reduceRight 方法可應用于字符串。下面的示例演示如何使用此方法反轉(zhuǎn)字符串中的字符。
function AppendToArray(previousValue, currentValue) {
return previousValue + currentValue;
}
var word = "retupmoc";
var result = [].reduceRight.call(word, AppendToArray, "the ");
// var result = Array.prototype.reduceRight.call(word, AppendToArray, "the ");
document.write(result);
// Output:
// the computer
這里可以直接使用空數(shù)組調(diào)用reduceRight方法,并且使用call方法將參數(shù)引入。也可以是直接使用原型鏈的方式進行調(diào)用,即Array.prototype.reduceRight.call(word, AppendToArray, "the ");
感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持!
相關(guān)文章
JS 實現(xiàn)10進制轉(zhuǎn)換36進制的示例代碼
這篇文章主要介紹了JS實現(xiàn)10進制轉(zhuǎn)換36進制,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2021-04-04
javascript實現(xiàn)狀態(tài)欄文字首尾相接循環(huán)滾動的方法
這篇文章主要介紹了javascript實現(xiàn)狀態(tài)欄文字首尾相接循環(huán)滾動的方法,實例分析了javascript定時函數(shù)及頁面元素屬性操作的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07
解決input輸入框僅支持輸入數(shù)字及兩位小數(shù)點的限制
這篇文章主要為大家介紹了解決input輸入框僅支持輸入數(shù)字及兩位小數(shù)點的限制技巧示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-11-11
js實現(xiàn)單層數(shù)組轉(zhuǎn)多層樹
這篇文章主要介紹了js實現(xiàn)單層數(shù)組轉(zhuǎn)多層樹方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-06-06

