Tableaux en JavaScript. Utiliser la longueur pour découper un tableau

15.08.2023

Tableaux

Tableau est une collection ordonnée de valeurs. Les valeurs d'un tableau sont appelées éléments, et chaque élément est caractérisé par une position numérique dans le tableau, appelée index. Les tableaux en JavaScript ne sont pas typés : les éléments d'un tableau peuvent être de n'importe quel type et différents éléments du même tableau peuvent avoir des types différents. Les éléments du tableau peuvent même être des objets ou d'autres tableaux, vous permettant de créer des structures de données complexes telles que des tableaux d'objets et des tableaux de tableaux.

Les index des tableaux JavaScript commencent à zéro et utilisent des entiers de 32 bits - le premier élément du tableau a l'index 0. Les tableaux JavaScript sont dynamiques : ils peuvent augmenter et diminuer en taille selon les besoins ; il n'est pas nécessaire de déclarer des tailles de tableau fixes lors de leur création, ni de réallouer de la mémoire lorsque leurs tailles changent.

Les tableaux en JavaScript sont une forme spécialisée d'objets, et les indices de tableau ne signifient guère plus que de simples noms de propriétés, qui, par coïncidence, sont des entiers.

Création de tableaux

Le moyen le plus simple de créer un tableau consiste à utiliser un littéral, qui est une simple liste d’éléments de tableau séparés par des virgules et placés entre crochets. Les valeurs d'un littéral de tableau ne doivent pas nécessairement être des constantes - elles peuvent être n'importe quelle expression, y compris des littéraux d'objet :

Var vide = ; // Tableau vide var number = ; // Tableau avec cinq éléments numériques var misc = [ 1.1, true, "a", ]; // 3 éléments de types différents + virgule finale var base = 1024; vartable = ; // Tableau avec variables var arrObj = [, ]; // 2 tableaux à l'intérieur contenant des objets

La syntaxe littérale du tableau vous permet d'insérer une virgule finale facultative, c'est-à-dire le littéral [,] correspond à un tableau avec deux éléments, pas trois.

Une autre façon de créer un tableau consiste à appeler le constructeur Tableau(). Vous pouvez appeler le constructeur de trois manières différentes :

Appelez le constructeur sans arguments :

Var arr = nouveau tableau ();

Dans ce cas, un tableau vide sera créé, équivalent au littéral.

Appelez le constructeur avec un seul argument numérique spécifiant la longueur du tableau :

Var arr = nouveau tableau (10);

Dans ce cas, un tableau vide de la longueur spécifiée sera créé. Cette forme d'appel du constructeur Array() peut être utilisée pour pré-allouer de la mémoire à un tableau si le nombre de ses éléments est connu à l'avance. Notez que cela ne stocke aucune valeur dans le tableau.

Spécifiez explicitement les valeurs des deux premiers éléments du tableau ou plus ou d'un élément non numérique dans l'appel du constructeur :

Var arr = nouveau tableau (5, 4, 3, 2, 1, "test");

Dans ce cas, les arguments du constructeur deviennent les valeurs des éléments du nouveau tableau. Utiliser des littéraux de tableau est presque toujours plus facile que d'utiliser le constructeur Array().

Lire et écrire des éléments de tableau

Les éléments du tableau sont accessibles à l’aide de l’opérateur. À gauche des crochets, il doit y avoir une référence à un tableau. À l’intérieur des parenthèses, il doit y avoir une expression arbitraire qui renvoie une valeur entière non négative. Cette syntaxe est utile à la fois pour lire et écrire la valeur d'un élément de tableau. Par conséquent, toutes les instructions JavaScript suivantes sont valides :

// Crée un tableau avec un élément var arr = ["world"]; // Lire l'élément 0 var value = arr; // Écrivez la valeur dans l'élément 1 arr = 3.14; // Écrivez la valeur dans l'élément 2 i = 2; arr[i] = 3; // Écrit la valeur dans l'élément 3 arr = "hello"; // Lire les éléments 0 et 2, écrire la valeur dans l'élément 3 arr] = arr;

Permettez-moi de vous rappeler que les tableaux sont un type d'objet spécialisé. Les crochets utilisés pour accéder aux éléments du tableau agissent exactement de la même manière que les crochets utilisés pour accéder aux propriétés des objets. L'interpréteur JavaScript convertit les index numériques entre parenthèses en chaînes (l'index 1 devient la chaîne « 1 »), puis utilise les chaînes comme noms de propriété.

Il n'y a rien de spécial à convertir des index numériques en chaînes : vous pouvez faire la même chose avec des objets normaux :

Var obj = (); // Crée un objet simple obj = "one"; // Indexez-le avec des entiers

Le problème avec les tableaux est que lorsque vous utilisez des noms de propriété qui sont des entiers non négatifs, les tableaux déterminent automatiquement la valeur de la propriété. longueur. Par exemple, ci-dessus, nous avons créé un tableau arr avec un seul élément. Il a ensuite attribué des valeurs à ses éléments aux index 1, 2 et 3. À la suite de ces opérations, la valeur de la propriété length du tableau est passée à 4.

Vous devez clairement distinguer les index d'un tableau des noms de propriétés d'objet. Tous les indices sont des noms de propriétés, mais seules les propriétés dont les noms sont représentés par des entiers sont des indices. Tous les tableaux sont des objets et vous pouvez leur ajouter des propriétés avec n'importe quel nom. Toutefois, si vous touchez des propriétés qui sont des indices de tableau, les tableaux répondent en mettant à jour la valeur de la propriété length si nécessaire.

Veuillez noter que les nombres négatifs et non entiers peuvent être utilisés comme indices de tableau. Dans ce cas, les nombres sont convertis en chaînes, qui sont utilisées comme noms de propriétés.

Ajout et suppression d'éléments de tableau

Nous avons déjà vu que le moyen le plus simple d'ajouter des éléments à un tableau est d'attribuer des valeurs à de nouveaux indices. Vous pouvez également utiliser la méthode pour ajouter un ou plusieurs éléments à la fin du tableau. pousser():

Var arr = ; // Crée un tableau vide arr.push("zero"); // Ajoute une valeur à la fin arr.push("one",2); // Ajoute deux valeurs supplémentaires

Vous pouvez également ajouter un élément à la fin du tableau en attribuant une valeur à l'élément arr. Pour insérer un élément au début d'un tableau, vous pouvez utiliser la méthode annuler le décalage(), qui déplace les éléments existants du tableau vers des positions avec des index plus élevés.

Vous pouvez supprimer des éléments du tableau à l'aide de l'opérateur delete, tout comme les propriétés d'objet classiques :

Var arr = ; supprimer l'arrêt ; 2 en arr; // false, l'index 2 du tableau n'est pas défini arr.length; // 3 : l'opérateur delete ne modifie pas la propriété length du tableau

La suppression d'un élément est similaire (mais légèrement différente) à l'attribution de la valeur non définie à cet élément. Notez que l'application de l'opérateur delete à un élément du tableau ne modifie pas la valeur de la propriété length ni ne décale pas les éléments avec des index plus élevés pour combler le vide laissé par la suppression de l'élément.

Il est également possible de supprimer des éléments à la fin d'un tableau en attribuant simplement une nouvelle valeur à la propriété length. Les tableaux ont une méthode populaire()(à l'opposé de la méthode push()), qui réduit la longueur du tableau de 1 et renvoie la valeur de l'élément supprimé. Il existe aussi une méthode changement()(à l'opposé de la méthode unshift()), qui supprime l'élément au début du tableau. Contrairement à l'opérateur delete, la méthode shift() déplace tous les éléments vers une position inférieure à leur index actuel.

Il existe enfin une méthode polyvalente épissure(), qui vous permet d'insérer, de supprimer et de remplacer des éléments de tableau. Il modifie la valeur de la propriété length et déplace les éléments du tableau vers des index inférieurs ou supérieurs selon les besoins. Nous examinerons toutes ces méthodes un peu plus tard.

Tableaux multidimensionnels

JavaScript ne prend pas en charge les « vrais » tableaux multidimensionnels, mais il constitue un bon moyen de les simuler à l’aide de tableaux de tableaux. Pour accéder à un élément de données dans un tableau de tableaux, utilisez simplement l'opérateur deux fois.

Par exemple, supposons que la matrice variable soit un tableau de tableaux de nombres. Chaque élément de matrice[x] est un tableau de nombres. Pour accéder à un nombre spécifique dans un tableau, vous pouvez utiliser l'expression matrice[x][y]. Vous trouverez ci-dessous un exemple spécifique où un tableau à deux dimensions est utilisé comme table de multiplication :

// Crée un tableau multidimensionnel var table = new Array(10); // Il y a 10 lignes dans le tableau pour (var i = 0; i

Méthodes de la classe Array

La norme ECMAScript 3 définit Array.prototype comme un ensemble de fonctions pratiques pour travailler avec des tableaux, disponibles sous forme de méthodes sur n'importe quel tableau. Ces méthodes seront présentées dans les sous-sections suivantes.

méthode join()

La méthode Array.join() convertit tous les éléments du tableau en chaînes, les joint et renvoie la chaîne résultante. En argument facultatif, vous pouvez passer une chaîne à la méthode qui sera utilisée pour séparer les éléments dans la chaîne résultat. Si aucune chaîne de délimiteur n’est spécifiée, une virgule est utilisée. Par exemple, le fragment suivant donne la chaîne « 1,2,3 » :

Var arr = ; arr.join(); // "1,2,3" arr.join("-"); // "1-2-3"

méthode inverse()

La méthode Array.reverse() inverse l'ordre des éléments dans un tableau et renvoie un tableau réorganisé. La permutation est effectuée directement dans le tableau d'origine, c'est-à-dire Cette méthode ne crée pas un nouveau tableau avec les éléments réorganisés, mais les réorganise plutôt dans un tableau déjà existant. Par exemple, l'extrait suivant, utilisant les méthodes reverse() et join(), donne la chaîne "3,2,1" :

Var arr = ; arr.reverse().join(); // "3,2,1"

méthode trier()

La méthode Array.sort() trie les éléments du tableau source et renvoie le tableau trié. Si la méthode sort() est appelée sans arguments, le tri est effectué par ordre alphabétique (les éléments sont temporairement convertis en chaînes pour comparaison si nécessaire). Les éléments non définis sont déplacés vers la fin du tableau.

Pour trier dans un ordre autre que alphabétique, vous pouvez transmettre une fonction de comparaison comme argument à la méthode sort(). Cette fonction définit lequel de ses deux arguments doit apparaître en premier dans la liste triée. Si le premier argument doit précéder le second, la fonction de comparaison doit renvoyer un nombre négatif. Si le premier argument doit suivre le second dans un tableau trié, alors la fonction doit renvoyer un nombre supérieur à zéro. Et si deux valeurs sont équivalentes (c'est-à-dire que leur ordre n'a pas d'importance), la fonction de comparaison doit renvoyer 0 :

Var arr = ; arr.sort(); // Ordre alphabétique : 1111, 222, 33, 4 arr.sort(function(a,b) ( // Ordre numérique : 4, 33, 222, 1111 return a-b; // Renvoie 0 // selon l'ordre de tri a et B)); // Trier dans le sens opposé, du plus grand au plus petit arr.sort(function(a,b) (return b-a));

Remarquez à quel point il est pratique d'utiliser une fonction sans nom dans cet extrait. La fonction de comparaison n’est utilisée qu’ici, il n’est donc pas nécessaire de lui donner un nom.

méthode concat()

La méthode Array.concat() crée et renvoie un nouveau tableau contenant les éléments du tableau d'origine sur lequel concat() a été appelé et les valeurs de tous les arguments passés à concat(). Si l'un de ces arguments est lui-même un tableau, ses éléments sont ajoutés au tableau renvoyé. Il convient toutefois de noter qu’il n’existe pas de transformation récursive d’un tableau de tableaux en un tableau unidimensionnel. La méthode concat() ne modifie pas le tableau d'origine. Voici quelques exemples :

Var arr = ; arr.concat(4, 5); // Retourne arr.concat(); // Retour arr.concat(,) // Retour arr.concat(4, ]) // Retour ]

Méthode tranche()

La méthode Array.slice() renvoie une tranche, ou sous-tableau, du tableau spécifié. Les deux arguments de méthode spécifient le début et la fin du fragment renvoyé. Le tableau renvoyé contient l'élément dont le numéro est spécifié dans le premier argument, ainsi que tous les éléments suivants, jusqu'à (mais non compris) l'élément dont le numéro est spécifié dans le deuxième argument.

Si un seul argument est donné, le tableau renvoyé contient tous les éléments de la position de début à la fin du tableau. Si l'un des arguments est négatif, il détermine le numéro d'élément par rapport à la fin du tableau. Ainsi, l'argument -1 correspond au dernier élément du tableau et l'argument -3 correspond au troisième élément du tableau à partir de la fin. Voici quelques exemples:

Var arr = ; arr.slice(0,3); // Retourne arr.slice(3); // Retourne arr.slice(1,-1); // Retourne arr.slice(-3,-2); // Retour

Méthode splice()

La méthode Array.splice() est une méthode générique qui effectue l'insertion ou la suppression d'éléments de tableau. Contrairement aux méthodes slice() et concat(), la méthode splice() modifie le tableau d'origine sur lequel elle a été appelée. Notez que les méthodes splice() et slice() ont des noms très similaires, mais effectuent des opérations complètement différentes.

La méthode splice() peut supprimer des éléments d'un tableau, insérer de nouveaux éléments ou faire les deux en même temps. Les éléments du tableau sont décalés si nécessaire pour créer une séquence continue après insertion ou suppression.

Le premier argument de la méthode splice() spécifie la position dans le tableau à partir de laquelle l'insertion et/ou la suppression seront effectuées. Le deuxième argument spécifie le nombre d'éléments qui doivent être supprimés (coupés) du tableau. Si le deuxième argument est omis, tous les éléments du tableau depuis le spécifié jusqu'à la fin du tableau sont supprimés. La méthode splice() renvoie un tableau des éléments supprimés ou (si aucun élément n'a été supprimé) un tableau vide.

Les deux premiers arguments de la méthode splice() spécifient les éléments du tableau à supprimer. Ces arguments peuvent être suivis de n'importe quel nombre d'arguments supplémentaires spécifiant les éléments à insérer dans le tableau, en commençant à la position spécifiée dans le premier argument.

Var arr = ; arr.splice(4); // Retour, arr = arr.splice(1,2); // Retour, arr = arr.splice(1,1); // Retour ; arr = arr = ; arr.splice(2,0,"a", "b"); // Retour ; arr =

Méthodes push() et pop()

Les méthodes push() et pop() vous permettent de travailler avec des tableaux comme s'il s'agissait de piles. La méthode push() ajoute un ou plusieurs nouveaux éléments à la fin du tableau et renvoie sa nouvelle longueur. La méthode pop() effectue l'opération inverse : elle supprime le dernier élément du tableau, réduit la longueur du tableau et renvoie la valeur supprimée. Notez que ces deux méthodes modifient le tableau d'origine plutôt que d'en créer une copie modifiée.

Méthodes unshift() et shift()

Les méthodes unshift() et shift() se comportent presque de la même manière que push() et pop(), sauf qu'elles insèrent et suppriment des éléments au début du tableau plutôt qu'à la fin. La méthode unshift() déplace les éléments existants vers des index plus grands pour libérer de l'espace, ajoute le ou les éléments au début du tableau et renvoie la nouvelle longueur du tableau. La méthode shift() supprime et renvoie le premier élément du tableau, décalant tous les éléments suivants d'une position vers le bas pour occuper l'espace libéré au début du tableau.

Bonne journée à tous ceux qui ont décidé de tout savoir sur les tableaux en JavaScript. Dans plusieurs publications précédentes, j'ai déjà abordé certains points. L'article d'aujourd'hui est un guide complet.

Je parlerai de certaines options pour créer des tableaux et de la façon dont la longueur d'un tableau est « extraite » en JavaScript, parlerai de leurs fonctionnalités, énumérerai les principales propriétés et méthodes pour travailler avec eux et, bien sûr, donnerai des exemples de tests. Commençons!

Parlons de la tâche principale des tableaux

La première chose que vous devez comprendre est que les tableaux sont un type qui stocke des données structurées dans des cellules de mémoire spécifiques, chacune ayant son propre identifiant (numéro).

Ils sont créés à l’aide de crochets, disposent d’une gamme de fonctionnalités et de méthodes et peuvent être multidimensionnels. Leur principal avantage est que tous les éléments sont numérotés, ils sont donc accessibles via un identifiant.

Cependant, il existe un autre type de tableau. En fait, dans l'article sur les objets, j'ai dit que ces derniers sont aussi des tableaux. En effet, ce sont des tableaux associatifs, qui sont une structure de données avec un système de stockage d'informations sous forme de « clé => valeur ». Cette structure est souvent appelée hachage, ou plus rarement dictionnaire.

Examinons chaque type plus en détail.

Lorsque vous travaillez avec des tableaux associatifs, il est très simple d'ajouter et de supprimer des éléments. Ce langage de script n'étant pas typé et n'ayant pas beaucoup de règles strictes, vous pouvez créer des éléments d'objet de plusieurs manières : les lister immédiatement, les initialiser après la création de l'objet, et également les créer au fur et à mesure de la progression du code.

Je veux maintenant montrer des exemples de mise en œuvre de tels mécanismes. Dans le premier programme, j'ai créé un objet patient, puis a répertorié ses éléments. Comme vous pouvez le constater, pour patientparamètre J'ai créé un objet imbriqué qui a ses propres valeurs.

1 2 3 4 5 6 7 8 9 10

var patient = nouvel objet (); patient.firstName ="Inna" patient.age =34, patient.param =( taille:169 , poids : 55, maladie : "no" ) alert(patient.firstName) // affichera l'alerte "Inna" (patient.param . maladie) // n'imprimera pas

S'il est nécessaire d'ajouter un paramètre supplémentaire à ceux existants, par exemple le nom de famille, procédez comme suit. Ajoutez les lignes suivantes au code présenté ci-dessus :

patient.nom = "Loutsenko"

alerte (patient.nom)

C'est ainsi que la collection se reconstitue facilement avec de nouvelles propriétés. Si vous souhaitez modifier une valeur, il vous suffit de l'attribuer à la touche sélectionnée :

patient.firstName = "Katya"

Pour les objets, il existe également une opération de suppression des propriétés inutiles à l'aide de la commande delete :

supprimer patient.nom

Tableaux "vrais"

Ils sont aussi parfois appelés « tableaux avec index numériques ». Si on les compare avec la version précédente, ici les clés sont présentées sous forme de chiffres, mais les valeurs peuvent être absolument n'importe quoi. La collection peut être introduite dans le désordre dans un tel objet.

Ainsi, un élément peut être entré dans une cellule avec l'indice « 0 » et le suivant - avec l'indice « 4 ». Les cellules de mémoire intermédiaires seront vides et afficheront « non défini » en cas d'accès.

À titre d'exemple, j'ai écrit une petite application dans laquelle une gamme de produits a été créée.

1 2 3 4 5

var marchandises = ["Bœuf","Pâtes","Fromage à pâte dure","Épices"]; alerte (marchandises); alerte (marchandises); marchandises = alerte "Tomates" (marchandises);

Je vous ai spécifiquement montré comment afficher la liste complète de courses et comment sélectionner un article. De plus, j'ai abordé la propriété longueur, dont je parlerai spécifiquement plus tard. En attendant, je vais donner une petite explication.

marchandises = "Tomates"

ajoute un nouvel élément à la fin du tableau.

Méthodes qui permettent de travailler avec le début et la fin d'un tableau

Il existe 4 commandes qui permettent d'ajouter et de supprimer des éléments au début et à la fin des objets structurés.

Tout d’abord, je vais vous parler des méthodes qui fonctionnent avec le début d’un tableau. Ceux-ci inclus changement Et annuler le décalage. La première commande supprime une valeur et la seconde en ajoute.

A titre d'exemple, j'ai pris le code du programme précédent et je l'ai modifié.

1 2 3 4 5 6 7 8

var marchandises = ["Bœuf","Pâtes","Fromage à pâte dure","Épices"]; document.writeln(marchandises); //Bœuf, Pâtes, Fromage à pâte dure, Épices document.writeln(goods); //Fromage à pâte dure.unshift("Tomates"); marchandises.unshift("Porc cuit"); document.writeln(marchandises); // Porc, Tomates, Bœuf, Pâtes, Fromage dur, Épices good.shift() document.writeln(goods); //Tomates, Bœuf, Pâtes, Fromage à pâte dure, Épices

J'ai noté les résultats obtenus dans les commentaires des actions réalisées.

Passons maintenant aux méthodes qui ajoutent et suppriment des éléments à la fin de la liste. Donc, populaire est responsable de la suppression des valeurs, et pousser- pour les ajouts.

Ajoutons les commandes ci-dessus à l'implémentation logicielle précédente.

marchandises.push("Herbes italiennes");

document.writeln(marchandises);

En conséquence, la dernière ligne s'affichera à l'écran :

"Tomates, bœuf, pâtes, fromage à pâte dure, herbes italiennes."

Maintenant comptons les éléments

Afin de connaître le nombre d'éléments écrits dans le tableau, vous devez utiliser la propriété object - longueur. J'ai déjà utilisé cette commande ci-dessus.

A cette époque, la longueur de la collection était de 4 et je devais ajouter un produit supplémentaire. Étant donné que la numérotation des éléments du tableau commence à zéro, la première cellule libre dans cet exemple se trouvait sous l'index « 4 ». Veuillez noter que la longueur ne détermine pas le nombre de produits inclus dans la collection, mais la longueur de la gamme elle-même. Ainsi, si parmi cette liste les 2 éléments du milieu étaient vides

(var marchandises = ["Bœuf","Pâtes","Fromage à pâte dure","Épices"];)

cette propriété donnerait le nombre 6.

Connaissant cette commande, vous pouvez commencer à analyser les boucles. Ils sont nécessaires pour parcourir les éléments de la collection. Il s’agit d’un mécanisme très pratique dont il est difficile de se passer. Dans les cycles, vous pouvez spécifier dans quelle direction, à partir de quel élément et le long de quel élément, ainsi qu'à quelle étape vous devez parcourir les valeurs.

La boucle la plus populaire et la plus rapide est celle créée à l’aide du mot-clé for.

var marchandises = ["Bœuf","Pâtes","Fromage à pâte dure","Épices"]; pour (var i = marchandises.longueur-1; i >=0; i=i-2) ( document.writeln((i+1)+"."+ marchandises[i]); )

Ceux qui ont décidé que la réponse contiendrait la ligne : « 4. Épices 2. Pâtes » avaient raison. Bien joué!

Quelques notes utiles

Les créateurs du langage js ont fourni de nombreuses méthodes et fonctions qui simplifient grandement le travail avec les tableaux. Parmi eux, il existe des outils permettant de copier des collections, de modifier l'ordre des éléments, de les trier, de convertir un tableau en chaînes et inversement, et bien plus encore.

Dans cette leçon, nous nous familiariserons avec les tableaux, apprendrons à les créer, à effectuer des opérations sur leurs éléments et examinerons également les méthodes et propriétés de base disponibles lorsque vous travaillez avec eux.

Qu’est-ce qu’un tableau en JavaScript ?

Un tableau est collection ordonnée de valeurs. Les valeurs de cette collection sont appelées éléments. Chaque élément du tableau possède son propre numéro de série (numéro), appelé index. Les index sont numérotés à partir de 0.

La figure suivante montre un tableau numérique composé de 5 éléments. Les éléments de ce tableau contiennent les données suivantes : 123 (index 0), 7 (index 1), 50 (index 2), -9 (index 3), 24 (index 4).

Créer (déclarer) un tableau

La création de tableaux en JavaScript se fait généralement en utilisant tableau littéral.

Un littéral de tableau est un crochet contenant une liste d’éléments séparés par une virgule.

Par exemple:

Var vide = ; // tableau vide var number = ; // tableau numérique var arr = ; // tableau contenant différents types de données

Les valeurs d'un tableau JavaScript ne doivent pas nécessairement être du même type. Ceux. Un tableau peut contenir des valeurs de différents types de données.

Un élément de tableau spécifique est accessible par son index. Cette opération est également appelée opération d’indexation.

Par exemple:

// crée un tableau composé de 3 éléments var smartphoneColors = ["Black", "White", "Grey"]; // affiche dans la console du navigateur les valeurs des éléments du tableau smartphoneColors avec les index 0 et 2 console.log("Valeur de l'élément du tableau smartphoneColors avec l'index 0 : " + smartphoneColors); // "La valeur de l'élément du tableau smartphoneColors d'index 0 : Noir" console.log("La valeur de l'élément du tableau smartphoneColors d'index 2 : " + smartphoneColors); // "La valeur de l'élément du tableau smartphoneColors d'index 0 : Gray" // change la valeur de l'élément du tableau smartphoneColors d'index 1 en "Red" smartphoneColors = "Red"; // ["Black", "Red", "Grey"] // définit l'élément du tableau smartphoneColors d'index 3 sur la valeur "Blue" smartphoneColors = "Blue"; // ["Noir", "Rouge", "Gris", "Bleu"]

Vous pouvez utiliser non seulement des valeurs statiques, mais également des expressions comme valeurs d'éléments de tableau :

Var longueurA = 7, largeurA = 5 ; var point = ;

Les objets peuvent être utilisés comme valeurs d'éléments de tableau.

Points Var = [ (x1 : 5, y1 : 3), (x1 : 7, y1 : 10), (x1 : 12 ; y1 : 0) ] ; // tableau composé de 3 objets

Une autre façon de créer un tableau consiste à appeler la fonction constructeur Array.

Un appel de fonction constructeur sans argument est utilisé pour créer un tableau vide.

Var vide = new Array(); // tableau vide

Cette méthode de création d'un tableau est équivalente à un littéral.

Si vous spécifiez un nombre comme argument de la fonction constructeur, celle-ci créera un tableau composé du nombre d'éléments spécifié. De plus, tous ces éléments auront une valeur indéfinie.

Var arr = nouveau tableau (5); // tableau composé de 5 éléments (les valeurs des éléments ne sont pas définies)

Si vous transmettez plusieurs valeurs ou une valeur non numérique à la fonction constructeur entre parenthèses, elle créera un tableau à partir des arguments qui lui sont passés.

Contrairement à de nombreux autres langages de programmation, les tableaux en JavaScript changent automatiquement de taille, c'est-à-dire ils sont intrinsèquement dynamiques. Il n’est pas nécessaire de donner de dimensions à de tels tableaux. Une autre particularité des tableaux JavaScript est que différents éléments d’un même tableau peuvent contenir différents types de données.

propriété length (longueur du tableau)

La détermination de la longueur du tableau (nombre d'éléments) se fait à l'aide de la propriété length.

//crée un tableau en listant les valeurs des éléments dans la fonction Array var volumeHDDs = new Array("500Gb","1Tb","2Tb"); //affecte la variable lengthArray à la longueur du tableau volumeHDDs var lengthArray = volumeHDDs.length;

Comment obtenir le premier élément d'un tableau

La valeur du premier élément d'un tableau s'obtient en précisant le chiffre 0 entre crochets de ce tableau :

//création d'un tableau composé de 3 éléments var volumeHDDs = new Array("500Gb","1Tb","2Tb"); //obtenir la valeur du premier élément du tableau var firstValue = volumeHDDs;

Comment obtenir le dernier élément d'un tableau

La valeur du dernier élément d'un tableau est obtenue en précisant l'expression nom_tableau.longueur-1 entre crochets de ce tableau :

//création d'un tableau composé de 3 éléments var volumeHDDs = new Array("500Gb","1Tb","2Tb"); //obtenir la valeur du dernier élément du tableau var lastValue = volumeHDDs;

Itérer sur un tableau

L'itération sur les éléments du tableau se fait à l'aide d'une boucle for.

Par exemple, parcourons tous les éléments du tableau et affichons leurs valeurs dans la console du navigateur (F12) :

//création d'un tableau nameStudents, composé de 4 éléments var nameStudents = new Array("Petya","Vasya","Kolya","Maxim"); //itérer les éléments du tableau de 0 à la longueur du tableau-1 pour (var i=0; i<= nameStudents.length-1; i++) { console.log(i+1 + " элемент массива = " + nameStudents[i]); }

Quel est le but de l’opérateur delete ?

L'opérateur delete n'est pas utilisé pour supprimer un élément d'un tableau, mais pour attribuer la valeur non définie à un élément de tableau donné.

Var namePlanets = new Array("Vénus","Mercure","Terre","Mars"); supprimer namePlanets ; pour (var je=0; je<= namePlanets.length-1; i++) { console.log(i + " элемент массива = " + namePlanets[i]); }

Fonctions pour travailler avec des tableaux (méthodes d'objet Array)

L'objet Array contient les méthodes (fonctions) suivantes pour travailler avec des tableaux :

changement
annuler le décalage
tranche
épissure
diviser
inverse

Méthode Push (ajout d'un élément à la fin du tableau)

La méthode push est conçue pour ajouter un élément à la fin du tableau. La valeur de cet élément est spécifiée en tant que paramètre de cette méthode. En conséquence, la méthode push renvoie le nombre d'éléments dans le tableau, en tenant compte de ce qui a été ajouté.

Var namePlanets = ["Vénus", "Mercure", "Terre", "Mars"]; nomPlanètes.push("Jupiter"); // 5 console.log(nomPlanètes); // ["Vénus", "Mercure", "Terre", "Mars", "Jupiter"]

méthode pop (suppression du dernier élément d'un tableau)

La méthode pop est conçue pour supprimer le dernier élément d'un tableau. Cette méthode n'a pas de paramètres. En conséquence, il renvoie la valeur du dernier élément (supprimé) du tableau.

Var namePlanets = ["Vénus", "Mercure", "Terre", "Mars"]; nomPlanètes.pop(); // "Mars" console.log(namePlanets); // ["Vénus", "Mercure", "Terre"]

Méthode Shift (suppression du premier élément d'un tableau)

La méthode shift est conçue pour supprimer le premier élément du tableau, c'est-à-dire élément ayant l'indice 0. Tous les autres éléments du tableau sont décalés vers le début, c'est-à-dire pour chacun d'eux, l'index est réduit de 1. Cette méthode renvoie ainsi la valeur de l'élément supprimé.

Var namePlanets = ["Vénus", "Mercure", "Terre", "Mars"]; nomPlanètes.shift(); // "Vénus" console.log(namePlanets); // ["Mercure", "Terre", "Mars"]

méthode unshift (ajout d'un élément au début du tableau)

La méthode unshift est conçue pour ajouter un élément au début du tableau (avant les autres éléments). La valeur de cet élément est spécifiée en tant que paramètre de cette méthode. En conséquence, cette méthode renvoie le nombre d'éléments dans le tableau, en tenant compte de ce qui a été ajouté.

Var namePlanets = ["Mercure", "Terre", "Mars", "Jupiter"]; namePlanets.unshift("Vénus"); // 5 console.log(nomPlanètes); // ["Vénus", "Mercure", "Terre", "Mars", "Jupiter"]

méthode slice (copie d'une section d'un tableau)

La méthode slice est conçue pour copier une section d’un tableau. Cependant, il ne modifie pas le tableau d'origine, mais renvoie en conséquence un nouveau tableau composé des éléments sélectionnés.

La méthode slice a 2 paramètres :

1 paramètre (obligatoire) - est destiné à indiquer l'index de l'élément à partir duquel commencer la copie des éléments ;
Paramètre 2 (facultatif) - est destiné à indiquer l'index de l'élément vers lequel il faut copier (dans ce cas, il n'est pas inclus dans le nouveau tableau). Si vous ne le spécifiez pas, les éléments jusqu'à la fin du tableau spécifié seront copiés.

var namePlanets = ["Vénus", "Mercure", "Terre", "Mars", "Jupiter"]; var newNamePlanets = namePlanets.slice(2, 4); // ["Terre", "Mars"]

Méthode Splice (modification du contenu d'un tableau)

La méthode splice est conçue pour modifier le contenu d’un tableau. Il peut être utilisé à la fois pour ajouter des éléments à un tableau et pour les supprimer.

La syntaxe de la méthode splice est la suivante :

Array.splice(startIndex, deleteCount [, element1[, element2[, ...]]]); /* startIndex (obligatoire) - l'index de départ de l'élément à partir duquel commencer à modifier le tableau. Si vous spécifiez un nombre supérieur à la longueur du tableau comme startIndex, alors l'index de début sera défini à la fin du tableau. Si vous spécifiez un nombre négatif comme startIndex, alors l'élément de début sera compté à partir de la fin. deleteCount (obligatoire) - un nombre indiquant combien d'éléments doivent être supprimés du tableau. Si les éléments n'ont pas besoin d'être supprimés du tableau, alors deleteCount doit être défini sur 0. Après cela, vous devez spécifier au moins un nouvel élément à ajouter au tableau. Si vous spécifiez un nombre comme deleteCount qui dépassera le nombre d'éléments restants dans le tableau, à partir de startIndex, alors dans ce cas, ils seront toujours supprimés (c'est-à-dire tous les éléments jusqu'à la fin du tableau, à partir de l'index de départ). element1, element2, .. (facultatif) - éléments qui doivent être ajoutés au tableau. */

Exemples d'utilisation de la méthode d'épissage.

Utilisation de la méthode splice pour supprimer certains éléments d'un tableau.

Var namePlanets = ["Vénus", "Mercure", "Terre", "Mars"]; nomPlanets.splice(2, 2); //["Terre", "Mars"] console.log(namePlanets); // ["Vénus", "Mercure"]

Utiliser la méthode splice pour supprimer un élément d'un tableau et y ajouter de nouveaux.

Var namePlanets = ["Vénus", "Mercure", "Terre", "Mars"]; namePlanets.splice(1, 1, "Uranus", "Neptune", "Saturne"); // ["Mercure"] console.log(namePlanets); // ["Vénus", "Uranus", "Neptune", "Saturne", "Terre", "Mars"]

Utiliser la méthode splice uniquement pour ajouter de nouveaux éléments à un tableau.

Var namePlanets = ["Jupiter", "Saturne", "Uranus"]; namePlanets.splice(0, 0, "Vénus", "Mercure", "Terre", "Mars"); // console.log(nomPlanètes); // ["Vénus", "Mercure", "Terre", "Mars", "Jupiter", "Saturne", "Uranus"]

méthode join (conversion d'un tableau en chaîne)

La méthode join est conçue pour joindre tous les éléments d’un tableau dans une chaîne.

Syntaxe de la méthode de jointure :

Array.join(); /* séparateur (facultatif) - un séparateur utilisé comme chaîne de connexion entre chaque élément du tableau. Si ce paramètre n'est pas spécifié, "," sera utilisé comme chaîne de connexion. Si vous spécifiez une chaîne vide comme paramètre, alors les éléments du tableau dans la chaîne renvoyée ne seront séparés par rien */

Baies du Var = [« Raisins », « Raisins », « Groseille », « Rose Musquée »] ; var baiesStr1 = baies.join(); // "Raisins, raisins, groseilles, cynorrhodons" var berriesStr2 = berries.join(""); // "RaisinsGrapesCurrantRosehip" var berriesStr3 = berries.join(", "); // "Raisins, raisins, groseilles, cynorrhodons" var berriesStr4 = berries.join(" + "); // "Raisins + Raisins + Groseilles + Cynorrhodons"

Si vous utilisez une non-chaîne comme séparateur, elle sera convertie en chaîne.

Baies du Var = [« Raisins », « Raisins », « Groseille », « Rose Musquée »] ; var berriesStr1 = berries.join(false); // "GrapesfalseGrapesfalseCurrantfalseRosehip" var berriesStr2 = berries.join(4/2); // Les éléments du tableau "Grapes2Grapes2Currant2Rose Hip" dont la valeur est null ou non définie seront convertis en chaîne vide. vararr = ; var arrStr = arr.join(", "); // "0, 5, -4"

Conversion d'une chaîne en tableau - split

La méthode split est conçue pour convertir une chaîne en tableau. Cette méthode a un paramètre, sous lequel vous pouvez spécifier une chaîne, sur la base de laquelle cette chaîne sera divisée en un tableau de chaînes.

Var strElementComputers = "Unité système, moniteur, clavier, souris, haut-parleurs, imprimante"; var elementComputers = strElementComputers.split(", "); console.log("Nombre d'éléments dans le tableau : " + elementComputers.length); pour (var je=0; je<= elementComputers.length-1; i++) { console.log(i + " элемент массива = " + elementComputers[i]); }

Réorganisation des éléments du tableau dans l'ordre inverse - inverse

La méthode inverse est conçue pour réorganiser les éléments du tableau dans l’ordre inverse.

Var namePlanets = new Array("Vénus","Mercure","Terre","Mars"); nomPlanètes.reverse(); console.log("Nombre d'éléments dans le tableau : " + namePlanets.length); pour (var je=0; je<= namePlanets.length-1; i++) { console.log(i + " элемент массива = " + namePlanets[i]); }

Tri des éléments du tableau - trier

La méthode sort est utilisée pour trier les éléments du tableau. Par défaut, cette méthode trie le tableau sous forme de chaînes.

Var namePlanets = new Array("Vénus","Mercure","Terre","Mars"); nomPlanètes.sort(); console.log("Nombre d'éléments dans le tableau : " + namePlanets.length); pour (var je=0; je<= namePlanets.length-1; i++) { console.log(i + " элемент массива = " + namePlanets[i]); }

21/06/2017 à 12h17

Pour calculer la taille d'un tableau d'objets en JavaScript, utilisez la propriété length du tableau.

Var arr = ["premier", "seconde"]; console.log(arr.length); // 2

Les tableaux en javascript peuvent avoir des index manquants. Par exemple

Var arr = ; arr = "premier" ; arr = "seconde" ;

La propriété length renvoie l'index maximum du tableau + 1. c'est-à-dire dans l'exemple donné, longueur = 5.

Calculer le nombre d'éléments dans un tableau en javascript

Array.prototype.count = function())( var result = 0; for(var i = 0; i< this.length; i++) if (this[i] != undefined) result++; return result; }

Exemple d'utilisation

Var arr = ; arr = "premier" ; arr = "seconde" ; console.log(arr.count()); //2

Vous pouvez également attribuer une valeur à la propriété length. Cela vous permet de réduire la longueur d'un tableau existant.

Var arr = ["premier", "deuxième", "troisième"]; arr.longueur = 2; console.log(arr); // ["première seconde"]

Calculer la taille d'un tableau en octets en javascript

Les tableaux sont des objets normaux, donc calculer la taille d'un tableau en octets n'est pas différent du calcul de la taille de tout autre objet. Malheureusement, javascript ne fournit pas d'API pour calculer la taille, vous devrez donc la calculer vous-même. Cela se fait de la manière suivante : on parcourt toutes les propriétés de l'objet ; si la propriété est de type primitif, on ajoute la taille d'une instance de ce type au résultat global ; si la propriété contient un objet, on calcule récursivement ; sa taille.

Fonction sizeOf(obj) ( var octets = 0; if(obj !== null && obj !== non défini) ( switch(typeof obj) ( case "number": octets += 8; break; case "string": octets += obj.length * 2; break; case "boolean": octets += 4; break; for(var key in obj) ( octets += sizeOf(obj); ) return octets ;

La méthode n'est pas précise et présente de nombreux problèmes - par exemple, il existe une possibilité d'entrer dans une boucle sans fin.

Dans cet article, nous examinerons les tableaux JavaScript standard avec des index numériques. Les tableaux sont déclarés entre crochets :

var fruits = ["Pomme", "Orange", "Âne"]

Pour extraire un élément, placez son index entre crochets. Premier indice 0 :

var fruits = ["Pomme", "Orange", "Âne"] alert(fruits) alert(fruits) alert(fruits)

Nous pouvons également obtenir la longueur d'un tableau JavaScript :

var fruits = ["Pomme", "Orange", "Âne"] alert(fruits.length)

Oops! Nous avons créé un tableau avec deux fruits et un âne. Maintenant, nous devons retirer l'âne.

méthodes pop et push

La méthode pop en JavaScript supprime un élément d'un tableau et le renvoie.

L'exemple suivant montre comment "Donkey" est récupéré à partir d'un tableau :

var fruits = ["Apple", "Orange", "Donkey"] alert("Je supprime "+fruits.pop()) // Maintenant nous n'avons que ["Apple","Orange"] alert("Maintenant la taille du tableau : "+fruits.length) // âne supprimé

Notez que pop modifie le tableau lui-même.

L'équivalent de Pop est la méthode push, qui ajoute un élément à un tableau. Par exemple, nous avons oublié d'ajouter une pêche :

var fruits = ["Pomme", "Orange"] fruits.push("Pêche"); // maintenant nous avons ["Apple", "Orange", "Peach"] alert("Dernier élément :"+fruits)

Créez une gamme de styles avec des éléments " le jazz”, “Bleus”;
Ajoutez la valeur " Rock n Roll«;
Remplacez la deuxième valeur à partir de la fin par la valeur " Classique". Vous devriez vous retrouver avec un tableau : " le jazz”, ”Classique”, ”Rock n Roll" Le code devrait fonctionner pour n’importe quelle longueur de tableau ;
Récupérez la dernière valeur du tableau et affichez-la via alert .

Solution

// 1 var styles = ["Jazz", "Bluez"] // 2 styles.push("Rock"n"Roll") // ou : styles = "Rock"n"Roll" // 3 styles = "Classic " // 4 alertes (styles.pop())

Méthodes de décalage/décalage

Les méthodes shift/unshift fonctionnent à la fin du tableau, mais vous pouvez également utiliser shift pour décaler les éléments vers le haut ( la première valeur du tableau est supprimée en décalant les éléments). La méthode unshift permet à JavaScript d'ajouter un élément à un tableau depuis la fin :

var fruits = ["Apple", "Orange"] var apple = fruits.shift() // maintenant nous n'avons que ["Orange"] fruits.unshift("Lemon") // maintenant nous avons ["Lemon", " Orange"] alerte(fruits.longueur) // 2

Shift et unshift peuvent fonctionner sur plusieurs éléments à la fois :

var fruits = ["Apple"] fruits.push("Orange","Peach") fruits.unshift("Pineapple","Lemon") // maintenant le tableau ressemble à ceci : ["Ananas", "Lemon", "Pomme", "Orange", "Pêche"]

Tâche auto-administrée

Écrivez le code pour afficher une valeur aléatoire du tableau arr via alert :

var arr = ["Prune", "Orange", "Âne", "Carotte", "JavaScript"]

Remarque : Le code pour obtenir un nombre aléatoire de la valeur minimale à la valeur maximale (incluse) est le suivant :

var rand = min + Math.floor(Math.random()*(max+1-min))

Solution

Nous devons extraire un nombre aléatoire de 0 à arr.length-1 (inclus) :

var arr = ["Prune", "Orange", "Âne", "Carotte", "JavaScript"] var rand = Math.floor(Math.random()*arr.length) alert(arr)

Itérer sur un tableau

En JavaScript, l'itération dans un tableau se fait à l'aide d'une boucle for :

var fruits = ["Ananas", "Citron", "Pomme", "Orange", "Pêche"] for(var i=0; i

Tâche auto-administrée

Créez une fonction find(arr,value) qui trouve une valeur dans un tableau donné et renvoie son index ou -1 si la valeur n'est pas trouvée.

Par exemple:

arr = [ "test", 2, 1.5, false ] find(arr, "test") // 0 find(arr, 2) // 1 find(arr, 1.5) // 2 find(arr, 0) // -1

Solution

Une solution possible pourrait ressembler à ceci :

fonction find(tableau, valeur) ( for(var i=0; i

Mais c'est incorrect car == ne définit pas la différence entre 0 et false .

Il est plus correct d'utiliser === lorsque vous travaillez avec des tableaux en JavaScript. De plus, la dernière norme ES5 inclut la fonction Array#indexOf. Avec lui, nous pouvons définir une fonction comme celle-ci :

fonction find(array, value) ( if (array.indexOf) return array.indexOf(value) for(var i=0; i

Encore plus intelligent serait de définir find avec une condition pour vérifier si la méthode indexOf existe.

Tâche auto-administrée

Créez une fonction filterNumeric(arr) qui prend un tableau et renvoie un nouveau tableau contenant uniquement les valeurs numériques de arr .

Un exemple de la façon dont cela devrait fonctionner :

arr = ["a", 1, "b", 2]; arr = filtreNumérique(arr); // maintenant arr =

Solution

La solution consiste à parcourir le tableau et à ajouter les valeurs à un nouveau tableau si elles sont numériques.

rejoindre et diviser

Parfois, vous avez besoin d'un moyen rapide pour convertir un tableau JavaScript en chaîne. C'est à cela que sert la méthode join.

Il concatène le tableau en une chaîne en utilisant le délimiteur donné :

var fruits = ["Citron","Pomme","Orange","Pêche"]; var str = fruits.join(", "); alerte(str);

La conversion inverse se fait facilement en utilisant la méthode split :

var fruits = "Pomme,Orange,Pêche"; var arr = fruits.split(","); // arr contient désormais ["Apple", "Orange", "Peach"] alert(arr);

Tâche auto-administrée

L'objet inclut une propriété className, qui contient les noms de classe, séparés par des espaces :

Écrivez une fonction addClass(obj, cls) qui ajoute la classe cls , mais seulement si elle n'existe pas :

ddClass(obj, "new") // obj.className="ouvrir le menu nouveau" addClass(obj, "open") // aucun changement (la classe existe déjà) addClass(obj, "me") // obj.className= Alerte "ouvrir le menu nouveau moi" (obj.className) //

Solution

Vous devez diviser le className et la boucle en parties. Si la classe n'est pas trouvée, elle est ajoutée.

La boucle a été légèrement optimisée pour augmenter les performances :

function addClass(elem, cls) ( for(var c = elem.className.split(" "), i=c.length-1; i>=0; i--) ( if (c[i] == cls ) return ) elem.className += " "+cls ) var obj = ( className: "open menu" ) addClass(obj, "new") addClass(obj, "open") alert(obj.className) // ouvrir le menu nouveau

Dans l'exemple ci-dessus, la variable c est définie au début de la boucle et son dernier index est défini sur i .

La boucle elle-même est traitée dans le sens opposé, se terminant par la condition i>=0. Parce que i>=0 est plus rapide à vérifier que i . Ce qui en JavaScript accélère la recherche dans un tableau.

Utiliser la longueur pour découper un tableau

En utilisant la propriété length, vous pouvez tronquer un tableau comme ceci :

Vous spécifiez la longueur et le navigateur tronque le tableau.

Un tableau est un objet, alors qu'est-ce que cela signifie ?

En fait, en JavaScript, un tableau est un objet, doté d'un réglage automatique de la longueur et de méthodes spéciales.

Ceci est différent du concept d'autres langages, où les tableaux représentent un segment contigu de mémoire. Ceci est également différent d'une file d'attente ou d'une pile basée sur des listes chaînées.

Clés de tableau non numériques

Les clés sont des nombres, mais elles peuvent porter n'importe quel nom :

arr = arr = 5 arr.prop = 10 // ne fais pas ça

En JavaScript, les tableaux sont des tables de hachage, qui présentent des avantages en termes de performances mais également certains inconvénients.

Par exemple, push/pop ne fonctionne que sur les éléments les plus externes d'un tableau, ils sont donc incroyablement rapides.

push ne fonctionne qu'avec la fin :

var arr = ["Mon", "tableau"] arr.push("quelque chose") alert(arr) // chaîne "tableau"

Les méthodes shift/unshift sont lentes car elles doivent renuméroter l'ensemble du tableau. La méthode d'épissage peut également entraîner une modification de la numérotation :

Donc shift/unshift sont plus lents que push/pop . Plus le tableau est grand, plus il faut de temps à JavaScript pour trier le tableau.

Tâche auto-administrée

Quel sera le résultat ? Pourquoi?

arr = ["a", "b"] arr.push(function() ( alert(this) )) arr() // ?

Solution

Puisque les tableaux sont des objets, arr .. est en fait un appel de méthode sur un objet tel que obj méthode:

arr() // identique à arr() // syntaxiquement incorrect, mais conceptuellement identique : arr.2() // réécrit dans le même style que obj.method() this = arr dans ce cas est passé à la fonction, donc le contenu de arr est imprimé. arr = ["a", "b"] arr.push(function() ( alert(this) )) arr() // "a","b",fonction

Tableaux clairsemés, description de la longueur

La propriété length permet d'obtenir non pas la taille d'un tableau en JavaScript, mais le dernier index + 1. Ceci est important lorsque nous parlons de tableaux clairsemés, avec des « lacunes » dans les indices.

Dans l'exemple suivant, nous ajouterons deux éléments aux fruits vides , mais la valeur de longueur restera 100 :

var fruits = // tableau vide fruits = "Pêche" fruits = "Pomme" alert(fruits.length) // 100 (mais il n'y a que 2 éléments dans le tableau)

Si vous essayez de générer un tableau clairsemé, le navigateur renverra les valeurs d'index manquantes sous forme d'éléments vides :

var fruits = // tableau vide fruits = "Peach" fruits = "Apple" alert(fruits) // ,Peach,Apple (ou quelque chose comme ça)

Mais un tableau est un objet avec deux clés. Les valeurs manquantes ne prennent pas de place.

Les tableaux clairsemés se comportent bizarrement lorsque des méthodes de tableau leur sont appliquées. Ils n'ont aucune idée qu'il manque des index :

var fruits = fruits = "Peach" fruits = "Apple" alert(fruits.pop()) // pop "Apple" (à l'index 9) alert(fruits.pop()) // pop un élément non spécifié (à l'index 8 )

Essayez d'éviter les tableaux clairsemés. Dans tous les cas, leurs méthodes ne fonctionneront pas normalement. Utilisez plutôt Objet.

Supprimer d'un tableau

Comme nous le savons, les tableaux sont des objets, nous pourrions donc utiliser delete pour supprimer une valeur :

var arr = ["Go", "to", "home"] delete arr // maintenant arr = ["Go", undefined, "home"] alert(arr) // non défini

Vous pouvez voir que la valeur est supprimée, mais pas comme nous le souhaiterions, car le tableau contient un élément non spécifié.

L'opérateur delete supprime une paire clé-valeur et c'est tout. Naturellement, puisque le tableau n’est qu’un hachage, la position de l’élément supprimé devient indéfinie.

Le plus souvent, nous devons supprimer un élément sans laisser de « trous » entre les indices. Il existe une autre méthode qui nous y aidera.

méthode d'épissure

La méthode splice peut supprimer des éléments et les remplacer dans des tableaux multidimensionnels JavaScript. Sa syntaxe est :

arr.splice(index, deleteCount[, elem1, ..., elemN])

Supprime l'élément deleteCount à partir de l'index, puis insère elem1, ..., elemN à sa place.

Regardons quelques exemples :

var arr = ["Go", "to", "home"] arr.splice(1, 1) // supprime 1 élément à partir de l'index 1 alert(arr.join(",")) // ["Go " , "home"] (1 élément supprimé)

Vous pouvez donc utiliser splice pour supprimer un élément d'un tableau. Les numéros des éléments du tableau sont décalés pour remplir l'espace :

var arr = ["Go", "to", "home"] arr.splice(0, 1) // supprime 1 élément, à partir de l'index 0 alert(arr) // "to" est devenu le premier élément

L'exemple suivant montre comment remplacer des éléments :

La méthode splice renvoie un tableau d'éléments supprimés :

var arr = ["Aller", "vers", "domicile", "maintenant"]; // supprime les 2 premiers éléments var supprimé = arr.splice(0, 2) alert(removed) // "Go", "to"<-- массив удаленных элементов splice может вставлять элементы, задайте 0 для deleteCount. var arr = ["Go", "to", "home"]; // со второй позиции // удаляем 0 // и вставляем "my", "sweet" arr.splice(2, 0, "my", "sweet") alert(arr) // "Go", "to", "my", "sweet", "home"

Cette méthode peut également utiliser un index négatif, qui est compté à partir de la fin du tableau :

var arr = // pour l'élément -1 (avant-dernier) // supprime 0 élément, // et insère 3 et 4 arr.splice(-1, 0, 3, 4) alert(arr) // 1,2,3, 4.5

Tâche auto-administrée

L'objet contient une propriété className, qui contient les noms de classe, séparés par des espaces :

var obj = (className : "ouvrir le menu")

Écrivez une fonction removeClass(obj, cls) qui supprime la classe cls si elle est donnée :

RemoveClass(obj, "open") // obj.className="menu" RemoveClass(obj, "blabla") // aucun changement (il n'y a pas de classe à supprimer)

Solution

Vous devez diviser le className en parties et parcourir ces parties en boucle. Si une correspondance est trouvée, elle est supprimée du tableau d'objets JavaScript, puis rajoutée à la fin.

Optimisons un peu cela :

function removeClass(elem, cls) ( for(var c = elem.className.split(" "), i=c.length-1; i>=0; i--) ( if (c[i] == cls ) c.splice(i,1) ) elem.className = c.join(" ") ) var obj = ( className : "ouvrir le menu" ) RemoveClass(obj, "open") RemoveClass(obj, "blabla") alerte (obj.className) // menu

Dans l'exemple ci-dessus, la variable c est définie au début de la boucle et i est définie sur son dernier index.

La boucle elle-même s'exécute dans la direction opposée et se termine par la condition i>=0. Ceci est fait parce que i>=0 est vérifié plus rapidement que i . Ce qui accélère la recherche de propriétés dans c .

méthode de tranche

Vous pouvez extraire une partie d'un tableau à l'aide de la méthode slice(begin[, end]) : var arr = ["Pourquoi", "learn", "JavaScript"]; var arr2 = arr.slice(0,2) // prend 2 éléments, en commençant à 0 alert(arr2.join(", ")) // "Pourquoi, apprends"

Veuillez noter que cette méthode ne modifie pas le nombre d'éléments dans le tableau en JavaScript, mais en copie une partie.

Vous pouvez omettre le deuxième argument pour obtenir tous les éléments commençant à un index spécifique :

var arr = ["Pourquoi", "apprendre", "JavaScript"]; var arr2 = arr.slice(1) // prend tous les éléments à partir de 1 alert(arr2.join(", ")) // "apprendre, JavaScript"

La méthode prend en charge les index négatifs, tout comme String#slice .

méthode inverse

Une autre méthode utile est l'inverse. Disons que je souhaite obtenir la dernière partie d'un domaine comme " com" depuis " mon.site.com" Voici comment procéder :

var domain = "my.site.com" var last = domain.split(".").reverse() alert(last)

Notez que les tableaux JavaScript prennent en charge une syntaxe complexe (reverse()) pour appeler une méthode puis récupérer un élément du tableau résultant.

Vous pouvez créer des appels plus longs comme reverse() 0] arr.sort() alerte(arr) // 1, 15, 2

Exécutez le code ci-dessus. Vous obtiendrez l'ordre 1, 15, 2. En effet, la méthode convertit tout en chaîne et utilise l'ordre lexicographique par défaut.