10 个 Reduce 常用“奇技淫巧”
Posted 掘金安东尼
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了10 个 Reduce 常用“奇技淫巧”相关的知识，希望对你有一定的参考价值。
不知道大家平常用 Reduce 多不多，反正本瓜用的不多。但实际上，Reduce 能做的，比我们能想到的要多得多，本篇带来 10 个Reduce 常用场景和技巧，一定有你不知道~
冲ヾ(◍°∇°◍)ﾉﾞ
累加/累积
累加我们可能是最熟悉 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
求最大/最小值
如果你用原生 api 求最大/最小值，无可厚非，Reduce 也能实现同样的效果。
const array = [-1, 10, 6, 5];
const max = Math.max(...array); // 10
const min = Math.min(...array); // -1
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 对象。
// url https://qianlongo.github.io/vue-demos/dist/index.html?name=fatfish&age=100#/home
// format the search parameters
"name": "fatfish",
"age": "100"
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;
;
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 上面，好用，收藏。
const searchObj =
name: "fatfish",
age: 100,
// ...
;
const link = `https://medium.com/?name=$searchObj.name&age=$searchObj.age`;
// https://medium.com/?name=fatfish&age=100
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 也是可以做到这一点的。
const array = [1, [2, [3, [4, [5]]]]];
// expected output [ 1, 2, 3, 4, 5 ]
const flatArray = array.flat(Infinity); // [1, 2, 3, 4, 5]
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 内部实现，妥妥的刚。
// 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 竟然也可以，写法如下：
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 一行代码搞定，收藏！
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, …
获取对象多个属性
获取对象的多个属性，然后赋给新的对象，比较笨的做法如下：
// 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)
反转字符串
除了 reverse 做数组的翻转，Reduce 也可以，再加上 split，就可以反转字符串啦。
const reverseString = (string) =>
return string.split("").reduceRight((acc, s) => acc + s)
const string = fatfish
console.log(reverseString(string)) // hsiftaf
作者：fatfish
OK，以上便是本篇分享。点赞关注评论，为好文助力
以上是关于10 个 Reduce 常用“奇技淫巧”的主要内容，如果未能解决你的问题，请参考以下文章