Maison > interface Web > js tutoriel > 3 choses que vous ne saviez pas sur les tableaux JavaScript

3 choses que vous ne saviez pas sur les tableaux JavaScript

黄舟
Libérer: 2017-02-23 13:27:46
original
1028 Les gens l'ont consulté

Dans les langages de programmation, array (Array) est une fonction très couramment utilisée ; c'est une variable spéciale qui peut être utilisée pour stocker plusieurs valeurs en même temps. Cependant, il reste encore beaucoup à explorer sur la puissance des tableaux en matière de JavaScript.

Dans cet article, nous aborderons trois fonctions pas si courantes des tableaux JavaScript.

1. Ajoutez des attributs personnalisés au tableau

Lorsque vous recherchez la définition des tableaux JavaScript sur Internet, vous constaterez que presque tout le monde a la même définition des tableaux Même chose : un objet.

En fait, tout ce que nous traitons avec JavaScript peut être considéré comme un objet. Il existe deux types de données en JavaScript, les types de base et les types d'objets, mais les types de base sont essentiellement inclus dans les types d'objets.

Les tableaux, les fonctions et la date sont tous des objets prédéfinis en JavaScript et contiennent tous des méthodes, des propriétés et leur syntaxe standardisée respective.

Les tableaux JavaScript ont les trois propriétés différentes suivantes :

1 L'index du tableau est également sa propriété

2 Propriétés intégrées

3 Vous pouvez ajouter vos propres attributs Définir

Les deux premiers attributs sont bien connus de tout le monde et vous pouvez les utiliser tous les jours, mais je veux quand même dire brièvement quelques mots ici, puis parler de la façon d'ajouter attributs personnalisés à un tableau.

Prendre l'index comme attribut

Les tableaux JavaScript peuvent utiliser la syntaxe entre crochets, telle que var ary = ["orange","apple","lychee"];.

L'index d'un élément de tableau est essentiellement un attribut, et le nom de son attribut est toujours un entier non négatif.

La paire d'éléments d'index d'un tableau est similaire à la paire clé-valeur d'un objet. Les index sont une propriété unique des objets tableau, contrairement aux autres propriétés intégrées, ils peuvent être configurés individuellement via des crochets, par exemple ary[3] = "peach";.

Propriétés intégrées

Les tableaux ont des propriétés intégrées, telles que array.length. L'attribut length contient une valeur entière représentant la longueur du tableau.

En général, les propriétés intégrées peuvent souvent être trouvées dans des objets JavaScript prédéfinis tels que des tableaux. Les propriétés intégrées et les méthodes intégrées sont combinées pour personnaliser les objets ordinaires afin de répondre à différents besoins.

Lors de l'accès aux propriétés intégrées, vous pouvez utiliser deux syntaxes : object.key ou object["key"]. En d'autres termes, pour obtenir la longueur d'un tableau, vous pouvez écrire ary["length"].

Création de propriétés personnalisées pour les objets de tableau

Parlons maintenant de la façon d'ajouter des propriétés personnalisées aux tableaux. Un tableau est un objet prédéfini qui stocke différents types de valeurs dans différents indices.

Normalement, nous n'avons pas besoin d'ajouter des attributs personnalisés aux tableaux ; pour cette raison, lorsque nous avons appris JavaScript pour la première fois, personne ne nous a dit que nous pouvions ajouter des attributs aux tableaux. En fait, si vous souhaitez ajouter des paires clé-valeur à un tableau de la même manière qu'un objet normal, vous pouvez également utiliser un objet normal à cette fin. Cependant, cela ne veut pas dire qu'il n'y a pas de cas particuliers. Dans certains cas, vous pouvez profiter du fait qu'un tableau est un objet et lui ajouter une ou plusieurs propriétés personnalisées.

Par exemple, vous pouvez ajouter un attribut personnalisé à un tableau qui identifie le « genre » ou la « classe » de l'élément. Veuillez consulter l'exemple ci-dessous pour plus de détails :

 var ary = ["orange","apple","lychee"];

ary.itemClass = "fruits";

console.log(ary + " are " + ary.itemClass);
Copier après la connexion

Veuillez noter que les attributs personnalisés que vous ajoutez au tableau sont tous dénombrables, c'est-à-dire qu'ils peuvent être sélectionnés par for...in et d'autres boucles. .

2. Faire une boucle sur les éléments d'un tableau

Vous pourriez dire : "Je sais cela depuis longtemps." Oui, vous savez déjà comment indexer les éléments d'un tableau. Mais vous aurez peut-être l'impression que l'instruction "boucler à travers les éléments du tableau" est un peu abstraite, car ce que nous parcourons en réalité est l'index du tableau.

Étant donné que les index de tableau sont composés d'entiers non négatifs, nous commencerons généralement de 0 jusqu'à toute la longueur du tableau, itérerons la valeur entière, puis utiliserons la valeur itérée pour obtenir un élément de tableau basé sur un indice spécifique.

Cependant, depuis l'avènement d'ECMAScript6, nous ne pouvons plus nous soucier de l'index et parcourir directement les valeurs du tableau, et cette opération peut être effectuée en utilisant une boucle for...of.

Dans un tableau, la boucle for...of peut parcourir les éléments du tableau selon l'ordre de l'index. En d'autres termes, elle peut contrôler l'itération de l'index et obtenir une valeur de tableau existante en fonction. à l'indice donné. Cette boucle est utile si vous souhaitez simplement parcourir tous les éléments du tableau et les utiliser.

 var ary = ["orange","apple","lychee"];

for (let item of ary){

  console.log(item);

}

For comparison, with the regular for loop, we get the indices instead of the values as output.

 

var ary = ["orange","apple","lychee"];

for (var item = 0; item < ary.length; item++){

  console.log(item);

}
Copier après la connexion

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

Généralement, quand on parle de la longueur d'un tableau, on pense que sa longueur est soit le nombre de tableau valeurs, ou la longueur que nous définissons manuellement pour le tableau. Mais en fait, la longueur du tableau dépend du plus grand index existant à l’intérieur.

长度是一个非常灵活的属性。无论你是否曾实现调整了数组的长度,只要你不断的给数组添加新的值,它的长度也会随之增长。

 var ary = [];

ary.length = 3;

console.log(ary.length);

ary[5] = "abcd";

console.log(ary.length);
Copier après la connexion

在上面的例子中,你可以看到我给数组的索引5只指定了一个值,之后长度变成了6。现在,如果你觉得给index 5添加一个值,数组就会自动创建索引0-4,那么你的推测就出现了错误。数组中并没有应经存在的索引0-4。你可以使用in operator来查看。

 var ary = [];

ary.length = 3;

console.log(ary.length);

ary[5] = "abcd";

console.log(ary.length);

console.log(0 in ary);
Copier après la connexion

上面的ary数组被我们成为稀疏数组(sparse array),这个数组的索引不会持续的被创建,而且索引之间有空气。sparse数组的对立面为密集数组(dense array)。密集数组的索引会被持续的创建,其元素的数量等于其长度。

数组的长度属性也可以用来缩短数字,确保数组中索引的最大数量永远小于数组本身,因为在默认情况下,长度的数值永远会大于索引数量的最高值。

在下面的例子中,你可以看到,我利用减少ary数组长度的方式,社区了索引5中的元素。

var ary = [];

ary.length = 3;

console.log(ary.length);

ary[5] = "abcd";

console.log(ary.length);

ary.length = 2;

console.log(ary.length);

console.log(ary[5]);
Copier après la connexion

 以上就是关于JavaScript数组,你所不知道的3件事的内容,更多相关内容请关注PHP中文网(www.php.cn)! 



Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal