JavascriptES6新特性之map和reduce詳解
說明
ES6中,數組新增瞭map和reduce方法。
1.map()
map() :接收一個函數,將原數組中的所有元素用這個函數處理後放入新數組返回。
代碼示例:
有一個字符串數組,我們希望轉為int數組
let arr = ['1', '20', '-5', '3']; console.log(arr) //傳統寫法 let newArr = arr.map(function(s) { return parseInt(s); }); console.log(newArr); //輸出[1,20,-5,3] //箭頭函數 let newArr2 = arr.map(s => parseInt(s)); console.log(newArr2) //輸出[1,20,-5,3]
2.reduce()
reduce() :接收一個函數(必須)和一個初始值(可選),該函數接收兩個參數。下面我們詳細的來看一下:
函數原型:
reduce(callback, initialValue)
函數參數:
callback
是上一次reduce處理的結果:
callback
四個參數分別是: 上一次結果值、當前元素、當前索引、原數組
initialValue
是數組中要處理的下一個元素
函數作用機制:
reduce() 會從左到右依次把數組中的元素用reduce處理,並把處理的結果作為下次reduce 的第一個參數。如果是第一次,會把前兩個元素作為計算參數,或者把用戶指定的初始值作為起始參數。
代碼示例:
let arr = ['1', '20', '-5', '3'] arr = arr.map(item => item*2); console.log(arr); let result = arr.reduce((a, b) => { console.log('上一次計算結果值: '+a); console.log('當前數值: '+b); console.log('當前return的值(a+b):'+(a+b)); return a+b; }, 100); console.log(result);
綜合案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ES6新特性學習-(9)-擴展運算符</title> </head> <body> <script> //ES6中,數組新增瞭map和reduce方法。 //1.map() :接收一個函數,將原數組中的所有元素用這個函數處理後放入新數組返回。 //舉例:有一個字符串數組,我們希望轉為int數組 let arr = ['1', '20', '-5', '3']; console.log(arr) //傳統寫法 let newArr = arr.map(function(s) { return parseInt(s); }); console.log(newArr); //輸出[1,20,-5,3] //箭頭函數 let newArr2 = arr.map(s => parseInt(s)); console.log(newArr2) //輸出[1,20,-5,3] // 2.reduce() :接收一個函數(必須)和一個初始值(可選),該函數接收兩個參數: const arr = [1, 20, -5, 3] //此時a=1,b=20開始從左往右循環處理 let result1 = arr.reduce((a, b) => { return a + b; }); console.log(result1); //輸出 19 //當有初始值傳入的時候, a=1,b=1,開始從左往右循環處理 let result2 = arr.reduce((a, b) => { return a + b; }, 1) console.log(result2); //輸出 20 </script> </body> </html>
總結
本篇文章就到這裡瞭,希望能夠給你帶來幫助,也希望您能夠多多關註WalkonNet的更多內容!
推薦閱讀:
- Python全棧之學習JS(1)
- AJAX實現指定部分頁面刷新效果
- JavaScript事件概念詳解(區分靜態註冊和動態註冊)
- JavaScript獲取字符串實際長度(包含中英文)
- web項目開發之JS函數防抖與節流示例代碼