ARRAY JavaScript
23 January 2020
L’objet global Array est utilisé pour créer des tableaux. Les tableaux sont des objets de haut-niveau (en termes de complexité homme-machine) semblables à des listes. source: MDN
Quand faut-il utiliser un tableau ?
- Quand nous avons besoin de regrouper certaines valeurs, certains objets et ne sommes pas soumis à des contraintes de type;
- Quand nous avons besoin de regrouper des choses qui ont la même logique métier;
- Pour stocker des objets => un tableau d’objet.
// Array JavaScript
// tableau languages
const languages = ['JavaScript', 'C#', 'Ruby', 'PHP'];
console.log(languages);
// (4) ['JavaScript', 'C#', 'Ruby', 'PHP'];
// acceder à un élèment du tableau grâce à son index
const first = languages[0];
console.log(first);
// "JavaScript"
const last = languages[languages.length - 1];
console.log(last);
// ["PHP"]
// tableau d'objet
const languagesObject = [
{ 1:'JavaScript' },
{ 2:'C#' },
{ 3:'Ruby' },
{ 4:'PHP' }];
console.log(languagesObject);
// (4) [{ '1':'JavaScript' },{ '2':'C#' },{ '3':'Ruby' },{ '4':'PHP' }]Il existe une multitude de méthodes à appliquer sur les tableaux, que ce soit pour les trier, les modifier, supprimer des éléments etc.
Array.of() et Array.from() ES6
Il existe 2 façons intéressantes de créer des tableaux en JavaScript, avec les méthodes statiques Array.of() et Array.from().
Array.of()
Nous allons ici créer des tableaux en partant de 0.
// Array.of()
Array.of(7);
// (1) [7]
Array.of(5, 6, 7);
// (3) [6, 4, 6]
Array.of('JavaScript', 'React', 'Gatsby'):
// (3) ["JavaScript", "React", "Gatsby"]
Array.of(undefined);
// [undefined]Array.from()
Cette méthode permet de créer une nouvelle instance d’Array à partir d’un objet itérable ou semblable à un tableau. Quand je parle d’élément semblable à un tableau, j’entends que l’objet dispose d’une propriété length et d’élément indexés.
L’intérêt d’utiliser Array.from() pour transformer un objet itérable en tableau est simplement, de pouvoir utiliser une multitude de méthode propre aux tableaux. Et ainsi nous faciliter grandement la vie.
// Array.from()
function double(){
const args = Array.from(arguments);
const doubled = args.map(number => {
return number * 2;
};
console.log(args);
console.log(doubled);
}
double(1, 2, 3);
// [1, 2, 3]
// [2, 4, 6]L’objet arguments est spécifique à ES6. Il est mis à disposition dans le corps d’une fonction et est capable de récupérer tous les arguments passés à la fonction. Si on observe le prototype de arguments on s’aperçoit qu’il s’agit d’un objet, voilà pourquoi on utiliser Array.from() dessus => pour pouvoir itérer sur les arguments de notre fonction double().
Il aurait aussi été possible d’utiliser Array.from() pour transformer un NodeList, contenant plusieurs divs, en tableau et pouvoir itérer dessus.
.map(), .filter(), .sort() ES6
.map()
Méthode .map(), idéal dans un tableau d’objet quand nous souhaitons obtenir uniquement telle ou telle valeur.
// .map() en action
const musicians = [
{
id: 1,
first: 'Jimi',
last: 'Hendrix',
country: 'England',
born: '1942',
dead: '1970'
},
{
id: 2,
first: 'Stevie',
last: 'Ray',
country: 'USA',
born: '1954',
dead: '1990'
},
{
id: 3,
first: 'Franck',
last: 'Zappa',
country: 'USA',
born: '1940',
dead: '1993'
},
]
const fullnames = musicians.map(musician => {
return `${musician.first} ${musician.last}`;
});
console.log(fullnames);
// (3) ['Jimi Hendrix', 'Stevie Ray', 'Franck Zappa'];- la méthode .map() prend en paramètre une fonction => il s’agira souvent d’une arrow function;
- .map() ne transforme pas le tableau initial, il va en créer un nouveau. C’est la raison d’être de .map(), prendre une collection et en retourner une nouvelle sans modifier le tableau d’origine. On parle de principe d’immutabilité.
.filter()
Avec la méthode .filter(), nous allons pouvoir filtrer notre tableau, et récupérer tous les musiciens américains.
// .filter() en action
const musiciansUS = musicians.filter(musician => {
return musician.country === 'USA';
});
console.log(musiciansUS);
// (2) [{id: 2, first: 'Stevie', last: 'Ray', country: 'USA', born: '1954', dead: '1990'},
// {id: 3, first: 'Franck', last: 'Zappa', country: 'USA', born: '1940', dead: '1993'} ]- .filter() prend aussi une fonction en paramètre et permet de tester une condition. Si la condition est vraie, il va intégrer notre élément dans le nouveau tableau. Toujours sans modifier le tableau initial, en respectant donc le principe d’immutabilité.
.sort()
Avec la méthode .sort() nous allons pouvoir trier notre tableau.
// .sort() en action
let musicianAlpha = musicians.sort((musician1, musician2) => {
if(musician1.last > musician2.last){
return 1;
}else{
return -1;
}
});
console.log(musicianAlpha);
// (3) [{…}, {…}, {…}]
// 0: {id: 1, first: "Jimi", last: "Hendrix", country: "England", born: "1942", …}
// 1: {id: 2, first: "Stevie", last: "Ray", country: "USA", born: "1954", …}
// 2: {id: 3, first: "Franck", last: "Zappa", country: "USA", born: "1940", …}
// les noms, avec l'attribut last, sont triés par ordre alphabétique- Ainsi, notre tableau va être trié par ordre alphabétique. Si nous souhaitons inverser l’ordre alphabétique, il suffit de retourner -1 dans le if.
- .sort() prend deux éléments en paramètre, dans notre cas musician1 et musician2 pour les comparer l’un à l’autre dans l’optique de pouvoir les trier => cette méthode a besoin de comparer 2 éléments.
Introduction à reduce() ES6
La méthode .reduce() permet, à partie d’une collection d’obtenir une unique valeur.
Pour le découvrir, nous allons utiliser reduce( ) pour obtenir la somme de tous les nombres présent dans notre tableau.
// .reduce() en action
const numbers = [1, 2, 3, 4, 5];
let reduceNumbers = numbers.reduce((acc, curr) => {
console.log('acc', acc);
console.log('curr', curr);
return acc + curr;
}, 0); // 0 est la valeur de départ d'accumulateur => acc
// acc 0
// curr 1
// acc 1
// curr 2
// acc 3
// curr 3
// acc 6
// curr 4
// acc 10
// curr 5
// 15 est donc la valeur totale après avoir ajouté ensemble toutes les valeurs du tableauÀ quoi cela peut servir concrètement ? Imaginons que nous avons un cadi et que nous souhaitons calculer le prix des articles dans ce cadi. Voilà comment faire en utilisant reduce(). Cool non ?
// cas concret d'utilisation de la méthode reduce()
let cart = [
{ id:1,
title: 'pain',
price: 1.10
},
{ id:2,
title: 'bouteille eau',
price: 2.00
}
];
let totalCart = cart.reduce((acc, curr) => {
return acc + curr.price;
},0);
totalCart;
// 3.10Utiliser .reduce() pour créer un objet à partir d’un tableau
Il est également possible d’utiliser la méthode .reduce() pour créer un objet à partir d’un tableau. Nous allons créer un objet nous permettant de compter le nombre de personne par moyen de transport.
// .reducer() pour créer un objet à partir d'un array
const transportation = ['voiture','velo','bus','voiture','marche','velo','moto'];
const transportObj = transportation.reduce((acc, curr) => {
// si la clé correspondante aux transport n'existe pas, on la crée et l'initialise à 0
if(!acc[curr]){
// { voiture : 0 }
acc[curr] = 0;
}
// on incrèmente à chaque fois que curr vaut la clé en question
acc[curr] += 1;
return acc;
}, {}); // ici à la place du 0 vu plus haut, on indique à reduce() que l'on souhaite créer un objet, en indiquant {} en valeur par défaut
console.log(transportObj);
// { voiture: 2, velo: 2, bus: 1, marche: 1, moto: 1 }Recréer .map() à l’aide de .reduce()
Imaginons qu’ici, nous souhaitons ajouter la TVA à un tableau de prix.
// créatio de la méthode .map() à l'aide de .reduce()
const prices = [100, 12, 95.5, 140, 14.20];
const VAT = 0.2;
const pricesWithVAT = prices.reduce((acc, curr) => {
curr = curr + curr * VAT;
acc.push(curr)
return acc;
}, []); // la valeur par défaut est ici un tableau dans lequel on va pusher les nouvelles valeurs de prix comprenant la TVA (VAT in english sir)
console.log(pricesWithVAT);
// [ 120, 14.4, 114.6, 168, 17.04 ]À noter que .reduce() est quelque chose qui est vraiment propre à la programmation fonctionnelle.
4 façons de cloner un tableau (en ES5 et ES6)
.slice()
Façon relativement standard propre à ES5.
// .slice() ES5 pour copier un tableau
let musicians2 = musicians.slice();.concat()
Façon très courante toujours propre à ES5. Cette façon de faire relève de l'asuce.
// .concat() ES5 pour copier un tableau
let musicians2 =[].contact(musicians);Nous créons ici un tableau vide, et pouvons donc accéder dans son prototype à la méthode .concact( ) et on concatène le tableau que l’on souhaite copier.
Spread Operator '...'
Cette façon de faire est propre à ES6.
// spread operator pour copier un tableau
let musicians2 = [...musicians];Array.from()
// Array.from() pour copier un tableau
let musicians2 = Array.from(musicians);Voici donc 4 façons de cloner un tableau dans JavaScript.
C'est tout pour aujourd'hui, on se retrouve très vite pour discuter des évènements JavaScript.
