JavaScript

Tableaux et programmation fonctionnelle

Raconté par Vincent Jugé
sur la base d'un cours créé par Rémi Forax

Méthodes sur les tableaux

indexOf/lastIndexOf

indexOf() utilise == pour trouver la première occurence d'un élément et renvoie son index (ou -1).
lastIndexOf() utilise == pour trouver la dernière occurence d'un élément et renvoie son index (ou -1).

const array = ['h', 'e', 'l', 'l', 'o'];
array.indexOf('l');
array.indexOf('z');
array.lastIndexOf('l');
array.lastIndexOf('z');

indexOf via une boucle (1/2)

Si on trouve le résultat, on peut arrêter la boucle.

const indexOf = function(array, value) {
  for(let i = 0; i < array.length; i++) {
    if (array[i] == value) {
      return i;
    }
  }
  return -1;
};
const array = ['h', 'e', 'l', 'l', 'o'];
console.log(indexOf(array, 'e'));
console.log(indexOf(array, 'l'));
console.log(indexOf(array, 'z'));

indexOf via une boucle (2/2)

Ne jamais sortir d'une boucle en changeant un drapeau !

const indexOf = function(array, value) {
  let i = 0;
  for(let found = false; i < array.length && !found; i++) {
    found = (array[i] == value);
  }
  return (i == array.length) ? -1 : i;
};
const array = ['h', 'e', 'l', 'l', 'o'];
console.log(indexOf(array, 'e'));
console.log(indexOf(array, 'o'));

join

join(delimiteur) permet de créer une chaîne de caractères avec tous les éléments séparés par un délimiteur.

const array = [1, 2, 5, 8];
array.join(",");
array.join(" ");

split

split(delimiteur) permet de créer un tableau
à partir d'une chaîne de caratères en découpant
suivant le délimiteur.

const text = "1, 2, 5, 8";
text.split(",");
text.split(", ");

text.split() est le dual de array.join().

Tableaux dynamiques (1/2)

push() permet d'ajouter un élément à la fin d'un tableau.

const range = function(start, end) {
  let array = [];
  for(let i = start; i < end; i++) {
    array.push(i);
  }
  return array;
};
console.log(range(2, 5));

Tableaux dynamiques (2/2)

On peut aussi ajouter un élément en case array.length du tableau array.

const range = function(start, end) {
  let array = [];
  for(let i = start; i < end; i++) {
    array[array.length] = i;
  }
  return array;
};
console.log(range(2, 5));

Pile

Il existe également une méthode pop() qui retire le dernier élément permettant d'utiliser un tableau comme une pile.

let stack = [];
stack.push('a');
stack.push('b');
stack.push('c');
const value = stack.pop();
console.log(value);
console.log(stack);

Élément en tête

shift() décale les éléments vers la gauche
et supprime (et renvoie) le premier élément.
unshift(elt) décale les éléments sur la droite
et insère l'élément elt à gauche
(et renvoie la longueur du tableau obtenu).

let array = ['a', 'b', 'c', 'd'];
array.shift();
array;
array.unshift('e');
array;

Ces deux méthodes ont un temps d'exécution qui dépend du nombre d'éléments.

Sous-partie d'un tableau

slice(start, end) permet d'extraire la sous-partie [start, end[ d'un tableau sous forme d'un nouveau tableau.

const array = ['a', 'b', 'c', 'd', 'e'];
array.slice();
array.slice(1);
array.slice(2, 4);

Contrairement aux méthodes précédentes, slice ne modifie pas le tableau sur lequel on appelle la méthode mais renvoie un nouveau tableau.

Suppression/Insertion au milieu

splice(start, deleteCount, elements) supprime
deleteCount éléments à partir de l'index start
et les remplace par des elements.

let array1 = ['a', 'b', 'c', 'd', 'e'];
array1.splice(1, 2);
console.log(array1);
let array2 = ['a', 'b', 'c', 'd', 'e'];
array2.splice(2, 1, 'c3po', 'd2r2');
console.log(array2);

Attention à ne pas confondre slice et splice !

Trier un tableau (1/2)

La fonction sort() permet de trier un tableau sur place.

let array = ['vera', 'bob', 'elena'];
array.sort();
array;

Trier un tableau (2/2)

Par défaut, les comparaisons se font sur les chaînes de caractères.

let array = [1, 10, 2, 100];
array.sort();
array;

Ce n'est pas forcément ce que l'on veut !

Trier avec une fonction de comparaison

On utilise une fonction de comparaison
pour paramétrer sort(fun) !

const cmp = (v1, v2) => v1 - v2;
let array = [1, 10, 2, 100];
array.sort(cmp);
console.log(array);

Fonction de comparaison

L'appel à la fonction cmp(v1,v2) doit renvoyer :

une valeur strictement négative si v1 < v2 (v1 doit aller à gauche de v2)

une valeur strictement positive si v1 > v2 (v1 doit aller à droite de v2)

0 si v1 = v2.

const cmp = (v1, v2) => v2 - v1;
let array = [1, 10, 2, 100];
array.sort(cmp);
console.log(array);

Fonction anonyme

Évidemment, on peut passer notre fonction directement en argument.

let array = [1, 10, 2, 100];
array.sort((v1, v2) => v1 - v2);
console.log(array);

closure et boucle (1/2)

On peut mettre des fonctions dans un tableau…

let array = [];
for(let i = 0; i < 3; i++) {
  array.push(
    () => {console.log(i);}
  );
}
for(let j = 0; j < 3; j++) {
  array[j]();
}

closure et boucle (2/2)

mais gare à quiconque utilise let trop tôt !

let array = [];
let i;
for(i = 0; i < 3; i++) {
  array.push(
    () => {console.log(i);}
  );
}
for(let j = 0; j < 3; j++) {
  array[j]();
}

La même variable i est utilisée par toutes les closures !

forEach

forEach(fun) applique la même fonction à chaque valeur.
C'est comme une boucle, mais sans écrire la boucle !

const array = [1, 2, 5, 6, 7];
array.forEach(v => console.log(v));

map

map(fun) applique la même fonction à chaque valeur dans un nouveau tableau.

const array = [1, 2, 5, 6, 7];
const array2 = array.map(v => 2 * v);
console.log(array2);

filter

filter(fun) permet d'obtenir un tableau de valeurs respectant une propriété (un prédicat).

const array = [1, 2, 5, 6, 7];
const array2 = array.filter(v => v % 2 == 0);
console.log(array2);

some/every

some renvoie true dès qu'une valeur vérifie la propriété.
every renvoie true si toutes les valeurs vérifient la propriété.

const greaterThan10 = v => v > 10;
const array = [12, 32, 4];
console.log(array.some(greaterThan10));
console.log(array.every(greaterThan10));

et les index ?

Les méthodes forEach, map, filter, some et every prennent une fonction avec 2 arguments (élément, index) en paramètres.

const array = [1, 7, 14, 55];
array.map((e, index) => index);
array.some((e, index) => (index >= 2 && e <= 15));
array.filter((e, index) => index >= 2);
array.every((e, index) => (index >= 2 && e <= 15));

En JavaScript, une fonction peut prendre moins de paramètres que d'arguments !

reduce

reduce(fun, init) résume par une valeur en appliquant une fonction d'agrégation qui lit le tableau de gauche à droite.

const array = [1, 2, 5, 6, 7];
const sum = array.reduce(
  (acc, v) => acc + v,
  0);
console.log(sum);

Le premier argument de fun doit toujours être l'accumulateur !

filter/map/reduce

Il est possible de combiner les opérations : par exemple, compter le nombre de mots commençant par 'b'.

const array = ['foo', 'bar', 'baz'];
const count = array.
  filter(s => s.charAt(0) == 'b').
  map(s => 1).
  reduce((v1, v2) => v1 + v2, 0);
console.log(count);

Tableau vs HTMLCollection

Ces fonctions ne sont pas définies pour les HTMLCollection !

const section = document.getElementById("js-html-collection");
const array = [...section.children];
array.forEach(s => console.log(s.tagName));
section.children.forEach(s => console.log(s.tagName));