La Cheatsheet des tableaux sur Javascript.

La Cheatsheet des tableaux sur Javascript.

Parce que les tableaux sur Javascript sont toujours présents en développement et qu’ils sont la source de nombreuses interrogations pour les débutants ou lorsqu’il s’agit de les manipuler en profondeur, voici une petite liste de méthodes et d’usages récurrents lors d’un développement en javascript.

L’article va être divisé en groupes de méthodes allant des plus simples et plus connus au plus spécifiques et incongrus. Certaines astuces nécessitent l’usage de librairies externes dont l’installation est recommandée dans des cas particuliers nécessitant des traitements fins ou pour faciliter la lecture du code.

Vous retrouverez également en fin d’article, un lien de téléchargement pour télécharger en PDF, une cheatsheet énumérant l’ensemble des astuces mis en avant dans cet article.

Il est possible à tout moment d’ajouter des éléments à la liste, n’hésitez pas à transmettre vos autres techniques si vous le souhaitez.

Les bases pour manipuler des tableaux sur Javascript.

Créer un tableau javascript.

La technique principale pour l’instanciation d’un tableau est celle utilisant une expression littérale. Le tableau est instancié avec des valeurs définies:

const array = [1, 3, 6, 9];
var array = [1, 3, 6, 9];

Créer un tableau javascript avec son expression Array() et sans valeur initiale:

var array = new Array();
array[0] = 1;

Construire un tableau javascript à partir d’un objet itérable (par exemple une chaîne de caractères):

var string = ‘1369’;
console.log(Array.from(string)); // [‘1’, ‘3’, ‘6’, ‘9’]

Construire un tableau javascript à partir d’argument avec .of(). Attention à ne pas confondre cette méthode avec la création de tableau avec Array(). Ici, les arguments définissent la valeur des éléments tandis que pour Array(), ce sera la taille du tableau qui sera définie dans le premier argument:

var array = Array.of(1, 3, 6, 9);
console.log(array); // [1, 3, 6, 9]

Vider un tableau javascript.

Utiliser une taille de tableau à zéro pour vider le contenu d’un tableau javascript:

var array =  [1, 3, 6, 9]
array.length = 0;

Vider un tableau javascript en déclarant un tableau vide et remplacer les éléments présent:

var array =  [1, 3, 6, 9]
array = [];

Utiliser la méthode splice() pour vider intégralement ou partiellement un tableau javascript et son contenu:

var array =  [1, 3, 6, 9]
array.splice(0, array.length);

Ajouter et supprimer des éléments dans un tableau javascript

Pour ajouter une variable de type string, number, array ou autre dans un tableau javascript, la méthode push() est la plus régulièrement employée:

var array =  [1, 3, 6, 9];
array.push(11); // [1, 3, 6, 9, 11];

Une variante existe avec la méthode unshift() fonctionnant de manière similaire, mais en ajoutant le nouvel élément cette fois si, au début du tableau:

var array =  [1, 3, 6, 9];
array.unshift(11); // [11,1, 3, 6, 9];

À noter qu’il est possible d’ajouter avec .unshift() plusieurs éléments sous forme d’arguments séparés par une virgule.

À noter que .unshift() en plus d’ajouter des éléments, retourne la taille du tableau après ajout.

Supprimer le dernier élément d’un tableau javascript avec la méthode .pop():

var array =  [1, 3, 6, 9];
array.pop(); // [1, 3, 6, 9];

Supprimer le premier élément du tableau à l’aide de .shift():

var array =  [1, 3, 6, 9];
array.shift(); // [3, 6, 9];

Récupérer la taille d’un tableau javascript.

La technique classique pour récupérer la taille d’un tableau, est d’utiliser la méthode .length():

var array =  [1, 3, 6, 9];
console.log(array.length); // 4

Récupérer des éléments spécifiques dans un tableau javascript.

Trouver l’élément se situant à un indice ‘a’ en l’indiquant en tant qu’argument entre crochet:

var array =  [1, 3, 6, 9];
console.log(array[1]) ; // 3

Alternative pour récupérer l’élément à l’indice ‘a’ avec la méthode .at():

var array =  [1, 3, 6, 9];
console.log(array.at(1)) ; // 3

Pour trouver la position dans le tableau d’un élément, on utilise la méthode .indexOf(obj):

var array =  [1, 3, 6, 9];
console.log(array.indexOf(6)); // 2

Une variante avec la dernière apparition de l’élément dans le tableau est possible à l’aide de la fonction .lastIndexOf():

var array =  [1, 3, 6, 9];
console.log(array.lastIndexOf(6)); // 2

Pour récupérer une partie du tableau dans un interval, l’approche standard est d’utiliser la méthode .splice(startIndex, endIndex):

var array =  [1, 3, 6, 9];
array.splice(0,2); // [1, 3]

Important: L’index de début est inclus tandis que l’index de fin est exclu.

Trouver l’indice du premier élément répondant à une condition logique avec la méthode .findIndex():

var array =  [1, 3, 6, 9];
array.findIndex(val => val > 3) // 2

Retourner le premier élément satisfaisant une condition logique avec la méthode .find():

var array =  [1, 3, 6, 9];
array.find(val => val > 3) // 6

Trouver l’élément le plus petit d’un tableau javascript avec .sort():

var array =  [1, 3, 6, 9];
console.log(array.sort((a, b) => return a-b)); // 6

Retrouver les éléments similaires dans deux tableaux javascript avec les méthodes  .filter() et .includes():

var array =  [1, 3, 6, 9];
var array2 = [6, 9, 11, 13];
var commonElement = array.filter( el => array2.includes(el));
console.log(commonElement); // [6, 9]

Calculer la somme des valeurs d’un tableau javascript avec .reduce():

var array =  [1, 3, 6, 9];
console.log(array.reduce((a, b) => a + b)); // 19

Récupérer dans un tableau, la liste des indices en utilisant .keys():

var array =  [1, 3, 6, 9];
for( const idx of array.keys()){
	console.log(idx); // 0 1 2 3
}

Valider la présence d’élément dans un tableau javascript.

Vérifier qu’une variable est bien présente dans un tableau javascript avec .isArray():

var array =  [1, 3, 6, 9];
console.log(Array.isArray(array); // true

Vérifier la présence d’un élément au sein du tableau javascript en utilisant .includes():

var array =  [1, 3, 6, 9];
console.log(array.includes(3)); // true
console.log(array.includes(11)); // false

Vérifier que tous les éléments d’un tableau javascript valide une condition logique définit avec la méthode .every():

var array =  [1, 3, 6, 9];
console.log(array.every(e => e < 10)); // true
console.log(array.every(e => e > 10)); // false

Vérifier qu’il existe au moins un élément d’un tableau javascript qui valide une condition logique avec .some():

var array =  [1, 3, 6, 9];
console.log(array.some(e => e < 10)); // true
console.log(array.some(e => e > 10)); // false

Trouver le plus grand élément dans un tableau javascript avec la librairie Math:

var array =  [1, 3, 6, 9];
console.log(Math.max.apply(null, array)); // 9

Trouver le plus petit élément dans un tableau javascript avec la librairie Math:

var array =  [1, 3, 6, 9];
console.log(Math.min.apply(null, array)); // 1

Les manipulations utiles pour traiter les tableaux javascript.

Transformer un tableau javascript.

Conserver uniquement une partie du tableau basé sur une condition logique grâce à .filter():

var array =  [1, 3, 6, 9];
console.log(array.filter(e => e < 6)); // [1, 3]

Faire la fusion de deux tableaux en un seul tableau javascript à l’aide de la méthode .concat():

var array =  [1, 3, 6, 9];
var array2 = [11, 13, 15, 17];
console.log(array.concat(array2); // [1, 3, 6, 9, 11, 13, 15, 17]

Transformer un tableau en chaîne de caractères avec un élément de séparation à l’aide de .join(element):

var array =  [1, 3, 6, 9];
console.log(array.join(‘or”); // “1 or 3 or 6 or 9”

Conserver qu’une section d’un tableau suivant un intervalle définit avec la méthode .slice():

var array =  [1, 3, 6, 9];
console.log(array.slice(1, 2); // [3]

Convertir un tableau javascript en string avec la fonction .toString():

var array =  [1, 3, 6, 9];
console.log(array.toString()); // “1, 3, 6, 9”

Convertir un ou plusieurs éléments d’un tableau en plusieurs éléments dans un tableau avec .flat():

var array =  [1, 3, 6, [9, 11, 13]];
console.log(array.flat(1)); // [1, 3, 6, 9, 11, 13]

Alternative où la conversion nécessite en plus une transformation avec une fonction en utilisant la méthode .flatMap():

var array =  [1, 3, 6, [9, ‘11’, 13]];
console.log(array.flatMap(a => a*2)); // [1, 3, 6, 18, 22, 26]

Retirer des éléments du tableau suivant un intervalle avec la méthode .splice(index, howMany):

var array =  [1, 3, 6, 9];
console.log(array.splice(2, 2)); // [1, 3]

En ajoutant en arguments des éléments, il est possible d’ajouter après suppression de nouvelles entrées dans le tableau.

var array =  [1, 3, 6, 9];
console.log(array.splice(2, 2, 5, 7)); // [1, 3, 5, 7]

Inverser la position des éléments dans un tableau avec la méthode .reverse():

var array =  [1, 3, 6, 9];
console.log(array.reverse()); // [9, 6, 3, 1]

Modifier tous les éléments en les remplaçant par une unique valeur avec la méthode .fill(element):

var array =  [1, 3, 6, 9];
console.log(array.fill(1)); // [1, 1, 1, 1]

Copier des éléments d’un tableau javascript et les ajouter à une position précise du tableau avec .copyWithin():

var array =  [1, 3, 6, 9];
console.log(array.copyWithin(1, 0, 2)); // [1, 3, 1, 9]

Construire un nouveau tableau javascript en transformant par une fonction, les éléments d’un autre tableau avec .map():

var array =  [1, 3, 6, 9];
console.log(array.map(a => a*2)); // [2, 6, 12, 18]

Trier les éléments d’un tableau javascript.

Trier les éléments d’un tableau javascript par ordre croissant en utilisant la méthode .sort():

var array =  [1, 9, 3, 6];
console.log(array.sort()); // [1, 3, 6, 9]

Mélanger les éléments d’un tableau javascript de façon aléatoire avec la méthode .sort():

var array =  [1, 9, 3, 6];
console.log(array.sort((a,b) => 0.5 - Math.random() )); // [9, 1, 6, 3]

Transformer et convertir un tableau javascript.

Convertir un tableau javascript en objet grâce à:

var array =  [1, 9, 3, 6];
var obj = { …array };
console.log(obj); // { 0: 1, 1: 9, 2: 3, 3: 6} 

Parcourir un tableau avec des boucles:

Parcourir un tableau avec ses indices et ses éléments avec la méthode .entries():

var array =  [1, 3, 6, 9];
for(const [index, element] of array.entries()){
	console.log(index, element); // 0 1, 1 3…
}

Parcourir un tableau en utilisant la méthode .forEach():

var array =  [1, 3, 6, 9];
array.forEach(element => console.log(element)); // 1 3 6 9

Alternative pour parcourir un tableau avec l’usage de .values():

var array =  [1, 3, 6, 9];
for(const value of array.values()){
	console.log(value); // 1 3 6 9
}

La librairie Lodash pour le traitement avancé des tableaux javascript.

Lodash est une librairie apportant de nombreux outils très utile pour le traitement des variables en javascript et notamment des tableaux. Les méthodes proposées par Lodash sont très modulables et recommandées pour des projets demandant une manipulation conséquente des tableaux.

Il est possible d’installer Loadash rapidement dans un projet avec l’installateur de package npm. La commande est la suivante: npm i lodash

La liste qui va suivre n’englobe pas toutes les méthodes que propose la librairie. Il ne s’agit que des méthodes proposant des fonctionnalités complémentaires à celle déjà disponible nativement en vanilla js. Néanmoins, il est bon de mentionner que Lodash propose des alternatives à quasiment l’intégralité des manipulations de tableau native à javascript.

Diviser un tableau en plusieurs tableaux avec un nombre d’élément précisé en argument avec la méthode .chunk():

var array =  [1, 3, 6, 9];
console.log(_.chunk(array, 2)); // [[1, 3], [6,9]]

Retirer les éléments erronés (null, undefined, ‘’, false, NaN), d’un tableau javascript avec la méthode _.compact():

var array =  [1, undefined, 3, null, 6, ‘’, 9];
console.log(_.compact(array)); // [1, 3, 6, 9]

Supprimer un nombre définit en argument d’éléments en partant du début du tableau avec la méthode _.drop():

var array =  [1, 3, 6, 9];
console.log(_.drop(array, 2)); // [6, 9]

Alternative pour supprimer les éléments à partir de la fin avec la méthode _.dropRight():

var array =  [1, 3, 6, 9];
console.log(_.drop(array, 2)); // [1, 3]

Transforme des tableaux en objet composé d’un couple valeur et clé avec la méthode _.fromPairs():

var array =  [[1: ‘a’], [2, ‘b’], [3, ‘c’], [4, ‘d’]];
console.log(_.fromPairs(array)); // { 1:’a’, 2:’b’, 3:’c’, 4:’d’ }

Supprimer tous les éléments d’un tableau javascript ayant des valeurs définies dans la méthode _.pull():

var array =  [1, 3, 6, 9];
console.log(_.pull(array, 1, 9)); // [3, 6]

L’inverse de la méthode _.pull() permet de supprimer les éléments n’étant pas inclus dans une tableau fourni en argument:

var array =  [1, 3, 6, 9];
console.log(_.pullAll(array, [1, 9])); // [1, 9]

Conserver que les éléments de valeur unique dans un tableaux javascript avec _.uniq():

var array =  [1, 3, 3, 6, 9];
console.log(_.sortedUniq(array)); // [1, 3, 6, 9]

Récupérer un élément aléatoire au sein d’un tableau javascript en utilisant _.sample():

var array =  [1, 3, 6, 9];
console.log(_.sample(array)); // 6

Conclusion

Les éléments présentés dans cette liste englobent une bonne partie des manipulations nécessaires à l’utilisation des tableaux en javascript. Il existe plusieurs approches différentes pour réaliser une même chose. En rentrant dans les détails, certaines d’entre elles sont considérées, à juste titre, comme plus recommandable, mais dans les faits ceci dépend avant tout du besoin ainsi que des habitudes de développement. C’est pourquoi l’article n’est pas rentré dans ces détails.

Si vous avez des astuces ou des techniques complémentaires à cette liste, n’hésitez pas à en témoigner dans la section commentaire :-).

Photo Maxime Macé

Maxime Macé

Simple passionné de thématiques diverses et variées. J’apprécie enrichir mes connaissances dans les disciplines techniques comme l’informatique, les sciences et l’ingénierie, mais aussi dans les domaines merveilleux de la philosophie, l’art et la littérature.

Prenons contact

Vous souhaitez me contacter suite à la lecture de cet article ? Merci de renseigner votre adresse électronique et je vous recontacterai dans les plus brefs délais.

CV Ingénieur développeur informatique

CV Étudiant PhD Artificial Intelligence

Portfolio Artist designer