3 choses que vous ne savez pas sur les tableaux JavaScript

Tableaux sont une fonctionnalité largement utilisée des langages de programmation; elles sont variables spéciales qui peut être utilisé pour stocker plusieurs valeurs en même temps. Cependant, quand il s'agit de JavaScript, il est toujours facile à explorer, même s'il est facile à apprendre..

Dans cet article, nous allons examiner trois fonctionnalités moins connues mais importantes des baies JavaScript que vous ne connaissiez peut-être pas auparavant..

1. Ajouter des propriétés personnalisées aux tableaux

Si vous exploriez Internet à la recherche d'une définition complète des tableaux JavaScript, vous découvrirez que presque toutes les sources sans faute répertorieront un tableau vraiment est, un objet.

En fait, presque tout ce que nous traitons en JavaScript se révéler être un objet. Il y a deux types de types de données en JavaScript, primitives et objets, mais les primitives sont toujours encapsulées dans des objets.

Tableau, Fonction, Date, etc. sont objets JavaScript prédéfinis qui ont des méthodes intégrées, des propriétés et leur propre syntaxe normalisée.

Les tableaux JavaScript peuvent avoir trois types de propriétés différentes:

1. Indices d'un tableau sont aussi des propriétés
2. Propriétés intégrées
3. Propriétés personnalisées vous pouvez ajouter vous-même

Les deux premiers sont plus connus, vous pouvez les utiliser tous les jours, mais voyons-les rapidement avant de vous expliquer comment ajouter votre propre propriété personnalisée à un tableau..

Indices en tant que propriétés

Les tableaux JavaScript utilisent le syntaxe de crochet, tel que var ary = ["orange", "pomme", "litchi"];.

Les indices des éléments de tableau sont essentiellement Propriétés où le noms de propriété sont toujours des entiers non négatifs.

le paire d'éléments d'index d'un tableau est similaire à la paire clé-valeur d'un objet.

Les index sont une caractéristique unique de l’objet Array et, contrairement à ses autres propriétés intégrées, ils peuvent être définir avec la seule syntaxe des crochets, tel que ary [3] = "pêche";.

Propriétés intégrées

Les tableaux ont aussi propriétés intégrées, tel que array.length. le longueur la propriété porte une valeur entière dénote la longueur d'un tableau.

En général, les propriétés intégrées peuvent être fréquemment trouvées dans des objets JavaScript prédéfinis, tels que des tableaux. Avec les méthodes intégrées, ils aident personnaliser des objets génériques de manière à ce qu'ils répondent à différents besoins.

Les propriétés intégrées peuvent être consultées avec le object.key ou la objet ["clé"] syntaxe. Donc vous pouvez aussi écrire ary ["longueur"] accéder à la longueur d'un tableau.

Créer des propriétés personnalisées pour l'objet tableau

Parlons maintenant de ajout de vos propres propriétés aux tableaux. Les tableaux sont des objets prédéfinis qui stockent différents types de valeurs à différents index.

Il n'est généralement pas nécessaire d'ajouter des propriétés personnalisées à un tableau. C'est l'une des raisons pour lesquelles les débutants ne sont généralement pas informés de cette fonctionnalité. En fait, si vous souhaitez traiter un tableau comme un objet normal en y ajoutant des paires clé-valeur, vous pouvez également utiliser un objet normal pour votre but. Mais, cela ne signifie pas qu'il n'y a pas cas spéciaux où vous pouvez utiliser le fait qu'un tableau est un objet, en lui ajoutant une ou plusieurs propriétés personnalisées.

Par exemple, vous pouvez ajouter une propriété personnalisée à un tableau qui identifie le "genre" ou la "classe" de ses éléments, comme vous pouvez le voir dans l'exemple ci-dessous.

 var ary = ["orange", "pomme", "litchi"]; ary.itemClass = "fruits"; console.log (ary + "are" + ary.itemClass); // "orange, pomme, litchi sont des fruits" 

Notez que la propriété personnalisée que vous ajoutez à un tableau est énumérable, ce qui signifie qu'il sera capté par des boucles telles que le pour… dans déclaration.

2. Boucle à travers des éléments de tableau

Vous dites probablement "je le sais déjà", ce qui est probablement vrai, vous savez déjà comment parcourir des éléments de tableau. Mais il est également vrai que dire "faire une boucle sur des éléments de tableau" est un peu abstrait, car ce que nous faisons en boucle indices du tableau.

Comme les indices de tableau ne sont composés que de entiers non négatifs, nous itérons une valeur entière commençant généralement par zéro et se terminant par toute la longueur du tableau, puis utilisons cette valeur itérée pour accéder à l'élément de tableau à un index donné.

Cependant, depuis ECMAScript6, il existe un moyen de boucle directement à travers des valeurs de tableau sans se soucier d'indices, et cela peut être fait en utilisant le pour… de boucle.

Dans un tableau, le pour… de boucle va parcourir les éléments du tableau dans l'ordre des indices, en d'autres termes, il prendra soin de parcourir les indices et d'obtenir un valeur de tableau existante à un index donné. Cette boucle est idéale si vous souhaitez simplement parcourir tous les éléments du tableau et les utiliser..

 var ary = ["orange", "pomme", "litchi"]; for (laissez l'objet de l'ary) console.log (item);  // "orange", "pomme", "litchi" 

A titre de comparaison, avec le régulier pour boucle, nous obtenons les indices au lieu des valeurs en sortie.

 var ary = ["orange", "pomme", "litchi"]; pour (var item = 0; item < ary.length; item++) console.log(item);  // 0, 1, 2

3. Le nombre d'éléments n'est pas sa longueur

Typiquement, quand on parle de la longueur d'un tableau, nous pensons que c'est soit le nombre de valeurs qu'un tableau contient, soit la longueur que nous lui avons donnée manuellement. Cependant, en réalité, la longueur d’un tableau dépend de le plus grand indice existant à l'intérieur de celui-ci.

La longueur est un propriété très flexible. Si vous avez déjà fixé la longueur d’un tableau à l’avance ou non, si vous continuez à ajouter des valeurs au tableau, sa longueur continue d'augmenter en conséquence.

 varaire = []; ary.length = 3; console.log (ary.length); // 3 ary [5] = "abcd"; console.log (ary.length); // 6

Dans l'exemple ci-dessus, vous pouvez voir que j'ai attribué au tableau une seule valeur à l'index 5 et que sa longueur est égale à 6. Maintenant, si vous pensez qu'en ajoutant une valeur à l'index 5, le tableau a automatiquement créé les indices de 0 à 4. , puis votre hypothèse est incorrecte. Il y a vraiment aucun indice existant de 0 à 4 dans ce tableau. Vous pouvez vérifier cela en utilisant le dans opérateur.

 varaire = []; ary.length = 3; console.log (ary.length); // 3 ary [5] = "abcd"; console.log (ary.length); // 6 console.log (0 dans le secteur); // faux

Le tableau ary est ce qu'on appelle un tableau "clairsemé", un tableau où les indices ne sont pas créés en permanence, et avoir des lacunes. L'opposé d'un tableau "clairsemé" est le tableau "dense" où les index existent continuellement dans le tableau, et le nombre d’éléments est le même que le longueur.

le longueur la propriété est également capable de tronquer un tableau, en s'assurant que l'index le plus élevé présent dans le tableau est toujours moins que lui-même, comme longueur est toujours numériquement supérieur à l'indice le plus élevé par défaut.

Dans l'exemple ci-dessous, vous pouvez voir comment nous perdons l'élément de l'index 5 en diminuant le longueur du ary tableau.

 varaire = []; ary.length = 3; console.log (ary.length); // 3 ary [5] = "abcd"; console.log (ary.length); // 6 ary.length = 2; console.log (ary.length); // 2 console.log (ary [5]); // indéfini

Lectures complémentaires

• 10 termes JavaScript que vous devriez connaître maintenant
• 4 déclarations javascript peu communes mais utiles à connaître
• Optimisation du code avec JS Hint - un outil pour juxtaposer Javascript