欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript reduce的基本用法詳解

 更新時間：2022年02月22日 15:01:34   作者：韓程遠  
這篇文章主要為大家詳細介紹了JavaScript reduce的基本用法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助

reduce的基本定義

個人理解： 根據(jù)數(shù)組reduce的定義來說：

1.從數(shù)組第一個元素開始遍歷，逐漸遍歷到最后一項

2.reduce 接受兩個參數(shù)，一個回調(diào)函數(shù)，一個初始值,如果不給Reduce初始值他會默認從第一個元素開始。

3.reduce的回調(diào)函數(shù)接受四個參數(shù)

Accumulator(acc)累加器，

Curent Value(cur)當前值，

Current Index(idx) 當前索引，

Sourc Array(src)元素組。

其中必須要傳兩個參數(shù)。累加器 跟 當前值?。?！

基本用法

計算數(shù)組里面所有值的和！

1.這個給了reduce兩個參數(shù)，他回調(diào)函數(shù)中的方法，就是累加器 acc 加 current

2.他的默認值就是0，他的累加器就是0，然后從零開始相加(根據(jù)回調(diào)函數(shù)的方法)

3.Reduce遍歷數(shù)組中每個元素，每遍歷一個元素就會自動調(diào)用一次回調(diào)函數(shù)。

4.最后的結(jié)果就是:6

var sum = [0, 1, 2, 3].reduce(function (accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);

累加對象數(shù)組里的值！

1.如果不給這個數(shù)初始值，他就會數(shù)組中的一個元素當做累加器。

2.然后reduce開始遍歷，并且調(diào)用回調(diào)函數(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，最后的輸出結(jié)果就沒有問題

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ù)組轉(zhuǎn)換為一維數(shù)組!

1.初始值默認值 設(shè)置為 一個空數(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 關(guān)鍵字 用來判斷一個屬性是不是在一個對象或者在其原型鏈之中。

2.給初始值默認為一個空對象，然后開始迭代。

3.第一次遍歷 Alice in { } 不存在返回 false 走else分支。

4.以此類推 直到第五次 Alice in{‘Alice’:1} 因為acc里面有了Alice 這個屬性，他會返回true，acc[cur ] ++;

5.最后輸出結(jié)果

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ù)中g(shù)roupBy(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ù)值的內(nèi)容。先用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]

總結(jié)

本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容! 

相關(guān)文章

最新評論