JavaScript reduce的基本用法詳解
reduce的基本定義
個人理解： 根據(jù)數(shù)組reduce的定義來說：
1.從數(shù)組第一個元素開始遍歷，逐漸遍歷到最后一項
2.reduce 接受兩個參數(shù)，一個回調函數(shù)，一個初始值,如果不給Reduce初始值他會默認從第一個元素開始。
3.reduce的回調函數(shù)接受四個參數(shù)
Accumulator(acc)累加器，
Curent Value(cur)當前值，
Current Index(idx) 當前索引，
Sourc Array(src)元素組。
其中必須要傳兩個參數(shù)。累加器 跟 當前值?。?！
基本用法
計算數(shù)組里面所有值的和！
1.這個給了reduce兩個參數(shù)，他回調函數(shù)中的方法，就是累加器 acc 加 current
2.他的默認值就是0，他的累加器就是0，然后從零開始相加(根據(jù)回調函數(shù)的方法)
3.Reduce遍歷數(shù)組中每個元素，每遍歷一個元素就會自動調用一次回調函數(shù)。
4.最后的結果就是:6
var sum = [0, 1, 2, 3].reduce(function (accumulator, currentValue) {
return accumulator + currentValue;
}, 0);
累加對象數(shù)組里的值！
1.如果不給這個數(shù)初始值，他就會數(shù)組中的一個元素當做累加器。
2.然后reduce開始遍歷，并且調用回調函數(shù)，開始 x:1 + 2 +3
//var initialValue = 0;
var sum = [{x: 1}, {x:2}, {x:3}].reduce(function (accumulator, currentValue) {
return accumulator + currentValue.x;
})
console.log(sum)
3. 給他初始值0，最后的輸出結果就沒有問題
var initialValue = 0;
var sum = [{x: 1}, {x:2}, {x:3}].reduce(function (accumulator, currentValue) {
return accumulator + currentValue.x;
},initialValue)
console.log(sum) // logs 6
將二維數(shù)組轉換為一維數(shù)組!
1.初始值默認值 設置為 一個空數(shù)組。
2.每次迭代 都讓累計值.concat(當前元素) 最后將累加值return出來
var arr = [1,2,[3,4],[5]]; arr1 = arr.reduce((acc,cur)=> acc.concat(cur),[]) console.log(arr1)
計算數(shù)組中每個元素出現(xiàn)的次數(shù)
1.js in 關鍵字 用來判斷一個屬性是不是在一個對象或者在其原型鏈之中。
2.給初始值默認為一個空對象，然后開始迭代。
3.第一次遍歷 Alice in { } 不存在返回 false 走else分支。
4.以此類推 直到第五次 Alice in{‘Alice’:1} 因為acc里面有了Alice 這個屬性，他會返回true，acc[cur ] ++;
5.最后輸出結果
6.{Alice: 2, Bob: 1, Tiff: 1, Bruce: 1}
var names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];
var countedNames = names.reduce(function (acc, cur) {
if (cur in acc) {
acc[cur]++;
}
else {
acc[cur] = 1;
}
return acc;
}, {});
console.log(countedNames)
用Reduce按屬性對object分類
思路
1.給初始值一個為一個空對象 然后根據(jù)空對象，然后判斷 累加值 有沒有這個屬性有的話直接將 cur push 進去， 沒有的話給他新增 并且賦值為空 [ ]。
2.將數(shù)組 跟 要分類的屬性傳入到函數(shù)中groupBy(people，age);
3.開始進行循環(huán) 第一輪循環(huán) 中，acc = { }, obj = { name:“Alice”, age:21},向下執(zhí)行 新增一個變量用來保存 obj[age]中的值 key = 21;
4.繼續(xù)向下執(zhí)行 走到if這里 他判斷的是，累加值中，有沒有這個屬性，沒有的話 就給 屬性 = 一 個空數(shù)組，累加器中如果有這個屬性的話，就直接將 obj push進去。
var people = [
{ name: 'Alice', age: 21 },
{ name: 'Max', age: 20 },
{ name: 'Jane', age: 20 }
];
function groupBy(objectArray, property) {
return objectArray.reduce(function (acc, obj) {
var key = obj[property];
if (!acc[key]) {
acc[key] = [];
}
acc[key].push(obj);
return acc;
}, {});
}
var groupedPeople = groupBy(people, 'age');
// groupedPeople is:
// {
// 20: [
// { name: 'Max', age: 20 },
// { name: 'Jane', age: 20 }
// ],
// 21: [{ name: 'Alice', age: 21 }]
// }
使用擴展運算符和initialValue綁定包含在對象數(shù)組中的數(shù)組！
1.原理
2.每次運行，每次用…打散數(shù)組。
var friends = [{
name: 'Anna',
books: ['Bible', 'Harry Potter'],
age: 21
}, {
name: 'Bob',
books: ['War and peace', 'Romeo and Juliet'],
age: 26
}, {
name: 'Alice',
books: ['The Lord of the Rings', 'The Shining'],
age: 18
}];
var allbooks = friends.reduce(function(prev,cur){
console.log("prev",...prev,"cur",...cur.books);
return [...prev,...cur.books]
},[])
console.log(allbooks);
數(shù)組去重
1.原理每次循環(huán)，然后 在數(shù)組中查找當前值，如果當前值，indexOf返回的是-1 說明當前值沒有 就push進去。
let myArray = ['a', 'b', 'a', 'b', 'c', 'e', 'e', 'c', 'd', 'd', 'd', 'd'];
let arr = myArray.reduce((prev,cur)=>{
if (prev.indexOf(cur) === -1){
prev.push(cur)
}
return prev
},[]);
console.log(arr)
數(shù)組去重2
原理：這個只適用于 數(shù)組元素 是數(shù)值的內容。先用sort進行排序。
1.然后進行循環(huán) init .length ===0 或者init[init.length -1] 不等于 cur，就將current，push進去。
2.排序完成之后 [1, 1, 2, 2, 3, 3, 4, 4, 4, 4, 4, 5, 5]
3.然后開始循環(huán) 第一次 init ===0 ,然后直接push進去, init =[1]
4.第二輪循環(huán) init.length -1 =0 ， init[0] ==1 所以不執(zhí)行，繼續(xù)循環(huán)
5.第三輪 init.length -1 =0 ，init[0] ! ==cur 所以把 2也push進去現(xiàn)在init =[1,2]
6.第四次 init.length -1 =1，init[1] ==2 所以不操作 ，以此類推，init = [1,2]
let arr = [1,2,1,2,3,5,4,5,3,4,4,4,4];
let result = arr.sort().reduce((init, current) => {
if(init.length === 0 || init[init.length-1] !== current) {
init.push(current);
}
return init;
}, []);
console.log(result); //[1,2,3,4,5]
總結
本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關注腳本之家的更多內容!
相關文章
這篇文章主要介紹了JavaScript 表單處理實現(xiàn)代碼,需要的朋友可以參考下2015-04-04
JavaScript由于其在運行期進行綁定的特性，JavaScript 中的 this 可以是全局對象、當前對象或者任意對象，這完全取決于函數(shù)的調用方式。2016-04-04
這篇文章主要為大家詳細介紹了Javascript的迭代器和迭代接口，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
簡述JavaScript的正則表達式中test()方法的使用
這篇文章主要介紹了簡述JavaScript的正則表達式中test()方法的使用,是JS入門學習中的基礎知識,需要的朋友可以參考下2015-06-06
這篇文章主要介紹了JavaScript中的every()方法,是JS入門學習中的基礎知識,需要的朋友可以參考下2015-06-06
JavaScript實現(xiàn)的GBK、UTF8字符串實際長度計算函數(shù)
這篇文章主要介紹了JavaScript實現(xiàn)的GBK、UTF8字符串實際長度計算函數(shù),需要的朋友可以參考下2014-08-08
Javascript call和apply區(qū)別及使用方法
JavaScript中通過call或者apply用來代替另一個對象調用一個方法，將一個函數(shù)的對象上下文從初始的上下文改變?yōu)橛?thisObj 指定的新對象2013-11-11
JavaScript雖然沒有類,但變量和一些函數(shù)卻同樣擁有局部作用域的制約,下面結合代碼圖文講解JavaScript中的作用域與作用域鏈:2016-07-07
這篇文章主要用js代碼實現(xiàn)顏色隨機的小方塊,需要的朋友可以參考下2015-07-07
這篇文章主要為大家介紹了javascript工廠模式，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-01-01