Tableau Java. Partie 6 du cours JavaScript de Débutant à Avancé en 10 articles de blog

Ceci est la partie 6 de la série d’articles de blog sur JavaScript qui vous fera passer de débutant à avancé. À la fin de cette série, vous connaîtrez tous les éléments de base nécessaires pour commencer à coder en JavaScript. Sans plus tarder, commençons avec le sixième tutoriel.

Table des matières – tableau Java :

1. Tableaux – informations de base
2. Ajouter des éléments à un tableau Java
3. Supprimer des éléments d’un tableau
4. Trouver la longueur des tableaux
5. Trier les tableaux
6. Inverser les éléments des tableaux
7. Pour chaque
8. Inclut dans les tableaux

Ce tutoriel suppose que vous avez un environnement de codage déjà configuré. Si vous avez suivi les tutoriels précédents, vous devriez déjà l’avoir ouvert. Si pour une raison quelconque vous avez fermé votre configuration, vous pouvez trouver les instructions complètes de configuration à la Partie 4 de cette série. Dans ce tutoriel, nous expliquons comment configurer votre environnement de snippets Google Chrome pour le codage.

Si vous êtes relativement à l’aise avec Google Chrome, voici un moyen rapide de vous préparer pour ce tutoriel, sinon vous pouvez consulter la Partie 4 pour l’ensemble complet des instructions étape par étape sur la façon de configurer votre environnement de codage.

Si vous êtes sur un Mac, le raccourci clavier pour ouvrir la console est de presser “Option + Command + J”, après avoir ouvert Chrome. Si vous utilisez un appareil Windows, vous pouvez utiliser le raccourci clavier “Control + Shift + J” pour ouvrir la console JavaScript, une fois que vous avez ouvert Chrome. Ou vous pouvez également aller dans le menu en haut et aller à Affichage -> Développeur -> Console JavaScript. Une fois que vous avez ouvert la console, vous pouvez cliquer sur l’onglet “Sources”, qui est juste à côté de “Console”. Maintenant, vous devriez voir des Snippets. Vous pouvez soit continuer à coder dans un snippet que vous avez déjà commencé à utiliser, soit créer un nouveau Snippet en cliquant sur le bouton “+ Nouveau snippet”. Tant que vous avez une configuration de codage pour ce tutoriel où vous pouvez pratiquer, vous êtes prêt à y aller.

Tableau Java – informations de base

Les tableaux sont largement utilisés dans de nombreux langages de programmation et JavaScript ne fait pas exception. Et c’est pour une bonne raison. Mais vous vous demandez peut-être ce qu’est un tableau pour commencer ? Les tableaux sont essentiellement une collection de données liées qui peuvent être accessibles et manipulées avec certaines méthodes définies. Voyons quelques exemples pour un tableau afin d’avoir une compréhension plus complète.

const numbersUntilTen = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const testAnswers = [true, true, false, false, true];
const pets = ["chiens", "chats", "oiseaux", "poissons"];

Nous pouvons utiliser un tableau Java pour stocker plusieurs types de données différents. Par exemple, dans le code ci-dessus, nous avons stocké des nombres, des booléens ainsi que des chaînes de caractères.

Nous pouvons créer un tableau Java tout comme nous créons d’autres variables, avec soit les mots-clés const ou let sur le côté gauche et le contenu des tableaux sur le côté droit des équations. Une chose à laquelle vous devez faire attention est que lorsque nous créons des tableaux, nous utilisons des crochets pour entourer les éléments, tout comme nous l’avons fait dans le code ci-dessus. Nous séparons également chaque élément par une virgule, quel que soit leur type de données.

Dans ce tutoriel, nous allons écrire du code de manière à ce que vous puissiez tout copier et coller dans ce tutoriel, séquentiellement, ou tout taper dans un snippet JavaScript dans Chrome, et cela fonctionnerait comme prévu à condition que vous suiviez l’ordre. Par exemple, ce que cela signifie pour vous, c’est que si nous définissons une variable avec le mot-clé const une fois dans le tutoriel, normalement vous ne pouvez pas définir une autre variable avec le même nom exact à nouveau. C’est pourquoi si vous allez copier et coller partiellement une partie du code, il est bon de vous assurer que vous définissez également ces variables dans votre code. Cela ne devrait pas poser de problème si vous suivez le tutoriel dans l’ordre dans lequel il est présenté.

Une des premières choses que vous devez savoir sur un tableau Java est qu’une fois que vous créez un tableau, vous devez accéder à ses éléments. Les tableaux ont quelque chose appelé “index numérotés”, et ce que cela signifie pour vous en pratique, c’est que chaque élément que vous créez en JavaScript a un numéro qui lui est associé de gauche à droite, de zéro à la longueur du tableau Java moins un.

Par exemple, dans le code ci-dessus pour les animaux de compagnie, nous pouvons accéder au premier élément “chiens” en écrivant le nom de la variable, en ouvrant des crochets, en mettant l’index de l’élément que nous voulons accéder et en fermant la parenthèse :

alert(pets[0]);

De même, en mettant des numéros plus élevés, cela déclenchera l’affichage d’autres éléments dans la boîte d’alerte que nous affichons.

alert(pets[1]);
alert(pets[2]);
alert(pets[3]);

Étant donné que nous avions 4 éléments dans le tableau des animaux de compagnie, et que nous avons commencé les index à 0, le dernier élément du tableau est accessible avec pets[3], ce qui est 1 de moins que la longueur totale du tableau. À ce stade, vous vous demandez peut-être, maintenant que nous pouvons créer un tableau et accéder à un élément de ce tableau, que diriez-vous de faire des modifications à ce tableau ? Que diriez-vous d’ajouter de nouveaux éléments, de changer des éléments existants ou de supprimer des éléments ? Eh bien, procédons étape par étape et commençons par ajouter de nouveaux éléments à un tableau.

Ajouter des éléments à un tableau Java

Il existe plusieurs façons d’ajouter différents éléments à un tableau. Si nous savons que nous voulons ajouter le nouvel élément à la fin du tableau, nous pouvons utiliser la méthode “push”. Cela s’appelle également pousser un nouvel élément dans le tableau. Notez que l’élément poussé viendra à la fin du tableau. Par exemple :

pets.push("serpents");
// vérifions que nous avons des serpents comme dernier élément
// en affichant le contenu du tableau
alert(pets);

Si nous savons que nous voulons spécifiquement ajouter un élément au tableau Java en tant que premier élément, nous pouvons utiliser le mot-clé “unshift”. Voyons cela avec un exemple :

// l'exécution de ce code déplacera toutes les valeurs
// d'un côté et ajoutera le premier animal de compagnie de dragon
pets.unshift(“dragons”); 
// vérifions cela en affichant le contenu du tableau
alert(pets);

C’est génial que nous puissions ajouter des éléments à la fin du tableau ou au début du tableau, mais que faire si pour une raison quelconque je veux injecter des éléments dans le tableau à des positions spécifiques. Disons que je veux ajouter des tortues à la troisième position. Est-ce même possible ? Oui, c’est possible. Pour injecter un élément dans un tableau, nous pouvons le définir tout comme nous créons cette partie du tableau et assignons une valeur à la partie spécifique du tableau. N’oubliez pas d’utiliser les valeurs d’index lors de l’insertion de valeurs. D’un point de vue pratique, cela ressemble à ceci :

pets[2] = "tortues";
// vérifions que nous avons des tortues comme troisième élément
// en affichant le contenu du tableau
alert(pets);

Supprimer des éléments d’un tableau

À ce stade, vous vous demandez peut-être, que diriez-vous de supprimer des éléments d’un tableau ? Eh bien, il existe plusieurs façons de le faire également. Probablement la plus célèbre est d’utiliser la méthode “pop”. Cela va, d’une certaine manière, retirer votre dernier élément d’un tableau. // cela supprimera le dernier élément du tableau pets.pop(); // vérifions les résultats en affichant le contenu du tableau alert(pets);

Comme vous pouvez le voir, avec la méthode pop, nous avons supprimé le dernier élément de l’animal de compagnie des serpents de notre tableau d’animaux de compagnie.

Une autre façon de supprimer des éléments d’un tableau Java est d’utiliser le mot-clé “shift”. Lorsque nous utilisons shift, le premier élément sera supprimé et le reste des valeurs d’index s’adaptera à eux. Par exemple :

// cela supprimera le premier élément
// et déplacera les autres éléments vers leurs nouvelles valeurs d'index
// qui seront une de moins que les valeurs d'index précédentes
pets.shift();
// vérifions également cela en affichant le tableau
alert(pets);

Le nom “shift” vient en fait de la façon dont l’allocation de mémoire fonctionne dans la mémoire de l’ordinateur. Donc, si cela semble relativement peu intuitif au début, c’est parfaitement normal aussi. Pour l’instant, vous devez savoir qu’en utilisant la méthode shift, nous pouvons supprimer le premier élément d’un tableau.

Trouver la longueur des tableaux

Lorsque nous traitons des tableaux dans la vie réelle, il peut y avoir beaucoup de fois où nous voulons compter le nombre d’éléments du tableau. Cela peut être nécessaire dans une variété d’endroits, y compris dans des listes de tâches, des listes de participants à l’école ou au travail, etc. Pour y parvenir, nous avons une propriété de tableau intégrée appelée “length” et elle nous indiquera la longueur totale du tableau. Par exemple :

alert(pets.length);

Trier les tableaux

Le tri des tableaux est une opération assez courante en JavaScript. Il existe différentes implémentations spécifiques pour trier des éléments en JavaScript. Ces implémentations spécifiques sont généralement appelées algorithmes de tri. Différents algorithmes de tri peuvent apporter différents avantages et inconvénients. Par exemple, un algorithme de tri peut être choisi par rapport à un autre simplement parce qu’il est beaucoup plus facile à mettre en œuvre dans le code, par rapport à un autre, même s’ils peuvent montrer des performances légèrement meilleures. Vous avez peut-être entendu parler de différents algorithmes de tri pour des performances optimisées. Dans ce tutoriel, nous allons utiliser la méthode de tri intégrée fournie par JavaScript. Le tri est un problème assez courant, en particulier dans le développement web. Par exemple, si vous construisez un site e-commerce, vous devez mettre en œuvre différentes situations de tri pour que votre utilisateur puisse choisir. Bien qu’il n’y ait pas de règles strictes sur les options et les capacités que vous devez fournir à votre public, il existe des normes assez courantes qui sont attendues de vous en tant que créateur de site web. Par exemple, en tant qu’utilisateur, il y a de fortes chances que vous souhaitiez lister certains articles de magasin à la fois par prix croissant et par prix décroissant. Lors de la mise en œuvre du tri pour ces tâches, vous devez garder à l’esprit comment le mettre en œuvre étant donné que l’utilisateur peut également limiter les résultats de recherche à certaines autres catégories, telles que des t-shirts, des chapeaux, des sacs, etc. Nous pouvons trier un tableau en ajoutant “.sort()” à la fin de celui-ci.

pets.sort();
alert(pets);

Inverser les éléments des tableaux

Inverser un tableau est probablement plus courant à combiner avec le tri. Dans ce cas, parce que nous exécutons également ces codes de haut en bas, nous appliquons également l’inversion après avoir trié le tableau. Nous pouvons inverser un tableau en ajoutant “.reverse()” à la fin de celui-ci. pets.reverse(); alert(pets);

Parce que nous avons ordonné le tableau à l’étape précédente, vous pouvez voir que maintenant nous avons un tableau qui est à la fois trié et inversé.

Pour chaque

Lorsque nous travaillons avec des tableaux, JavaScript nous fournit un moyen pratique de parcourir les éléments du tableau avec “.forEach()”. Si nous le voulons vraiment, nous pouvons toujours utiliser une boucle for régulière pour parcourir un tableau. En fait, voyons d’abord comment construire une boucle for pour parcourir un tableau, puis nous verrons comment utiliser forEach().

// cela nous alertera 4 fois pour nourrir notre animal
for (let a = 0; a < pets.length; a++) {
    alert("Il est temps de nourrir mon animal");
}

Nous pouvons également obtenir le même résultat en utilisant forEach.

pets.forEach(alert("Il est temps de nourrir mon animal"));

Lorsque nous comparons l’utilisation de boucles for ou de For each, selon vos préférences et votre situation spécifique, vous pouvez préférer utiliser l’un d’eux plutôt que l’autre. En essence, ils produisent tous les deux les mêmes résultats avec des styles de code différents. ForEach peut être relativement plus facile et vous faire gagner une ligne de code à lire et à écrire, mais ce sera finalement votre choix. Vous n’avez pas à faire un tel choix maintenant et à vous y tenir non plus. Au fur et à mesure que vous écrivez du code, vous pouvez expérimenter pour résoudre le même problème en utilisant différentes approches au fur et à mesure que vous progressez dans votre parcours de programmation.

Inclut dans les tableaux

Nous pouvons également vérifier si un élément existe à l’intérieur d’un tableau Java. Un exemple d’utilisation réelle de cette méthode serait de savoir si un événement privé inclut le nom d’une personne sur la liste d’invitation. L’implémentation réelle est également assez simple. Nous écrivons d’abord le nom du tableau, dans ce cas, nous travaillons avec le tableau des animaux de compagnie. Ensuite, nous mettons un point pour accéder aux différentes propriétés et méthodes du tableau, puis nous écrivons “includes”, puis ouvrons et fermons des parenthèses, et tapons le nom de l’élément que nous voulons vérifier à l’intérieur. Voici un exemple qui vérifie un élément que nous savons exister dans le tableau :

alert(pets.includes("chiens"));

Si nous essayons également la même chose avec un élément que nous savons ne pas exister dans le tableau Java, nous nous attendons à recevoir faux comme réponse. Voyons également ce cas avec un exemple :

alert(pets.includes("chiot")); [/code>

Comme nous n’avions pas de chiot dans le tableau des animaux de compagnie, nous obtenons faux comme nous nous y attendions. Dans le prochain tutoriel, nous verrons un autre concept majeur dans le monde de la programmation et en JavaScript.