10 個 Reduce 常用“奇技淫巧”
theme: geek-black
持續創作，加速成長！這是我參與「掘金日新計劃 · 6 月更文挑戰」的第18天，點選檢視活動詳情
不知道大家平常用 Reduce 多不多，反正本瓜用的不多。但實際上，Reduce 能做的，比我們能想到的要多得多，本篇帶來 10 個Reduce 常用場景和技巧，一定有你不知道~
衝ヾ(◍°∇°◍)ﾉﾞ
累加/累積
累加我們可能是最熟悉 Reduce 的一種用法，除此之外，還可以用做累積。 ```js // 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 ```
求最大/最小值
如果你用原生 api 求最大/最小值，無可厚非，Reduce 也能實現同樣的效果。
js
const array = [-1, 10, 6, 5];
const max = Math.max(...array); // 10
const min = Math.min(...array); // -1
js
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));
格式化搜尋引數
獲取 url 上的引數是我們經常面臨的需求，用 forEach 遍歷可以，用 Reduce 累加更可以，這樣可以減少宣告 query 物件。
js
// url http://qianlongo.github.io/vue-demos/dist/index.html?name=fatfish&age=100#/home
// format the search parameters
{
"name": "fatfish",
"age": "100"
}
js
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;
};
js
const parseQuery = () => {
const search = window.location.search;
return search
.slice(1)
.split("&")
.reduce((query, it) => {
const [key, value] = it.split("=");
query[key] = decodeURIComponent(value);
return query;
}, {});
};
反序列化搜尋引數
有了獲取 url 引數，就有把引數重新掛在到 url 上面，好用，收藏。
js
const searchObj = {
name: "fatfish",
age: 100,
// ...
};
const link = `http://medium.com/?name=${searchObj.name}&age=${searchObj.age}`;
// http://medium.com/?name=fatfish&age=100
js
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 = `http://medium.com/${search}`;
console.log(link); // http://medium.com/?name=fatfish&age=100
拉平巢狀陣列
我們都會用 .flat(Infinity) 無限拉平所有多維陣列成一維陣列，只用 reduce 和 flat 也是可以做到這一點的。
js
const array = [1, [2, [3, [4, [5]]]]];
// expected output [ 1, 2, 3, 4, 5 ]
const flatArray = array.flat(Infinity); // [1, 2, 3, 4, 5]
js
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]
實現 flat
如果想實現 flat，用 reduce 沒錯了，又是一個手寫原生 api 內部實現，妥妥的剛。
js
// 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))
陣列去重
陣列去重，用 reduce 竟然也可以，寫法如下：
js
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 ], [])
陣列計數
將陣列的項進行計數，返回一個 map，分別是每個項重複的次數，reduce 一行程式碼搞定，收藏！
js
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)) // Map(7) {1 => 2, 2 => 2, -1 => 1, 0 => 1, '0' => 1, …}
獲取物件多個屬性
獲取物件的多個屬性，然後賦給新的物件，比較笨的做法如下：
js
// 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 這樣解決，就顯得明智了許多：
js
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)
反轉字串
除了 reverse 做陣列的翻轉，Reduce 也可以，再加上 split，就可以反轉字串啦。
js
const reverseString = (string) => {
return string.split("").reduceRight((acc, s) => acc + s)
}
const string = 'fatfish'
console.log(reverseString(string)) // hsiftaf
本篇通譯自：http://medium.com/javascript-in-plain-english/10-must-know-javascript-tricks-tips-about-reduce-1368766d99da
作者：fatfish
OK，以上便是本篇分享。點贊關注評論，為好文助力👍
我是掘金安東尼 🤠 100 萬閱讀量人氣前端技術博主 💥 INFP 寫作人格堅持 1000 日更文 ✍ 關注我，陪你一起度過漫長程式設計歲月 🌏
- ChatGPT 不過如此，Kosmos-1 更勝一籌？微軟這波又贏了
- “ChatGPT 們” 所需算力真是“貴滴誇張”！
- 國內有哪些對標 ChatGPT 的大語言模型？ 5 大競品
- 常用！提前 reject promise 的 2 種場景，收藏等於學會
- 程式設計開發新朋友 —— ChatGPT 和 NotionAI 實戰
- 為什麼我更推薦 Notion AI 勝於 ChatGPT ?
- 推薦 5 個你大概率沒見過的免費 API ，一鍵獲取資料！
- ✨從純函式講起，一窺最深刻的函子 Monad
- 神馬？要退役 JavaScript ？！誰人出此狂言？！
- 寫出乾淨的 JavaScript 5 個小技巧
- 想要白嫖正則是吧？這一次給你個夠！
- 淺聊快取函式
- JavaScript 中如何取消請求
- 知其然，而知其所以然，JS 物件建立與繼承【彙總梳理】
- 10 個 Reduce 常用“奇技淫巧”
- 萬字年中總結，共勉
- 4 個 JavaScript 最基礎的問題 —— Eric Elliott
- 日拱演算法：搜尋二維矩陣 II
- 日拱演算法：多數元素
- 日拱演算法：只出現一次的數字