L'auteur du matériel, dont nous publions la traduction aujourd'hui, dit qu'au cours des derniers mois, lors de la vérification des demandes de tirage, il a constamment rencontré les quatre mêmes lacunes associées à l'utilisation irrationnelle des méthodes de tableau en JavaScript. Afin de réduire ces défauts de code qui apparaissaient auparavant dans ses programmes, il a écrit cet article.
Remplacement de indexOf () par includes ()
"Si vous recherchez quelque chose dans un tableau, utilisez la méthode
indexOf() ." J'ai rencontré une telle recommandation dans l'un des cours lorsque j'ai étudié JavaScript. Cette recommandation est tout à fait normale, on ne peut rien en dire de mal.
Sur MDN, vous pouvez découvrir que la méthode
indexOf() renvoie le premier index par lequel un certain élément peut être trouvé dans le tableau. Cela signifie que si nous prévoyons d'utiliser cet index dans le programme, la méthode
indexof() est idéale pour trouver des éléments dans des tableaux.
Mais que faire si nous avons juste besoin de savoir s'il y a un certain élément dans le tableau ou non? Autrement dit, nous ne nous intéressons pas à l'index de cet élément, s'il se trouve dans le tableau, mais au fait de sa présence ou de son absence. Avec cette approche, nous sommes assez à l'aise avec une commande qui renvoie
true ou
false . Dans de tels cas, je recommande de ne pas utiliser la méthode
indexOf() , mais la méthode
includes() , qui renvoie une valeur booléenne. Prenons un exemple:
'use strict'; const characters = [ 'ironman', 'black_widow', 'hulk', 'captain_america', 'hulk', 'thor', ]; console.log(characters.indexOf('hulk'));
Utilisation de la méthode find () au lieu de la méthode filter ()
La méthode
filter() est un outil très utile. Il, sur la base d'un tableau, crée un autre tableau contenant les éléments du tableau d'origine qui correspondent à la condition spécifiée. Comme on peut le comprendre d'après le nom de cette méthode, elle est destinée au filtrage des tableaux, au cours desquels sont généralement obtenus des tableaux plus courts que les originaux.
Et si nous savons qu'après avoir filtré le tableau, il ne restera qu'un élément? Par exemple, cela peut se produire lorsque vous essayez de filtrer les éléments d'un tableau en fonction d'un identifiant unique. Dans une telle situation, je ne recommanderais pas d'utiliser la méthode
filter() , car le tableau qu'il forme ne contiendra qu'un seul élément. Si nous sommes intéressés par un élément de tableau avec une valeur unique, alors nous allons travailler avec une seule valeur, et un tableau n'est pas nécessaire pour représenter une telle valeur.
Si nous parlons des performances de la méthode
filter() , il s'avère que pour former une liste d'éléments correspondant à la condition spécifiée lors de son appel, il faudrait regarder l'ensemble du tableau. De plus, imaginez qu'il y a des centaines d'éléments dans un tableau qui satisfont une condition donnée. Cela se traduira par le tableau résultant étant assez grand.
Afin d'éviter d'entrer dans de telles situations, je recommanderais d'utiliser la méthode
find() . Lorsqu'elle est appelée, elle reçoit un rappel décrivant la condition, très similaire à celle utilisée avec la méthode
filter() , mais la méthode
find() ne renvoie que le premier élément qui correspond à la condition. Dans le même temps, cette méthode cesse de fonctionner immédiatement après avoir trouvé un tel élément. Par conséquent, il n'a pas à parcourir l'intégralité du tableau.
'use strict'; const characters = [ { id: 1, name: 'ironman' }, { id: 2, name: 'black_widow' }, { id: 3, name: 'captain_america' }, { id: 4, name: 'captain_america' }, ]; function getCharacter(name) { return character => character.name === name; } console.log(characters.filter(getCharacter('captain_america'))); // [ // { id: 3, name: 'captain_america' }, // { id: 4, name: 'captain_america' }, // ] console.log(characters.find(getCharacter('captain_america'))); // { id: 3, name: 'captain_america' }
Remplacement de la méthode find () par la méthode some ()
Je dois admettre que la surveillance dont nous allons discuter maintenant, je l'ai engagée à plusieurs reprises. Ensuite, ils m'ont conseillé de regarder
MDN et de voir comment améliorer ce que je faisais irrationnellement. En un mot, cela est très similaire à ce que nous venons de voir en parlant des
indexOf() et
includes() .
Dans le cas ci-dessus, nous avons vu que la méthode
find() , comme argument, prend un rappel et retourne un élément de tableau. La méthode
find() peut-elle être appelée la solution la plus efficace si nous devons savoir si le tableau contient une certaine valeur ou non? Peut-être pas, car cette méthode renvoie la valeur d'un élément de tableau, pas un booléen.
Dans une telle situation, je recommanderais d'utiliser la méthode
some() , qui renvoie une valeur booléenne.
'use strict'; const characters = [ { id: 1, name: 'ironman', env: 'marvel' }, { id: 2, name: 'black_widow', env: 'marvel' }, { id: 3, name: 'wonder_woman', env: 'dc_comics' }, ]; function hasCharacterFrom(env) { return character => character.env === env; } console.log(characters.find(hasCharacterFrom('marvel')));
Utilisation de la méthode Reduce () au lieu d'une combinaison de méthodes filter () et map ()
Il vaut la peine de dire que la méthode
reduce() ne peut pas être classée comme facile à comprendre. Cependant, si ce qui peut être fait avec cela se fait en deux étapes, en utilisant les méthodes
filter() et
map() combinées dans une chaîne, il semble que quelque chose dans cette approche soit incorrect.
Je dis qu'avec cette approche, vous devez regarder le tableau deux fois. La première passe, effectuée par la méthode
filter() , implique la visualisation de l'ensemble du tableau et la création d'un nouveau tableau filtré. Après la deuxième passe, effectuée par la méthode
map() , encore une fois, un nouveau tableau est créé qui contient les résultats de la transformation des éléments du tableau obtenus après l'exécution de la méthode
filter() . Par conséquent, pour atteindre le tableau fini, deux méthodes sont utilisées. Chaque méthode a son propre rappel, et pendant l'exécution d'une telle opération à l'aide de la méthode
filter() , un tableau est créé avec lequel nous ne pouvons plus travailler.
Afin de réduire la charge sur le système créé en utilisant deux méthodes et d'augmenter la productivité des programmes, dans de tels cas, je recommanderais d'utiliser la méthode
reduce() . Le résultat sera le même, mais le code sera meilleur. Cette méthode vous permet de filtrer les éléments qui nous intéressent et de les ajouter à la batterie. La batterie peut être une variable numérique qui stocke, disons, la somme des éléments du tableau, elle peut être un objet, une chaîne ou un tableau dans lequel nous pouvons accumuler les éléments dont nous avons besoin.
Dans notre cas, puisque nous parlons de l'utilisation de la méthode
map() , je conseillerais d'utiliser la méthode
reduce() avec un tableau comme accumulateur. Dans l'exemple suivant, nous filtrons les éléments du tableau qui sont des objets par la valeur du champ
env et effectuons leur conversion.
'use strict'; const characters = [ { name: 'ironman', env: 'marvel' }, { name: 'black_widow', env: 'marvel' }, { name: 'wonder_woman', env: 'dc_comics' }, ]; console.log( characters .filter(character => character.env === 'marvel') .map(character => Object.assign({}, character, { alsoSeenIn: ['Avengers'] })) ); // [ // { name: 'ironman', env: 'marvel', alsoSeenIn: ['Avengers'] }, // { name: 'black_widow', env: 'marvel', alsoSeenIn: ['Avengers'] } // ] console.log( characters .reduce((acc, character) => { return character.env === 'marvel' ? acc.concat(Object.assign({}, character, { alsoSeenIn: ['Avengers'] })) : acc; }, []) ) // [ // { name: 'ironman', env: 'marvel', alsoSeenIn: ['Avengers'] }, // { name: 'black_widow', env: 'marvel', alsoSeenIn: ['Avengers'] } // ]
Résumé
Dans cet article, nous avons examiné certaines approches de l'utilisation efficace des méthodes de tableau pour résoudre divers problèmes. Nous pensons que les idées sur lesquelles les recommandations données par l'auteur de cet article sont basées peuvent aider à améliorer le code JS dans d'autres situations.
Chers lecteurs! Avez-vous déjà rencontré des exemples de mauvaise allocation des mécanismes JavaScript?
