Difficultés dans les opérations sur les tableaux JavaScript (tutoriel détaillé)

Cet article explique les difficultés des opérations sur les tableaux JavaScript et ce à quoi vous devez prêter attention en utilisant des exemples d'analyse de code. Apprenons-les et référons-nous-y ensemble.

Le contenu suivant est l'expérience résumée lors de l'apprentissage des tableaux JavaScript et les points auxquels il faut prêter attention.

N'utilisez pas for_in pour parcourir des tableaux

Il s'agit d'un malentendu courant parmi les débutants en JavaScript. for_in est utilisé pour parcourir toutes les clés énumérables (énumérables) de l'objet, y compris la chaîne prototype. Il n'existe pas à l'origine pour parcourir des tableaux.

Il y a trois problèmes lors de l'utilisation de for_in pour parcourir des tableaux :

1. L'ordre de traversée n'est pas corrigé

Le moteur JavaScript ne garantit pas le ordre de parcours des objets. Lors du parcours d'un tableau en tant qu'objet normal, l'ordre d'indexation du parcours n'est pas non plus garanti.

2. Les valeurs sur la chaîne de prototype d'objet seront parcourues.

Si vous modifiez l'objet prototype du tableau (par exemple polyfill) sans le définir sur enumerable: false, for_in parcourra ces éléments.

3. Faible efficacité opérationnelle.

Bien que théoriquement JavaScript utilise la forme d'objets pour stocker des tableaux, le moteur JavaScript est particulièrement optimisé pour les tableaux, un objet intégré très couramment utilisé. https://jsperf.com/for-in-vs-...
Vous pouvez voir qu'utiliser for_in pour parcourir le tableau est plus de 50 fois plus lent que d'utiliser des indices pour parcourir le tableau

PS : Vous voudrez peut-être rechercher for_of

Ne pas utiliser JSON.parse(JSON.stringify()) pour copier en profondeur des tableaux

Certaines personnes utilisent JSON pour copier en profondeur objets ou tableaux. Bien qu'il s'agisse d'une méthode simple et pratique dans la plupart des cas, elle peut également provoquer des bugs inconnus car : certaines valeurs spécifiques seront converties en null

NaN, non défini, Infinity pour ces valeurs qui sont non pris en charge dans JSON , sera converti en null lors de la sérialisation de JSON, il sera naturellement nul. La clé non définie sera naturellement perdue après la désérialisation

convertira l'objet Date en chaîne

.

JSON ne prend pas en charge les types d'objets. La méthode de traitement des objets Date dans JS est la conversion d'une chaîne au format ISO8601. Cependant, la désérialisation ne convertit pas la chaîne de format d'heure en un objet Date

, ce qui est inefficace.

En tant que fonctions natives,

et

elles-mêmes exploitent les chaînes JSON très rapidement. Cependant, il est totalement inutile de sérialiser l'objet en JSON et de le désérialiser afin de copier en profondeur le tableau.

J'ai passé du temps à écrire une fonction simple pour la copie approfondie de tableaux ou d'objets. Le test a révélé que la vitesse d'exécution est presque 6 fois supérieure à celle de l'utilisation du transfert JSON. En passant, il prend également en charge la copie de TypedArray et. Objets RegExpJSON.stringifyJSON.parsehttps://jsperf.com/deep-clone...

Ne pas utiliser arr.find au lieu de arr.some

est un nouveau tableau dans ES2015 La fonction de recherche est similaire à

mais ne peut pas remplacer cette dernière.

Array.prototype.find Renvoie la première valeur qualifiée, utilisez directement cette valeur pour Array.prototype.some pour déterminer si elle existe. Et si cette valeur qualifiée était 0 ?

Array.prototype.find est destiné à un traitement ultérieur après avoir trouvé la valeur dans le tableau. Il est généralement utilisé dans le cas de tableaux d'objets if est destiné à vérifier l'existence des deux ;

Ne pas utiliser arr.map au lieu de arr.forEacharr.findarr.some est également une erreur que font souvent les débutants en JavaScript. Ils ne distinguent souvent pas la signification réelle de

et .

est appelé Array.prototype.map en chinois. Il dérive une autre nouvelle séquence en exécutant une certaine fonction sur une certaine séquence en séquence. Cette fonction n'a généralement aucun effet secondaire et ne modifie pas le tableau d'origine (dite fonction pure). Array.prototype.forEach

Il n'y a pas grand chose à dire. Il traite simplement tous les éléments du tableau avec une certaine fonction. Puisque map n'a pas de valeur de retour (renvoie undéfini), sa fonction de rappel contient généralement des effets secondaires, sinon cela 映射 n'a aucun sens.

Il est vrai que forEach est plus puissant que forEach, mais forEach créera un nouveau tableau et occupera de la mémoire. Si vous n'utilisez pas la valeur de retour de

, alors vous devez utiliser

mapforEachmapSupplément : expérience supplémentairemapforEach

Avant ES6, il y avait deux principaux méthodes pour parcourir les tableaux : les boucles manuscrites itèrent avec des indices, utilisez

. Le premier est polyvalent et le plus efficace, mais il est plus fastidieux à écrire - il ne peut pas obtenir directement les valeurs du tableau. L'auteur aime personnellement ce dernier : vous pouvez obtenir directement l'indice et la valeur de l'itération, ainsi que le style fonctionnel (notez que FP se concentre sur les structures de données immuables, et forEach est intrinsèquement un effet secondaire, donc seul FP Forme mais pas de Dieu) est extrêmement rafraîchissant à écrire. mais! Je me demande si l'un de vous, étudiants, l'a remarqué : une fois que forEach est démarré, il ne peut pas être arrêté. . .

forEach accepte une fonction de rappel à laquelle vous pouvez avancer return, équivalente à continue dans une boucle manuscrite. Mais vous ne pouvez pas break - car il n'y a pas de boucle dans la fonction de rappel pour vous laisser partir break :

[1, 2, 3, 4, 5].forEach(x => {
 console.log(x);
 if (x === 3) {
  break; // SyntaxError: Illegal break statement
 }
});

Il existe encore une solution. D'autres langages de programmation fonctionnels tels que scala ont rencontré des problèmes similaires. Ils fournissent une fonction
break, qui lève une exception.

Nous pouvons suivre cette approche pour mettre en œuvre arr.forEach de break :

try {
 [1, 2, 3, 4, 5].forEach(x => {
  console.log(x);
  if (x === 3) {
   throw 'break';
  }
 });
} catch (e) {
 if (e !== 'break') throw e; // 不要勿吞异常。。。
}

Il existe d'autres méthodes, comme l'utilisation de Array.prototype.some au lieu de Array.prototype.forEach.

Considérez les caractéristiques de Array.prototype.some. Lorsque some trouve une valeur qualifiée (la fonction de rappel renvoie true), la boucle se terminera immédiatement en utilisant ces caractéristiques, vous pouvez simuler <🎜. >:< La valeur de retour de 🎜>break

[1, 2, 3, 4, 5].some(x => {
 console.log(x);
 if (x === 3) {
  return true; // break
 }
 // return undefined; 相当于 false
});

est ignorée et elle a été séparée du sens original de juger s'il y a des éléments dans le tableau qui remplissent les conditions données.

someAvant ES6, j'utilisais principalement cette méthode (en fait, en raison de l'expansion du code Babel, je l'utilise aussi occasionnellement maintenant ES6 est différent, nous avons pour...de).

est une vraie boucle, ça peut être

: for...ofbreak

mais il y a un problème,

for (const x of [1, 2, 3, 4, 5]) {
 console.log(x);
 if (x === 3) {
  break;
 }
}

semble ne pas pouvoir récupérer l'indice de la boucle. En fait, les développeurs du langage JavaScript ont pensé à ce problème et peuvent le résoudre comme suit :

for...of

Array.prototype.entries

for (const [index, value] of [1, 2, 3, 4, 5].entries()) {
 console.log(`arr[${index}] = ${value}`);
}

et

test de performances : https : //jsperf .com/array-fore... C'est plus rapide dans Chrome for...of

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!