reduce() 多種用法

喆星高照發表於2024-08-16

reduce()方法用於將陣列簡化為單一值，透過遍歷陣列並應用提供的函式。它可以用於求和、乘積、計算物件屬性的總和、陣列去重和轉換陣列結構等。初始值的設定會影響reduce的起始索引。不提供初始值時，從索引1開始執行；提供初始值則從索引0開始。

一、 定義和用法
reduce() 方法將陣列縮減為單個值。
reduce() 方法為陣列的每個值（從左到右）執行提供的函式。
函式的返回值儲存在累加器中（結果/總計）。

註釋：對沒有值的陣列元素，不執行 reduce() 方法。
註釋：reduce() 方法不會改變原始陣列。

二、語法

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
三、引數值

引數 描述
function(total, currentValue, index, arr)
必需。為陣列中的每個元素執行的函式。
函式引數：

引數 描述
total 必需。initialValue，或函式先前返回的值。
currentValue 必需。當前元素的值。
index 可選。當前元素的陣列索引。
arr 可選。當前元素所屬的陣列物件
initialValue
可選。作為初始值傳遞給函式的值。

四、示例如下

1、物件裡的屬性求和

data(){
    return{
        result: [
            {
                subject: 'math',
                score: 10
            },
            {
                subject: 'chinese',
                score: 20
            },
            {
                subject: 'english',
                score: 30
            }
        ];
    };
},
computed:{
    totalResults(){
        return this.result.reduce((sum,result) => {
            return sum + result.score
        }
    }
},0)

2、例項解析 initialValue 引數

var arr = [1, 2, 3, 4];
var sum = arr.reduce(function(prev, cur, index, arr) {
　　console.log(prev, cur, index);
　　return prev + cur;
})
console.log(arr, sum);


VM6252:3 1 2 1
VM6252:3 3 3 2
VM6252:3 6 4 3
VM6252:6 (4) [1, 2, 3, 4] 10

這裡可以看出，上面的例子index是從1開始的，第一次的prev的值是陣列的第一個值。陣列長度是4，但是reduce函式迴圈3次。

var arr = [1, 2, 3, 4];
var sum = arr.reduce(function(prev, cur, index, arr) {
　　console.log(prev, cur, index);
　　return prev + cur;
},0);
console.log(arr, sum);


VM282:3 0 1 0
VM282:3 1 2 1
VM282:3 3 3 2
VM282:3 6 4 3
VM282:6 (4) [1, 2, 3, 4] 10

結論：如果沒有提供initialValue，reduce 會從索引1的地方開始執行 callback 方法，跳過第一個索引。如果提供initialValue，從索引0開始。

3、reduce的簡單用法

var arr = [1, 2, 3, 4];
var sum = arr.reduce((x,y)=>x+y)
var mul = arr.reduce((x,y)=>x*y)
console.log( sum ); //求和，10
console.log( mul ); //求乘積，24

4、reduce的高階用法

（1）計算陣列中每個元素出現的次數

et 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）陣列去重

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）將二維陣列轉化為一維

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]


（4）將多維陣列轉化為一維

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]



相關文章