Bases des opérations sur les tableaux en JavaScript-js tutoriel-php.cn

Cet article partage principalement avec vous les bases des opérations sur les tableaux en JavaScript. N'utilisez pas for_in pour parcourir le tableau. C'est 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 liés à l'utilisation de for_in pour parcourir un tableau :

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

Le moteur JavaScript ne garantit pas l'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.

parcourra les valeurs sur la chaîne de prototypes d'objets.

Si vous modifiez l'objet prototype du tableau (tel que polyfill) sans le définir sur <code>enumerable: falseenumerable : false, for_in traversera ces choses.

Fonctionnement inefficace.

Bien qu'en théorie JavaScript utilise la forme d'objets pour stocker des tableaux, le moteur JavaScript optimisera toujours 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 un tableau est plus de 50 fois plus lent que d'utiliser des indices pour parcourir un tableau

PS : Vous recherchez peut-être quelqu'un qui utilise JSON for_of

N'utilisez pas le tableau de copie approfondie JSON.parse(JSON.stringify())

Copie moyennement profonde d'un objet ou d'un tableau. 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 :

convertira certaines valeurs spécifiques en null
null

NaN, non défini, Infinity Ces valeurs qui ne sont pas prises en charge dans JSON seront converties lors de la sérialisation de JSON. null Après la désérialisation, il sera naturellement nul

, et la paire clé-valeur avec une valeur non définie sera perdue

JSON ignorera les clés avec des valeurs non définies lors de la sérialisation et sera perdu après la désérialisation

remplacera le Convert. l'objet en chaîne

JSON ne prend pas en charge les types d'objet. L'objet Date dans JS est traité en le convertissant en 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.

JSON.stringify en fonction native, JSON.stringifyJSON.parse et

JSON.parse

La vitesse d'exploitation des chaînes JSON en elle-même est très rapide. 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 simple fonction de copie profonde d'un tableau ou d'un objet. 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. prend également en charge TypedArray, copie d'objets RegExp

https://jsperf.com/deep-clone...

Array.prototype.findNe pas utiliser arr. find au lieu de arr .someArray.prototype.someArray.prototype.find

est une nouvelle fonction de recherche de tableau dans ES2015, qui est la même que

Array.prototype.findArray.prototype.some est similaire mais ne remplace pas ce dernier. if

Array.prototype.find

arr.find Renvoie la première valeur qualifiée, utilisez directement cette valeur comme ifarr.some Détermine s'il existe. Et si cette valeur qualifiée était 0 ?

arr.find consiste à trouver la valeur dans le tableau puis à la traiter davantage. Il est généralement utilisé dans le cas de. tableau d'objets ; arr.some est utilisé pour vérifier l'existence des deux ;

Ne pas utiliser arr.map au lieu de arr.forEach

est également une erreur que font souvent les débutants en JavaScript. Ils ne font souvent pas la distinction entre . <code>Array.prototype.mapLa signification réelle de Array.prototype.map et Array.prototype.forEachArray.prototype.forEach

mapcarte映射 Le chinois s'appelle

carte

forEach, il Dérive une nouvelle séquence en exécutant séquentiellement une fonction sur une séquence. Cette fonction n'a généralement aucun effet secondaire et ne modifie pas le tableau d'origine (dite fonction pure). forEachforEachforEach Il n'y a pas grand chose à dire, il traite simplement tous les éléments du tableau avec une certaine fonction. Puisque forEach

n'a pas de valeur de retour (renvoie indéfini), sa fonction de rappel contient généralement des effets secondaires, sinon ce forEach map n'a aucun sens. forEachEn effet mapmapmap est meilleur que forEachforEach

est plus puissant, mais

`map`

créera un nouveau tableau et occupera de la mémoire. Si vous n'utilisez pas la valeur de retour de

mapArray.prototype.forEach, alors vous devez utiliser forEach

code>

Supplément : forEach et break

ES6 Avant, il existait deux méthodes principales pour parcourir les tableaux : des boucles écrites à la main utilisant des indices pour itérer, et en utilisant return Array.prototype.forEachcontinue. Le premier est polyvalent et le plus efficace, mais il est plus fastidieux à écrire - il ne peut pas obtenir directement les valeurs du tableau. breakL'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 l'effet secondaire existe, donc il n'y a que la forme de FP mais pas de Dieu) C'est très rafraîchissant à écrire. mais! Je me demande si l'un de vous, étudiants, l'a remarqué : une fois que vous avez commencé forEach, vous ne pouvez plus vous arrêter. . . breakforEach accepte une fonction de rappel, vous pouvez

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;span style=&quot;font-size: 14px;&quot;&gt;[1, 2, 3, 4, 5].forEach(x =&gt; {&lt;br&gt;  console.log(x);&lt;br&gt;  if (x === 3) {&lt;br&gt;    break;  // SyntaxError: Illegal break statement&lt;br&gt;  }&lt;br&gt;});&lt;br&gt;&lt;/span&gt;</pre><div class="contentsignin">Copier après la connexion</div></div>retourner<p></p>

à l'avance, ce qui équivaut à continuerscala. Mais vous ne pouvez pas casser
- car il n'y a pas de boucle dans la fonction de rappel pour que vous casser Bases des opérations sur les tableaux en JavaScript

Bases des opérations sur les tableaux en JavaScript

Il existe encore des solutions. D'autres langages de programmation fonctionnels tels que arr.forEachscalabreak ont rencontré des problèmes similaires. Il fournit une fonction

break, qui le fait. Lève une exception.

<span style="font-size: 14px;">try {<br>  [1, 2, 3, 4, 5].forEach(x => {<br>    console.log(x);<br>    if (x === 3) {<br>      throw 'break';<br>    }<br>  });<br>} catch (e) {<br>  if (e !== 'break') throw e; // 不要勿吞异常。。。<br>}<br></span>

Copier après la connexion

Array.prototype.someArray.prototype.forEachNous pouvons suivre cette approche pour mettre en œuvre

arr.forEach

's<code>somebreak :trueUne paire dégoûtante fausse. Il existe d'autres méthodes, comme utiliser breakArray.prototype.some

au lieu de Array.prototype.forEach. Considérez les caractéristiques de Array.prototype.some, lorsque <code>some trouve une valeur qualifiée (rappel lorsque la fonction renvoie true), elle immédiatement terminera la boucle. Cette fonctionnalité peut être utilisée pour simuler pause</code.>：

<span style="font-size: 14px;">[1, 2, 3, 4, 5].some(x => {<br>  console.log(x);<br>  if (x === 3) {<br>    return true; // break<br>  }<br>  // return undefined; 相当于 false<br>});<br></span>

Copier après la connexion

<code>some 的返回值被忽略掉了，它已经脱离了判断数组中是否有元素符合给出的条件这一原始的含义。

在 ES6 前，笔者主要使用该法（其实因为 Babel 代码膨胀的缘故，现在也偶尔使用），ES6 不一样了，我们有了 for...of。for...of 是真正的循环，可以 break：

<span style="font-size: 14px;">for (const x of [1, 2, 3, 4, 5]) {<br>  console.log(x);<br>  if (x === 3) {<br>    break;<br>  }<br>}<br></span>

Copier après la connexion

但是有个问题，for...of 似乎拿不到循环的下标。其实 JavaScript 语言制定者想到了这个问题，可以如下解决：

<span style="font-size: 14px;">for (const [index, value] of [1, 2, 3, 4, 5].entries()) {<br>  console.log(`arr[${index}] = ${value}`);<br>}<br></span>

Copier après la connexion

Array.prototype.entries

for...of 和 forEach 的性能测试：https://jsperf.com/array-fore... 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!