JS - 基礎學習(6): reduce() 方法

在前后端資料互動的程序中，為了能夠減少ajax請求次數，減輕帶寬壓力，后端往往會將當前介面所需的引數以物件的形式集體回傳，這樣就導致一個問題：物件內欄位屬性過多，而有些小組件功能又壓根不需要這么一個大物件引數(主要是物件屬性過多，難得理，也懶得找)，這時就需要對這個大物件做再加工處理，

比如：將小組件所需的欄位屬性拎出來單獨再封裝成一個小物件，一般情況下我的寫法是：

let retData = https://www.cnblogs.com/donghuang/p/{a: 1, b: 2, c: 3, d: 4, e: 5, f: 6, g: 7, h: 8, j: 9, k: 10, m: 11, n: 12};
let tempData = {
    a: retData.a,
    c: retData.c,
    d: retData.d,
    g: retData.g,
};

但是這種寫法卻很麻煩，要一個屬性一個屬性的添加，于是就突發奇想地想優化一下這種寫法，苦思冥想該怎么玩，即要寫起來簡單，又要顯得 big 高，所以就用到了reduce()方法，

function handlingObjectProperty(propertyList, obj) {
    return propertyList.reduce((iter, val) => {
        if (val in obj) {
            iter[val] = obj[val];
        }
        return iter;
    }, {});
}

let retData = {a: 1, b: 2, c: 3, d: 4, e: 5, f: 6, g: 7, h: 8, j: 9, k: 10, m: 11, n: 12};
let tempData = handlingObjectProperty(['a', 'c', 'f', 'k'], retData);

，同樣得將所需的欄位屬性拎出來封裝成一個小物件，這樣就不需要一個屬性一個屬性地添加了，方便了很多，一行代碼就搞定，

reduce方法的定義和用法

reduce() 方法接收一個回呼函式作為處理器，陣列中的每一個元素（從左到右)【不包括陣列中被洗掉或從未被賦值的元素】依次執行該回呼函式，并最終計算為一個值或一個物件，reduce() 可以作為一個高階函式，用于函式的 compose，

reduce() 方法回呼函式接受四個引數：提供的初始值（或上一次呼叫回呼函式回傳的值），當前被處理的元素，當前正被處理元素在陣列中的索引，呼叫 reduce方法 的陣列，

語法：

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
// 或
array.reduce(callback,[initialValue])

引數：

initialValue引數決議

　　1、不傳 initialValue引數

let testArr = [1, 2, 3, 4];
let sum = testArr.reduce((prev, currentValue, currentIndex, testArr) => {
    console.log(prev, currentValue, currentIndex);
    return prev + currentValue;
});
console.log(`sum: ${sum}`);

 輸出結果，

　　從控制臺列印結果可以看出：由于沒有給 reduce方法傳入 initialValue引數，所以 reduce方法的回呼函式 total引數 以 testArr陣列的第一個元素作為初始值，currentValue則從第二個元素開始，因而 currentIndex從1開始，所以，雖然 testArr陣列的長度是4，但是 reduce方法只回圈了 3次，

　　2、傳入 initialValue引數

let testArr = [1, 2, 3, 4];
let sum = testArr.reduce((prev, currentValue, currentIndex, testArr) => {
    console.log(prev, currentValue, currentIndex);
    return prev + currentValue;
}, 0);
console.log(`sum: ${sum}`);

輸出結果，

　　這次給 reduce方法 傳入了 initialValue引數，所以 total引數以 initialValue引數 作為初始值，currentValue則自然而然從第一個元素開始，currentIndex也就從0開始，所以，testArr陣列的長度是4，reduce方法也就回圈了 4次，

　　3、如果array陣列是個空陣列，且未傳入 initialValue引數，此時代碼執行會報錯，回呼函式也不會被執行，

let testArr = [];
let sum = testArr.reduce((prev, currentValue, currentIndex, testArr) => {
    console.log(prev, currentValue, currentIndex);
    return prev + currentValue;
});
// index_reduce.js:18 Uncaught TypeError: Reduce of empty array with no initial value

　　4、如果array陣列是個空陣列，但傳入 initialValue引數，此時代碼能順利執行，回呼函式也會執行，只是由于是空陣列，沒得結果而已，

let testArr = [];
let sum = testArr.reduce((prev, currentValue, currentIndex, testArr) => {
    console.log(prev, currentValue, currentIndex);
    return prev + currentValue;
}, 0);

　　所以：不管什么情況下，傳入 initialValue引數值，都會讓代碼執行更安全，也更好維護，

基本用法：

　　reduce()方法的基本用法就是把回呼函式做計算器使用，對陣列或數列進行求和、求積，

let testArr = [1, 2, 3, 4];
let sum = testArr.reduce((prev, cur) => {
    return prev + cur
}, 0);
console.log(`sum: ${sum}`);                    　　　　　　  // 10

let pro = testArr.reduce((prev, cur) => {
    return prev * cur
}, 1);                                         　　　　　　  // 求積時，initialValue不能初始化為0
console.log(`pro: ${pro}`);             　　　  　　　　　　  // 24

其他用法：

　　1、計數陣列中每個元素、字串中每個字符出現的總次數

// 獲取陣列內、字串內某個元素、字符出現總次數
function getFrequency(parList) {
    return parList.reduce((pre, cur) => {
        if (cur in pre) {
            pre[cur]++
        } else {
            pre[cur] = 1
        }
        return pre
    }, {});
}

let iterators = ['reduce', 'map', 'for', 'forOf', 'forEach', 'reduce', 'for'];
let testStr = 'reducemapforforOfforEachreducefor';
console.log(getFrequency(iterators));                      // {reduce: 2, map: 1, for: 2, forOf: 1, forEach: 1}
console.log(getFrequency(testStr.split('')));              // {r: 6, e: 4, d: 2, u: 2, c: 3, …}    注：字串不能直接被reduce，所以先把字串分割成字符陣列

　　2、陣列，字串字符去重

// 陣列去重、字串內字符去重
function deduplication(parList) {
    return parList.reduce((pre, cur) => {
        if(!pre.includes(cur)){
            return pre.concat(cur)
        }else{
            return pre
        }
    }, []);
}

let iterators = ['reduce', 'map', 'for', 'forOf', 'forEach', 'reduce', 'for'];
let testStr = 'reducemapforforOfforEachreducefor';
console.log(deduplication(iterators));                     // ["reduce", "map", "for", "forOf", "forEach"]
console.log(deduplication(testStr.split('')).join(''));    // reducmapfoOEh    注：字串不能直接被reduce，故先將字串分割成字符陣列，reduce完成后，再格式化成字串

　　3、陣列降維(又名：陣列的扁平化)

// 下面 reduce回呼函式內對 pre引數的操作，只能用concat方法，不能用push方法，因為，push方法雖然也將 cur添加到了 pre末尾，但是回傳的卻是 pre當前的長度，而不是當前 pre的值，
function dimensionalityReduction(parList) {
    return parList.reduce((pre, cur) => {
        return pre.concat(Array.isArray(cur) ? dimensionalityReduction(cur) : cur)
    }, []);
}

let testArr = [[1, 2], [3, [4]], [[5], 6]];
console.log(dimensionalityReduction(testArr));             // [1, 2, 3, 4, 5, 6]

　　4、根據需求對 物件屬性的操作

　　41：如本文開頭所述的，從一個大物件內將所需的欄位屬性拎出來單獨再封裝成一個小物件；42：對 物件陣列(后端回傳的表格資料，一般都是物件陣列) 內各個物件特定屬性值進行特定處理：如根據狀態值不同顯示不同提示語、資料格式轉換、資料邏輯處理等，

// 42、資料邏輯處理
function processData(parList, attr) {
    return parList.reduce((pre, cur) => {
        return pre + cur[attr];
    }, 0);
}

let testArr = [
    {month: 1, sales: 85},
    {month: 2, sales: 30},
    {month: 3, sales: 40},
];
console.log(`2020年第一季度銷售總額: ${processData(testArr, 'sales')}萬元`);        // 2020年第一季度銷售總額: 155萬元

　　對于物件陣列而言，reduce方法適用于 將每個物件元素內指定欄位屬性單獨拿出來做處理，然后回傳一個值或一個物件，如本文開頭的欄位屬性重新封裝，這里的資料累加等，而不是對這個陣列本身的處理，對于這些物件陣列本身的處理，for，forEach，map等方法更實用，

最后

　　reduce方法可以實作的東西，很多時候for回圈，forEach方法、甚至map方法都可以實作，那為啥要用reduce呢，個人覺得吧，這個無關啥逼格什么的，僅僅只是想讓代碼更簡潔，功能邏輯簡單化，同時也讓代碼多元化，不讓之前學過的東西束之高閣，喂灰塵罷了，

標籤：JavaScript

上一篇：h5+ 開發分享功能

下一篇：JavaScript連載12-回圈以及舉例