web前端開發 - 10 個前端開發人員必須知道的關於「[].reduce」的進階技巧－鑽石舞台

英文 | https://fatfish.medium.com/as-a-front-end-engineer-10-secrets-about-reduce-you-must-know-about-1e6d36d329d3

作為一個前端開發者，一定會大量使用reduce函數，它是一個強大而有用的數組API，但是，今天我想給大家分享10個關於它的進階技巧和竅門，加油！

1.作為加法器和累加器

使用「reduce」，我們可以輕鬆實現多個數相加或累加的功能。

// adderconst sum = (...nums) => { return nums.reduce((sum, num) => sum + num);};console.log(sum(1, 2, 3, 4, 10)); // 20// accumulatorconst accumulator = (...nums) => { return nums.reduce((acc, num) => acc * num);};console.log(accumulator(1, 2, 3)); // 6

2.計算一個數組的最大值和最小值

有多少種方法可以得到數組的最大值或最小值？

1).使用 Math.max 和 Math.min

我們不得不承認，使用 Math 的 API 是最簡單的方法。

const array = [-1, 10, 6, 5];const max = Math.max(...array); // 10const min = Math.min(...array); // -1

2).使用減少

是的，只需一行代碼，你就可以實現與 Math 的 API 相同的效果。

const array = [-1, 10, 6, 5];const max = array.reduce((max, num) => (max > num ? max : num));const min = array.reduce((min, num) => (min < num ? min : num));

3).格式化搜索參數

獲取鏈接上的搜索參數是我們經常要處理的事情。如何解析它們？

例如:

// url https://qianlongo.github.io/vue-demos/dist/index.html?name=fatfish&age=100#/home// format the search parameters{ "name": "fatfish", "age": "100"}

1).正常方式

這是大多數人使用它的方式。

2).使用reduce

Reduce 實際上可以做到這一點，而且看起來更簡單。

constparseQuery=()=>{ const search = window.location.search; return search .replace(/(^\?)|(&$)/g, "") .split("&") .reduce((query, it) => { const [key, value] = it.split("="); query[key] = decodeURIComponent(value); return query; }, {});};

它是如何工作的？

/ url https://qianlongo.github.io/vue-demos/dist/index.html?name=fatfish&age=100#/home// 1. First get the search parameterconst search = window.location.search; // ?name=fatfish&age=100// 2. Remove the beginning "?" or ending "&".search.replace(/(^\?)|(&$)/g, "");// ?name=fatfish&age=100 => name=fatfish&age=100// 3. Use reduce to collect parameters// ...

4.反序列化搜索參數

當我們要跳轉到某個鏈接並為其添加一些搜索參數時，手動拼接的方式不是很方便。

如果要串聯的參數很多，那將是一場災難。

constsearchObj={ name: "fatfish", age: 100, // ...};const link = `https://medium.com/?name=${searchObj.name}&age=${searchObj.age}`;// https://medium.com/?name=fatfish&age=100

幸運的是，「reduce」可以幫助我們輕鬆解決這個問題。

5. 展平多層嵌套數組

你知道如何展平多層嵌套數組嗎？

constarray=[1,[2,[3,[4,[5]]]]];// expected output [ 1, 2, 3, 4, 5 ]const flatArray = array.flat(Infinity); // [1, 2, 3, 4, 5]

「flat」是一個非常強大的API。而使用reduce可以實現和flat一樣的功能

const flat = (array) => { return array.reduce( (acc, it) => acc.concat(Array.isArray(it) ? flat(it) : it), [] );};const array = [1, [2, [3, [4, [5]]]]];const flatArray = flat(array); // [1, 2, 3, 4, 5]

6.模擬平面特徵的功能

雖然，我們已經實現了扁平化深度嵌套數組的功能，但是，如何才能完全實現扁平化的功能呢？

//ExpandonelayerbydefaultArray.prototype.flat2 = function (n = 1) { const len = this.length let count = 0 let current = this if (!len || n === 0) { return current } // Confirm whether there are array items in current const hasArray = () => current.some((it) => Array.isArray(it)) // Expand one layer after each cycle while (count++ < n && hasArray()) { current = current.reduce((result, it) => { result = result.concat(it) return result }, []) } return current}const array = [ 1, [ 2, [ 3, [ 4, [ 5 ] ] ] ] ]// Expand one layerconsole.log(array.flat()) // [ 1, 2, [ 3, [ 4, [ 5 ] ] ] ] console.log(array.flat2()) // [ 1, 2, [ 3, [ 4, [ 5 ] ] ] ] // Expand allconsole.log(array.flat(Infinity))console.log(array.flat2(Infinity))

太好了，我們做到了。

7. 保持數組唯一

reduce 也很容易保持數組的唯一性。

const array = [ 1, 2, 1, 2, -1, 10, 11 ]const uniqueArray1 = [ ...new Set(array) ]const uniqueArray2 = array.reduce((acc, it) => acc.includes(it) ? acc : [ ...acc, it ], [])

8.統計數組成員的個數

如何計算數組中每個成員的個數？

為什麼使用map而不是boject？

const count = (array) => { return array.reduce((acc, it) => (acc.set(it, (acc.get(it) || 0) + 1), acc), new Map())}const array = [ 1, 2, 1, 2, -1, 0, '0', 10, '10' ]console.log(count(array))

9.獲取一個對象的多個屬性

現在，我們來看看在工作中會遇到的一個場景。

// There is an object with many propertiesconst obj = { a: 1, b: 2, c: 3, d: 4, e: 5 // ...}// We just want to get some properties above it to create a new objectconst newObj = { a: obj.a, b: obj.b, c: obj.c, d: obj.d // ...}// Do you think this is too inefficient?

使用reduce來解決它。

const getObjectKeys = (obj = {}, keys = []) => { return Object.keys(obj).reduce((acc, key) => (keys.includes(key) && (acc[key] = obj[key]), acc), {});}const obj = { a: 1, b: 2, c: 3, d: 4, e: 5 // ...}const newObj = getObjectKeys(obj, [ 'a', 'b', 'c', 'd' ])console.log(newObj)

10.反轉字符串

constreverseString=(string)=>{ return string.split("").reduceRight((acc, s) => acc + s)}const string = 'fatfish'console.log(reverseString(string)) // hsiftaf

寫在最後

以上就是我跟你分享的10個關於reduce的知識技巧，希望你你能從中學到一些新的東西，也希望對你有用，如果你覺得有幫助我話，請點讚我，關注我，並將這篇文章與你的開發者朋友一起來分享它。

最後，感謝你的閱讀，編程愉快。

學習更多技能

請點擊下方公眾號