快捷導(dǎo)航

JavaScript中reduce()詳解及使用方法

更新時(shí)間：2023年04月27日 10:19:01 作者：超快的慢蝸牛

reduce()方法接收一個(gè)函數(shù)做為累加器,數(shù)組中的每一個(gè)值(從左到右)開(kāi)始縮減,最終計(jì)算為一個(gè)值,下面這篇文章主要給大家介紹了關(guān)于JavaScript中reduce()詳解及使用方法的相關(guān)資料,需要的朋友可以參考下

reduce（）：

reduce（）方法為歸并類方法，最常用的場(chǎng)景就是，計(jì)算數(shù)組中的每一項(xiàng)的總和。

reduce（）方法會(huì)遍歷數(shù)組的每一項(xiàng)，他接收兩個(gè)參數(shù)：

第一個(gè)參數(shù)：每次遍歷都會(huì)調(diào)用的函數(shù)，而這個(gè)函數(shù)有接收四個(gè)參數(shù)，分別是：前一個(gè)值、當(dāng)前項(xiàng)、項(xiàng)目的索引和數(shù)組對(duì)象，而這個(gè)函數(shù)的返回值，回傳給下一次遍歷時(shí)，執(zhí)行的這個(gè)方法的第一個(gè)參數(shù)。

第二個(gè)參數(shù)：歸并基礎(chǔ)的初始值

我們看一下例子： reduce（）怎么用？

 let arr = [1,2,3,4,5]
 arr.reduce((prev,cur)=>{
      return prev+cur
 })

上面的這段代碼，是用來(lái)計(jì)算數(shù)組總和的，reduce（）方法中，只傳了第一個(gè)參數(shù)，也就是只傳了一個(gè)函數(shù)，但第二個(gè)參數(shù)、初始值沒(méi)有傳，當(dāng)?shù)诙€(gè)值沒(méi)有傳的時(shí)候，第一次循環(huán)，prev的值，默認(rèn)為數(shù)組的第一項(xiàng)，而cur的值為數(shù)組的第二項(xiàng)，也就是第一次循環(huán)，會(huì)return 1+2，這個(gè)時(shí)候，第一次循環(huán)返回的結(jié)果回傳給下一次循環(huán)中方法的第一個(gè)參數(shù)，也就是說(shuō)、第二次循環(huán)方法中prev的值，是第一次循環(huán)方法返回的結(jié)果

let arr = [1,2,3,4,5]
arr.reduce((prev,cur)=>{
    return prev+cur
},10)

我們傳入一下第二個(gè)參數(shù)，第一個(gè)循環(huán)，prev的值為reduce的第二個(gè)參數(shù)，也就是"歸并基礎(chǔ)的初始值"，而cur的值為數(shù)組的第一項(xiàng)，第一項(xiàng)循環(huán)會(huì)返回10+1

總結(jié)：

1.當(dāng)reduce（）方法的第二個(gè)值為空時(shí)，第一次循環(huán)方法中的第一個(gè)參數(shù)（prev）為數(shù)組的第一項(xiàng)值，第二個(gè)參數(shù)（cur）為數(shù)組的第二項(xiàng)值，反之，第一次循環(huán)方法中的第一個(gè)參數(shù)（prev）為reduce的第二個(gè)參數(shù)值，第二個(gè)參數(shù)（cur）為數(shù)值的第一項(xiàng)值。

2.reduce（）方法的第一個(gè)參數(shù)，就是每次遍歷都會(huì)執(zhí)行的匿名函數(shù)，當(dāng)前函數(shù)的返回值就會(huì)傳給下一次執(zhí)行函數(shù)的第一個(gè)值。也就是prev

reduce 應(yīng)用場(chǎng)景：

1.數(shù)組里所有值的和

      var arr = [0,1,2,3];
 
      var value = arr.reduce((pre, cur) => {
        return pre + cur;
      }, 0);
      
      console.log(value);// 輸出：6

2.累加數(shù)組中對(duì)象的值

      var arr = [{ x: 1 }, { x: 2 }, { x: 3 }];
 
      var value = arr.reduce((pre, cur) => {
        return pre + cur.x;
      }, 0);
      
      console.log(value);// 輸出：6

3.將二維數(shù)組轉(zhuǎn)為一維數(shù)組

      var arr = [
        [0, 1],
        [2, 3],
        [4, 5],
      ];
 
      var value = arr.reduce((pre, cur) => {
        return pre.concat(cur);
      }, []);
 
      console.log(value); // 輸出：[0, 1, 2, 3, 4, 5]

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

      var arr = ["a", "b", "a", "c", "c", "c"];
 
      var value = arr.reduce((pre, cur) => {
        if (cur in pre) {
          pre[cur]++;
        } else {
          pre[cur] = 1;
        }
        return pre;
      }, {});
 
      console.log(value); // 輸出：{a: 2, b: 1, c: 3}

5.按屬性對(duì)object分類

      var people = [
        { name: "tom", age: 17, birthYear: 2021 },
        { name: "tony", age: 21, birthYear: 2021 },
        { name: "bob", age: 18, birthYear: 2020 },
        { name: "bob", age: 18, birthYear: 2021 },
        { name: "bob", age: 18, birthYear: 2019 },
      ];
 
      function groupBy(arr, property) {
        if (!Array.isArray(arr)) return [];
 
        return arr.reduce((pre, obj) => {
          var newObj = {
            [property]: obj[property],
            data: [obj],
          };
 
          if (!pre.length) {
            return [newObj];
          }
 
          for (let i = 0; i < pre.length; i++) {
            let item = pre[i];
            if (item[property] === obj[property]) {
              item.data = [...item.data, obj];
              return pre;
            }
          }
          return [...pre, newObj];
        }, []);
      }
 
      var value = groupBy(people, "birthYear");

返回值：

6.數(shù)組去重：

      var arr = [1, 2, 3, 2, 2, 3, 5, null, null, 0, false, false, true];
 
      var value = arr.reduce((pre, cur) => {
        return pre.includes(cur) ? pre : pre.concat(cur);
      }, []);
 
      console.log(value);//[1, 2, 3, 5, null, 0, false, true]

附：reduce的高級(jí)用法

（1）計(jì)算數(shù)組中每個(gè)元素出現(xiàn)的次數(shù)
let names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];
let nameNum = names.reduce((pre,cur)=>{
  if(cur in pre){
    pre[cur]++
  }else{
    pre[cur] = 1 
  }
  return pre
},{})
console.log(nameNum); //{Alice: 2, Bob: 1, Tiff: 1, Bruce: 1}


（2）數(shù)組去重
let arr = [1,2,3,4,4,1]
let newArr = arr.reduce((pre,cur)=>{
    if(!pre.includes(cur)){
      return pre.concat(cur)
    }else{
      return pre
    }
},[])
console.log(newArr);// [1, 2, 3, 4]

（3）將二維數(shù)組轉(zhuǎn)化為一維

let arr = [[0, 1], [2, 3], [4, 5]]
let newArr = arr.reduce((pre,cur)=>{
    return pre.concat(cur)
},[])
console.log(newArr); // [0, 1, 2, 3, 4, 5]
（3）將多維數(shù)組轉(zhuǎn)化為一維

let arr = [[0, 1], [2, 3], [4,[5,6,7]]]
const newArr = function(arr){
   return arr.reduce((pre,cur)=>pre.concat(Array.isArray(cur)?newArr(cur):cur),[])
}
console.log(newArr(arr)); //[0, 1, 2, 3, 4, 5, 6, 7]

（4）、對(duì)象里的屬性求和
var result = [
    {
        subject: 'math',
        score: 10
    },
    {
        subject: 'chinese',
        score: 20
    },
    {
        subject: 'english',
        score: 30
    }
];

var sum = result.reduce(function(prev, cur) {
    return cur.score + prev;
}, 0);
console.log(sum) //60

到此這篇關(guān)于JavaScript中reduce()詳解及使用方法的文章就介紹到這了,更多相關(guān)js中reduce()詳解內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: