Opérations Javascript avec des tableaux. Ajout d'un élément au début d'un tableau - unshift. Ajout et suppression de composants

  • Traduction

La plupart des applications développées de nos jours nécessitent une interaction avec un certain type d’ensemble de données. La gestion des éléments dans les collections est une opération courante que vous avez probablement rencontrée. Lorsque vous travaillez, par exemple, avec des tableaux, vous pouvez, sans réfléchir, utiliser une boucle for classique, qui ressemble à ceci : for (var i=0; i< value.length; i++){} . Однако, лучше, всё-таки, смотреть на вещи шире.

Supposons que nous ayons besoin d'afficher une liste de produits, et, si nécessaire, de la diviser en catégories, de la filtrer, d'effectuer une recherche dessus, de modifier cette liste ou ses éléments. Peut-être avez-vous besoin d’effectuer rapidement certains calculs impliquant les éléments d’une liste. Disons que vous devez ajouter quelque chose avec quelque chose, multiplier quelque chose par quelque chose. Est-il possible de trouver des outils en JavaScript qui vous permettent de résoudre de tels problèmes plus rapidement et plus facilement qu'en utilisant une boucle for classique ?

En fait, il existe de telles fonctionnalités en JavaScript. Certains d'entre eux sont abordés dans le matériel dont nous présentons aujourd'hui la traduction à votre attention. En particulier, nous parlons de l'opérateur spread, de la boucle for...of et des méthodes include(), some(), each(), filter(), map() et reduction(). Nous parlerons ici principalement de tableaux, mais les techniques abordées ici conviennent généralement au travail avec d'autres types d'objets.

Il convient de noter que les revues des approches modernes du développement JS incluent généralement des exemples préparés à l'aide de fonctions fléchées. Peut-être que vous ne les utilisez pas très souvent - peut-être parce que vous ne les aimez pas, peut-être parce que vous ne voulez pas passer trop de temps à apprendre quelque chose de nouveau, ou peut-être qu'ils ne vous conviennent tout simplement pas. Par conséquent, ici, dans la plupart des situations, deux options pour effectuer les mêmes actions seront affichées : en utilisant fonctions normales(ES5) et en utilisant les fonctions fléchées (ES6). Pour ceux qui débutent avec les fonctions fléchées, les fonctions fléchées ne sont pas l’équivalent des déclarations de fonction et des expressions de fonction. Il ne faut pas remplacer l'un par l'autre. Cela est notamment dû au fait que le mot-clé this se comporte différemment dans les fonctions ordinaires et fléchées.

1. Opérateur d'expansion

L'opérateur spread vous permet de « développer » des tableaux en substituant leurs éléments au lieu de tableaux à l'endroit où cet opérateur est utilisé. Une approche similaire a été proposée pour les littéraux d’objet.

▍Atouts de l’opérateur d’expansion

  • C'est simple et façon rapide"tirez-le" du tableau éléments individuels.
  • Cet opérateur convient pour travailler avec des littéraux de tableau et d’objet.
  • Il s'agit d'une méthode rapide et intuitive pour travailler avec les arguments de fonction.
  • L'opérateur d'extension ne prend pas beaucoup de place dans le code - il ressemble à trois points (...).

▍Exemple

Disons que vous êtes chargé de lister vos friandises préférées sans utiliser de boucle. En utilisant l'opérateur d'extension, cela se fait comme ceci :

2. Boucle pour… de

L'instruction for…of est conçue pour parcourir des objets itérables. Il donne accès à des éléments individuels de tels objets (notamment aux éléments d'un tableau), ce qui permet par exemple de les modifier. Il peut être considéré comme un remplacement de l'habituel pour la boucle.

▍Forces de la boucle for…of

  • Il s’agit d’un moyen simple d’ajouter ou de mettre à jour des éléments de collection.
  • La boucle for…of permet d'effectuer divers calculs à l'aide d'éléments (sommation, multiplication, etc.).
  • Il est pratique à utiliser lorsque vous devez vérifier des conditions.
  • Son utilisation conduit à écrire du code plus propre et plus lisible.

▍Exemple

Supposons que vous disposiez d'une structure de données décrivant le contenu d'une boîte à outils et que vous souhaitiez afficher ces outils. Voici comment procéder en utilisant une boucle for...of :

3. La méthode include()

La méthode include() est utilisée pour vérifier la présence d'un certain élément dans une collection, en particulier, par exemple, une certaine chaîne dans un tableau contenant des chaînes. Cette méthode renvoie vrai ou faux selon les résultats du test. Lors de son utilisation, il convient de considérer qu'il est sensible à la casse. Si, par exemple, la collection contient l'élément de chaîne SCHOOL et que include() vérifie sa présence à l'aide de la chaîne school , la méthode renverra false .

▍Atouts de la méthode include()

  • La méthode include() est utile pour créer des mécanismes simples de récupération de données.
  • Il donne au développeur une interface intuitive voie claire déterminer la présence de certaines données dans le tableau.
  • Il est pratique de l'utiliser dans des expressions conditionnelles pour modifier, filtrer des éléments et effectuer d'autres opérations.
  • Son utilisation conduit à une meilleure lisibilité du code.

▍Exemple

Supposons que vous ayez un garage, représenté par un tableau avec une liste de voitures, et que vous ne sachiez pas si une certaine voiture se trouve dans ce garage ou non. Afin de résoudre ce problème, vous devez écrire un code qui vous permet de vérifier si une voiture se trouve dans le garage. Utilisons la méthode include() :

4. méthode some()

La méthode some() permet de vérifier si certains des éléments que vous recherchez existent dans le tableau. En fonction des résultats de la vérification, il renvoie true ou false . Elle est similaire à la méthode include() ci-dessus, sauf que son argument est une fonction plutôt que, par exemple, une chaîne normale.

▍Atouts de la méthode some()

  • La méthode some() nous permet de vérifier si le tableau contient au moins un des éléments qui nous intéressent.
  • Il effectue un test de condition en utilisant la fonction qui lui est transmise.
  • Cette méthode est pratique à utiliser.

▍Exemple

Supposons que vous soyez propriétaire d'un club et qu'en général, vous ne vous intéressez pas à savoir qui vient exactement dans votre club. Cependant, certains visiteurs ne sont pas autorisés à entrer dans le club car ils sont sujets à une consommation excessive de boissons alcoolisées, du moins s'ils se retrouvent seuls dans votre établissement et qu'il n'y a personne avec eux pour s'occuper d'eux. Dans ce cas, un groupe de visiteurs ne peut entrer dans le club que si au moins l'un d'entre eux est âgé d'au moins 18 ans. Pour automatiser le contrôle cette sorte, utilisons la méthode some(). Ci-dessous, son application est démontrée en deux versions.

ES5

ES6

5. Méthode Every()

La méthode Every() parcourt le tableau et vérifie la conformité de chaque élément à une certaine condition, renvoyant true si tous les éléments du tableau remplissent la condition, et false si sinon. Vous pouvez voir que cela est similaire à la méthode some().

▍Atouts de la méthode Every()

  • La méthode Every() permet de vérifier si tous les éléments d'un tableau remplissent une condition.
  • Les conditions peuvent être définies à l’aide de fonctions.
  • Il promeut une approche déclarative de la programmation.

▍Exemple

Revenons à l'exemple précédent. Là, vous avez autorisé l'entrée du club aux visiteurs de moins de 18 ans, mais quelqu'un a écrit une déclaration à la police, après quoi vous vous êtes retrouvé dans une situation désagréable. Une fois que tout a été réglé, vous avez décidé que vous n’aviez pas besoin de tout cela et avez renforcé les règles de visite du club. Désormais, un groupe de visiteurs ne peut entrer dans le club que si chaque membre du groupe est âgé d'au moins 18 ans. Comme la dernière fois, nous envisagerons de résoudre le problème en deux versions, mais cette fois nous utiliserons la méthode each().

ES5

ES6

6. Méthode filter()

La méthode filter() vous permet de créer, sur la base d'un certain tableau, un nouveau tableau contenant uniquement les éléments du tableau d'origine qui satisfont à une condition donnée.

▍Atouts de la méthode filter()

  • La méthode filter() évite la modification du tableau d'origine.
  • Cela vous permet de vous débarrasser des éléments inutiles.
  • Cela améliore la lisibilité du code.

▍Exemple

Supposons que vous deviez sélectionner dans une liste de prix uniquement ceux qui sont supérieurs ou égaux à 30. Utilisons la méthode filter() pour résoudre ce problème.

ES5

ES6

7. Méthode Map()

La méthode map() est similaire à la méthode filter() dans le sens où elle renvoie également un nouveau tableau. Cependant, il est utilisé pour modifier les éléments du tableau d'origine.

▍Atouts de la méthode map()

  • La méthode map() évite d'avoir à modifier les éléments du tableau d'origine.
  • Il peut être utilisé pour modifier facilement les éléments du tableau.
  • Cela améliore la lisibilité du code.

▍Exemple

Disons que vous avez une liste de produits avec des prix. Votre manager a besoin Nouvelle liste biens dont les prix sont réduits de 25%. Utilisons la méthode map() pour résoudre ce problème.

ES5

ES6

8.Méthode réduire()

La méthode réduire(), dans sa forme la plus simple, vous permet de sommer les éléments de tableaux numériques. En d’autres termes, cela réduit le tableau à une seule valeur. Cela vous permet de l'utiliser pour effectuer divers calculs.

▍Atouts de la méthode réduire()

  • En utilisant la méthode réduire(), vous pouvez calculer la somme ou la moyenne des éléments d’un tableau.
  • Cette méthode accélère et simplifie les calculs.

▍Exemple

Disons que vous devez calculer vos dépenses pour la semaine, qui sont stockées dans un tableau. Résolvons ce problème en utilisant la méthode réduire().

ES5

ES6

Ajouter des balises

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 du tableau peuvent être de n'importe quel type, et différents éléments Le même tableau peut avoir différents types. 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 entourés de 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 différents types+ 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().

Lecture et écriture d'é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 décaler(), 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; // faux, 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 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]. Ci-dessous se trouve 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 fonctions pratiques pour travailler avec des tableaux, qui sont disponibles en tant que méthodes de 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é dans ordre alphabétique(à titre de comparaison, les éléments sont temporairement convertis en chaînes 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 cependant de noter que transformer récursivement un tableau de tableaux en tableau unidimensionnel n'arrive pas. 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 méthode universelle, qui insère ou supprime des éléments d'un 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.

Vous pouvez travailler avec des tableaux en utilisant diverses méthodes, fourni par le constructeur Array.

Méthodes pop/push et shift/unshift

Regardons les méthodes pop() et push(). Ces méthodes vous permettent de travailler avec des tableaux comme s'il s'agissait de piles. Une pile est une structure de données dans laquelle l'accès aux éléments est organisé selon le principe LIFO (anglais : last in - first out, « last in - first out »). Le principe de fonctionnement de la pile peut être comparé à une pile d'assiettes : pour prendre la deuxième par le haut, il faut retirer celle du haut. Son fonctionnement est illustré dans la figure :

Revenons donc aux méthodes push() et pop(). La méthode push() ajoute un ou plusieurs nouveaux éléments à la fin du tableau et renvoie sa nouvelle longueur. Méthode pop() - supprime le dernier élément du tableau, réduit la longueur du tableau et renvoie la valeur qu'il a supprimée. Il convient de noter que ces deux méthodes modifient le tableau sur place, plutôt que d'en créer une copie modifiée.

Var foo = ; // foo : foo.push(1,2); // foo : renvoie 2 foo.pop(); // foo : renvoie 2 foo.push(3); // foo : renvoie 2 foo.pop(); // foo : renvoie 3 foo.push(); // foo : ] Renvoie 2 foo.pop() // foo : Renvoie foo.pop(); // foo : renvoie 1 var fruits = ["poires", "bananes", "pommes"]; var cueilli = fruits.pop(); document.write("Vous avez choisi mon " + choisi); Essayer "

Les méthodes shift() et unshift() se comportent à peu près de la même manière que pop() et push(), sauf qu'elles insèrent et suppriment des éléments au début du tableau. La méthode unshift() déplace les éléments existants vers des index plus grands pour faire de la place aux nouveaux éléments, ajoute un ou plusieurs éléments au début du tableau et renvoie la nouvelle longueur du tableau. La méthode shift() supprime le premier élément du tableau et renvoie sa valeur, décalant tous les éléments suivants pour qu'ils occupent espace libre au début du tableau.

Var f = ; // f: f.unshift(1); // f : Renvoie : 1 f.unshift(22); // f : Renvoie : 2 f.shift(); // f : Renvoie : 22 f.unshift(3,); // f:,1] Renvoie : 3 f.shift(); // f:[,1] Renvoie : 3 f.shift(); // f : Renvoie : f.shift(); // f : renvoie : 1

méthode de jointure

La méthode Array.join() est utilisée pour joindre les éléments d'un tableau en une seule chaîne. La méthode peut recevoir un argument de chaîne facultatif, qui sera utilisé pour séparer les éléments de la chaîne. Si le délimiteur n'est pas spécifié, le caractère délimiteur par défaut lors de l'appel de la méthode sera une virgule.

Var a = ["Vent", "Pluie", "Feu"]; var maVar1 = a.join(); //"Vent, Pluie, Feu" var maVar2 = a.join(", "); //"Vent, Pluie, Feu" var myVar3 = a.join(" + "); //"Vent + Pluie + Feu" document.write(maVar1 + "
" + maVar2 + "
" + maVar3); Essayez "

La méthode Array.join() est l'inverse de la méthode String.split(), qui crée un tableau en divisant une chaîne en fragments.

méthode inverse

La méthode Array.reverse() inverse l'ordre des éléments dans un tableau et renvoie un tableau avec les éléments réorganisés. Cette méthode ne crée pas un nouveau tableau avec des éléments réorganisés, mais les réorganise plutôt dans un tableau existant.

Var monArr = ["un", "deux", "trois"]; document.write(myArr.reverse()); Essayer "

méthode de concaténation

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é, augmentés séquentiellement des valeurs de tous les arguments passés à concat(). Si l’un de ces arguments est lui-même un tableau, alors tous ses éléments seront ajoutés. Les noms des tableaux sont utilisés comme arguments et sont spécifiés dans l'ordre dans lequel leurs éléments doivent être combinés.

Var a = ; a.concat(4, 5) //Renvoie a.concat(); //même chose - renvoie a.concat(,) //Retours

méthode de tri

La méthode Array.sort() trie les éléments du tableau sur place et renvoie le tableau trié. Si la méthode sort() est appelée sans argument, elle trie les éléments du tableau par ordre alphabétique (en les convertissant temporairement en chaînes pour effectuer la comparaison). La méthode sort() peut prendre une fonction de comparaison comme argument, qui détermine l'ordre de tri des éléments.

Var a = ["Kiwi", "Oranges", "Poires"]; un tri(); var s = a.join(", "); //Oranges, Poires, Kiwi document.write(s); //exemple avec des nombres var myArr = ; monArr.sort(); document.write(myArr); //1,10,2 Essayez »

Vous vous attendiez probablement à voir un résultat légèrement différent en triant les nombres. Ce tri se produit car la méthode sort() trie les éléments en les convertissant en chaînes. Par conséquent, leur ordre s'avère être une chaîne - après tout, "10"

Pour trier dans un ordre autre que alphabétique, vous pouvez transmettre une fonction de comparaison comme argument à la méthode sort(). Cependant, il convient de garder à l’esprit que vous devrez écrire vous-même la fonction de comparaison. Cette fonction doit avoir deux paramètres car elle définit lequel de ses deux arguments doit apparaître en premier dans la liste triée. Pour faciliter la compréhension et l'écriture d'une telle fonction, il existe plusieurs règles selon lesquelles l'ordre des éléments sera déterminé :

  • Si le premier argument doit précéder le second, la fonction de comparaison renvoie un nombre négatif (si un
  • Si le premier argument doit suivre le second, alors la fonction de comparaison renvoie un nombre positif (si a > b)
  • Si deux valeurs sont équivalentes (c'est-à-dire que leur ordre n'a pas d'importance), la fonction de comparaison renvoie 0 (si a == b)

À titre de comparaison, la fonction utilise des éléments de tableau comme arguments :

Fonction foo(a,b) ( //définit la fonction de vérification si (a b) renvoie 1; renvoie 0; //si a == b ) var a = ; a.sort(foo); //seul le nom de la fonction est passé en argument document.write(a.join(", ")); //écrit la même chose plus brièvement var a = ; a.sort(function(a,b) ( //utiliser la fonction anonyme renvoie a - b; //la fonction renvoie la valeur 0 )); document.write(a); //1,2,5,10 Essayez »

La première entrée de l'exemple est écrite de cette façon pour faciliter la compréhension de son fonctionnement. Remarquez à quel point il est pratique d'utiliser une fonction anonyme dans le deuxième fragment. Il n’est appelé qu’une seule fois, il n’est donc pas nécessaire de lui donner un nom.

Remarque : S'il y a des éléments non définis dans le tableau, ils sont déplacés vers la fin du tableau.

méthode de tranche

La méthode Array.slice() est utilisée pour copier une section spécifiée d'un tableau et renvoie un nouveau tableau contenant les éléments copiés. Le tableau d'origine ne change pas.

Syntaxe de la méthode :

ArrayName.slice (début, fin);

Array_name doit être remplacé par le nom du tableau à partir duquel vous souhaitez extraire un ensemble spécifique d'éléments pour le nouveau tableau. La méthode prend deux arguments qui spécifient le début et la fin du tableau renvoyé. La méthode copie une section du tableau, du début à la fin, sans compter la fin. Si un seul argument est donné, le tableau renvoyé contiendra tous les éléments depuis la position spécifiée jusqu'à la fin du tableau. Vous pouvez utiliser des indices négatifs - ils sont comptés à partir de la fin du tableau.

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

méthode d'épissure

La méthode Array.splice() est une méthode universelle pour travailler avec des tableaux. Il modifie le tableau en place plutôt que de renvoyer un nouveau tableau modifié comme le font les méthodes slice() et concat(). La méthode splice peut supprimer des éléments d'un tableau, insérer de nouveaux éléments, remplacer des éléments - un à la fois et simultanément. Il renvoie un tableau composé des éléments supprimés, si aucun élément n'a été supprimé, il renverra un tableau vide.

Syntaxe de la méthode :

Array_name.splice(index, quantité, elem1, ..., elemN);

Le premier argument spécifie l'index du tableau à partir duquel commencer l'insertion ou la suppression d'éléments. Le deuxième argument spécifie le nombre d'éléments qui doivent être supprimés du tableau à partir de l'index spécifié dans le premier argument ; si le deuxième argument est 0, alors aucun élément ne sera supprimé. Si le deuxième argument est omis, tous les éléments du tableau depuis l'index spécifié jusqu'à la fin du tableau sont supprimés. Lorsque vous utilisez un numéro de position négatif, les éléments seront comptés à partir de la fin du tableau.

Var fruits = ["oranges", "pommes", "poires", "raisins"]; var supprimé = fruits.splice(2,2); // renvoie ["poires", "raisins"] document.write(supprimé); vararr = ; arr.splice(4); //Retour ; le tableau est devenu : arr.splice(1,2); //Retour ; le tableau est devenu : arr.splice(1,1); //Retour ; le tableau est devenu : Essayez »

Les deux premiers arguments de la méthode splice() spécifient les éléments du tableau à supprimer. Ces deux 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 par le premier argument.

Var fruits = ["oranges", "pommes"]; fruits.splice(2,0, "pastèques"); // renvoie document.write(fruits); //devenu ["oranges", "pommes", "pastèques"] var arr = ; arr.splice(2,0,"a", "b"); //Retour ; est devenu arr.splice(2,2,); //Renvoie ["a","b"] ; est devenu ,3,4,5] Essayez »

Il convient de noter que, contrairement à concat(), la méthode splice() ne divise pas les tableaux passés en arguments en éléments individuels. Autrement dit, si la méthode reçoit un tableau à insérer, elle insère le tableau lui-même, et non les éléments de ce tableau.

Méthode toString

La méthode toString() convertit les éléments d'un tableau en chaîne en utilisant une virgule comme caractère délimiteur.

Var arr = ["Lait","Pain","Cookies"]; var nourriture = arr.toString(); document.write(nourriture); //Lait,Pain,Biscuits Essayez »

Notez que la méthode renvoie la même chaîne que join() lorsqu'elle est appelée sans arguments.

indexOf et lastIndexOf

La méthode indexOf renvoie l'index d'un élément dont la valeur est égale à la valeur passée en argument à la méthode.

Syntaxe des méthodes indexOf() et lastIndexOf() :

Array_name.indexOf (search_element, index) array_name.lastIndexOf (search_element, index)

Le premier argument de la méthode précise la valeur de l'élément dont l'index doit être trouvé, le deuxième argument (facultatif) précise l'index à partir duquel la recherche va commencer. S'il existe plusieurs occurrences identiques, le plus petit (premier) index est sélectionné. Si un élément avec la valeur souhaitée n'est pas trouvé, la méthode renverra -1. Dans la méthode, une comparaison stricte (===) est utilisée pour la recherche.

Var a = ; a.indexOf(3); //retourne 2 a.indexOf(3,4); //retourne 6 a.indexOf(35); //retour -1 : il n'y a aucun élément avec cette valeur a.indexOf(2); // 1

La méthode lastIndexOf() renvoie également l'index de l'élément dont la valeur est égale à la valeur passée à la méthode en argument. La seule différence est que la méthode lastIndexOf() sélectionne le plus grand (dernier) index.

Var a = ; a.lastIndexOf(3); //retourne 7 a.lastIndexOf(35); //retour -1 : il n'y a aucun élément avec cette valeur a.lastIndexOf(2); // 6

Méthodes d'itérateur

Les méthodes décrites ci-dessous sont des itérateurs. Tous les navigateurs modernes disposent de méthodes permettant de travailler avec des tableaux conçues pour parcourir des éléments et effectuer diverses actions sur ceux-ci. Ces méthodes sont forEach(), map(), filter(), each(), some, réduire() et réduireRight().

Ils parcourent les éléments du tableau en commençant par 0 jusqu'à la longueur - 1 et, si l'élément existe, le transmettent à la fonction de gestionnaire de rappel.

pour chaque

Syntaxe de la méthode :

ArrayName.forEach (rappel, thisArg)

Le premier argument spécifie la fonction de rappel que la méthode forEach() appellera pour chaque élément du tableau. Vous devez écrire vous-même l’implémentation de la fonction de gestionnaire appelée. La fonction appelée doit avoir trois paramètres : le premier paramètre prend comme argument la valeur de l'élément du tableau, le deuxième - l'index de l'élément et le troisième - le tableau lui-même. Cependant, si vous n'avez besoin d'utiliser que les valeurs des éléments du tableau, vous pouvez écrire une fonction avec un seul paramètre. Le deuxième argument - thisArg (facultatif) sera transmis comme valeur de this.

Var arr = ; fonction foo(valeur) ( ​​var somme = valeur * this; return document.write(somme + "
"); ) arr.forEach(foo, 5); //le deuxième argument sera passé comme valeur de cet //exemple avec trois paramètres var a = ; a.forEach(function(el, idx, a) ( document .write( "a["+idx+"] = "+el+" dans ["+a+"]
"); )); Essayer "

filtre

Syntaxe de la méthode :

Array_name.filter (rappel, thisObject)

La méthode filter() crée et renvoie un nouveau tableau qui contiendra uniquement les éléments du tableau pour lesquels la fonction de rappel renvoie true.

Function isBig(element, index, array) ( //renvoie les nombres supérieurs ou égaux à 10 return (element >= 10); //si la valeur de l'élément est supérieure ou égale à 10, l'expression renverra vrai ) var filtré = .filter(isBig) ; //filtré

carte

La méthode map() crée et renvoie un nouveau tableau, qui sera constitué des résultats de l'appel de la fonction callback(item, idx, ar) pour chaque élément du tableau.

Var a = ; var b = a.map(function(item, idx, arr) ( return item * item; )); // b =

de temps en temps

La méthode Every() renvoie true si, pour tous les éléments du tableau, la fonction spécifiée utilisée pour les vérifier renvoie true.

La méthode some() renvoie true si un ou plusieurs éléments de la fonction spécifiée renvoient true pendant le test.

Var a = ; a.every(function(x) ( return x 10; )) //true : un nombre > 10

réduire et réduireDroit

Syntaxe de la méthode :

nom_tableau.reduce(rappel, valeur initiale) nom_tableau.reduceRight(rappel, valeur initiale)

La méthode réduire() applique la fonction de rappel spécifiée à deux valeurs du tableau à la fois, en parcourant les éléments de gauche à droite, tout en stockant le résultat intermédiaire.

Arguments de la fonction de rappel : (previousValue, currentItem, index, array)

  • previousValue - le résultat renvoyé par la fonction de rappel (également appelé résultat intermédiaire)
  • currentItem - élément actuel du tableau (les éléments sont triés dans l'ordre de gauche à droite)
  • index - index de l'élément actuel
  • tableau - tableau traité

initialValue est l'objet utilisé comme premier argument du premier appel à la fonction de rappel. En termes simples, la valeur de previousValue lors du premier appel est égale à initialValue. S'il n'y a pas de valeur initiale, alors elle est égale au premier élément du tableau, et la recherche commence à partir du second :

Var a = ; function foo(prevNum,curNum) ( somme = prevNum + curNum; alert(sum); return sum; ) var result = a.reduce(foo, 0); document.write(résultat); Essayer "

Voyons comment fonctionne cet exemple. Les premiers arguments de la fonction foo sont :

  • prevNum = 0 (puisque initialValue est 0)
  • curNum = 1 (l'élément actuel est le 1er élément du tableau)

1 est ajouté au nombre 0. Ce résultat (somme : 1) sera passé comme prevNum la prochaine fois que la fonction sera exécutée. Et ainsi de suite jusqu'à atteindre le dernier élément. Le résultat renvoyé, la somme de la dernière exécution, sera 15 (1+2+3+4+5).

La méthode réduireRight fonctionne de manière similaire à la méthode réduire, mais elle parcourt le tableau de droite à gauche :

Var a = ["h", "o", "m", "e"]; function bar(prevStr, curItem) ( return prevStr + curItem; ) document.write(a.reduceRight(bar)); //emoh

Dans cet article, nous examinerons un tableau JavaScript et ses composants. JavaScript est idéalement conçu pour la programmation. En effet, il implémente le langage ECMAScript (norme ECMA-262).

Où JavaScript est-il utilisé ? Il est utilisé comme langage intégré pour définir chemin du logicielà l'objet de la demande. On le trouve dans les navigateurs où il est utilisé comme langage de script rendant les pages Web interactives.

Les caractéristiques architecturales les plus importantes de ce produit sont le typage dynamique et faible, la gestion automatique de la mémoire, la programmation parfaite et les fonctions objet de première classe.

En général, JavaScript a été influencé par diverses raisons, car lors du développement, ils voulaient créer un langage similaire à Java, mais facile à utiliser pour les programmeurs. À propos, le langage JavaScript n'appartient à aucune entreprise ou organisation, ce qui le rend différent d'un certain nombre de styles de programmation utilisés par les développeurs Web.

Il convient de noter que JavaScript est une marque déposée d'Oracle Corporation.

Qu'est-ce qu'un tableau ?

Un tableau est un tableau qui stocke des valeurs numérotées. Chacune de ces valeurs est appelée composant de tableau et le chiffre auquel le composant est associé est appelé index. Le tableau JavaScript n'est pas typé. Cela signifie que les parties d'un tableau peuvent être de n'importe quel type et que différentes parties appartenant au même tableau ont des types complètement différents.

De plus, le tableau JavaScript est dynamique, ce qui signifie qu'il n'est pas nécessaire de déclarer une taille fixe. Après tout, vous pouvez ajouter de nouveaux détails à tout moment.

Production de tableaux

En utilisant Langage JavaScript, créer un tableau n’est pas du tout difficile. Il existe deux méthodes pour cela. La première consiste à créer un tableau en utilisant un littéral - des crochets, à l'intérieur duquel se trouve une liste de parties séparées par des virgules.

  • var vide = ; //tableau vide ;
  • nombres var = ; //tableau avec cinq composants numériques ;
  • var diff = ; //tableau avec trois éléments de types différents.

En règle générale, les valeurs ici ne doivent pas nécessairement être simples (chaînes et nombres). Il peut également s'agir de toute autre expression, par exemple des littéraux sujets, d'autres fonctions et tableaux.

La deuxième façon de créer un tableau consiste à appeler le concepteur Array(). Vous pouvez l'inviter de trois manières :

  • Appel du concepteur sans arguments : var b - new Array(). Cela prévoit la création d'un tableau vide, équivalent à un littéral vide.
  • Le constructeur spécifie explicitement la valeur des n composants du tableau : var b = new Array (1, 3, 5, 8, « string », true). Dans ce cas, le concepteur se voit présenter une liste d'arguments qui sont transformés en composants d'un nouveau tableau. Les arguments sont écrits dans le tableau à l'emplacement où ils sont spécifiés.
  • Définir la zone pour l'attribution ultérieure de valeurs. Cela se fait en spécifiant, lors de l'identification d'un tableau, un nombre unique entre parenthèses : var b = new Array(5). Cette méthode de détection consiste à sélectionner un tableau quantité requise composants (dont chacun est répertorié comme non défini) avec la possibilité d'attribuer ultérieurement des valeurs au cours du processus de présentation. Ce formulaire est généralement utilisé pour pré-allouer un tableau Javascript dont la longueur est connue à l'avance.

Écrire, lire et ajouter des détails sur le tableau

Vous pouvez accéder aux composants d'un tableau à l'aide de l'opérateur. À propos, tous les composants JavaScript, à partir de zéro, sont numérotés. Pour obtenir l'élément requis, son numéro est indiqué dans En règle générale, les détails peuvent être modifiés. Et pour ajouter du JavaScript au tableau, il vous suffit d'attribuer une nouvelle valeur.

Il convient de noter que les tableaux JavaScript peuvent stocker n'importe quel nombre d'éléments de toute nature.

Longueur du tableau

Nous savons donc que la longueur d’un tableau est généralement un phénomène intéressant. Regardons-le de plus près. Tous les tableaux, qu'ils soient construits à l'aide du concepteur Array() ou révélés via un tableau littéral, ont une propriété de longueur spécifique qui indique le nombre total d'éléments stockés. Puisqu'un tableau peut contenir des parties non définies (notées indéfinies), une expression plus précise est la suivante : la qualité de la longueur est toujours supérieure d'une unité au plus grand nombre (index) du composant du tableau. La qualité de la longueur est ajustée automatiquement et reste précise lorsque de nouvelles pièces apparaissent dans le réseau.

Pour faire apparaître le composant final du tableau, vous pouvez utiliser la propriété length.

La dernière partie a un index inférieur d'une unité à la taille du tableau. Après tout, le compte à rebours recommence toujours à zéro. Oh, ce JavaScript ! La longueur du tableau dépend du nombre exact d'éléments. Donc, si vous ne savez pas combien il devrait y en avoir, mais que vous devez accéder au dernier élément du tableau, vous devez utiliser la notation : v.length - 1.

Itérer sur les détails du tableau

Très souvent, la propriété length est utilisée pour parcourir les détails d'un tableau dans une boucle :

  • var fruits = ["fraise", "pêche", "pomme", "banane"];
  • pour(var je = 0; je< fruits.lenght; i++);
  • document.write(fruits[i] + "...").

Dans cet exemple, les composants semblent être placés en continu et commencent par la première pièce possédant un indice de zéro. Si ce n'est pas le cas, avant d'appeler chaque élément du tableau, il faut vérifier s'il est défini.

Une boucle est aussi parfois utilisée pour initialiser des composants.

Agrandir et tronquer un tableau

Je me demande comment utiliser la langue Chaîne JavaScript ajouter au tableau ? Au fur et à mesure que nous travaillons avec des tableaux, la longueur de qualité s'améliore automatiquement, c'est pourquoi nous devons nous en occuper nous-mêmes. Il est nécessaire de se rappeler un détail : la propriété length est non seulement lisible, mais également inscriptible. Si la qualité de longueur se voit attribuer une valeur inférieure à la valeur actuelle, le tableau est réduit à la taille spécifiée. Tous les composants ne figurant pas dans la nouvelle plage d'index sont supprimés et leurs valeurs sont perdues, même si la longueur est renvoyée ultérieurement - les valeurs ne sont pas restaurées.

Il est assez simple d'effacer le tableau comme ceci : foo.length = 0.

Si la qualité de la longueur est supérieure à sa valeur actuelle, de nouvelles parties non identifiées apparaîtront à l'extrémité du tableau, ce qui l'augmentera jusqu'à la taille souhaitée.

Suppression de parties du motif

L'opérateur delete spécifie une valeur non définie dans un composant de tableau, mais elle continue d'exister. Si vous devez supprimer un élément d'un tableau JavaScript afin que les parties restantes soient déplacées vers l'espace libre, vous devez utiliser l'une des méthodes de tableau fournies. La méthode Array.shift() élimine le premier composant, pop() élimine le composant final et la méthode splice() élimine un ou plusieurs composants n'importe où dans le tableau.

Tableaux multidimensionnels

On dirait que nous avons un peu réglé les choses Tableaux bidimensionnels- c'est ce qu'il faut considérer ensuite. Vous souvenez-vous que les tableaux JavaScript peuvent contenir d'autres éléments en tant que composants ? Cette fonctionnalité est utilisée pour produire des tableaux multidimensionnels. Pour visiter les composants d’un tableau de tableaux, utilisez simplement deux fois les crochets.

Tableaux associatifs

Explorons maintenant comment la marque JavaScript utilise les tableaux associatifs. Pour ce faire, nous devons examiner la théorie : les tableaux associatifs sont parfois appelés tables de hachage. Grâce à eux, des chaînes sont utilisées à la place des index. L'utilisation de telles constructions est similaire à l'utilisation du nom de propriété d'un objet simple, mais en cette option lors de l'exécution de travaux au format tableau. Étant donné que JavaScript ne dispose pas de moyens de fonctionner avec des tableaux associatifs, ils sont utilisés beaucoup moins fréquemment que les tableaux classiques. Il convient de noter qu’ils peuvent toujours être utiles pour stocker des données et faciliter la mémorisation des détails auxquels il faut accéder.

Sortie du tableau

Qu’allons-nous apprendre sur JavaScript maintenant ? Affichage du tableau dans une boîte de dialogue (sur l'écran du moniteur), ainsi que l'affichage des valeurs des composants du tableau.

Si vous devez afficher les valeurs de tous les composants d'un programme, il est alors pratique d'utiliser l'instruction for. Fait intéressant, la variable compteur for Rules est utilisée comme index d'un composant de tableau.

Nettoyage

Afin de filtrer Tableau JavaScript, vous devez réinitialiser sa longueur :

  • var monTableau = ;
  • monArray.length = 0.
  • clair : fonction() (;
  • this.length = 0;
  • rends ceci ;

Ajout et suppression de composants

Eh bien, continuons à étudier cet intéressant langage JavaScript. Un élément de tableau peut être supprimé ou ajouté de la même manière que les propriétés normales d'autres objets. Mais il existe quelques différences : l'ajout de propriétés numériques peut modifier la qualité de la longueur, et la modification de la propriété de longueur peut éliminer les qualités numériques. En principe, l'algorithme de définition des qualités des tableaux est le suivant :

  • Lors de l'ajout d'une propriété numérique inconnue i, si la longueur est égale ou inférieure à i, la longueur est définie comme étant i+1.
  • Lorsque la qualité de la longueur change, les actions suivantes sont effectuées : si la valeur attribuée est inférieure à zéro, une RangeError est levée. Toutes les qualités numériques et indices égaux à la nouvelle longueur et supérieurs sont éliminés.

En général, supprimer un élément d’un tableau JavaScript n’est pas difficile. Après tout, même lors du réglage de la longueur, vous devez en supprimer les composants « supplémentaires ». Cela conduit à la possibilité d’effacer le tableau. Si, pour une raison quelconque, la variable attribuée à un nouveau tableau vide n'est pas satisfaisante et qu'il est nécessaire de réinitialiser la variable actuelle, il suffit d'attribuer la valeur zéro à sa qualité de longueur.

méthodes unshift, shift, pop et push

Bien que les composants du tableau soient modifiés manuellement, de nombreuses personnes recommandent d'utiliser des méthodes intégrées pour cela. C'est cette nuance qui garantit valeur correcte longueur de qualité et absence de lacunes dans le tableau. À propos, la qualité de longueur correcte correspondra au nombre de composants.

La méthode push déplace les parties transmises vers la fin du tableau. La méthode pop restitue le composant de fin et le supprime.

Généralement dans Internet Explorer antérieure à la huitième version, unshift peut renvoyer undéfini ; dans d'autres navigateurs, une nouvelle valeur de longueur. Il est donc préférable de ne pas se fier à la valeur renvoyée par unshift.

Ajouter et supprimer des pièces au milieu d'un tableau

Si je dois supprimer un tableau JavaScript, que dois-je faire ? La méthode d’épissage est connue pour avoir la signature Array.prototype.splice.

Il supprime les composants deleteCount du tableau, en commençant par l'indicateur de démarrage. Si plus de deux arguments sont passés, alors tous les arguments suivants du tableau sont placés à la place de ceux éliminés. Si start est négatif, alors l'indice à partir duquel le retrait reprendra sera égal à length + start. Le tableau est renvoyé à partir des éléments supprimés.

En fait, en utilisant la méthode splice, vous pouvez supprimer des composants du milieu du tableau ou ajouter n'importe quel nombre de composants n'importe où dans le tableau.

Dans la version la plus simple, si vous devez supprimer un composant d'index i, vous devez demander la méthode d'épissage au tableau avec les paramètres i et 1.

En principe, le deuxième paramètre de la méthode splice est facultatif, mais le comportement d'une fonction avec un argument est différent dans chaque navigateur.

Par exemple, dans Firefox, dans les dernières variantes d'Opera, dans Safari et dans Chrome, tous les détails jusqu'à la fin du tableau seront supprimés.

Aucun composant ne sera éliminé dans IE. Dans les premières variantes d'Opera, il est impossible de prédire le comportement - une partie avec l'index de début - 1 sera supprimée. Il est donc toujours nécessaire de cette méthode passer au moins deux composants.

Clés

Bien entendu, lors de l’apprentissage de JavaScript, les tableaux associatifs, comme mentionné précédemment, doivent également être gardés à l’esprit. Il s'agit d'un type d'information abstrait (une interface vers un stockage de données), qui permet de sauvegarder des paires de la forme « (clé, valeur) » et de prendre en charge les opérations d'ajout d'une paire, ainsi que de suppression et de recherche d'une paire. par clé :

TROUVER (clé).

INSÉRER (valeur, clé).

RETIRER (clé).

On suppose que deux paires avec des clés similaires ne peuvent pas être stockées dans un tableau associatif. Dans un couple k + v, v est appelé la valeur associée à la clé k. La sémantique et les noms des opérations ci-dessus peuvent être différents selon les différentes implémentations de tels tableaux.

Ainsi, l'action FIND (key) renvoie la valeur associée à la clé donnée, ou un objet UNDEF spécifique indiquant qu'il n'y a aucune valeur associée à la clé donnée. Les deux autres actions ne renvoient rien (sauf si l'opération a réussi).

En général, du point de vue de l'interface, il est pratique de considérer un tableau associatif comme un simple tableau dans lequel non seulement des nombres entiers, mais également des valeurs d'autres types - par exemple des chaînes - peuvent être utilisées comme indices.

À propos, la prise en charge de tels tableaux est disponible dans de nombreux langages de programme interprétés. haut niveau, tels que PHP, Perl, Ruby, Python, Tcl, JavaScript et autres. Pour les langages qui ne disposent pas d'outils intégrés pour travailler avec des tableaux associatifs, un nombre colossal d'implémentations sous forme de bibliothèques ont été créées.

Un exemple de tableau associatif serait annuaire. Dans cette version, la signification est le complexe « F. I. O. + adresse », et la clé est le numéro de téléphone. Un numéro de téléphone a un seul propriétaire, mais une personne peut posséder plusieurs numéros.

Extensions associatives

Il convient de noter que les extensions les plus connues sont les suivantes :

  • CHACUN - "parcourir" toutes les paires enregistrées.
  • CLEAR - supprime tous les enregistrements.
  • MIN - trouvez la paire avec la plus petite valeur clé.
  • MAX - trouvez la paire avec la plus grande valeur clé.

Les deux dernières options nécessitent que les clés indiquent l'action de comparaison.

Implémentations de tableaux associatifs

Il existe de nombreuses implémentations différentes d’un tableau associatif. L'implémentation la plus courante peut être basée sur un simple tableau dont les composants sont des paires (valeur, clé). Pour accélérer les opérations de recherche, vous pouvez trier les composants de ce tableau par clé et effectuer la recherche avec Mais cela augmentera le temps nécessaire pour ajouter une nouvelle paire, puisqu'il faudra « écarter » les composants du tableau afin d'emballer un nouvel enregistrement dans la cellule vide qui apparaît.

Les implémentations les plus connues sont celles basées sur divers arbres de recherche. Par exemple, dans un lecteur STL C++ typique, le conteneur de cartes est implémenté sur la base d'un arbre en acajou noir. Les styles Ruby, Tcl et Python utilisent un type de table de hachage. Il existe d'autres implémentations.

En général, chaque implémentation présente ses propres inconvénients et avantages. Il est important que les trois actions soient effectuées à la fois en moyenne et dans la pire nuance sur la période O(log n), où n est le nombre actuel de paires en cours de sauvegarde. Pour les arbres de recherche correspondants (y compris les arbres noir-rouge), cette condition est remplie.

On sait que les implémentations basées sur des tables de hachage ont un temps moyen de O(1), ce qui est meilleur que les implémentations basées sur un arbre de recherche. Bien entendu, cela ne garantit pas une exécution à grande vitesse des opérations individuelles : le temps INSERT le plus défavorable est noté O(n). Le processus INSERT s'exécute pendant une longue période lorsque le facteur de remplissage atteint son point le plus élevé et que l'index de la table de hachage doit être reconstruit.

À propos, ces listes de hachage sont mauvaises car sur leur base, il est impossible d'effectuer des actions supplémentaires rapides MAX, MIN et un algorithme pour parcourir toutes les paires enregistrées par ordre décroissant ou croissant de clés.

ARTICLES LIÉS