javascript Array
JavaScript

Javascript Array : comment bien les utiliser?

En javascript les array sont des simples variables. Ils servent à stocker plusieurs données d’un même type (string, number, object,…). Il est primordiale de bien les utiliser car vous allez les rencontrer absolument partout.

Nous allons prendre pour exemples des pokemons tout au long de cet article pour ajouter un petit côté concret. Imaginons que nous avons 3 pokemons différents :

const pokemon1 = "Pikachu";
const pokemon2 = "Carapuce";
const pokemon3 = "Salamèche";

Nous allons utiliser un Array dans ce cas là, pour simplifier au maximum et utiliser une unique variable :

const pokemons = ["Pikachu","Carapuce","Salamèche"];

Déclaration d’Array en javascript

Il y a globalement deux façons de déclarer un array en javaScript, dont une qui est beaucoup plus courante que l’autre.

new Array()

La façon de faire par le constructor new Array() est la moins courante :

const pokemons = new Array("Pikachu","Carapuce","Salamèche");

La syntaxe []

Elle est de loin la plus courante et la plus utilisée parce qu’elle est moins verbeuse et moins lourde en écriture.

const pokemons = ["Pikachu","Carapuce","Salamèche"];

Accéder aux valeurs

Comme les valeurs (pokemons) sont contenus dans une seule et même variable, il faut pouvoir y accéder. Pour accéder à Pikachu, Carapuce ou Salamèche, nous devons passer par l’index. La syntaxe pour faire ceci est la suivante :

const pokemons = ["Pikachu","Carapuce","Salamèche"];
console.log(pokemons[0]); // affiche Pikachu dans la console
console.log(pokemons[1]); // affiche Carapuce dans la console

A noter que l’index (0,1,2) commence par 0 pour le premier item. Pikachu dans notre exemple.

Remplacer des valeurs dans un array

Pour modifier la valeur d’un élement dans un Array, il faut y acceder par l’index. Ensuite il suffit simplement de réasigner une nouvelle valeur. Il s’agit du même mode de fonctionnement que pour une variable classique.

let pokemons = ["Pikachu","Carapuce","Salamèche"];
pokemons[0] = "Bulbizarre" // pokemons : ["Bulbizarre","Carapuce","Salamèche"]

Les arrays immutables

Les arrays immutables sont des arrays qui ne sont pas modifiables directement comme nous l’avons vu dans “Remplacer des valeurs dans une array”. Cela vous arrivera extremement souvent quand vous utilisez des frameworks javaScript comme ReactJs (avec les hooks), Angular ou VueJS. Il est très important de savoir les modifier quand même. Nous allons voir dans les méthodes suivantes comment faire en ES6 mais également en ES5. A noter que la syntaxe ES6 est plus esthétique.

Unshift

Unshift permet d’ajouter une valeur au début d’un tableau :

//ES5
const pokemons = ['Pikachu', 'Carapuce', 'Salamèche'];
pokemons.unshift('Bulbizarre'); // ['Bulbizarre', 'Pikachu', 'Carapuce', 'Salamèche']
//ES6
const pokemons = ['Pikachu', 'Carapuce', 'Salamèche'];
const newPokemons = ['Bulbizarre', ...pokemons]; // ['Bulbizarre','Pikachu', 'Carapuce', 'Salamèche']

Push

Push permet d’ajouter une valeur à la fin d’un tableau :

//ES5
const pokemons = ['Pikachu', 'Carapuce', 'Salamèche'];
pokemons.push('Bulbizarre'); // ['Pikachu', 'Carapuce', 'Salamèche','Bulbizarre']
//ES6
const pokemons = ['Pikachu', 'Carapuce', 'Salamèche'];
const newPokemons = [ ...pokemons, 'Bulbizarre']; // ['Pikachu', 'Carapuce', 'Salamèche','Bulbizarre']

Shift

Shift permet de supprimer une valeur au début d’un tableau :

//ES5 et ES6
const pokemons = ['Pikachu', 'Carapuce', 'Salamèche'];
pokemons.shift(); // ['Carapuce', 'Salamèche']

Pop

Pop permet de supprimer une valeur à la fin d’un tableau :

//ES5 et ES6
const pokemons = ['Pikachu', 'Carapuce', 'Salamèche'];
pokemons.pop(); // ['Pikachu', 'Carapuce']

Sort et Reverse

Sort permet de trier dans l’ordre croissant (alphabétique par défault) et reverse permet de trier dans l’ordre décroissant :

//ES5
const pokemons = ['Pikachu', 'Carapuce', 'Salamèche'];
pokemons.sort(); // ['Carapuce', 'Pikachu', 'Salamèche'];
pokemons.reverse(); // ['Salamèche', 'Pikachu', 'Carapuce'];
//ES6
const pokemons = ['Pikachu', 'Carapuce', 'Salamèche'];
const sortedPokemon = [...pokemons].sort(); // ['Carapuce', 'Pikachu', 'Salamèche'];
const reversePokemon = [...pokemons].reverse(); // ['Salamèche', 'Pikachu', 'Carapuce'];

C’est tout pour cet article, j’espère qu’il vous a plu.

Si vous voulez aller plus loin dans votre apprentissage en front-end, je ne peux que vous conseiller de lire ce premier article sur le framework Angular : http://pierreterrat.com/composant-angular

Beaucoup d’efforts et de temps sont passés pour vous fournir du contenu de qualité, merci de partager et de commenter cet article pour faire vivre ce blog.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *