英文 | https://javascript.plainenglish.io/10-must-know-javascript-tricks-tips-about-reduce-1368766d99da
作為一個前端開發者，你一定會大量使用reduce函數，它是一個強大而有用的數組API，但是，今天我想給大家分享10個關于它的進階技巧。
1、作為加法器和累加器
使用“reduce”，我們可以輕松實作多個數相加或累加的功能。
// adder
const sum = (...nums) => {
return nums.reduce((sum, num) => sum + num);
};
console.log(sum(1, 2, 3, 4, 10)); // 20
// accumulator
const 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); // 10
const 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)、正常方式
這是大多數人使用它的方式。
const parseQuery = () => {
const search = window.location.search;
let query = {};
search
.slice(1)
.split("&")
.forEach((it) => {
const [key, value] = it.split("=");
query[key] = decodeURIComponent(value);
});
return query;
}; 2）、使用reduce
Reduce 實際上可以做到這一點，而且看起來更簡單。
const parseQuery = () => {
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 parameter
const 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、反序列化搜尋參數
當我們要跳轉到某個連結并為其添加一些搜尋參數時，手動拼接的方式不是很友善。
如果要串聯的參數很多，那将是一場災難。
const searchObj = {
name: "fatfish",
age: 100,
// ...
};
const link = `https://medium.com/?name=${searchObj.name}&age=${searchObj.age}`;
// https://medium.com/?name=fatfish&age=100 幸運的是，“reduce”可以幫助我們輕松解決這個問題。
const stringifySearch = (search = {}) => {
return Object.entries(search)
.reduce(
(t, v) => `${t}${v[0]}=${encodeURIComponent(v[1])}&`,
Object.keys(search).length ? "?" : ""
)
.replace(/&$/, "");
};
const search = stringifySearch({
name: "fatfish",
age: 100,
});
const link = `https://medium.com/${search}`;
console.log(link); // https://medium.com/?name=fatfish&age=100 5、展平多層嵌套數組
你知道如何展平多層嵌套數組嗎？
const array = [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、模拟平面特征的功能
雖然我們已經實作了扁平化深度嵌套數組的功能，但是如何才能完全實作扁平化的功能呢？
// Expand one layer by default
Array.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 layer
console.log(array.flat()) // [ 1, 2, [ 3, [ 4, [ 5 ] ] ] ]
console.log(array.flat2()) // [ 1, 2, [ 3, [ 4, [ 5 ] ] ] ]
// Expand all
console.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、統計數組成員的個數
如何計算數組中每個成員的個數？
為什麼使用地圖而不是對象？
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 properties
const obj = {
a: 1,
b: 2,
c: 3,
d: 4,
e: 5
// ...
}
// We just want to get some properties above it to create a new object
const 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、反轉字元串
const reverseString = (string) => {
return string.split("").reduceRight((acc, s) => acc + s)
}
const string = 'fatfish'
console.log(reverseString(string)) // hsiftaf 總結
以上就是我今天跟你分享的10個關于Reduce的JavaScript技巧，如果你覺得有用的話，請點贊我，關注我，并将它分享給你的朋友，也許能夠幫助到他。
最後，感謝你的閱讀，祝程式設計愉快！
![POJ-2046---Gap （bfs+hash)[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)