Une brève analyse du système de type tableau en javascript

Les mots précédents

Un tableau est un ensemble de valeurs organisées dans l'ordre, et par rapport aux noms de propriété de l'objet sont hors service. Essentiellement, les tableaux utilisent les nombres comme touches de recherche, tandis que les objets ont des noms d'attribut définis par l'utilisateur. JavaScript n'a pas de réels tableaux associatifs, mais les objets peuvent être utilisés pour implémenter la fonction d'association

Array () n'est qu'un type spécial d'objet (), c'est-à-dire une instance array () est essentiellement une instance objet () avec des fonctionnalités supplémentaires. Les tableaux peuvent contenir tout type de valeurs, qui peuvent être mises à jour ou supprimées à tout moment, et la taille du tableau est ajustée dynamiquement.

En plus des objets, le type de tableau du tableau est probablement le type le plus utilisé en JavaScript. De plus, les tableaux en JavaScript sont très différents de ceux de la plupart des autres langues. Cet article présentera le type de tableau de tableau en javascript

Créer un tableau

Il existe deux façons de créer un tableau: utiliser la syntaxe littérale et utiliser le constructeur Array ()

【Littéral】

L'utilisation de littéraux de tableau est le moyen le plus simple de créer un tableau. Éléments de tableau séparés avec des virgules dans des crochets

 var vide = []; // Array sans éléments var primes = [2,3,5,7,11]; // tableau avec 5 valeurs

Bien que les tableaux JavaScript soient des listes de données commandées ainsi que des tableaux dans d'autres langues, contrairement à d'autres langues, chaque élément de tableaux JavaScript peut conserver tout type de données

 var misc = [1.1, true, "a"]; // 3 éléments de différents types

Les valeurs dans les littéraux du tableau n'ont pas à être des constantes, elles peuvent être n'importe quelle expression

 var base = 1024; var table = [base, base + 1, base + 2, base + 3];

Il peut contenir des littéraux d'objets ou d'autres littéraux de table

 var b = [[1, {x: 1, y: 2}], [2, {x: 3, y: 4}]];

Si les éléments du tableau sont toujours des tableaux, un tableau multidimensionnel est formé

 var a = [[1, 2], [3, 4]];

[Remarque] Lorsque vous utilisez une notation littérale numérique, le constructeur du tableau ne sera pas appelé

【Constructeur】

Il y a trois façons d'appeler les constructeurs

【1】 Pas de paramètres, créez un tableau vide

 // Cette méthode crée un tableau vide sans éléments, ce qui équivaut à la quantité directe du tableau [] var a = new Array ();

【2】 Il existe un paramètre numérique, qui est utilisé pour spécifier la longueur du tableau

 var a = nouveau tableau (10); console.log (a); // [] console.log (a [0], a.Length); // indéfini 10

[Remarque] S'il existe un autre type de paramètre, un tableau contenant uniquement ceux de cette valeur sera créé

 var a = nouveau tableau ('10 '); console.log (a); // [' 10 '] console.log (a [0], a.length); // 10 1

【3】 Lorsqu'il y a plusieurs paramètres, les paramètres sont représentés comme des éléments spécifiques du tableau

 var a = nouveau tableau (1,2,3); console.log (a); // [1,2,3] console.log (a [0], a [1], a [2]); // 1 2 3

Lorsque vous utilisez le constructeur Array (), le nouvel opérateur peut être omis

 var a1 = array (); var a2 = array (10); var a3 = array (1,2,3); console.log (a1, a2, a3); // [] [] [1,2,3]

Nature Array

Les tableaux sont un ensemble de valeurs organisées dans l'ordre. Essentiellement, les tableaux sont des objets spéciaux.

 typeof [1, 2, 3] // "objet"

La particularité d'un tableau se reflète en ce que ses noms clés sont un ensemble d'entiers (0, 1, 2…) disposés dans l'ordre. Étant donné que les noms de clés des membres du tableau sont fixes, le tableau n'a pas besoin de spécifier un nom de clé pour chaque élément, mais chaque membre de l'objet doit spécifier un nom de clé.

 var arr = ['a', 'b', 'c']; console.log (object.keys (arr)); // ["0", "1", "2"] var obj = {name1: 'a', name2: 'b', name3: 'c'};

Les tableaux sont des formes spéciales d'objets. L'accès aux éléments du tableau avec des crochets, c'est comme accéder aux propriétés des objets avec des crochets.

La langue javascript stipule que les noms clés des objets sont des chaînes, de sorte que les noms clés des tableaux sont en fait des chaînes. La raison pour laquelle elle peut être lue avec des valeurs numériques est que les noms de clés non corrigées seront convertis en chaînes puis utilisés comme noms d'attribut

 o = {}; // créer un objet ordinaire o [1] = "un"; // indexez-le avec un entier // Le nom de clé numérique est automatiquement converti en une chaîne var arr = ['a', 'b', 'c']; arr ['0'] // 'a'arr [0] //' a '

Cependant, il est nécessaire de distinguer les noms d'index de tableau et d'attribut d'objet: tous les index sont des noms d'attribut, mais seuls les noms d'attribut entiers entre 0 ~ 232-2 (4294967294) sont des index

 var a = []; // index a ['1000'] = 'abc'; a [1000] // 'ABC' // index a [1,00] = 6; a [1] // 6

[Remarque] Les valeurs individuelles ne peuvent pas être utilisées comme identificateurs. Par conséquent, les membres de la table

 var arr = [1, 2, 3]; arr [0]; // 1arr.0; // syntaxerror

Un tableau peut être indexé à l'aide de nombres négatifs ou non en enteliers. Cependant, comme il n'est pas dans la plage de 0 ~ 2 à la puissance de 32 -2, ce n'est que le nom d'attribut du tableau, et non l'index du tableau. La caractéristique évidente est qu'elle ne change pas la longueur du tableau

 var a = [1,2,3]; // nom d'attribut a [-1.23] = true; console.log (a.Length); // 3 // index a [10] = 5; console.log (a.Length); // 11 // name d'attribut a ['ABC'] = 'test'; console.log (a.Length); // 11

Tableaux clairsemés

Un tableau clairsemé est un tableau contenant des indices discontinus à partir de 0.

【1】 Le moyen le plus direct de fabriquer des tableaux clairsemés est d'utiliser l'opérateur de suppression

 var a = [1,2,3,4,5]; supprimer a [1]; console.log (a [1]); // undefinedConsole.log (1 en a); // false

【2】 Les valeurs des éléments peuvent être omises entre les virages des tableaux, et des tableaux clairsemés peuvent être créés en omettant des valeurs d'élément.

 var a = [1 ,, 3,4,5]; console.log (a [1]); // undefinedConsole.log (1 dans a); // false

[Remarque] Il existe une différence entre la valeur d'élément omise et la valeur de l'élément dont la valeur n'est pas définie.

 var a = [1 ,, 3,4,5]; console.log (a [1]); // undefinedconsole.log (1 dans a); // falsevar a = [1, undefinedconsole.log (1 dans a); //

Si vous utilisez des virgules à la fin du tableau, il existe des différences entre les navigateurs. La virgule est ignorée par le navigateur standard, tandis que le navigateur IE8 ajoute une valeur non définie à la fin

 // Sortie du navigateur standard [1,2], tandis que la sortie IE8-Browser [1,2, indéfinie] var A = [1,2,]; console.log (a); // Sortie du navigateur standard 2, tandis que la sortie IE8-Browser 3VAR A = [,,]; console.log (A.Length);

Les tableaux qui sont suffisamment clairsemés sont généralement plus lents dans la mise en œuvre que les tableaux denses et ont une utilisation de la mémoire plus élevée, et le temps de rechercher des éléments dans un tel tableau est tant que le temps de rechercher les propriétés de l'objet ordinaire

Longueur du tableau

Chaque tableau a un attribut de longueur, qui est cet attribut qui le distingue des objets JavaScript conventionnels. Pour les baies denses (c'est-à-dire non sapées), la valeur d'attribut de longueur représente le nombre d'éléments dans le tableau, et sa valeur est 1 plus grande que l'index le plus important dans le tableau.

 [] .length // => 0: le tableau n'a pas d'éléments ['A', 'B', 'C']. Longueur // => 3: L'indice maximum est 2, et la longueur est 3

Lorsqu'un tableau est un tableau clairsemé, la valeur d'attribut de longueur est supérieure au nombre d'éléments. De même, sa valeur est plus supérieure à l'indice le plus important du tableau

 [,,].longueur; //3(Array(10)).length ;//10var a = [1,2,3]; console.log (a.Length); // 3Delete a [1]; console.log (a.length); // 3

La particularité des tableaux se reflète principalement dans le fait que la longueur du tableau peut être ajustée dynamiquement:

【1】 Si vous attribuez une valeur à un élément de tableau et que l'index I est supérieur ou égal à la longueur du tableau existant, la valeur de l'attribut de longueur sera définie sur i + 1

 var arr = ['a', 'b']; arr.length // 2arr [2] = 'c'; arr.length // 3arr [9] = 'd'; arr.length // 10arr [1000] = 'e'; arr.length // 1001

【2】 Lors de la définition de l'attribut de longueur à un entier non négatif n inférieur à la longueur actuelle, les éléments avec la valeur d'indice de tableau actuel supérieure ou égal à n seront supprimés de celui-ci

 a = [1,2,3,4,5]; // à partir du tableau de 5 éléments a.Length = 3; // maintenant a est [1,2,3] a.length = 0; // Supprimer tous les éléments. a est [] a.length = 5; // la longueur est de 5, mais il n'y a pas d'éléments, tout comme nouveau

Tableau (5)

[Remarque] Un moyen efficace de vider le tableau est de définir la propriété de longueur sur 0

 var arr = ['a', 'b', 'c']; arr.length = 0; arr // []

【3】 Définissez la valeur d'attribut de longueur du tableau à supérieure à sa longueur de courant. En fait, cela n'ajoute pas de nouveaux éléments au tableau, il crée simplement une zone vide à la fin du tableau

 var a = ['a']; a.length = 3; console.log (a [1]); // undefinedConsole.log (1 dans a); // false

Si la longueur est définie sur une valeur illégale (c'est-à-dire une valeur en dehors de la plage 0-232-2), JavaScript rapportera une erreur

 // Définir la valeur négative []. Longueur = -1 // RangeError: Longueur du tableau non valide // Le nombre d'éléments de tableau est supérieur ou égal à 2 à la puissance de 32 []. Longueur = Math.Pow (2,32) // RangeError: Longueur du tableau invalide // Set String []. Longue

Puisqu'un tableau est essentiellement un objet, vous pouvez ajouter des attributs au tableau, mais cela n'affecte pas la valeur de l'attribut de longueur

 var a = []; a ['p'] = 'abc'; console.log (a.length); // 0a [2.1] = 'ABC'; console.log (a.length); // 0

Traversage du tableau

La façon la plus courante de boucle à travers des éléments de tableau utilisant pour la boucle

 var a = [1, 2, 3]; for (var i = 0; i <a.length; i ++) {console.log (a [i]);}

Bien sûr, vous pouvez également utiliser une boucle de temps

 var a = [1, 2, 3]; var i = 0; while (i <a.length) {console.log (a [i]); i ++;} var l = a.length; while (l--) {console.log (a [l]);}

Mais si le tableau est un tableau clairsemé, utilisez une boucle pour une boucle et vous devez ajouter des conditions

 // Skip Element non existant var a = [1 ,,, 2]; for (var i = 0; i <a.length; i ++) {if (! (I in a)) Continuer; console.log (a [i]);}

Vous pouvez également utiliser pour / en boucles pour traiter les tableaux clairsemés. La boucle attribue un nom d'attribut énumérable (y compris l'index du tableau) à la variable de boucle à la fois. L'indice inexistant ne sera pas traversé à

 var a = [1 ,,, 2]; pour (var i dans a) {console.log (a [i]);}

Parce que la boucle pour / en énumération des noms d'attribut héréditaires, tels que les méthodes ajoutées à array.prototype. Pour cette raison, pour / en boucles ne doivent pas être utilisées sur les tableaux à moins que des méthodes de détection supplémentaires ne soient utilisées pour filtrer les propriétés indésirables

 var a = [1 ,,, 2]; ab = 'b'; for (var i in a) {console.log (a [i]); // 1 2 'b'} // skip ivar a = [1 ,,, 2]; ab = 'b'; for (var i in a) {if (string (math.floor (math.abs (nombre (i))))! == i) continuer; console.log (a [i]); // 1 2}

La spécification JavaScript permet pour / en boucles de traverser les propriétés d'un objet dans différents ordres. Habituellement, la mise en œuvre de la traversée des éléments du tableau est dans l'ordre croissant, mais il ne peut pas être garanti comme ça. En particulier, si un tableau a à la fois des attributs d'objets et des éléments de tableau, les noms d'attribut retournés sont probablement dans l'ordre où ils ont été créés plutôt que de l'ordre de la taille numérique. Si l'algorithme dépend de l'ordre de traversée, il est préférable de ne pas utiliser pour / in mais d'utiliser régulièrement pour les boucles

Tableau de classe

Les objets avec des attributs de longueur et des attributs entiers non négatifs correspondants sont appelés objets de type tableau

 // Démonstration du tableau de classe var a = {}; var i = 0; while (i <10) {a [i] = i * i; i ++;} a.length = i; var total = 0; for (var j = 0; j <a.length; j ++) {total + = a [j];};

Il y a trois objets de tableau de classe communs:

【1】 Objet d'arguments

 // Arguments Fonction d'objet args () {return arguments} var arrayLILIGH

【2】 Objet renvoyé par la méthode DOM (telle que document.getElementsByTagName () Méthode)

 // dom élément var elts = document.getElementsByTagName ('h3'); elts.length // 3elts instanceof array // false

【3】 String

 // String 'ABC' [1] // 'b''abc'.length // 3'abc' instance de tableau // false

[Remarque] Les chaînes sont des valeurs immuables, donc lorsqu'elles sont considérées comme des tableaux, elles sont en lecture seule. Par exemple, Push (), Sort (), Reverse (), Splice () et d'autres méthodes de tableau modifieront le tableau. Ils ne sont pas valides sur la chaîne et rapporteront une erreur

 var str = 'ABC'; array.prototype.Forach.call (str, function (ch) {console.log (chr); // abc}); array.prototype.splice.call (str, 1); console.log (str); // typeerror: ne peut supprimer la propriété '2' de [la chaîne d'objet]

La méthode Slice d'un tableau transforme l'objet de tableau de classe en un vrai tableau

 var arr = array.prototype.slice.call (arraylike);

Les méthodes de tableau JavaScript sont spécifiquement définies comme générales, elles fonctionnent donc correctement non seulement sur les tableaux réels mais aussi sur les objets de tableau de classe. Dans ECMAScript5, toutes les méthodes de tableau sont générales. Dans ecmascript3, toutes les méthodes sauf toString () et tolocalestring () sont également courantes

 var a = {'0': 'a', '1': 'b', '2': 'c', longueur: 3}; array.prototype.join.call (a, '+'); // 'a + b + c'array.p rototype.slice.call (a, 0); // ['a', 'b', 'c'] array.prototype.map.call (a, fonction (x) {return x.touppercase ();}); // ['a', 'b', 'c']