reduce的基本定義

個(gè)人理解： 根據(jù)數(shù)組reduce的定義來(lái)說(shuō)：

1.從數(shù)組第一個(gè)元素開(kāi)始遍歷，逐漸遍歷到最后一項(xiàng)

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

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

Accumulator(acc)累加器，

Curent Value(cur)當(dāng)前值，

Current Index(idx) 當(dāng)前索引，

Sourc Array(src)元素組。

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

基本用法

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

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

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

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

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

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

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

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

2.然后reduce開(kāi)始遍歷，并且調(diào)用回調(diào)函數(shù)，開(kāi)始 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é)果就沒(méi)有問(wèn)題

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.初始值默認(rèn)值 設(shè)置為 一個(gè)空數(shù)組。

2.每次迭代 都讓累計(jì)值.concat(當(dāng)前元素) 最后將累加值return出來(lái)

var arr = [1,2,[3,4],[5]];
arr1 = arr.reduce((acc,cur)=> acc.concat(cur),[])
console.log(arr1)

計(jì)算數(shù)組中每個(gè)元素出現(xiàn)的次數(shù)

1.js in 關(guān)鍵字 用來(lái)判斷一個(gè)屬性是不是在一個(gè)對(duì)象或者在其原型鏈之中。

2.給初始值默認(rèn)為一個(gè)空對(duì)象，然后開(kāi)始迭代。

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

4.以此類推 直到第五次 Alice in{‘Alice’:1} 因?yàn)閍cc里面有了Alice 這個(gè)屬性，他會(huì)返回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按屬性對(duì)object分類

思路

1.給初始值一個(gè)為一個(gè)空對(duì)象 然后根據(jù)空對(duì)象，然后判斷 累加值 有沒(méi)有這個(gè)屬性有的話直接將 cur push 進(jìn)去， 沒(méi)有的話給他新增 并且賦值為空 [ ]。

2.將數(shù)組 跟 要分類的屬性傳入到函數(shù)中g(shù)roupBy(people，age);

3.開(kāi)始進(jìn)行循環(huán) 第一輪循環(huán) 中，acc = { }, obj = { name:“Alice”, age:21},向下執(zhí)行 新增一個(gè)變量用來(lái)保存 obj[age]中的值 key = 21;

4.繼續(xù)向下執(zhí)行 走到if這里 他判斷的是，累加值中，有沒(méi)有這個(gè)屬性，沒(méi)有的話 就給 屬性 = 一 個(gè)空數(shù)組，累加器中如果有這個(gè)屬性的話，就直接將 obj push進(jìn)去。

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 }]
// }

使用擴(kuò)展運(yùn)算符和initialValue綁定包含在對(duì)象數(shù)組中的數(shù)組！

1.原理

2.每次運(yùn)行，每次用…打散數(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ù)組中查找當(dāng)前值，如果當(dāng)前值，indexOf返回的是-1 說(shuō)明當(dāng)前值沒(méi)有 就push進(jìn)去。

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

原理：這個(gè)只適用于 數(shù)組元素 是數(shù)值的內(nèi)容。先用sort進(jìn)行排序。

1.然后進(jìn)行循環(huán) init .length ===0 或者init[init.length -1] 不等于 cur，就將current，push進(jìn)去。

2.排序完成之后 [1, 1, 2, 2, 3, 3, 4, 4, 4, 4, 4, 5, 5]

3.然后開(kāi)始循環(huán) 第一次 init ===0 ,然后直接push進(jìn)去, 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進(jìn)去現(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é)

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

最新評(píng)論