reduce运用场景有哪些 代码是什么

这篇文章主要介绍了“reduce使用场景有哪些，代码是什么”相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇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

以上就是关于“reduce使用场景有哪些，代码是什么”的介绍了，感谢各位的阅读，希望这篇文章能帮助大家解决问题。

（编辑：银川站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!