10 個 Reduce 常用“奇技淫巧”

語言: CN / TW / HK

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 https://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 = `https://medium.com/?name=${searchObj.name}&age=${searchObj.age}`; // https://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 = `https://medium.com/${search}`; console.log(link); // https://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


本篇通譯自:https://medium.com/javascript-in-plain-english/10-must-know-javascript-tricks-tips-about-reduce-1368766d99da

作者:fatfish

OK,以上便是本篇分享。點贊關注評論,為好文助力👍

我是掘金安東尼 🤠 100 萬閲讀量人氣前端技術博主 💥 INFP 寫作人格堅持 1000 日更文 ✍ 關注我,陪你一起度過漫長編程歲月 🌏