This article brings you relevant knowledge about js. It mainly talks about the Array.reduce method in js. Friends who are interested can take a look at it together. I hope it will be helpful to everyone.
We often use the reduce method of the Array object to do some calculations or data combinations. We find that after using reduce for so many years, it is not I know it well and just recently discovered that it works fine if we don't pass the initial value, and the array can also be an array of functions to enhance our code.
This article will take you back to understand Array.reduce and application scenarios.
Let’s take a look at how MDN describes it:
reduce()The method executes a reducer function provided by you in order for each element in the array. Each time the reducer is run, the calculation result of the previous element will be passed in as a parameter, and finally The results are summarized into a single return value.
Let’s take a look at this code:
const arr = [1, 2, 3]
const initValue = 10;
function reducer(previousValue, currentValue, currentIndex, arrryTarget) {
return preValue + currentValue
}
arr.reduce(reducer, initValue) // res === 16reduce will traverse the arr array. The reducer will be executed as many times as there are arrays. The parameters for each execution process (arrryTarget is the same, so it is meaningless, unless the original array is directly changed during the traversal process, so it is not considered here) are as follows:
#reducer Repeated execution |
previousValue |
currentValue |
##currentIndex | return|
|---|---|---|---|---|
10 |
1 |
0 |
11 |
|
| 11 | | 2 | 1 | 13 |
| 13 | | 3 | 2 | 16 |
initialValuereducer, and the iterator will start executing from the second element (index 1 instead of 0)
That is When the reducer function is executed for the first time, there is no "last calculation result". The initial value is passed here, so the
function starts execution from the element with array index 0, that is, arr.length is equal to the reducer number of executions. But what if the initial value is not passed? Let's change the code:
const arr = [1, 2, 3]
- const initValue = 10;
function reducer(previousValue, currentValue, currentIndex, arrryTarget) {
return preValue + currentValue
}
- arr.reduce(reducer, initValue) // res === 16
+ arr.reduce(reducer) // res === 6At this time, the reducer will only execute
arr.length - 1 times. The parameters for each execution are as follows:
Repeated execution | previousValue | currentValue | currentIndex | |
|---|---|---|---|---|
| 1 | ##2 | 1 | 3 | |
##3 | 2 | 6 | <p>因为没有传递初始值，因此 <code>reducer 函数从数组索引为 1 的元素开始执行，首次执行的时候 arr[0] 被作为了 previousValue ，currentValue 为是 arr[1]。现在了 reduce 的基本用法，那么它的运用场景有哪些呢？ reduce 的运用场景用于计算数据因为 reducer 函数会重复执行 比如累加，计算订单总金额等案例： const orders = [{ id: 1, amount: 10 }, { id: 2, amount: 12 }, { id: 3, amount: 5 }]
const totalAmount = orders.reduce((sum, order) => sum + order.amount, 0); // 27Copy after login 累加可以，那么 [true, true, false, true].reduce((a, b) => a & b); // 有false，按照与逻辑，一定会是false Copy after login 将多维数组转为一维数组reduce 可以很轻松的将二维数组转为一维数组。示例： [[1,2], [3, 4]].reduce((arrA, arrB) => [...arrA, ...arrB]) Copy after login 那是不是封装一下就可以把多维数组组转为一维数组了？当然可以： function flaten(arr) {
if(!Array.isArray(arr)) {
return arr;
}
return arr.reduce((result, item) => {
// 不是数组，则直接放在数组末尾
if(!Array.isArray(item)) {
result.push(item);
return result;
}
return result.concat(flaten(item))
}, [])
}
flaten([1,2, [3, 4], [6, [7, 8]]]) // [1, 2, 3, 4, 6, 7, 8]Copy after login 这样就很简单的实现一个深层次的 flaten 。 将函数作为参数将函数作为参数的话，运用场景在哪里？比如： [func1, func2. func3, func4].reduce((value, funcN) => funcN(value), value)， Copy after login 执行顺序： func1 => func2 => func3 => func4， 这个效果就和 pipe 很像了是不是？这样封装一下就可以让函数执行扁平化。而不是 其他场景MDN 其实还描述了很多使用场景，大家都可以去探索一下，总之 reduce 的功能很强大，俗称“万金油”不是没有道理的。 这里就简单列一下：
最后js中其实有很多函数功能都很强大，这些函数的强大其实还是因为js本身的机制带来的，函数在js中是一等公民，注定会逐渐影响我们的编码风格，因此大家可以去了解和学习函数式编程，它能让你的代码写的更轻松。 推荐学习：《JavaScript视频教程》The above is the detailed content of A thorough understanding of the Array.reduce method in js in one article. For more information, please follow other related articles on the PHP Chinese website!
Related labels：
source：juejin.im
Previous article：An article to talk about streams in Node
Next article：Let’s talk about how to implement parallax scrolling in JavaScript
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
How to display the mobile version of Google Chrome
Hello teacher, how can I change Google Chrome into a mobile version?
From 2024-04-23 00:22:19
0
11
2414
There is no output in the parent window
document.onclick = function(){ window.opener.document.write('I am the output of the child ...
From 2024-04-18 23:52:34
0
1
1916
Related Topics
More>
|
![Practical development of imitation Meituan APP [A must-have JavaScript project for front-end programmers]](https://img.php.cn/upload/course/000/000/068/6242bebc05ca9210.png)
![JavaScript basic syntax [dom|bom|es6 new syntax|jQuery|data visualization echarts]](https://img.php.cn/upload/course/000/000/068/6242bb730fb11708.png)
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
