Tableaux

Définition : Les tableaux servent à stocker un ensemble d'éléments de manière ordonnée. Ils sont gérés par l'objet Array.

Création

Il existe plusieurs moyens pour créer un objet Array.

En utilisant le constructeur

var fruits = new Array();

fruits =

Le tableau est initialisé avec une liste d'élements passés en argument du constructeur

var fruits = new Array("banane", "ananas");

fruits =

Attention, si le seul argument est un entier n alors le tableau est crée avec n éléments vides (empty slot) et les éléments sont de type indefini (undefined)

var fruits = new Array(5);

fruits =

En utilisant la syntaxe literale

La syntaxte literale utilise des crochets [ et ]

var fruits = ["cerise", "abricot"];

fruits = ""

Indice

Les éléments d'un tableau sont identifiés par leur position appelé indice à l'intérieur du tableau. Le premier indice d'un tableau est 0. Pour un tableau de taille 5 le dernier élément est positionné à l'indice 4.

fruits[1] = ""

Il est possible d'ajouter et d'étendre un tableau en spécifiant une valeur à un indice quelconque.

fruits[10] = "kiwi";

fruits.length =
fruits[9] =
fruits[10] =

Les éléments ajoutés pour combler l'intervalle sont indéfinis.

Variable et constante

Un tableau défini en tant que constante const ne peut pas être redéfini, mais ses éléments peuvent être modifiés, ajoutés, retirés.

const panier = new Array("cerise", "abricot");
panier[1] = "banane";
panier[2] = "pomme";
panier.shift();

panier =

Si on tente de redéfinir l'objet.

panier = new Array("banane", "pomme");

panier =

Extraction

Il est possible lors de la définition d'une variable tableau de nommer les éléments à l'intérieur pour pouvoir extraire les valeurs indépendamment

const position = new Array(48.6, 6.52)
const [latitude, longitude] = position;

latitude = 48.6
longitude = 6.52

Caractéristiques

• Les éléments sont restitués dans l'ordre dans lequel ils ont été placés dans le tableau
• Chaque élément est repéré par sa position, appelé indice, dans le tableau.
• Un même élément peut être présent à plusieurs reprises dans le tableau.
• Le premier élément est placé l'indice 0. On peut s'en souvenir en pensant que l'indice est le décalage par rapport à l'entrée du tableau. Le premier élément est à l'entrée du tableau donc sans décalage, 0 position de décalage.
• Les élements peuvent être de nature différentes.

Un même élément peut être présent à plusieurs reprises dans le tableau.

const fruits = ["orange","banane","cerise","fraise","ananas",
    "pomme","pêche","abricot","poire","pomme","raisin"];

var user1 = { nom:"Einstein", prenom:"Albert" };
var user2 = { nom:"Curie", prenom:"Marie" };
var users = [ user1, user2, user1 ];
  
users[0].prenom = "Lucien";

users =

C'est bien 2 fois le même objet, la même référence à une zone mémoire, qui est présent dans le tableau.

Les élements peuvent être de nature différentes.

var tableau = new Array("Un grand savant", { nom:"Einstein", prenom:"Albert" }, 
    42, ["1879", "1955"], function(m, c) { return  m*c**2 });    

tableau =

typeof tableau[0] =
typeof tableau[1] =
typeof tableau[2] =
typeof tableau[3] =
typeof tableau[4] =

Propriétés

length

La propriété length indique le nombre d'éléments contenu dans le tableau.

const fruits = ["banane", "pomme"];
fruits[4] = "orange";

fruits.length

fruits.length =

Enumération

Il existe plusieurs moyens pour parcourir et itérer sur toutes les valeurs d'un tableau

Avec une boucle for

for(let i = 0 ; i < fruits.length ; i++)
{
  document.write(fruits[i]);
}

Avec une fonction passée à la fonction forEach du tableau

fruits.forEach(function(fruit) {
  document.write(fruit);
});

Avec une itération for of sur les éléments

for(fruit of fruits) {
  document.write(fruit);
});

Avec une itération for in sur les indices

for(indice in fruits) {
  document.write(indice);
});

Les clés

La fonction keys retourne un tableau contenant comme valeurs, les indices du tableau.

for (const key of fruits.keys()) {
  document.write(key);
}

la fonction values retourne un tableau contenant les valeurs du tableau. Cette fonction n'est pas très utiles en l'état

for (const value of fruits.values()) {
  document.write(value);
}

for (const [key, value] of fruits.entries()) {
  document.write(key + " : " + value);
}

Opération sur les tableaux

push

Ajoute un élément au tableau.

fruits.push("framboise");

fruits.length =
fruits =

pop

Extrait et retire le dernier élément du tableau.

var fruit = fruits.pop();

fruit =
fruits.length =
fruits =

shift

Retire le premier élément du tableau.

var fruit = fruits.shift();

fruit =
fruits.length =
fruits =

unshift

Ajoute un ou plusieurs élément au début du tableau.

fruits.unshift("mûre", "groseille"); 

fruits.length =
fruits =

concat

La fonction concat concatène 2 tableaux dans un 3e. Elle ne modifie pas le tableau en cours. Il faut réassigner la variable si on veut la conserver

fruits = fruits.concat(["citron", "pomélo", "mandarine"]);

fruits.length =
fruits =

Décomposition

L'opérateur spread noté ... permet d'étendre un tableau en lieu et place de plusieurs arguments (pour les appels de fonctions) ou de plusieurs éléments (pour les littéraux de tableaux).

La fonction unshift prend en paramètres une liste de valeurs séparées par des virgules. Si on veut ajouter un tableau il faut décomposer celui-ci en une liste de valeur sinon nous aurons un élément tableau dans un tableau.

var ajout = ["poire", "mirabelle"]
fruits.unshift(...ajout); 

fruits.length =
fruits =

Copie d'un tableau

Copie superficielle

Une copie superficielle shallow copy copie l'adresse des objets originaux. Une modification dans l'original affecte la copie.

var fruits = new Array("pomme", "banane");
var copie = fruits;
fruits[1] = "framboise";

copie[1] =

Copie profonde

Une copie profonde deep copy duplique la source des éléments pour créé un nouveau tableau. Les éléments ne partage plus la même zone mémoire et sont indépendant. Il faut utiliser l'opérateur de décomposition pour extraire les valeurs et les réinjecter dans le constructeur de l'objet tableau.

var fruits = new Array("pomme", "banane");
var copie = new Array(...fruits);
fruits[1] = "framboise";

copie[1] =

Attention Shallow copy pour tous les objets sauf pour String, Number et Boolean (Deep Copy)

Tri

reverse

Inverse l'ordre des éléments

var fruits = ["mirabelle","mûre","groseille","pomme","orange","citron","pomélo","mandarine"];
fruits.reverse();

sort

fruits.sort();

Le tableau est trié sur place il faut le copier d'abord si on veut conserver l'original

Recherche

includes

Indique si un élément est présent dans le tableau, peu importe sa position.

var fruits = ["mirabelle","mûre","groseille","pomme","orange","citron","pomme","mandarine"];
fruits.includes("pomme");

fruits.includes("pomme") =

indexOf

Indique quelle est la position de l'élément dans le tableau. Si il y en a plusieurs, c'est la position du premier qui est retourné

fruits.indexOf("pomme");

fruits.indexOf("pomme") =

Attention à l'index 0 qui est équivalent à faux alors que l'élément a été trouvé en toute première position !

lastIndexOf

Indique quelle est la position de l'élément dans le tableau. Si il y en a plusieurs, c'est la position du dernier qui est retourné

fruits.lastIndexOf("pomme")

fruits.lastIndexOf("pomme") =

Extraire et remplacer

slice

La méthode slice() renvoie un tableau, contenant une copie superficielle (shallow copy) d'une portion du tableau d'origine, la portion est définie par un indice de début et un indice de fin (exclus). Le tableau original ne sera pas modifié.

var fruits = ["mirabelle","mûre","groseille","pomme","orange","citron","pomme","mandarine"];
var extrait = fruits.slice(2, 5) 

extrait =

splice

La méthode splice() modifie le contenu d'un tableau en retirant des éléments et/ou en ajoutant de nouveaux éléments à même le tableau. On peut ainsi vider ou remplacer une partie d'un tableau.

Le premier paramètre indique l'indice de départ, le deuxième le nombre d'élements à supprimé et ensuite vient une liste (qui peut être vide) d'élément à insérer

var fruits = ["mirabelle","mûre","groseille","pomme","orange","citron","pomme","mandarine"];
fruits.splice(2, 2, 'poire'); 

fruits =

Fonctions sur les tableaux

Ces fonctions spéciales prennent en paramètre un fonction qui sera évaluée pour chaque élément du tableau. Cela permet une grande personnalisation dans le traitement.

Tri personnalisé

Array.sort(__function expression__)

La fonction sort() crée et retourne un nouveau tableau contenant tous les éléments du tableau d'origine triés. Le tir s'éffectue suivant le résultat de la fonction définie en paramètres et ontenant une expresion de fonction .

La fonction expression prend en paramètres 2 éléments du tableau et doit retourner un nombre négatif si le premier élément est avant le deuxième, 0 si les 2 élements sont au même rang et positif si le premier élément est après le deuxième.

tableau.sort((eltA, eltB) => eltA - eltB)

Le résultat de la soustraction correspond bien au résultat que l'on veut pour le tri.

Filtre sur un tableau

Array.filter(__expression function__)

La méthode filter() crée et retourne un nouveau tableau contenant tous les éléments du tableau d'origine qui remplissent une condition déterminée par la fonction expression.

La condition est-elle remplie au moins une fois

Array.some(__expression function__)

La condition est-elle satisfaite pour tous les éléments

Array.every(__expression function__)

find()

Le patron de conception Map, Filter, Reduce

Map, Filter, Reduce est un modèle de conception (pattern) qui implémente des fonctions qui opèrent sur des séquences de données.

Map

Map applique une fonction unaire à chaque élément de la séquence et renvoie une nouvelle séquence contenant les résultats, dans le même ordre.

Array.map(__expression function__);

filter()

Reduce()

Reduce combine les éléments de la séquence ensemble, en utilisant une fonction binaire. Un accumulateur est passé d'éléments en éléments qui permet d'ajouter (accumuler) les valeurs une à une. Le résultat final est une seule et unique valeur.

Array.reduce(__expression function__);

L'intérêt de ces fonctions est de pouvoir les chainer et combiner pour effectuer en une seule ligne plusieurs opération.

Array.filter(__expression function__).map(expression).reduce(__expression function__);

Utilisation de reduce pour sélectionner une ligne suivant un critère

Array.reduce(function (select, current) {
  return current > select ? current : bts;
});

• Array.from()

• Array.isArray()

• Array.observe()

• Array.of()

• Array.prototype.copyWithin()

• Array.prototype.fill()

• Array.prototype.

• Array.prototype.forEach()

• Array.prototype.join()

• Array.prototype.reduceRight()

• Array.prototype.toLocaleString()

• Array.prototype.toSource()

• Array.prototype.toString()

• Array.prototype@@iterator

• Array.unobserve()

• get Array[@@species]

• Array.prototype.includes()

• Array.prototype.findIndex()

https://dmitripavlutin.com/how-three-dots-changed-javascript/

:shallow copy copie superficielle

:deep copy copie profonde