Javascript • Tableaux

Introduction

Dans cette série d’articles, nous allons faire un zoom sur les fonctionnalités de base de Javascript.

Cet article concerne les tableaux et les fonctions qui permettent de les manipuler.

Et comme ce blog traite aussi de .NET, nous verrons l’équivalent LINQ de chaque fonction.

Array

Un tableau en Javascript est un type d’objet qui permet de stocker une collection d’éléments. Contrairement à .NET, ces éléments n’ont pas nécessairement le même type de données.

Mixed Array

const mixedArray = [
  "ABC", // string
  (x, y) => x + y, // function
  null, // null
  -123, // number
  undefined, // undefined
  { name: "Bob" }, // object
  [ 7, "X" ], // array
  { height: 16, width: 32 } // object
];

Afin de simplifier, nous allons utiliser comme base de travail le tableau suivant.

Shapes Array

type Shape = {
  id: string,
  circle: string,
  heart: string,
  square: string,
};

const shapes: Shape[] = [
  { id: "blue", circle: "🔵", heart: "💙", square: "🟦" },
  { id: "orange", circle: "🟠", heart: "🧡", square: "🟧" },
  { id: "purple", circle: "🟣", heart: "💜", square: "🟪" },
  { id: "yellow", circle: "🟡", heart: "💛", square: "🟨" },
  { id: "green", circle: "🟢", heart: "💚", square: "🟩" },
  { id: "white", circle: "⚪", heart: "🤍", square: "⬜" },
];

id	circle	heart	square
blue	🔵	💙	🟦
orange	🟠	🧡	🟧
purple	🟣	💜	🟪
yellow	🟡	💛	🟨
green	🟢	💚	🟩
white	⚪	🤍	⬜

map()

En bref

id	circle	heart	square
blue	🔵	💙	🟦
orange	🟠	🧡	🟧
purple	🟣	💜	🟪
yellow	🟡	💛	🟨
green	🟢	💚	🟩
white	⚪	🤍	⬜

.map()

const hearts = shapes.map(shape => shape.heart);

💙
🧡
💜
💛
💚
🤍

En détail

Array.prototype.map()

const newArray = arr.map(projectionFn);

Array.prototype.map() est une fonction qui retourne un nouveau tableau qui contient tous les éléments du tableau initial transformés (ou projetés) par la fonction projectionFn.

projectionFn()

type projectionFn = (value: any, index: number, array: any[]) => any;

• value : valeur de l’élément du tableau initial
• index (facultatif) : index de l’élément du tableau initial
• array (facultatif) : tableau initial
• ⇒ nouvel élément qui sera ajouté au nouveau tableau

LINQ

Équivalence LINQ .NET : Select()

filter()

En bref

id	circle	heart	square
blue	🔵	💙	🟦
orange	🟠	🧡	🟧
purple	🟣	💜	🟪
yellow	🟡	💛	🟨
green	🟢	💚	🟩
white	⚪	🤍	⬜

.filter()

const filteredArray = shapes.filter(shape =>
  shape.circle === "🟠" || shape.square === "🟩"
);

id	circle	heart	square
orange	🟠	🧡	🟧
green	🟢	💚	🟩

En détail

Array.prototype.filter()

const newArray = arr.filter(predicateFn);

Array.prototype.filter() est une fonction qui retourne un nouveau tableau qui contient uniquement les éléments du tableau initial qui respectent la condition fixée par la fonction predicateFn.

predicateFn()

type predicateFn = (value: any, index: number, array: any[]) => boolean

• value : valeur de l’élément du tableau initial
• index (facultatif) : index de l’élément du tableau initial
• array (facultatif) : tableau initial
• ⇒ true si l’élément respecte la condition, sinon false

LINQ

Équivalence LINQ .NET : Where()

find()

En bref

id	circle	heart	square
blue	🔵	💙	🟦
orange	🟠	🧡	🟧
purple	🟣	💜	🟪
yellow	🟡	💛	🟨
green	🟢	💚	🟩
white	⚪	🤍	⬜

.find()

// → { id: "yellow", circle: "🟡", heart: "💛", square: "🟨" }
const foundElement = shapes.find(shape => shape.heart === "💛");

En détail

Array.prototype.find()

const foundElement = arr.find(predicateFn);

Array.prototype.find() est une fonction qui retourne le premier élément du tableau qui respecte la condition fixée par la fonction predicateFn. Si aucun élément n’est validé par predicateFn alors la fonction retourne undefined.

predicateFn()

type predicateFn = (value: any, index: number, array: any[]) => boolean

• value : valeur de l’élément du tableau initial
• index (facultatif) : index de l’élément du tableau initial
• array (facultatif) : tableau initial
• ⇒ true si l’élément respecte la condition, sinon false

LINQ

Équivalence LINQ .NET : FirstOrDefault()

some()

En bref

id	circle	heart	square
blue	🔵	💙	🟦
orange	🟠	🧡	🟧
purple	🟣	💜	🟪
yellow	🟡	💛	🟨
green	🟢	💚	🟩
white	⚪	🤍	⬜

.some()

// → true
const hasWhiteCircle = shapes.some(shape => shape.circle === "⚪");

// → false
const hasBlackSquare = shapes.some(shape => shape.square === "⬛");

En détail

Array.prototype.some()

const someElement = arr.some(predicateFn);

Array.prototype.some() est une fonction qui retourne true si au moins un élément du tableau respecte la condition fixée par la fonction predicateFn. Si aucun élément n’est validé par predicateFn alors la fonction retourne false.

predicateFn()

type predicateFn = (value: any, index: number, array: any[]) => boolean

• value : valeur de l’élément du tableau initial
• index (facultatif) : index de l’élément du tableau initial
• array (facultatif) : tableau initial
• ⇒ true si l’élément respecte la condition, sinon false

LINQ

Équivalence LINQ .NET : Any()

every()

En bref

id	circle	heart	square
blue	🔵	💙	🟦
orange	🟠	🧡	🟧
purple	🟣	💜	🟪
yellow	🟡	💛	🟨
green	🟢	💚	🟩
white	⚪	🤍	⬜

.every()

// true
const allNotEmptyHeart = shapes.every(shape => shape.heart != "");

// → false
const allPurpleCircle = shapes.every(shape => shape.circle === "🟣");

En détail

Array.prototype.every()

const everyElements = arr.every(predicateFn);

Array.prototype.every() est une fonction qui retourne true si tous les éléments du tableau respectent la condition fixée par la fonction predicateFn. Si un élément (ou plus) n’est pas validé par predicateFn alors la fonction retourne false.

predicateFn()

type predicateFn = (value: any, index: number, array: any[]) => boolean

• value : valeur de l’élément du tableau initial
• index (facultatif) : index de l’élément du tableau initial
• array (facultatif) : tableau initial
• ⇒ true si l’élément respecte la condition, sinon false

LINQ

Équivalence LINQ .NET : All()

sort()

En bref

id	circle	heart	square
blue	🔵	💙	🟦
orange	🟠	🧡	🟧
purple	🟣	💜	🟪
yellow	🟡	💛	🟨
green	🟢	💚	🟩
white	⚪	🤍	⬜

.sort()

shapes.sort((a,b) => a.id.localeCompare(b.id));

id	circle	heart	square
blue	🔵	💙	🟦
green	🟢	💚	🟩
orange	🟠	🧡	🟧
purple	🟣	💜	🟪
white	⚪	🤍	⬜
yellow	🟡	💛	🟨

localeCompare()

String.prototype.localeCompare() retourne un nombre indiquant si la chaine de caractères est :

• avant celle passée en paramètre ;
• après celle passée en paramètre ;
• identique à celle passée en paramètre.

L’ordre utilisé est l’ordre lexicographique de la locale courante. La locale représente la langue et sa déclinaison :

• fr-FR pour français de France ;
• fr-CA pour français du Canada ;
• en-GB pour anglais de Grande-Bretagne ;
• en-US pour anglais des États-Unis ;
• etc.

Cette fonction est donc parfaite pour trier des chaines de caractères dans un tableau.

En détail

Array.prototype.sort()

arr.sort(compareFn);

Array.prototype.sort() est une fonction qui tri le tableau en utilisant la fonction de comparaison compareFn. Elle retourne une référence du tableau initial (trié). Ainsi, elle ne retourne pas un nouveau tableau.

compareFn()

type compareFn = (a: any, b: any) => number

• a : valeur du premier élément
• b : valeur du second élément
• ⇒ un nombre qui :
  • est positif si a vient avant b (a → b) ;
  • est négatif si a vient après b (b → a) ;
  • est égal à zéro ou NaN si a et b sont considérés comme identiques.

Ainsi la fonction de comparaison :

• (a, b) => a - b permet de trier des nombres dans l’ordre croissant ;
• (a, b) => b - a permet de trier des nombres dans l’ordre décroissant.

toSorted()

Array.prototype.toSorted() est une fonction qui retourne un nouveau tableau trié à l’aide de la fonction de comparaison compareFn. Contrairement à toSort(), le tableau initial n’est pas affecté.

LINQ

Équivalence LINQ .NET :

• OrderBy()
• OrderByDescending()

Correspondances

Javascript	.NET
map	Select
filter	Where
find	FirstOrDefault
some	Any
every	All
sort, toSorted	OrderBy, OrderByDescending

Conclusion

Nous avons vu ensemble les principales fonctions de manipulation de tableau proposées par Javascript. Elles nous permettent d’effectuer les táches les plus courantes.

En savoir plus

La documentation MDN sur les tableaux détaille toutes les fonctions proposées par Javascript.