Partagez quatre exemples d'utilisation incorrecte des méthodes de tableau JavaScript

Lorsque j’ai appris JavaScript pour la première fois, je ne l’ai pas étudié en profondeur et je n’avais qu’une compréhension limitée de certaines connaissances. Au cours de la dernière période, ces 4 erreurs ont été commises dans toutes les demandes d'extraction que j'ai vérifiées. Une autre raison pour laquelle j’ai écrit cet article est que j’ai moi-même commis ces erreurs. Voyons comment les utiliser correctement !

1. N'utilisez pas Array.indexOf, utilisez Array.includes

"Si vous souhaitez rechercher des éléments dans un tableau, utilisez Array.indexOf !". Je me souviens de cette phrase lorsque j'étudiais des cours JavaScript. Cette phrase est correcte, elle peut effectivement être utilisée de cette manière !

Selon le document MDN : "Array.indexOf renverra l'index de la première position correspondante de l'élément recherché." Par conséquent, si cet index doit être utilisé ultérieurement, Array.indexOf est un bon choix. solution. Cependant, le problème que nous voulons résoudre est le suivant : déterminer si un tableau contient un élément. Il s'agit d'une question Oui/Non, une question vraie ou fausse qui renvoie un type booléen. Par conséquent, je recommande d'utiliser Array.includes, qui renvoie une valeur booléenne.

'use strict';
const characters = [
  'ironman',
  'black_widow',
  'hulk',
  'captain_america',
  'hulk',
  'thor',
];
console.log(characters.indexOf('hulk'));
// 2
console.log(characters.indexOf('batman'));
// -1
console.log(characters.includes('hulk'));
// true
console.log(characters.includes('batman'));
// false

2. N'utilisez pas Array.filter, utilisez Array.find

Array.filter est une fonction très utile, elle renvoie un filtre qui satisfait au conditions de filtrage du nouveau tableau. Comme son nom l’indique, il est utilisé pour le filtrage.

Cependant, si nous savons que le résultat souhaité ne comporte qu’un seul élément, je ne recommande pas de l’utiliser. Par exemple, si notre définition de fonction de rappel utilise un ID unique pour filtrer, le résultat doit être unique. Dans ce cas, Array.filter renverra un tableau avec un seul élément. Parce que puisque nous pouvons rechercher par un ID spécifique, nous avons déjà déterminé qu'il n'y a qu'un seul élément, donc utiliser un tableau n'a aucun sens.

De plus, parlons des problèmes de performances. Afin de renvoyer tous les éléments correspondants, Array.filter doit rechercher l'ensemble du tableau. Vous pouvez imaginer que s'il y a des centaines d'éléments qui répondent aux conditions de filtrage, le tableau renvoyé sera très grand.

Pour éviter cette situation, je recommande d'utiliser Array.find. Il renvoie uniquement le premier élément qui satisfait à la condition de filtre. De plus, Array.find terminera l'exécution après avoir trouvé le premier élément qui remplit la condition, au lieu de rechercher dans l'ensemble 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' }

3. N'utilisez pas Array.find, utilisez Array.some

J'avoue avoir commis de nombreuses erreurs. Plus tard, un très bon ami m'a demandé de lire la documentation de MDN et m'a dit qu'il existait une meilleure solution. Cette situation est très similaire à Array.indexOf/Array.includes que nous venons de mentionner.

Dans l'exemple précédent, nous avons vu qu'Array.find accepte une fonction de filtre et renvoie les éléments satisfaits. Donc, si nous voulons savoir si un tableau contient un certain élément, Array.find est-il la meilleure solution ? Probablement pas, car il renvoie la valeur spécifique à l'élément, et non une valeur booléenne.

Je recommande à tout le monde d'utiliser Array.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')));
// { id: 1, name: 'ironman', env: 'marvel' }
console.log(characters.some(hasCharacterFrom('marvel')));
// true

4. N'utilisez pas la combinaison Array.map et Array.filter, utilisez Array.reduce

Array.reduce est un peu difficile à comprendre ! Cependant, si nous utilisons Array.filter et Array.map en même temps à chaque fois, réalisez-vous que vous avez besoin de quelque chose, n'est-ce pas ?

Ce que je veux dire, c'est : nous avons parcouru l'ensemble du tableau 2 fois. La première fois consiste à filtrer et à renvoyer un nouveau tableau, et la deuxième fois à construire un nouveau tableau via map. Nous utilisons deux méthodes de tableau, chacune avec sa propre fonction de rappel, et le tableau renvoyé par Array.filter n'est plus jamais utilisé.

Pour éviter toute inefficacité, je recommande d'utiliser Array.reduce. Même résultat, code plus élégant ! Veuillez consulter l'exemple ci-dessous :

'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'] }
// ]

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!