写点什么

10 个 Reduce 常用“奇技淫巧”

作者:掘金安东尼
  • 2022 年 7 月 26 日
  • 本文字数:2749 字

    阅读完需:约 9 分钟

10 个 Reduce 常用“奇技淫巧”

不知道大家平常用 Reduce 多不多,反正本瓜用的不多。但实际上,Reduce 能做的,比我们能想到的要多得多,本篇带来 10 个 Reduce 常用场景和技巧,一定有你不知道~


冲ヾ(◍°∇°◍)ノ゙

累加/累积

累加我们可能是最熟悉 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
复制代码

求最大/最小值

如果你用原生 api 求最大/最小值,无可厚非,Reduce 也能实现同样的效果。


const array = [-1, 10, 6, 5];const max = Math.max(...array); // 10const 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 defaultArray.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))
复制代码

数组去重

数组去重,用 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 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)
复制代码

反转字符串

除了 reverse 做数组的翻转,Reduce 也可以,再加上 split,就可以反转字符串啦。


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


<hr>


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


OK,以上便是本篇分享。点赞关注评论,为好文助力👍

我是掘金安东尼 🤠 100 万阅读量人气前端技术博主 💥 INFP 写作人格坚持 1000 日更文 ✍ 关注我,陪你一起度过漫长编程岁月 🌏

发布于: 刚刚阅读数: 4
用户头像

还未添加个人签名 2022.07.14 加入

社会我瓜哥,人狠话不多😎 微信 anthony1453,加我交个朋友😎 正联合【机械工业出版社】出版《程序员成长手册》,敬请期待😎 真正的大师,永远怀着一颗学徒的心(易)😎

评论

发布
暂无评论
10 个 Reduce 常用“奇技淫巧”_JavaScript_掘金安东尼_InfoQ写作社区