Array
L'objet Array permet de créer et manipuler des tableaux.
Définition : [ ]
création d'un tableau :
const a = [] ; // crée un nouveau tableau vide
const b = [elt0,elt1,elt2,eltn]; // crée un nouveau tableau contenant les n éléments
const element = a[0]; // a[0] représente le premier élément du tableau
Définition : length
a.length;
La propriété length représente le nombre d'élément du tableau
const a = ["a","b","c"];
const b = a.length; // b = 3
Définition : at()
a.at(index);
La méthode at retourne l'élément à l'index index.
Un index négatif permet d'atteindre un élément en partant de la fin.
const a = ["a","b","c","d","e"];
const b = a.at(2); // b = "c" équivalent à a[2]
const c = a.at(-1); // c = "e" équivalent à a[a.length - 1]
Définition : indexOf
a.indexOf(valeur[, index]);
La méthode indexOf retourne l'index de la première occurrence de valeur dans le tableau (-1 si pas d’occurrence).
index permet de préciser l'index du tableau auquel démarrer la recherche.
const a = ["a","b","c"];
const b = a.indexOf("c")); // b = 2
Définition : concat()
a.concat(element1 [,element2, element3])
La méthode concat concatène des éléments qui peuvent être eux-mêmes des tableaux.
const a = ["a", "b", "c"];
a.concat("d", "e"); // ["a", "b", "c", "d", "e"]
a.concat(["f", "g"],["h", "i"]); // ["a","b","c","d","e","f","g","h","i"]
Avec l'opérateur de décomposition
let a = ["a", "b", "c"];
a = [a, "d", "e"]; // ["a","b","c","d","e"]
a = [a, ["f","g"], ["h","i"]]; // ["a","b","c","d","e","f","g","h","i"]
Définition : join()
a.join([symbole]);
La méthode join retourne le tableau sous forme de chaîne de caractères séparés par symbole.
symbole = "," par défaut.
const a = ["a","b","c"];
const b = a.join(); // "a,b,c"
const c = a.join(":"); // "a:b:c"
Définition : push()
a.push(element1[,element2,element3]);
La méthode push ajoute des éléments à la fin du tableau.
const a = ["a","b","c"];
a.push("d","e"); // ["a","b","c","d","e"]
Avec l'opérateur de décomposition
const a = ["a", "b", "c"];
const b = [a, "d", "e"]; // ["a","b","c","d","e"]
Définition : unshift()
a.unshift(element1[,element2,element3]);
La méthode unshift insère des éléments au début du tableau.
const a = ["a","b","c"];
a.unshift("d","e"); // ["d","e","a","b","c"]
Avec l'opérateur de décomposition
const a = ["a", "b", "c"];
const b = ["d","e",a]; // ["d","e","a","b","c"]
Définition : pop()
a.pop();
La méthode pop supprime le dernier élément du tableau.
const a = ["a","b","c"];
a.pop(); // ["a","b"]
Définition : shift()
a.shift();
La méthode shift supprime le premier élément du tableau.
const a = ["a","b","c"];
a.shift(); // ["b","c"]
Avec l'opérateur de décomposition
const a = ["a", "b", "c"];
[,a] = a; // ["b","c"]
Définition : fill()
a.fill([nb, debut,fin]);
La méthode fill modifie les cases d'un tableau de debut à fin exclu avec la valeur nb.
La méthode retourne le tableau.
const a = ["a","b","c","d","e"];
a.fill(0,1,4); // ["a",0,0,0,"e"]
Cas particuliers :
const a = ["a","b","c","d","e"];
a.fill(0,1); // ["a",0,0,0,0] le paramètre fin égale length par défaut
const b = ["a","b","c","d","e"];
a.fill(0); // [0,0,0,0,0] modifie tout le tableau
a.fill(); // [undefined, undefined, undefined, undefined, undefined]
Définition : slice()
a.slice(debut[,fin]);
La méthode slice retourne une partie d'un tableau, de debut à fin exclu.
fin = a.length par défaut.
const a = ["a","b","c","d","e"];
const b = a.slice(0,3); // ["a","b","c"]
const c = a.slice(2,4); // ["c","d"]
Définition : splice()
a.splice(debut,nb[,element1,element2]);
La méthode splice() supprime les nb éléments situés à partir de la position debut.
Si des arguments supplémentaires existent, ils sont insérés à partir de la position debut.
const a = ["a","b","c","d","e"];
a.splice(1,2,"f"); // ["a","f","d","e"]
Définition : reverse()
a.reverse();
La méthode reverse met le tableau à l'envers.
const a = ["premier","deuxième","troisième"];
a.reverse(); // ["troisième","deuxième","premier"]
Définition : sort()
a.sort([function(a,b){}]);
La méthode sort trie un tableau par ordre croissant en considérant que les éléments sont des chaînes de caractères.
La fonction permet de modifier le critère de trie. Elle doit retourner un nombre négatif si a se place avant b et inversement et 0 en cas d'égalité.
const a = [4,12,3,7,1];
a.sort(); // [1,12,3,4,7] attention trie comme une chaîne de caractère
Pour trier numériquement :
const a = [4,12,3,7,1];
const croissant = function(a,b){
return a - b;
}
a.sort(croissant); // [1,3,4,7,12]
const decroissant = function(a,b){
return b - a;
}
a.sort(decroissant); // [12,7,4,3,1]
Écriture simplifiée :
const a = [4,12,3,7,1];
a.sort((a,b) => a - b); // [1,3,4,7,12]
a.sort((a,b) => b - a); // [12,7,4,3,1]
Autres exemples :
const tab = ['too','lalala','mama','ri'];
tab.sort((a,b) => a > b ? 1 : -1); // ['lalala','mama','ri','too']
tab.sort((a,b) => a < b ? 1 : -1); // ['too','ri','mama','lalala']
tab.sort((a,b) => a.length - b.length); // ['ri','too','mama','lalala']
Définition : forEach()
a.forEach(function([value, index, array]){});
La méthode forEach, appelle une fonction sur chaque élément d'un tableau.
value : valeur de l'élément,
index : index de l'élément,
array : tableau a.
const a = [4,12,3,7,1];
let somme=0;
a.forEach(function(value){somme += value;}); // somme = 27
Additionne tous les éléments du tableau dans somme.
Écriture simplifiée :
const a = [4,12,3,7,1];
let somme=0;
a.forEach(x => somme += x); // somme = 27
Définition : map()
a.map(function([value, index, array]){});
La méthode map, appelle une fonction sur chaque élément d'un tableau, et retourne un tableau qui contient les résultats
value : valeur de l'élément,
index : index de l'élément,
array : tableau a.
const a = [4,12,3,10,1];
const b = a.map(function(value){return value % 2;}); // [0,0,1,0,1]
Retourne un tableau qui contient le reste de la division par 2 de chaque élément.
Écriture simplifiée :
const a = [4,12,3,10,1];
const b = a.map(x => x % 2); // [0,0,1,0,1]
Définition : filter()
a.filter(function([value, index, array]){});
La méthode filter, appelle une fonction sur chaque élément d'un tableau, et retourne un tableau qui contient les éléments pour lesquels la fonction retourne vrai.
value : valeur de l'élément,
index : index de l'élément,
array : tableau a.
const a = [4,12,3,10,1];
const b = a.filter(function(value){return !(value % 2);}); // [4,12,10]
Retourne un tableau qui contient les nombres divisibles par 2.
Écriture simplifiée :
const a = [4,12,3,10,1];
const b = a.filter(x => !(x % 2)); // [4,12,10]
Définition : every()
a.every(function([value, index, array]){});
La méthode every, appelle une fonction sur chaque élément d'un tableau, et retourne true si tous les éléments satisfont à la fonction.
value : valeur de l'élément,
index : index de l'élément,
array : tableau a.
const a = [4,12,8,10,14];
const reponse1 = a.every(function(value){return (value % 2 === 0);}); // true
const b = [4,1,8,10,14];
const reponse2 = b.every(function(value){return (value % 2 === 0);}); // false
Retourne si le tableau contient que des nombres pairs.
Écriture simplifiée :
const a = [4,12,8,10,14];
const reponse1 = a.every(x => !(x % 2)); // true
const b = [4,1,8,10,14];
const reponse2 = b.every(x => !(x % 2)); // false
Définition : some()
a.some(function([value, index, array]){});
La méthode some, appelle une fonction sur chaque élément d'un tableau, et retourne true si au moins un élément du tableau satisfait à la fonction.
value : valeur de l'élément,
index : index de l'élément,
array : tableau a.
const a = [4,12,8,10,14];
const reponse1 = a.some(function(value){return value % 2;}); // false
const b = [4,1,8,10,14];
const reponse2 = b.some(function(value){return value % 2;}); // true
Retourne si le tableau contient un nombre impair.
Écriture simplifiée :
const a = [4,12,8,10,14];
const reponse1 = a.some(x => x % 2); // false
const b = [4,1,8,10,14];
const reponse2 = b.some(x => x % 2); // true
Définition : reduce()
a.reduce(function(reponse, value, [index], [array]){}, init);
La méthode reduce, appelle une fonction qui affecte dans son premier argument (reponse) le calcul de la fonction de callback et son deuxième argument (value) correspond aux valeurs du tableau.
reponse : valeur d'accumulation
value : valeur de l'élément,
index : index de l'élément,
array : tableau a.
init : valeur initiale de reponse
const somme = [1,2,3,4].reduce(function(s, x){return s+x}, 0); // 10
const sommeImpaire = [1,2,3,4].reduce(function(s,x){return x%2 ? s+x : s}, 0); // 4
Retourne la somme des nombres du tableau et la somme des nombres impairs du tableau.
Écriture simplifiée :
const somme = [1,2,3,4].reduce((s, x)=>s+x, 0); // 10
const sommeImpaire = [1,2,3,4].reduce((s,x)=>x%2 ? s+x : s, 0); // 4
Définition : Autres méthodes
La méthode find, retourne le premier élément qui respecte la fonction.
const pair = [1,5,10,4].find(x=>!(x%2)); // 10
La méthode findIndex, retourne l'index du premier élément qui respecte la fonction.
const pair = [1,5,10,4].findIndex(x=>!(x%2)); // 2
La méthode includes, retourne si un tableau contient une valeur.
const a = [1,2,3,4,5,6];
const reponse1 = a.includes(3); // true
const reponse2 = a.includes(3,4); // false, recherche 3 à partir de l'index 4
Définition : from
Array.from(iterable[, fn])
from est une méthode statique de l'objet Array.
iterable : est un objet itérable. (voir programmation objet : array, string, map...)
fn : est une fonction appliquée à chaque éléments de l'itérable.
let a;
Array.from('abc'); // ['a', 'b', 'c']
// code équivalent['abc'];
// Modification du contenuArray.from([1,2,3], (n)=>n*2); // [2, 4, 6]
// code équivalent[[1,2,3]].map((n)=>n*2);
// Création d'un tableau de n élémentsArray.from({length:3}, (_,index)=>index); // [0, 1, 2]
// code équivalentArray(3).fill().map((_,index)=>index); // [0, 1, 2]