Comment utiliser les arrays en Javascript<span class="wtr-time-wrap after-title"><span class="wtr-time-number">7</span> min read</span>
Comment utiliser les arrays en javascript

Comment utiliser les arrays en Javascript7 min read

En programmation, on as souvent besoin d’effectuer des opérations qui manipulent des listes. Dans cet article, nous allons voir les différentes méthodes qui nous permettent de manipuler les arrays

C’est quoi un Array en Javascript ?

Avant que l’on commence à apprendre comment manipuler les arrays, nous devons voir ce qu’ils sont réellement

En Javascript, un array est une variable utilisée pour stocker différents types de données de manière ordonnée. Il est ensuite possible d’accéder individuellement à chaque élément stocké en passant par la variable

Déclarer un array

let ma_liste = [];

Ajouter des éléments à un array

let ma_liste = [1,2,3,4]

Ici, on sépare chaque élément par une virgule. Vous l’aurez compris, il y a 4 éléments dans cet array

Les arrays peuvent stocker plusieurs types de données

Certains d’entre vous connaissent peut-être les arrays grâce à des langages comme le C.

Et bien sachez qu’en Javascript, il est possible de stocker plusieurs types d’objets dans un array.

Par exemple :

let ma_liste = ['Un array', 'qui contiens plusieurs types', 2, true, 3.3];

Comme vous pouvez le voir, notre liste contiens plusieurs types d’objets. Ce qui est impossible dans certains langages.

Comment accéder aux éléments d’un array

Il est possible d’utiliser l’index d’un objet afin de récupérer sa valeur.

Pour se faire, il suffit d’appeler notre variable et de lui donner un nombre, ce qui va directement aller récupérer la variable à l’indexe correspondant

let ma_liste = [1,3,4,2]
console.log(ma_liste[1])

————> 3

Ici, le code renverras 3. Il faut savoir qu’en programmation on commence à compter à partir de 0. De ce fait, le premier élément de notre array seras appelable en indiquant la position 0

let ma_liste = [1,3,4,2]
console.log(ma_liste[0])

————> 1

Les méthodes d’arrays

Les arrays peuvent être manipulés grâce à des fonctions appelés méthodes. Les méthodes sont des fonctions directement rattachés à un objet.

Nous allons maintenant voir quelques méthodes utiles qui vont vous permettre de créer de superbes programmes !

toString()

La méthode toString() convertis un array en une chaîne de caractère avec les éléments séparés par des virgules

let prenoms = ['Jean', 'Marie', 'Stephane'];
prenoms.toString()
console.log(prenoms) // "Jean,Marie,Stephane"

join()

La méthode join() permets aussi de combiner tout les éléments d’une liste en une seule chaîne de caractères.

Il y a néanmoins une différence, la où toString() place automatiquement des virgules, join() vous permets de choisir quel caractère va séparer les éléments.

Il est d’ailleurs tout à fait possible d”utiliser un espace

let prenoms = ['Jean', 'Marie', 'Stephane'];
prenoms.join('-');
console.log(prenoms) // "Jean-Marie-Stephane"

concat()

Cette méthode combine deux listes ensemble, il suffit d’appliquer la méthode concat() sur l’array qui contiendras les premiers éléments et de lui en passer en argument le second array.

Faites attention, la méthode n’est pas in place, c’est à dire que vous devez stocker le résultat dans une nouvelle variable

let premier_array = [1,2,3];
let second_array = [4,5,6];

let concatenation = premier_array.concat(second_array);
console.log(concatenation) // [1,2,3,4,5,6]

push()

La méthode push ajoute un nouvel objet à l’intérieur d’un array

let prenoms = ['Jean', 'Pierre', 'Jacques'];
prenoms.push('Michel');
console.log(prenoms) // ['Jean', 'Pierre', 'Jacques', 'Michel']

pop()

Cette méthode supprime le dernier objet d’un array

let prenoms = ['Jean', 'Pierre', 'Jacques'];
prenoms.pop()
console.log(prenoms) // ['Jean', 'Pierre']

shift()

Cette méthode supprime le premier élément d’un array

let prenoms = ['Jean', 'Pierre', 'Jacques'];
prenoms.shift();
console.log(prenoms); // ['Pierre', 'Jacques']

unshift()

Cette méthode ajoute un nouvel élément au début de l’array

let prenoms = ['Jean', 'Pierre', 'Jacques'];
prenoms.unshift('Marie');
console.log(prenoms); // ['Marie', 'Jean', 'Pierre', 'Jacques']

slice()

Cette méthode copie une partie d’un array et retourne cette partie comme un nouvel array. Cette méthode ne change pas l’array original

let prenoms = ['Jean', Pierre', Jacques', 'Louis']
let partie = prenoms.slice(0,2)
console.log(partie) // ['Jean', 'Pierre']

On passe d’abord la borne d’entrée, et la borne de fin. Attention la borne de fin n’est pas incluse, ici 0,2 renverras donc les nombres 0 et 1

split()

Cette méthode est utilisée pour les chaînes de caractères. Elle divise un string en plusieurs morceaux et les stocke dans un array

Pour se faire, on lui passe un séparateur en argument, c’est à dire un ou plusieurs caractère(s) qui vont marquer la séparation des chaînes, on utilise un espace si on veux stocker les mots dans un array

let phrase = "Salut comment ça va ?"
phrase = phrase.split(" ")
console.log(phrase) // ['Salut', 'comment', 'ça' 'va', '?']

indexOf()

Cette méthode permets de rechercher un objet dans un array. Si elle trouve l’objet, l’index est retourné, si il n’y a rien, la méthode retourne -1

let prenoms = ['Jean', Pierre', Jacques', 'Louis'];
let index_jacques = prenoms.indexOf('Jacques');
console.log(index_jacques); // 2

Faites attention, si il y a plusieurs objets avec la même valeur, le premier trouvé seras retourné.

Vous pouvez utiliser lastIndexOf() pour trouver le dernier objet avec la valeur recherchée

filter()

Cette méthode crée un nouvel array qui contiens les objets de l’ancien array passant certaines conditions

Voyons un programme qui stocke dans un sous array tout les prénoms commençant par “p”

let prenoms = ['paul', 'michel', 'pierre', 'patrick', 'jean', 'marc']
let resultats = prenoms.filter(function(objet) {
    if (objet[0] == 'p') {
    return objet;
}
})

On donne une fonction à la méthode filter. Cette fonction prends l’objet et si il es retourné, la méthode l’ajoute au nouvel array.

Dans notre cas seuls les objets commençant par “p” sont retournés

map()

Cette méthode crée un nouvel array en manipulant les valeurs dans un array

let prenoms = ['paul', 'michel', 'pierre', 'patrick', 'jean', 'marc'];
let presentation = prenoms.map(function(objet) {
    return 'prenom : ' + objet
})

console.log(presentation) // ['prenom : paul'; 'prenom : michel', 'prenom : pierre', ''prenom : patrick', 'prenom : jean', 'prenom : marc']

Ici, pour chaque objet dans notre array on ajoute une chaîne de caractère devant. Il n’est absolument pas obligatoire de modifier chaque objet, vous pouvez simplement renvoyer l’objet sans le modifier pour le conserver intact

Conclusion

Les arrays en Javascript sont essentiels. Vous allez devoir les manipuler très souvent et il est vraiment important de connaître les méthodes de bases listés au dessus.

Si jamais vous n’avez pas compris le fonctionnement d’une des méthode, vous pouvez me poser des questions dans les commentaires, je me ferai un plaisir de vous répondre 🙂

Pour continuer votre apprentissage de la programmation, vous pouvez télécharger mon guide gratuit pour bien débuter la programmation en indiquant votre email ci-dessous afin que je vous envoi le guide

Vous abonner à notre newsletter

* champ requis

Laisser un commentaire

Fermer le menu
×
×

Panier