Dieser Artikel vermittelt Ihnen relevantes Wissen über js. Es geht hauptsächlich um die Array.reduce-Methode in js. Ich hoffe, dass es für alle hilfreich ist.
Wir verwenden oft die Reduce-Methode des Array-Objekts, um einige Berechnungen oder Datenkombinationen durchzuführen. Ich habe festgestellt, dass ich Reduce seit so vielen Jahren verwende, aber ich verstehe es erst seit kurzem Ich habe festgestellt, dass, wenn der Anfangswert nicht übergeben wird, dies auch normal erfolgen kann. Das Array kann auch ein Array von Funktionen sein, um unseren Code zu verbessern.
Dieser Artikel führt Sie zurück zum Verständnis von Array.reduce und Anwendungsszenarien.
Sehen wir uns an, wie MDN es beschreibt:
reduce()Die Methode führt eine Folge von Operationen für jedes Element im aus Array. Die von Ihnen bereitgestelltereduce()方法对数组中的每个元素按序执行一个由您提供的 reducer 函数，每一次运行 reducer 会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值。
我们来看一下这段代码：
const arr = [1, 2, 3]
const initValue = 10;
function reducer(previousValue, currentValue, currentIndex, arrryTarget) {
return preValue + currentValue
}
arr.reduce(reducer, initValue) // res === 16reduce 会遍历 arr 数组，数组有多少个，reducer 就会执行多少次。执行过程每一次的参数（arrryTarget都是一样的，因此没有意义，除非在遍历过程中直接改变了原数组，因此这里不考虑）如下：
reducer 重复执行 |
previousValue |
currentValue |
currentIndex |
return |
|---|---|---|---|---|
| 第一次执行 | 10 |
1 |
0 |
11 |
| 第二次执行 | 11 |
2 |
1 |
13 |
| 第三次执行 | 13 |
3 |
2 |
16 |
这个过程用过 reduce 的应该都知道，MDN 上原话是这样的：
第一次执行回调函数时，不存在“上一次的计算结果”。如果需要回调函数从数组索引为 0 的元素开始执行，则需要传递初始值。否则，数组索引为 0 的元素将被作为初始值 initialValue，迭代器将从第二个元素开始执行（索引为 1 而不是 0）
也就是第一次执行 reducer 函数时，不存在“上一次的计算结果”。这里传递了初始值，因此 reducer 函数才从数组索引为 0 的元素开始执行，也就是 arr.length 等于 reducer 执行次数。
但如果不传递初始值呢？我们改动一下代码：
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 === 6这时候 reducer 只会执行 arr.length - 1 次。执行过程每一次的参数如下：
reducer 重复执行 | previousValue | currentValue | currentIndex | return |
|---|---|---|---|---|
| 第一次执行 | 1 | 2 | 1 | 3 |
| 第二次执行 | 3 | 3 | 2 | 6Reducer-Funktion übergibt bei jeder Ausführung die Berechnungsergebnisse der vorherigen Elemente als Parameter und fasst die Ergebnisse schließlich in einem einzigen Rückgabewert zusammen. |
reducer Wiederholte Ausführung | previousValue | currentValue | currentIndex | return | 🎜||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Erste Ausführung🎜 | 10< /code> 🎜<td><code>1🎜 | 0🎜 | 11🎜🎜 | |||||||||||||||||||
Zweite Ausführung🎜 < td>11🎜 | 2🎜 | 1🎜 | 13🎜🎜< tr > | Die dritte Ausführung🎜 | 13🎜 | 3🎜 | 2🎜 | 16🎜🎜🎜🎜🎜Jeder, der reduzieren in diesem Prozess verwendet hat, sollte wissen, dass die ursprünglichen Wörter auf MDN wie folgt lauten: 🎜🎜🎜Wenn die Rückruffunktion zum ersten Mal ausgeführt wird, gibt es kein „letztes“. Berechnungsergebnis". Wenn Sie möchten, dass die Callback-Funktion ab dem Element mit Array-Index 0 ausgeführt wird, müssen Sie einen Anfangswert übergeben. Andernfalls wird das Element mit dem Array-Index 0 als Anfangswert initialValue verwendet und der Iterator beginnt mit der Ausführung ab dem zweiten Element (Index 1 statt 0)🎜🎜Das heißt, das erste Wenn die Reduzierfunktion zum ersten Mal ausgeführt wird, gibt es kein „letztes Berechnungsergebnis“. Der Anfangswert wird hier übergeben, sodass die Funktion reducer die Ausführung ab dem Element mit dem Array-Index 0 beginnt, d. h. arr.length entspricht der Anzahl der Ausführungen von < code>reduzierer . 🎜🎜Was aber, wenn der Anfangswert nicht übergeben wird? Ändern wir den Code: 🎜[true, true, false, true].reduce((a, b) => a & b); // 有false，按照与逻辑，一定会是false Nach dem Login kopieren Nach dem Login kopieren arr.length - 1 Mal aus. Die Parameter für jeden Ausführungsprozess lauten wie folgt: 🎜
|
