Le langage de programmation JavaScript a la capacité de définir un tableau de variables dans un objet appelé Array. En JavaScript, un tableau aussi fonctionne comme une liste, une pile ou une file d'attente.
Nous constatons souvent que nous avons besoin d'une collection ordonnée, où nous avons un premier, un deuxième, un troisième élément et ainsi de suite. Par exemple, nous en avons besoin pour stocker une liste de quelque chose: utilisateurs, produits, éléments HTML, etc. Et c'est pourquoi aujourd'hui nous allons commencer à gérer les tableaux dans JS.
Comment déclarer un tableau?
Il existe deux syntaxes de base pour déclarer un tableau vide.
let arr = new Array (); laissez arr = [];
Le 90% des cas utilise la seconde syntaxe, puisque nous pouvons fournir les éléments initiaux entre parenthèses. Par exemple:
let arr couleurs ["jaune", "bleu", "rouge", "blanc"];
Les éléments d'un tableau ont leur propre énumération ou sous-index, avec lequel nous pouvons accéder à un élément du tableau.
Noter: Le premier élément commencera toujours par le sous-index 0, et non par le sous-index 1, en fait; le sous-indice 1 correspondrait au deuxième élément du tableau.
laissez les couleurs ["jaune", "bleu", "rouge", "blanc"]; alerte (couleurs [0]); // alerte jaune (couleurs [1]); // alerte bleue (couleurs [2]); // alerte rouge (couleurs [3]); // blanc
Nous pouvons également substituer des éléments du tableau.
couleurs [3] = "vert"; // maintenant le tableau sera: ["jaune", "bleu", "rouge", "vert"];
Ou même, vous pouvez ajouter plus d'éléments au tableau.
couleurs [4] = "bleu clair"; // maintenant le tableau est composé de: ["jaune", "bleu", "rouge", "vert", "bleu clair"]
Nous pouvons savoir combien d'éléments sont dans un tableau en utilisant longueur.
let colors = ["jaune", "bleu", "rouge"]; alerte (couleurs.longueur); // 3
Nous pouvons également utiliser alerte pour afficher tous les tableaux.
let colors = ["jaune", "bleu", "rouge"]; alerte (couleurs); // jaune bleu rouge
Les éléments de tout type peuvent être stockés dans un tableau.
// mélange des valeurs let arr = ['yellow', {name: 'Juan'}, true, function () {alert ('hello'); }]; // on récupère l'objet à l'index 1 puis on affiche son nom alert (arr [1] .name); // John [php] // récupère la fonction à l'index 3 et l'exécute arr [3] (); // Salut
Méthodes pop / push, shift / unshift
Ongle queue c'est l'une des utilisations les plus courantes d'une matrice. En informatique, cela signifie une collection ordonnée d'éléments qui prend en charge deux opérations:
- Pousser: ajoutez un élément à la fin.
- Changement: vous obtenez un élément depuis le début, en remontant la file d'attente pour que le deuxième élément devienne le premier.
Les baies prennent en charge les deux opérations.
En pratique, nous le trouvons très souvent. Par exemple, une file d'attente de messages à afficher à l'écran.
Il existe un autre cas d'utilisation des tableaux: la structure de données appelée pile.
Prend en charge deux opérations:
- Pousser: ajoutez un élément à la fin.
- Pop: prenez un élément de la fin.
Ainsi, de nouveaux éléments sont toujours ajoutés ou extraits du "final".
Une pile est généralement illustrée comme un paquet de cartes - de nouvelles cartes sont ajoutées en haut ou prises par le haut:
Pour les piles, le dernier élément poussé est reçu en premier, on l'appelle aussi le principe de LIFO (dernier entré, premier sorti). Pour les files d'attente, nous avons FIFO (Premier entré, premier sorti).
Les tableaux en JavaScript peuvent fonctionner à la fois comme une file d'attente et comme une pile. Ils permettent d'ajouter / supprimer des éléments à la fois du début et de la fin.
En informatique, la structure de données qui le permet s'appelle deque.
- Méthodes utilisées à la fin d'un tableau ou d'une matrice
Pop: extrait le dernier élément du tableau et le renvoie.
laissez les couleurs = ["Jaune", "Orange", "Vert"]; alert (couleurs.pop ()); // supprimer "Green" et l'alerter alert (couleurs); // Jaune orange
Pousser: Ajoutez un élément à la fin d'un tableau.
laissez les couleurs = ["Jaune", "Orange"]; colors.push ("Vert"); alerte (couleurs); // Jaune, orange, vert
- Méthodes utilisées au début de la matrice
Changement: extrait le premier élément du tableau et le renvoie.
laissez fruits = ["Poire", "Orange", "Fraise"]; alerte (fruits.shift ()); // Supprimez la poire et alertez-la alert (fruits); // Orange, Fraise
Décalage: ajoutez un élément au début du tableau:
laissez fruits = ["Noix de coco", "Fraise"]; fruits.unshift ('Orange'); alerte (fruits); // Orange, noix de coco, fraise
Méthodes pousser y décaler ils peuvent ajouter plusieurs éléments à la fois:
laissez fruits = ["Orange"]; fruits.push ("Fraise", "Noix de coco"); fruits.unshift ("Ananas", "Citron"); // [«Ananas», «Citron», «Orange», «Fraise», «Noix de coco»] (fruits);
Manipuler la matrice en interne
Un tableau est un type d'objet spécial. Les crochets utilisés pour accéder à une propriété arr [0] ils proviennent en fait de la syntaxe de l'objet. Les nombres sont utilisés comme clés.
Ils étendent des objets qui fournissent des méthodes spéciales pour travailler avec des collections ordonnées de données et aussi avec la propriété longueur. Mais au fond, c'est toujours un objet.
N'oubliez pas qu'il n'y a que 7 types de base en JavaScript. Le tableau est un objet et se comporte donc comme un objet.
Par exemple, il est copié par référence:
laissez fruits = ["Banane"] laissez arr = fruits; // copie par référence (deux variables font référence au même tableau) alert (arr === fruits); // vrai arr.push ("Poire"); // modifier le tableau par référence alert (fruits); // Banane, Poire - il y a 2 articles maintenant
Mais ce qui rend les arrangements vraiment spéciaux, c'est leur rendu interne. Le moteur essaie de stocker ses éléments dans la zone mémoire contiguë, les uns après les autres, et il existe également d'autres optimisations pour faire fonctionner les tableaux très rapidement.
Mais ils se cassent tous si nous arrêtons de travailler avec un tableau en tant que "collection ordonnée" et commençons à travailler avec lui comme s'il s'agissait d'un objet normal.
Par exemple, nous pouvons techniquement faire ceci:
laissez fruits = []; // forme un tableau fruits [99999] = 5; // attribue une propriété avec un index bien supérieur à sa longueur fruits.age = 25; // crée une propriété avec un nom arbitraire
C'est possible, car les tableaux sont des objets à leur base. Nous pouvons leur ajouter n'importe quelle propriété.
Mais le moteur verra que nous travaillons avec la matrice comme avec un objet normal. Les optimisations spécifiques à la matrice ne conviennent pas à de tels cas et seront désactivées, leurs avantages disparaîtront.
Les moyens d'utiliser à mauvais escient un tableau:
- Ajoutez une propriété non numérique comme arr.test = 5.
- Faites des trous, comme: ajoutez arr [0] puis arr [1000] (et rien entre les deux).
- Remplissez le tableau dans l'ordre inverse, par exemple arr [1000], arr [999], etc.
Noter: Veuillez considérer les tableaux comme des structures spéciales pour travailler avec des données ordonnées. Ils fournissent des méthodes spéciales pour cela. Les tableaux sont soigneusement réglés dans les moteurs JavaScript pour fonctionner avec des données ordonnées contiguës, utilisez-les de cette façon. Et si vous avez besoin de clés arbitraires, il y a de fortes chances que vous ayez vraiment besoin d'un objet normal.
