Nous mettrons à jour notre Politique de confidentialité prochainement. En voici un aperçu.

L'essentiel de JavaScript

Travailler avec des objets Arrays

Testez gratuitement nos 1341 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Découvrez un autre type de variable complexe appelé Array. Vous allez créer des Arrays et apprendre à travailler avec ce type d'objet.

Transcription

Rappelez-vous les objets que nous avons étudiés plus tôt dans ce chapitre. Ils nous permettaient de stocker plusieurs valeurs dans la même variable. JavaScript nous propose un autre type de données qui est capable de la même prouesse. Il s'agit des « Arrays ». Je vais créer ici une variable, que je vais appeler « colors » et je vais rendre cette variable égale à un nouvel « Array ». Remarquez ici la syntaxe avec un « A » majuscule et les parenthèses. Un petit peu plus bas, je vais faire un « console.log » de cette variable « colors » pour pouvoir visualiser, dans la console, le résultat de mon travail. Dans la console, quand je rafraîchis ma page, j'ai déjà quelque chose qui apparaît. J'ai des crochets qui s'ouvrent et qui se ferment sans rien dedans. Il n'y a rien dans les crochets parce que mon « Array » est pour le moment vide, je n'ai pas mis d'éléments dedans mais je voulais déjà vous les montrer : ce sont des symboles que vous croiserez très souvent en JavaScript. Quand vous croiserez ces crochets, il y a de fortes chances que vous soyiez en présence d'un « Array». Si vous venez d'un autre langage de programmation, vous vous demandez peut-être pourquoi je n'ai pas mis un nombre, ici, dans les parenthèses. Vous savez dans d'autres langage, ceci est obligatoire, il vous permet de spécifier la longueur de l'« Array » que vous êtes en train de créer. Ici, je créerai un « Array » avec 5 éléments déjà préfabriqués dedans. Dans JavaScript je peux le faire, voyez que j'ai sauvegardé mon Script, j'ai rafraîchi ma page. Je n'ai pas pour autant d'erreurs ici, dans ma console, mais c'est complètement inutile puisque le JavaScript va dynamiquement et automatiquement augmenter ou diminuer la taille de vos « Arrays » en fonction des choses que vous stockerez dans ces « Arrays ». Donc pas besoin de se préoccuper de ce type de choses ici, en JavaScript. Comment peut-on mettre des données dans l'« Array » ? Je vais rappeler cet « Array colors », je vais rappelez ces fameux crochets et, à l'index zéro, je veux mettre un premier élément, une première couleur. Ce sera, par exemple, la couleur rouge. Je vais dupliquer cette ligne de code, ici, « Cmd+D » sur Mac et « Ctrl+D » sur Windows. Je vais dire qu'à l'index numéro 1, je veux du vert, et à l'index numéro 2, je veux du bleu. Quand je sauvegarde et rafraîchis ma page, vous voyez que mon « Array » maintenant contient des éléments. Voilà comment je peux utiliser un « Array » donc une variable unique, qui est ici la variable « colors », pour stocker plusieurs données. On réutilise pour ça un système basé sur des index, là où les objets, rappelez-vous, utilisaient plutôt un système basé sur des propriétés et vous pouviez, d'ailleurs, choisir le nom des propriétés. Ici, ce sont des index dans un « Array » et le premier élément de l'« Array » est à l'index zéro. Vous voyez que pour créer cet « Array » j'ai eu besoin de quatre lignes de code. Une première ligne de code pour créer l'« Array » puis trois lignes de code supplémentaires pour mettre des choses dedans. Il y certainement moyen d'aller plus vite. Vous avez parfaitement raison, puisque à la place de faire « New Array », je peux également mettre ici ces crochets, sans rien dedans, donc un crochet qui s'ouvre et un crochet qui se ferme. C'est équivalent à « New Array ». Regardez, si je rafraîchis maintenant ma page, j'ai exactement la même chose ici, dans la console. Je peux également déjà mettre des éléments à l'intérieur de cet « Array », que je fabrique comme ceci : « Rouge », je sépare mes éléments par des virgules, « vert » , virgule, et puis « bleu ». Du coup je n'ai plus besoin de ces trois lignes de code qui sont ici, et vous voyez qu'en une seule ligne de code, je peux créer l'« Array » et mettre mes trois éléments dedans. Quand je rafraîchis ma page, ici, c'est toujours la même chose. Tout ce que vous venez de voir est parfaitement équivalent, en terme de fonctionnalité, mais voyez que maintenant, je n'ai plus qu'une seule ligne de code, ce qui rend les choses plus rapides et puis surtout plus lisibles. Comment puis-je faire maintenant pour accéder à ces différents éléments ? Ici je fais un « console.log » de l'ensemble de l'« Array ». Je peux mettre ici des crochets et dire: « Tiens, je veux accéder à l'élément, qui se trouve à l'index zéro ». A ce moment-là, dans la console, je vois « rouge », c'est-à-dire l'élément qui se trouve à l'index zéro de mon « Array colors ». Si je mets ici « colors 2 », je vais obtenir « bleu », c'est-à-dire l'élément qui se trouve au deuxième index. Rappelez-vous, « rouge » c'est zéro, « vert » c'est un, « bleu » c'est deux. Donc « colors 2 » me renverra le troisième élément de l'« Array ». Si je mets quelque chose qui n'existe pas, par exemple « color 5 » ici, j'ai « unedefined » ici, dans la console, puisque je n'ai pas défini d'élément au-delà du troisième, au-delà de l'index numéro deux. Donc à l'index numéro cinq, je n'ai rien du tout, l'élément est non défini. Un « Array » en JavaScript, c'est un type d'objet un petit peu particulier. Mais comme tous les autres objets du monde, cet objet a des propriétés et des méthodes. Au niveau des propriétés, je peux renvoyer dans la console « colors.length », par exemple. C'est une propriété de l'objet « Array » donc de cet « Array colors » et, dans la console, « colors.length » me renvoie « 3 », c'est-à-dire la longueur de l'« Array », le nombre d"éléments que j'ai dans cet « Array ». Attention, « 3 » c'est bien le nombre d'éléments que j'ai dans l'« Array ». Mais le dernier élément est à l'index numéro 2, puisque nous sommes basés sur un index qui commence à zéro. La longueur de l'« Array » va toujours vous donner le numéro du prochain index vide dans l'« Array », ce qui pourra s'avérer très pratique, vous allez le voir plus tard dans le cours. Si j'ai accès à des propriétés, j'ai aussi accès à des méthodes, c'est-à-dire à des fonctions qui sont associées à ce type d'objet. Par exemple, si je fais ici « colors.reverse », « reverse » est l'une des méthodes disponibles pour l'objet « Array ». Je vais simplement inverser l'ordre des éléments dans mon « Array ». Vous voyez que j'avais un « Array » avec rouge, vert, bleu, et avec « reverse », j'obtiens bleu, vert, rouge, vous le voyez ici, dans la console. C'est une petite méthode qui me permet d'inverser l'ordre des éléments. J'ai aussi une autre méthode qui est la méthode « push », elle me permet d'ajouter dans mon « Array » un élément supplémentaire à la fin. Si je fais « colors.push » de orange, pour rajouter la couleur orange à la fin, dans ma console, je vais voir le nombre « 4 », puisque la méthode « push » va mettre un élément supplémentaire dans l'« Array » et puis va me renvoyer la nouvelle longueur de l'« Array » . L'« Array » maintenant a quatre éléments. Si je veux voir cet « Array » avec l'élément supplémentaire, je vais devoir mettre mon « color.push » ici et puis faire un « console.log » de la nouvelle version de l'« Array colors» . Vous voyez que le « colors.push » a bien ajouté un élément supplémentaire à la fin de l'« Array » . Vous pourriez vous dire que les « Arrays » sont beaucoup moins pratiques et beaucoup moins utiles que les objets puisque c'est peut-être un petit peu moins facile de travailler avec des index, surtout s'ils sont basés à zéro, plutôt que de travailler avec des propriétés dont vous pouvez, en plus, choisir les noms. Détrompez-vous ! En JavaScript les « Arrays » sont partout. Vous pouvez créer vos propres « Arrays » mais la plupart du temps, c'est JavaScript qui vous fournira des « Arrays » tout fait. Il est donc très utile de prendre un petit peu de temps pour se familiariser avec les différentes propriétés et méthodes de cet objet « Array » donc je vous invite vraiment à consulter une documentation en ligne de JavaScript, pour prendre connaissance des différentes choses que l'on peut faire avec ces « Arrays », des différentes propriétés et des différentes méthodes. Vous verrez que, dès le prochain chapitre de ce cours, cela vous sera très utile car nous aurons de très nombreux « Arrays » à notre disposition.

L'essentiel de JavaScript

​Ajoutez des fonctionnalités interactives à vos pages web avec JavaScript. Découvrez la syntaxe, le DOM, l'utilisation des bibliothèques JavaScript populaires, etc.

Aucun commentaire n´est disponible actuellement
 
Logiciel :
Spécial abonnés
Date de parution :26 avr. 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !