Comment les débutants peuvent-ils mieux utiliser les tableaux en JavaScript ? (code source)

Le contenu de cet article explique comment les débutants peuvent mieux utiliser les tableaux en JavaScript ? (code source), il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère que cela vous sera utile.

Utiliser Array.find au lieu de Array.filter

Array.filter est une méthode très utile. Il filtre le tableau d'origine via la fonction de rappel et renvoie les éléments filtrés sous forme d'un nouveau tableau. Comme son nom l'indique, nous utilisons cette méthode pour le filtrage, ce qui (d'une manière générale) aboutit à un nouveau tableau de longueur plus courte.

Cependant, je ne recommande pas d'utiliser Array.filter si vous savez qu'un seul élément restera après le filtrage par la fonction de rappel. Par exemple : utilisez égal à un identifiant unique comme condition de filtre pour filtrer un tableau. Dans cet exemple, Array.filter renvoie un nouveau tableau avec un seul élément. Cependant, puisque nous essayons simplement d'obtenir l'élément avec un identifiant spécifique, ce nouveau tableau est inutile.

Parlons des performances. Afin d'obtenir tous les éléments qui correspondent aux critères de filtre de la fonction de rappel, Array.filter doit parcourir l'intégralité du tableau. S'il y a des milliers d'éléments dans le tableau d'origine, la fonction de rappel doit être exécutée un nombre considérable de fois.

Pour éviter ces situations, je recommande d'utiliser Array.find. Il nécessite une fonction de rappel tout comme Array.filter, mais renvoie uniquement le premier élément qui répond aux critères. Lorsque le premier élément répondant aux conditions de filtrage de la fonction de rappel est trouvé, la recherche vers le bas s'arrête immédiatement. Plus besoin d'itérer sur 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' }

Utilisez Array.some au lieu de Array.find

J'avoue que je fais cette erreur assez souvent. Ensuite, un ami m'a suggéré de consulter la documentation MDN pour trouver une meilleure solution. En fait (cette erreur) est très similaire à l'exemple Array.indexOf/Array.includes ci-dessus.

Dans l'exemple ci-dessus, nous savons qu'Array.find nécessite une fonction de rappel comme paramètre et renvoie le premier élément (qualifié). Cependant, lorsque nous avons besoin de savoir si un élément existe dans un tableau, Array.find est-il le meilleur choix ? Pas nécessairement, puisqu'il renvoie un élément, pas un booléen.

Dans l'exemple ci-dessous, je recommande d'utiliser Array.some, qui renvoie la valeur booléenne dont vous avez besoin.

'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

Ajoutez la différence entre l'utilisation de Array.some et Array.includes. Les deux renvoient une valeur booléenne indiquant si un élément existe dans le tableau et arrêtent de parcourir le tableau une fois que l'élément correspondant est trouvé. La différence est que le paramètre de Array.some est une fonction de rappel, tandis que le paramètre de Array.includes est une valeur (le deuxième paramètre facultatif n'est pas pris en compte).

Supposons que vous vouliez savoir si l'élément avec la valeur existe dans le tableau. Vous pouvez soit écrire le code : [].includes(value), soit transmettre item => item === value au tableau. .some comme fonction de rappel. Array.includes est plus facile à utiliser et Array.some est plus contrôlable.

Utilisez Array.reduce au lieu de la combinaison de Array.filter et Array.map

En fait, Array.reduce n'est pas facile à comprendre. Cependant, si nous filtrons d'abord le tableau d'origine à l'aide de Array.filter, puis appelons Array.map (sur le résultat) (pour obtenir un nouveau tableau). Cela semble être un problème. Y a-t-il quelque chose que nous avons négligé ?

Le problème avec ceci est le suivant : nous parcourons le tableau deux fois. La première fois consiste à filtrer le tableau d'origine pour obtenir un nouveau tableau avec une longueur légèrement plus courte. La deuxième fois (Note du traducteur : Array.map) consiste à traiter le nouveau tableau renvoyé par Array.filter et à créer à nouveau un nouveau tableau ! Pour obtenir le résultat final, nous avons utilisé une combinaison de deux méthodes de tableau. Chaque méthode a sa propre fonction de rappel, et le tableau temporaire utilisé par Array.map est fourni par Array.filter, qui (en général) ne peut pas être réutilisé.

Pour éviter de tels scénarios inefficaces, ma suggestion est d'utiliser Array.reduce. Mêmes résultats, meilleur code ! Array.reduce vous permet de mettre des éléments filtrés et réduits dans un accumulateur. L'accumulateur peut être un nombre à incrémenter, un objet à remplir, une chaîne ou un tableau à épisser, etc.

Dans l'exemple ci-dessus, nous avons utilisé Array.map, (mais plus) il est recommandé d'utiliser Array.reduce où l'accumulateur est le tableau à épisser. Dans l'exemple suivant, en fonction de la valeur de la variable env, nous l'ajouterons à l'accumulateur ou laisserons l'accumulateur inchangé (c'est-à-dire ne rien faire).

'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 explique comment les débutants peuvent mieux utiliser les tableaux en JavaScript ? (code source) introduction complète, si vous souhaitez en savoir plus sur le Tutoriel vidéo JavaScript, veuillez faire attention au site Web PHP chinois.

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!