2. 程式人生 > 程式設計 >JS陣列reduce你不得不知道的25個高階用法

JS陣列reduce你不得不知道的25個高階用法

阿新 • • 發佈：2021-06-03

前言

reduce作為ES5新增的常規陣列方法之一，對比forEach、filter和map，在實際使用上好像有些被忽略，發現身邊的人極少使用它，導致這個如此強大的方法被逐漸埋沒。

如果經常使用reduce，怎麼可能放過如此好用的它呢！我還是得把他從塵土中取出來擦乾淨，奉上它的高階用法給大家。一個如此好用的方法不應該被大眾埋沒。

下面對reduce的語法進行簡單說明，詳情可檢視MDN的reduce()的相關說明。

  • 定義：對陣列中的每個元素執行一個自定義的累計器，將其結果彙總為單個返回值
  • 形式：array.reduce((t,v,i,a) => {},initValue)
  • 引數
    • callback：回撥函式(必選)
    • initValue：初始值(可選)
  • 回撥函式的引數
    • total(t)：累計器完成計算的返回值(必選)
    • value(v)：當前元素(必選)
    • index(i)：當前元素的索引(可選)
    • array(a)：當前元素所屬的陣列物件(可選)
  • 過程
    • 以t作為累計結果的初始值，不設定t則以陣列第一個元素為初始值
    • 開始遍歷，使用累計器處理v，將v的對映結果累計到t上，結束此次迴圈，返回t
    • 進入下一次迴圈，重複上述操作，直至陣列最後一個元素
    • 結束遍歷，返回最終的t

reduce的精華所在是將累計器逐個作用於陣列成員上，把上一次輸出的值作為下一次輸入的值。下面舉個簡單的栗子，看看reduce的計算結果。

const arr = [3,5,1,4,2];
const a = arr.reduce((t,v) => t + v);
// 等同於
const b = arr.reduce((t,v) => t + v,0);

程式碼不太明白沒關係，貼一個reduce的作用動圖應該就會明白了。

JS陣列reduce你不得不知道的25個高階用法

reduce實質上是一個累計器函式，通過使用者自定義的累計器對陣列成員進行自定義累計，得出一個由累計器生成的值。另外reduce還有一個胞弟reduceRight，兩個方法的功能其實是一樣的，只不過reduce是升序執行，reduceRight是降序執行。

對空陣列呼叫reduce()和reduceRight()是不會執行其回撥函式的，可認為reduce()對空陣列無效

高階用法

單憑以上一個簡單栗子不足以說明reduce是個什麼。為了展示reduce的魅力，我為大家提供25種場景來應用reduce的高階用法。有部分高階用法可能需要結合其他方法來實現，這樣為reduce的多元化提供了更多的可能性。

部分示例程式碼的寫法可能有些騷，看得不習慣可自行整理成自己的習慣寫法

累加累乘

function Accumulation(...vals) {
    return vals.reduce((t,0);
}

function Multiplication(...vals) {
    return vals.reduce((t,v) => t * v,1);
}

Accumulation(1,2,3,5); // 15
Multiplication(1,5); // 120

權重求和

const scores = [
    { score: 90,subject: "chinese",weight: 0.5 },{ score: 95,subject: "math",weight: 0.www.cppcns.com3 },{ score: 85,subject: "english",weight: 0.2 }
];
const result = scores.reduce((t,v) => t + v.score * v.weight,0); // 90.5

代替reverse

function Reverse(arr = []) {
    return arr.reduceRight((t,v) => (t.push(v),t),[]);
}

Reverse([1,5]); // [5,1]

代替map和filter

const arr = [0,3];

// 代替map：[0,6]
const a = arr.map(v => v * 2);
const b = arr.reduce((t,v) => [...t,v * 2],[]);

// 代替filter：[2,3]
const c = arr.filter(v => v > 1);
const d = arr.reduce((t,v) => v > 1 ? [...t,v] : t,[]);

// 代替map和filter：[4,6]
const e = arr.map(v => v * 2).filter(v => v > 2);
const f = arr.reduce((t,v) => v * 2 > 2 ? [...t,v * 2] : t,[]);

代替some和every

const scores = [
    { score: 45,subject: "chinese" },{ score: 90,subject: "math" },{ score: 60,subject: "english" }
];

// 代替some：至少一門合格
const isAtLeastOneQualified = scores.reduce((t,v) => t || v.score >= 60,false); // true

// 代替every：全部合格
const isAllQualified = scores.reduce((t,v) => t && v.score >= 60,true); // false

陣列分割

function Chunk(arr = [],size = 1) {
    return arr.length ? arr.reduce((t,v) => (t[t.length - 1].length === size ? t.push([v]) : t[t.length - 1].push(v),[[]]) : [];
}

const arr = [1,5];
Chunk(arr,2); // [[1,2],[3,4],[5]]

陣列過濾

function Difference(arr = [],oarr = []) {
    return arr.reduce((t,v) => (!oarr.includes(v) && t.push(v),[]);
}

const arr1 = [1,5];
const arr2 = [2,6]
Difference(arr1,arr2); // [1,5]

陣列填充

function Fill(arr = [],val = "",start = 0,end = arr.length) {
    if (start < 0 || start >= end || end > arr.length) return arr;
    return [
        ...arr.slice(0,start),...arr.slice(start,end).reduce((t,v) => (t.push(val || v),[]),...arr.slice(end,arr.length)
    ];
}

const arr = [0,6];
Fill(arr,"aaa",5); // [0,6]

陣列扁平

function Flat(arr = []) {
    return arr.reduce((t,v) => t.concat(Array.isArray(v) ? Flat(v) : v),[])
}

const arr = [0,[2,3],[4,[6,7]],[8,[9,10,[11,12]]]];
Flat(arr); // [0,6,7,8,9,11,12]

陣列去重

function Uniq(arr = []) {
    return arr.reduce((t,v) => t.includes(v) ? t : [...t,v],[]);
}

const arr = [2,2];
Uniq(arr); // [2,3]

陣列最大最小值

function Max(arr = []) {
    return arr.reduce((t,v) => t > v ? t : v);
}

function Min(arr = []) {
    return arr.reduce((t,v) => t < v ? t : v);
}

const arr = [12,45,21,65,38,76,108,43];
Max(arr); // 108
Min(arr); // 12

陣列成員獨立拆解

function Unzip(arr = []) {
    return arr.reduce(
        (t,v) => (v.forEach((w,i) => t[i].push(w)),Array.from({ length: Math.max(...arr.map(v => v.length)) }).map(v => [])
    );
}

const http://www.cppcns.comarr = [["a",true],["b",false]];
Unzip(arr); // [["a","b"],[1,[true,false]]

陣列成員個數統計

function Count(arr = []) {
    return arr.reduce((t,v) => (t[v] = (t[v] || 0) + 1,{});
}

const arr = [0,2];
Count(arr); // { 0: 1,1: 2,2: 3 }

此方法是字元統計和單詞統計的原理，入參時把字串處理成陣列即可

陣列成員位置記錄

function Position(arr = [],val) {
    return arr.reduce((t,i) => (v === val && t.push(i),7];
Position(arr,2); // [0,4]

陣列成員特性分組

function Group(arr = [],key) {
    return key ? arr.reduce((t,v) => (!t[v[key]] && (t[v[key]] = []),t[v[key]].push(v),{}) : {};
}

const arr = [
    { area: "GZ",name: "YZW",age: 27 },{ area: "GZ",name: "TYJ",age: 25 },{ area: "SZ",name: "AAA",age: 23 },{ area: "FS",name: "BBB",age: 21 },name: "CCC",age: 19 }
]; // 以地區area作為分組依據
Group(arr,"area"); // { GZ: Array(2),SZ: Array(2),FS: Array(1) }

陣列成員所含關鍵字統計

function Keyword(arr = [],keys = []) {
    return keys.reduce((t,v) => (arr.some(w => w.includes(v)) && t.push(v),[]);
}

const text = [
    "今天天氣真好，我想出去釣魚","我一邊看電視，一邊寫作業","小明喜歡同桌的小紅，又喜歡後桌的小君，真TM花心","最近上班喜歡摸魚的人實在太多了，程式碼不好好寫，在想入非非"
];
const key程式設計客棧word = ["偷懶","喜歡","睡覺","摸魚","真好","一邊","明天"];
Keyword(text,keyword); // ["喜歡","一邊"]

字串翻轉

function ReverseStr(str = "") {
    return str.split("").reduceRight((t,v) => t + v);
}

const str = "reduce最牛逼";
ReverseStr(str); // "逼牛最ecuder"

數字千分化

function ThousandNum(num = 0) {
    const str = (+num).toString().split(".");
    const int = nums => nums.split("").reverse().reduceRight((t,i) => t + (i % 3 ? v : `${v},`),"").replace(/^,|,$/g,"");
    const dec = nums => nums.split("").reduce((t,i) => t + ((i + 1) % 3 ? v : `${v},`)程式設計客棧,"");
    return str.length > 1 ? `${int(str[0])}.${dec(str[1])}` : int(str[0]);
}

ThousandNum(1234); // "1,234"
ThousandNum(1234.00); // "1,234"
ThousandNum(0.1234); // "0.123,4"
ThousandNum(1234.5678); // "1,234.567,8"

非同步累計

async function AsyncTotal(arr = []) {
    return arr.reduce(async(t,v) => {
        const at = await t;
        const todo = await Todo(v);
        at[v] = todo;
        return at;
    },Promise.resolve({}));
}

const result = await AsyncTotal(); // 需要在async包圍下使用

斐波那契數列

function Fibonacci(len = 2) {
    const arr = [...new Array(len).keys()];
    return arr.reduce((t,i) => (i > 1 && t.push(t[i - 1] + t[i - 2]),[0,1]);
}

Fibonacci(10); // [0,13,34]

URL引數反序列化

function ParseUrlSearch() {
    return location.search.replace(/(^\?)|(&$)/g,"").split("&").reduce((t,v) => {
        const [key,val] = v.split("=");
        t[key] = decodeURIComponent(val);
        return t;
    },{});
}

// 假設URL為：https://www.baidu.com?age=25&name=TYJ
ParseUrlSearch(); // { age: "25",name: "TYJ" }

URL引數序列化

function StringifyUrlSearch(search = {}) {
    return Object.entries(search).reduce(
        (t,v) => `${t}${v[0]}=${encodeURIComponent(v[1])}&`,Object.keys(search).length ? "?" : ""
    ).replace(/&$/,"");
}

StringifyUrlSearch({ age: 27,name: "YZW" }); // "?age=27&name=YZW"

返回物件指定鍵值

function GetKeys(obj = {},keys = []) {
    return Object.keys(obj).reduce((t,v) => (keys.includes(v) && (t[v] = obj[v]),{});
}

const target = { a: 1,b: 2,c: 3,d: 4 };
const keyword = ["a","d"];
GetKeys(target,keyword); // { a: 1,d: 4 }

陣列轉物件

const people = [
    { area: "GZ",age: 25 }
];
const map = people.reduce((t,v) => {
    const { name,...rest } = v;
    t[name] = rest;
    return t;
},{}); // { YZW: {…},TYJ: {…} }

Redux Compose函式原理

function Compose(...funs) {
    if (funs.length === 0) {
        return arg => arg;
    }
    if (funs.length === 1) {
        return funs[0];
    }
    return funs.reduce((t,v) => (...arg) => t(v(...arg)));
}

相容和效能

好用是挺好用的，但是相容性如何呢？在Caniuse上搜索一番，相容性絕對的好，可大膽在任何專案上使用。不要吝嗇你的想象力，盡情發揮reduce的compose技能啦。對於時常做一些累計的功能，reduce絕對是首選方法。

JS陣列reduce你不得不知道的25個高階用法

JS陣列reduce你不得不知道的25個高階用法

另外，有些同學可能會問，reduce的效能又如何呢？下面我們通過對for、forEach、map和reduce四個方法同時做1~100000的累加操作，看看四個方法各自的執行時間。

// 建立一個長度為100000的陣列
const list = [...new Array(100000).keys()];

// for
console.time("for");
let result1 = 0;
for (let i = 0; i < list.length; i++) {
    result1 += i + 1;
}
console.log(result1);
console.timeEnd("for");

// forEach
console.time("forEach");
let result2 = 0;
list.forEach(v => (result2 += v + 1));
console.log(result2);
console.timeEnd("forEach");

// map
console.time("map");
let result3 = 0;
list.map(v => (result3 += v + 1,v));
console.log(result3);
console.timeEnd("map");

// reduce
console.time("reduce");
const result4 = list.reduce((t,v) => t + v + 1,0);
console.log(result4);
console.timeEnd("reduce");
BueumfHDL
累加操作 執行時間
for 6.719970703125ms
forEach 3.696044921875ms
map 3.554931640625ms
reduce 2.806884765625ms

以上程式碼在MacBook Pro 2019 15寸 16G記憶體 512G快閃記憶體的Chrome 79下執行，不同的機器不同的環境下執行以上程式碼都有可能存在差異。

我已同時測試過多臺機器和多個瀏覽器，連續做了10次以上操作，發現reduce總體的平均執行時間還是會比其他三個方法稍微快一點，所以大家還是放心使用啦！本文更多是探討reduce的使用技巧，如對reduce的相容和效能存在疑問，可自行參考相關資料進行驗證。

最後，送大家一張reduce生成的乘法口訣表：一七得七，二七四十八，三八婦女節，五一勞動節，六一兒童節。

JS陣列reduce你不得不知道的25個高階用法

JS陣列reduce你不得不知道的25個高階用法

總結

到此這篇關於js陣列reduce你不得不知道的25個高階用法的文章就介紹到這了,更多相關JS陣列reduce高階用法內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！

相關推薦

JS陣列reduce你不得不知道的25個高階用法

前言 reduce作為ES5新增的常規陣列方法之一，對比forEach、filter和map，在實際使用上好像有些被忽略，發現身邊的人極少使用它，導致這個如此強大的方法被逐漸埋沒。

JS陣列Reduce方法功能與用法例項詳解

本文例項講述了JS陣列Reduce方法功能與用法。分享給大家供大家參考，具體如下：

JS陣列reduce()方法詳解及高階技巧

JS陣列reduce()方法詳解及高階技巧 reduce()方法可以搞定的東西，for迴圈，或者forEach方法有時候也可以搞定，那為啥要用reduce()？這個問題，之前我也想過，要說原因還真找不到，唯一能找到的是：通往成功的道路有

JS陣列reduce()方法詳解及高階技巧【轉】

轉https://www.jianshu.com/p/e375ba1cfc47 1、語法 arr.reduce(callback,[initialValue]) reduce 為陣列中的每一個元素依次執行回撥函式，不包括陣列中被刪除或從未被賦值的元素，接受四個引數：初始值（或者上一

Vue你不得不知道的非同步更新機制和nextTick原理

前言 非同步更新是 Vue 核心實現之一，在整體流程中充當著 watcher 更新的排程者這一角色。大部分 watcher 更新都會經過它的處理，在適當時機讓更新有序的執行。而 nextTick 作為非同步更新的核心，也是需要學習的重

JS陣列reduce()方法原理及使用技巧解析

1、語法 arr.reduce(callback,[initialValue]) reduce 為陣列中的每一個元素依次執行回撥函式，不包括陣列中被刪除或從未被賦值的元素，接受四個引數：初始值（或者上一次回撥函式的返回值），當前元素值，當前索引

js陣列reduce解析及使用示例

reduce() 　　簡單說，reduce()可以對陣列中的每個元素執行一個由您提供的reducer函式(升序執行)，函式的返回值分配給累計器，該返回值在陣列的每個迭代中被記住，並最後將其結果彙總為單個返回值。

畢業兩年，如何在帝都購房上車|購房你不得不知道的知識（土豪除外）

關於作者：程式猿石頭(ID: tangleithu)，現任阿里巴巴技術專家，清華學渣，前大疆後端 Leader。歡迎關注，交流和指導！

你不得不知道的Java 8 開發的 4 大技巧

java 培訓開發過程經常需要編寫有固定格式的程式碼，例如說宣告一個私有變數，logger或者bean等等。對於這種小範圍的程式碼生成，我們可以利用 IDEA 提供的 Live Templates功能。剛開始覺得它只是一個簡單的Code Sn

Jmeter環境變數配置你不得不知道的事情

　　在安裝Jmeter的過程中大家肯定需要配置環境，但是為什麼要配置JDK的環境變數呢？大家有沒有好奇過，有沒有仔細去像一下呢，其實在安裝Jmeter前，大家應該都知道Jmeter是我們JAVA開發的，JAVA開發的所有應用我們

你不得不知道的linux常用命令

1.第一個shell vi first.sh !/bin/bash 作者：Arya 編寫時間：2022-04-22 功能：this is my first blog!

你不知道的 TypeScript 高階型別(小結)

前言 對於有 JavaScript 基礎的同學來說，入門 TypeScript 其實很容易，只需要簡單掌握其基礎的型別系統就可以逐步將 JS 應用過渡到 TS 應用。

你應該知道的Vue高階特性

一、watch進階 從我們剛開始學習Vue的時候，對於偵聽屬性，都是簡單地如下面一般使用：

你應該知道的TypeScript高階概念

介面 例如我們這定義一個叫做printPost的函式，那這個函式可以接收一個文章物件引數post，然後在函式的內部去列印文章的title, 然後再去列印他的content屬性。

JavaScript中你不知道的Object.entries用法

目錄前言1. 使用 for...of 遍歷普通物件2. 普通物件與 Map 物件相互轉換總結參考前言

7個你應該知道的JS原生錯誤型別

概述 從瀏覽器控制檯到執行 Node.js的終端，我們到處都會看到錯誤。本文的重點是概述我們在js開發過程中可能遇到的錯誤型別。

你不知道的十個 JS 小技巧

總結了一些開發常用的 JS 小技巧，讓你的程式碼更優雅！ 1. 通過條件判斷給變數賦布林值

打造 React.js App 的UI框架，你知道幾個

在本文中，我們將分享一些助你打造 React.js App 最佳的 UI 框架。它們具備你所需要的基本 React 元件，以及易用的 API，同時，在外觀和體驗上也非常棒。Have Fun ！

新晉程式設計師不知道的25個程式設計小技巧，知道它們，能讓你事半功倍

　　如果只是周而復始地寫程式碼，想必程式設計的工作會讓很多程式設計師發狂。如何在看似枯燥的工作尋找樂趣，我認為對工作的激情和興奮感、始終學習的態度，還有掌握一些實用高效的程式設計技巧，對於提升工作樂趣

3個Spring Boot核心註解，你知道幾個？

Spring Boot 核心註解講解 Spring Boot 最大的特點是無需 XML 配置檔案，能自動掃描包路徑裝載並注入物件，並能做到根據 classpath 下的 jar 包自動配置。