Tutoriels JavaScript Arrays - expliqués avec des exemples pour les débutants

Tout en apprenant n'importe quel langage de programmation, nous rencontrons l'apprentissage des tableaux. Les tableaux sont utiles lorsqu'il est nécessaire de stocker plusieurs valeurs différentes dans une seule variable. L'application Arrays est observée à de nombreux endroits, comme la mise en œuvre des matrices, des structures de données ou du stockage de données sous forme tabulaire.

Le concept de tableaux est venu de la disposition des objets dans la vie réelle. La façon dont nous organisons des objets dans la vie réelle, nous pouvons organiser les données en programmation. Ce message consiste donc à apprendre les concepts de base et de base des tableaux en JavaScript. Plongeons-nous et comptons clairement un tableau, comment le créer, et l'utilisons pour attribuer, accéder et modifier les valeurs.

Qu'est-ce qu'un tableau?

Un tableau est un type de variable dans tout langage de programmation utilisé pour stocker plusieurs valeurs simultanément. Les tableaux stockent les données sous forme de segments, également appelés éléments du tableau, donc en mots simples, un tableau est une collection d'éléments.

Nous les utilisons généralement pour stocker le même type de valeurs ou la liste d'éléments en un seul endroit / variable comme le nom des animaux [«Lion», «Bear», «Monkey»] ou liste d'étudiants [«John», «Bob», «Ivan»]].

Cependant, nous pouvons stocker plusieurs types de données dans des tableaux, comme les chaînes, les entiers, les tableaux ou même les fonctions.

Les types de tableaux concernant la mise en œuvre sont divisés en quatre types:

• Tableaux homogènes
• Tableaux hétérogènes
• Tableaux multidimensionnels
• Tableaux déchiquetés

Ayons une courte introduction de chaque type.

Array homogène:

Le tableau dans lequel les éléments sont du même type de données sont connus comme un tableau homogène. Par exemple, les valeurs de chaîne, de nombres entiers ou de bool.

var stringarr = ["John", "bob", "ivan"];
var intarr = [23, 45, 67];

Réseau hétérogène

Le tableau dans lequel les valeurs de plusieurs types de données sont stockées est connue sous le nom de tableau hétérogène. Par exemple:

Var Student = ["John", 25, "Homme"]

Tableau multidimensionnel:

Le tableau qui contient d'autres tableaux en tant qu'éléments dans celui-ci est connu comme un tableau multidimensionnel. Par exemple, liste des étudiants:

Var Student = [["John", 25, "Male"], ["Steve", 21, "Male"], ["Angela", 22, "Femme"]]

Array déchiqueté:

Jagged est presque le même qu'un tableau multidimensionnel mais avec une différence subtile dans le nombre d'éléments dans les sous-terrains dans un tableau. Le tableau multidimensionnel dans lequel les ensembles de données de tableaux supplémentaires ne sont pas uniformes.

var étudiant = [["John"], ["Steve", 21, "Male"], ["Angela", "Femme"]]

Note: Nous utiliserons la console du navigateur pour démontrer des exemples effectués dans ce post. Pour ouvrir la console du navigateur:

• Utilisez le Clé F12 dans Chrome et d'autres navigateurs à base de chrome.
• utiliser Ctrl + Shift + K clavier Clés de raccourci pour Mozilla.
• utiliser Option + ⌘ + c clavier Clés de raccourci dans Safari (si le menu du développeur n'apparaît pas, alors ouvrez les préférences en appuyant sur ⌘ +, Et dans la vérification avancée de l'onglet "Afficher le menu de développement dans la barre de menu»).

Comment créer un tableau?

Étant donné que JavaScript est un langage de script, nous n'avons pas d'abord à déclarer le type et à attribuer certaines valeurs à une variable. Nous pouvons écrire directement le nom de la variable sans mentionner le type de données de variable et lui attribuer des valeurs.

Par exemple:

var langues = ["javascript", "python", "java"];

Comment attribuer des valeurs à un tableau?

Bien que nous puissions attribuer des valeurs à un tableau lors de la création du tableau, il existe une autre façon d'attribuer des valeurs en attribuant des valeurs à des index spécifiques. L'emplacement où un élément est présent dans un tableau est connu sous le nom de son index.

Par exemple:

var langues = [];
langues [0] = "JavaScript";
langues [1] = "python";

Note: Dans les tableaux, les numéros d'index commencent à partir de «0» (zéro):

Comment modifier la valeur d'un élément de tableau?

La valeur d'un élément présent dans un tableau peut être modifiée de la même manière que nous pouvons attribuer ses valeurs.

Par exemple, si nous voulons modifier la valeur du premier index du tableau «langues», l'instruction irait comme ceci:

langues [0] = "TypeScript";

Propriétés et méthodes intégrées du tableau:

Le véritable avantage de JavaScript est ses propriétés et méthodes intégrées pour les tableaux. Les propriétés et méthodes de tableau les plus courantes présentes dans JavaScript sont:

déployer.Propriété de longueur:

Le "déployer.longueur»La propriété peut être utilisée pour obtenir le nombre d'articles / éléments présents dans un tableau. Par exemple:

var langues = ["javascript", "python", "java"];
console.journal (langues.longueur);

déployer.MÉTHODE SROT ():

Ce Déployer.méthode tri () Trie les éléments présents dans un tableau dans l'ordre croissant.

Supposons que nous ayons un tableau de trois langages de programmation:

var langues = ["javascript", "python", "java"];

Et nous voulons les régler par ordre alphabétique afin que la fonction de tri ira comme ceci:

Laissez tridlang = langues.trier();
console.log (tridlang);

Dans la sortie, vous pouvez voir que le tableau est trié comme nous le souhaitons:

Comment accéder aux éléments / articles d'un tableau?

Les éléments du tableau sont accessibles en mentionnant le numéro d'index.

Par exemple, nous voulons accéder au deuxième élément d'un tableau; La déclaration irait comme ceci:

Soit SecondLanguage = Langues [1];

Note: Le numéro d'index du Array commence à partir de zéro "0»:

Comment accéder au premier élément / élément d'un tableau?

Étant donné que les index de tableau commencent à partir de «0,«Nous pouvons donc accéder au premier élément d'un tableau en mentionnant«0”Dans les crochets comme indiqué ci-dessous:

Soit FirstLanguage = Langues [0];

Comment accéder au dernier élément / élément d'un tableau?

Pour obtenir le dernier élément d'un tableau, le «déployer.longueur»La propriété est disponible en aide. Nous pouvons accéder au dernier élément présent dans un tableau en mentionnant «déployer.longueur -1”Dans les crochets comme indiqué ci-dessous:

Laissez LastLanguage = Langues [Langues.longueur - 1];

Comment traverser un tableau?

Pour obtenir tous les éléments présents dans un tableau, la meilleure façon est de parcourir un tableau. Les moyens les plus pratiques et les plus efficaces sont à utiliser:

• Pour boucle
• Méthode FOREACH de la table

Pour Loop:

Répondre à tous les éléments à l'aide d'une boucle pour la boucle est le moyen le plus simple. Exécutez simplement le code indiqué ci-dessous pour parcourir l'ensemble du tableau et récupérer tous les éléments un par un:

var langues = ["javascript", "python", "java"];
pour (soit i = 0; i < languages.length; i++)
const Language = Languages ​​[i];
console.journal (langue);

Dans le code ci-dessus, vous pouvez voir que nous avons utilisé langues.longueur propriété dans la clause conditionnelle de la boucle afin de parcourir l'ensemble du tableau sans connaître le nombre total d'éléments dans le tableau.

Méthode FOREACH de la table:

Javascrip fournit également le méthode foreach du tableau à parcourir tout le tableau. La syntaxe de l'utilisation du méthode foreach est comme suit:

var langues = ["javascript", "python", "java"];
langues.foreach (Onelang);
fonction Onelang (langue)
console.journal (langue);

La syntaxe ci-dessus peut être raccourcie en utilisant la fonction de rappel en ligne comme indiqué ci-dessous:

langues.foreach ((langue) =>
console.journal (langue);
)

Tableaux associatifs en javascript?

Les tableaux associatifs sont les tableaux qui ont nommé des indices. JavaScript ne prend pas en charge ces tableaux. Si vous le faites, JavaScript le prendra comme un objet, et les méthodes et propriétés du tableau ne s'y applique pas.

Les tableaux javascript sont des objets:

Oui, le type de Tableau en javascript est objet. C'est pourquoi les tableaux peuvent contenir différents types de variables. Les tableaux peuvent contenir des objets, des fonctions et même des tableaux dans un tableau en tant qu'élément.

Si nous utilisons le opérateur de type sur une variable de tableau:

var langues = ["javascript", "python", "java"];
console.log (typeof (langues));

Cela montrera que le type de "langues”La variable du tableau est un objet.

Cependant, il existe encore des différences conceptuelles entre les tableaux et les objets:

Différence entre les tableaux et les objets:

• Dans les tableaux, les index sont indiqués par des nombres.
• Alors que dans les objets, les index peuvent être indiqués par des noms (nombres ou alphabets).

Il est donc préférable de choisir le bon type de variable au bon endroit:

• Utilisez des tableaux lorsque vous avez une grande liste d'éléments.
• Utilisez des objets lorsque vous devez attribuer des noms aux index.

Maintenant, la question se pose, comment identifier si une variable est un objet ou un tableau.

Comment identifier une variable de tableau?

Pour identifier, soit une variable est un tableau ou non, JavaScript fournit un Déployer.Fonction isArray ().

Par exemple:

var langues = ["javascript", "python", "java"];
console.journal (tableau.isArray (langues));

Le code ci-dessus renvoie true.

Note: Le Déployer.Fonction isArray () a été introduit dans Ecmascript 5.

Conclusion

Ce message contient toutes les connaissances de base et nécessaires nécessaires pour commencer avec les tableaux en javascript. Nous introduisons d'abord ce que sont les tableaux, puis nous avons appris à créer, attribuer et modifier les valeurs d'un tableau.

De plus, nous avons appris certaines propriétés et fonctions intégrées de base des tableaux en JavaScript pour devenir plus interactifs avec les tableaux. En fin de compte, nous avons discuté du type de données du tableau et de la différence entre les tableaux et les objets en détail.