Cet article vous apporte des connaissances pertinentes sur js. Il parle principalement de la méthode Array.reduce en js. Les amis intéressés peuvent y jeter un œil.
Nous utilisons souvent la méthode de réduction de l'objet Array pour effectuer des calculs ou des combinaisons de données. J'ai découvert que j'utilisais la réduction depuis tant d'années, mais je ne la comprends toujours pas très bien. J'ai découvert que si la valeur initiale n'est pas transmise, cela peut aussi être fait normalement, le tableau peut aussi être un tableau de fonctions, pour améliorer notre code.
Cet article vous ramènera à la compréhension d'Array.reduce et des scénarios d'application.
Regardons comment MDN le décrit :
reduce()
La méthode effectue une séquence d'opérations sur chaque élément du array. La fonctionreduce()
方法对数组中的每个元素按序执行一个由您提供的 reducer 函数,每一次运行 reducer 会将先前元素的计算结果作为参数传入,最后将其结果汇总为单个返回值。
我们来看一下这段代码:
const arr = [1, 2, 3] const initValue = 10; function reducer(previousValue, currentValue, currentIndex, arrryTarget) { return preValue + currentValue } arr.reduce(reducer, initValue) // res === 16
reduce 会遍历 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 | 6 reducer que vous fournissez transmettra les résultats de calcul des éléments précédents en tant que paramètres à chaque exécution, et résumera enfin les résultats en une seule valeur de retour. |
réducteur Exécution répétée | previousValue | currentValue th> | currentIndex | retour | 🎜||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Première exécution🎜 | 10< /code> 🎜<td><code>1 🎜 | 0 🎜 | 11 🎜🎜 | |||||||||||||||||||
Deuxième exécution🎜 < td>11 🎜 | 2 🎜 | 1 🎜 | 13 🎜🎜< tr > | La troisième exécution🎜 | 13 🎜 | 3 🎜 | 2 🎜 | 16 🎜🎜🎜🎜🎜Tous ceux qui ont utilisé la réduction dans ce processus doivent savoir que les mots originaux sur MDN ressemblent à ceci : 🎜🎜🎜Lorsque la fonction de rappel est exécutée pour la première fois, il n'y a pas de "dernière résultat du calcul". Si vous avez besoin que la fonction de rappel commence à s'exécuter à partir de l'élément avec l'index de tableau 0, vous devez transmettre une valeur initiale. Sinon, l'élément avec l'indice de tableau 0 sera utilisé comme valeur initiale initialValue, et l'itérateur commencera à s'exécuter à partir du deuxième élément (index 1 au lieu de 0)🎜🎜C'est-à-dire que le premier Lorsque la fonction de réduction est exécutée pour la première fois, il n'y a pas de "dernier résultat de calcul". La valeur initiale est passée ici, donc la fonction reducer démarre l'exécution à partir de l'élément avec l'index de tableau 0, c'est-à-dire que arr.length est égal au nombre d'exécutions de < code>réducteur . 🎜🎜Mais que se passe-t-il si la valeur initiale n'est pas transmise ? Changeons le code : 🎜[true, true, false, true].reduce((a, b) => a & b); // 有false,按照与逻辑,一定会是false Copier après la connexion Copier après la connexion arr.length - 1 fois. Les paramètres de chaque processus d'exécution sont les suivants : 🎜
|