您好,登錄后才能下訂單哦!
本文小編為大家詳細介紹“Javascript中怎么使用ES6的map和reduce”,內容詳細,步驟清晰,細節處理妥當,希望這篇“Javascript中怎么使用ES6的map和reduce”文章能幫助大家解決疑惑,下面跟著小編的思路慢慢深入,一起來學習新知識吧。
ES6中,數組新增了map和reduce方法。
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]
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>
讀到這里,這篇“Javascript中怎么使用ES6的map和reduce”文章已經介紹完畢,想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會,如果想了解更多相關內容的文章,歡迎關注億速云行業資訊頻道。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。