3 choses que vous ne savez pas sur les tableaux JavaScript
Les tableaux sont une caractéristique largement utilisée des langages de programmation; ce sont des variables spéciales qui peuvent être utilisées pour stocker plusieurs valeurs en même temps. Cependant, quand il s'agit de JavaScript, aussi simple que d'apprendre, il y a toujours plus à explorer.
Dans cet article, nous aborderons trois fonctionnalités moins connues mais néanmoins importantes des baies JavaScript que vous ne connaissiez peut-être pas auparavant.
1. Ajouter des propriétés personnalisées aux tableaux
Si vous étiez à la recherche d'Internet pour trouver une définition complète des tableaux JavaScript, vous constaterez que presque toutes les sources, sans exception, listeront le tableau tel qu'il est réellement, un objet .
En fait, presque tout ce que nous traitons en JavaScript s'avèrera être un objet . Il existe deux types de types de données dans JavaScript, les primitives et les objets, mais les primitives sont toujours enveloppées dans des objets .
Array, Function, Date, etc. sont des objets JavaScript prédéfinis qui ont des méthodes intégrées, des propriétés et leur propre syntaxe standardisée.
Les tableaux JavaScript peuvent avoir trois types de propriétés différents :
- Les indices d'un tableau sont également des propriétés
- Propriétés intégrées
- Propriétés personnalisées que 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 sauter dans la façon dont vous pouvez ajouter votre propre propriété personnalisée à un tableau.
Indices en tant que propriétés
Les tableaux JavaScript utilisent la syntaxe du carré, telle que var ary = ["orange", "apple", "lychee"];
.
Les indices des éléments du tableau sont essentiellement des propriétés où les noms de propriétés sont toujours des entiers non négatifs .
La paire indice-élément 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éfinis avec la seule syntaxe entre parenthèses, comme ary[3] = "peach";
.
Propriétés intégrées
Les tableaux ont également des propriétés array.length
, telles que array.length
. La propriété length
porte une valeur entière qui indique 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 comme des tableaux. Avec les méthodes intégrées, ils aident à personnaliser les objets génériques afin que les objets soient adaptés aux différents besoins .
Les propriétés intégrées peuvent être accédées avec la object.key
ou object["key"]
. Vous pouvez donc écrire ary["length"]
pour accéder à la longueur d'un tableau.
Créer des propriétés personnalisées pour l'objet Array
Maintenant, parlons de l' 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'y a généralement pas besoin 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 sur cette fonctionnalité. En fait, si vous voulez traiter un tableau comme un objet normal en y ajoutant des paires clé-valeur, vous pouvez aussi bien utiliser un objet normal pour votre but . Mais, cela ne signifie pas qu'il n'y a pas de cas particuliers où vous pouvez utiliser le fait qu'un tableau est un objet, en y ajoutant une ou plusieurs propriétés personnalisées.
Par exemple, vous pouvez ajouter une propriété personnalisée à un tableau qui identifie le "kind" 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 récupéré par des boucles telles que l'instruction for…in
.
2. Boucle à travers les éléments de tableau
Vous dites probablement "Je sais déjà", ce qui est probablement vrai, vous savez déjà comment passer par les éléments du tableau. Mais il est également vrai que le fait de dire "boucler les éléments du tableau" est un peu abstrait, car ce que nous traversons en fait, ce sont les indices du tableau .
Comme les indices de tableau ne sont constitués que d' entiers non négatifs, nous itérons une valeur entière commençant généralement à zéro et se terminant sur toute la longueur du tableau, puis utilisons cette valeur itérée pour accéder à l'élément tableau d'un index donné.
Cependant, depuis ECMAScript6, il existe un moyen de faire une boucle directe sur les valeurs du tableau sans se soucier des indices, et cela peut être fait en utilisant la boucle for…of
.
Dans un tableau, la boucle for...of
bouclera les éléments du tableau dans l'ordre des index, en d'autres termes, il se chargera d'itérer sur les indices et d'obtenir une valeur de tableau existante à un index donné. Cette boucle est idéale si vous voulez simplement parcourir tous les éléments du tableau et travailler avec eux.
var ary = ["orange", "pomme", "litchi"]; pour (laisser l'élément d'ary) {console.log (item); } // "orange", "pomme", "litchi"
Pour comparaison, avec la boucle normale for
, 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
En règle générale, lorsque nous parlons de la longueur d'un tableau, nous pensons qu'il s'agit soit du nombre de valeurs qu'un tableau contient, soit de la longueur que nous avons donnée au tableau manuellement. Cependant, en réalité, la longueur d'un tableau dépend du plus grand index existant à l' intérieur de celui-ci.
La longueur est une propriété très flexible . Que vous ayez déjà fixé ou non la longueur d'un tableau, si vous continuez à ajouter des valeurs au tableau, sa longueur augmente en conséquence .
var ary = []; 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 donné au tableau une seule valeur à l'index 5, et la longueur devient 6. Maintenant, si vous pensez qu'en ajoutant une valeur à l'index 5, le tableau crée automatiquement les index de 0 à 4, alors votre hypothèse est incorrecte . Il n'y a vraiment aucun indice existant de 0 à 4 dans ce tableau. Vous pouvez vérifier cela en utilisant l'opérateur in
.
var ary = []; ary.length = 3; console.log (ary.length); // 3 ary [5] = "abcd"; console.log (ary.length); // 6 console.log (0 dans ary); // faux
Le tableau ary
est ce que nous appelons un tableau "clairsemé", un tableau où les indices ne sont pas créés de façon continue, et ont des lacunes . Le contraire d'un tableau "clairsemé" est le tableau "dense" où les indices existent en continu dans le tableau, et le nombre d'éléments est le même que la length
.
La propriété length
est également capable de tronquer un tableau, en s'assurant que l'index le plus élevé présent dans le tableau est toujours inférieur à lui - même, car la length
est toujours numériquement supérieure à l'index le plus élevé par défaut.
Dans l'exemple ci-dessous, vous pouvez voir comment nous perdons l'élément à l'index 5 en diminuant la length
du tableau ary
.
var ary = []; 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
Lecture supplémentaire
- 10 termes JavaScript que vous devriez savoir maintenant
- 4 instructions Javascript pas si courantes mais utiles, vous devriez savoir
- Optimisation de code avec JS Hint - un outil pour lisser Javascript
Graphiques de produit: 6 techniques pour rendre les images plus informatives
Les concepteurs de sites Web sont devenus très rusés avec les techniques de marketing. Le contenu de la page de leurre est toujours bon, mais quand il s'agit de saisir vos visiteurs, les images d'attention sont la forme de média la plus populaire. Ils ne nécessitent pas de sonorités comme des vidéos de démonstration et ils peuvent rapidement transmettre des informations importantes en quelques secondes. Cela
20 ebooks gratuits pour les photographes
La photographie est un passe - temps incroyablement gratifiant, et avec la richesse des appareils photo numériques disponibles de nos jours, celle-ci est bien à la portée de la plupart des gens . Mais comme tout photographe en herbe vous le dira, il y a beaucoup plus de bonnes photos que d'avoir un bon appareil photo. I