JavaScript > Les tableaux

CRÉER UN TABLEAU

var tableauVide = []

 

var mixed = [false, 2.70, "Hello"]

 

var suffix = "tree";
var trees = ["Oak" + suffix, "Elm" + suffix];

 

// 2 dimensional array with object literals

var array2 = [[1,{x:1, y:2}], [2, {x:3, y:4}]];

 

// the 3rd element is undefined

var colors = ["Red", "Green", undefined];

 

// no value in the 1st element, it is undefined

var hobbies = [,"Art"];

ACCÉDER A UN ÉLÉMENT

converti toute expression entre [] en chaine. In the next example, 0, 1, and 2 are converted to "0″, "1″, and "2″ respectively:

var days = ["Sunday", "Monday"]; // an array with 2 elements
days[2] = "Tuesday";             // writes element 3

 

var x = tab[i] // Tableau simple
var x = tab["un"] // Tableau associatif

 

Tous les éléments :

for( let cle in tab){
   console.log( cle + " = " + tab[cle] )
}

 

On peut transformer un tableau associatif en tableau simple :

var a3 = Object.keys(t).map( function (k) { return t[k]; } ) → 1,2,3

 

 

Parcourir un tableau "troué" :

 

var pinkfloyd = []
pinkfloyd[1] = "Waters"
pinkfloyd[3] = "Wright"
cars["six"] = "Barret"
for (let i = 0; i < pinkfloyd.length; i++) {
   // pinkfloyd[i]  => undefined, Waters, undefined, Wright
}
// Pour éviter les éléments undefined
for (var i = 0; i < pinkfloyd.length; i++) {
   if (pinkfloyd[i] === undefined)
      continue
   alert(pinkfloyd[i]) //  => Waters, Wright
}

 

NOTE : l’élément avec la clé "six" n’apparait pas dans la loop. Pour le voir :

 

var cars = []
cars[1] = "Ford"
cars[3] = "BMW"
cars["six"] = "Honda"
for (let i in cars) {
   alert(cars[i])  // Ford, BMW, Honda
}

 

Pour voir les éléments appear in numerical order, don’t trust the for-in loop. They can appear in any order. Secondly, the for-in loop not only returns all array properties (elements), but it also returns the properties that are inherited through the prototype chain.

With both the length property and the for-in loop being somewhat peculiar, it is best to always use numeric index values starting with 0 going up. In that case arrays will behave similar to most other languages and the length property as well as the for-loop will work as you would expect. Here is an example:

var cars = []
cars[0] = "Ford"
cars[1] = "BMW"
cars[2] = "Honda"
alert(cars.length) // => 3
for (var i = 0, len = cars.length; i < len; i++) {
   alert(cars[i])  // => Ford, BMW, Honda
}

Tableaux multi-dimensionnet

var twoDim = [];
for (var row = 0; row < 5; row++) {
   var oneDim = []
   for (var col = 0; col < 5; col++) {
      oneDim[col] = (row === col) ? 1 : 0 // 0 or 1 (diag)
   }
   twoDim[row] = oneDim
}
alert(twoDim[4][2]) // => 0
alert(twoDim[3][3]) // => 1

 

The last two statements also demonstrate how you would access elements in a 2-dimensional array: simply use the [] operator twice, the first for the row and second for the column index

TAILLE D’UN TABLEAU

var nb = ["un", "deux"]
nb.length // => 2
var pinkfloyd = []
pinkfloyd[1] = "Waters"
pinkfloyd[3] = "Wright"
// pinkfloyd.length =>  4
pinkfloyd["six"] = "Barret";
// pinkfloyd.length => still returns 4

TRIER UN TABLEAU

tableau simple :

 

var tab = new Array( "Pommes" , "Poires" , "Ananas" , "Cerise" , "Abricot" )

 

tab.sort() // Abricot, Ananas, Cerise, Poires, Pommes

 

tab.reverse() // Pommes, Poires, Cerise, Ananas, Abricot

 

tableau associatif :

 

Pour avoir les clés par ordre alphabétique (www.xul.fr/ecmascript/array-pieges.php) :

 

function ksort(ob){
   var k = Object.keys(ob)
   var cl = {}
   for( var i in ob ) {
      cl[i] = ob[i]
      delete ob[i]
   }
   k.sort() ;
   for( var i = 0 ; i < k.length ; i++ ) {
     ob[ k[i] ] = cl[ k[i] ]
   }
}
var ad = { "z" : 50 , "c" : 30 , "a": 5 }
ksort(ad) ;
for ( var x in ad ) {
   console.log(x)
}

COPIER UN TABLEAU

Copier tab1 dans tab2 :

var tab1 = new Array( 'toto' , 'foo' , 'bar' )
var tab2 = new Array()
for ( let i = 0 ; i < tab1.length ; i++ ){
     tab2[i] = tab1[i]
}

Copier une partie d’un tableau

tab2 = tab1.slice( début , fin )

 

Copie de tab1 compris entre début(inclus) et fin(non inclus, et peut ne pas être renseigné).

 

slice.( 0 , tab1.length ) → le tableau entier

slice.( 0 , -1 ) → le tableau moins le dernier élément

JOINDRE DEUX TABLEAUX

tab3 = tab1.concat(tab2)

VIDER UN TABLEAU

tab = []

INSÉRER UN ÉLÉMENT

Tableau simple

à la volée : tab = new Array( ‘un‘ , ‘deux‘, ‘trois‘ ) ;

par index : tab[index] = valeur ;

à la fin du tableau : tab.push( ‘toto‘ ) ;

au début du tableau : tab.unshift( ‘toto‘ ) ;

Tableau associatif

à la volée : tab = { "un" : 1 , "deux" : 2 , "trois": 3 }

par clé : tab["clé"] = valeur

par attribut :

var tab = new Object()
tab.un = 1
tab.deux = 2
tab.trois = 3

SUPPRIMER UN ÉLÉMENT

var y = tab.pop() Retourne le dernier élément et l’enlève du tableau

var x = tab.shift() Retourne le premier élément et l’enlève du tableau

 

Array splice( pos , nombre , e0, e1, ... )

 

A partir de la position pos, supprime le nombre d’éléments et insère, en option, les éléments de la liste (e0, e1).

Avec splice, le contenu du tableau lui-même change. La méthode retourne dans un tableau le ou les éléments supprimés.

 

NOMBRE D’ÉLÉMENTS

Tableau simple :

var x = tab.length

 

Tableau associatif

 

METHODE 1 : Il faut créer une méthode à Object :

Object.size = function(tab){
   var size = 0 ;
   for (var cle in tab){
      if (tab.hasOwnProperty(cle)) size++
   }
   return size ;
};

On obtient le nombre d’éléments ainsi : var x = Object.size(x) → 3

 

METHODE 2 : avec la méthode keys :

Object.keys(tab).length

La méthode keys retourne un tableau de l’ensemble des attributs (donc des clés), et on applique l’attribut length:

 

var tab = { "un" : 1 , "deux" : 2 , "trois" : 3 }
Object.keys(tab).length → 3

POSITION (index) D’UN ÉLÉMENT

tableau.indexOf( valeur , début

 

Retourne la position du premier élément dont la valeur vaut valeur, dans le tableau tableau.

 

Si début est renseigné, alors à partir du début élément jusqu’à la fin du tableau. Si début est négatif, commence à partir du (fin_du_tableau - début)ème élément jusqu’à la fin du tableau.

 

exemple :

 

var tab = ( 'toto' , 'foo' , 'bar' )
var position = tab.indexOf('foo') ; → 2

 

Renvoie -1 si l’élément n’est pas trouvé : tab.indexOf(‘blabla‘) ; → -1

 

lastIndexOf(valeur)retourne l’index à partir de la fin.

SUPPRIMER LES DOUBLONS

code trouvé sur www.unicoda.com/?p=579

function suppDoublons(tab) {

   var i , j , len = tab.length , out = [] , obj = {}

   for ( i = 0 ; i < len ; i++ ){
      obj[tab[i]] = 0
   }

   for (j in obj) {
      out.push(j)
   }

   return out

}

 

Exemple :

var nbr = [42, 101010, 7, 42, 7, 42, 101010];
var newNbr = suppDoublons(nbr); → [ "42" , "101010" , "7" ]

TRANSFORMER UNE CHAÎNE EN TABLEAU

var tab1 = "toto , foo - bar"
var reg = new RegExp( "[ ,-]+" , "g" ) ;
var tab2 = tab1.split(reg) ;

for( var i = 0 ; i < tab2.length ; i++ ){
   tab2[i] ;
}

TRANSFORMER UN TABLEAU EN CHAÎNE

VAR = tab.join("-") // Les éléments sont séparés par - (optionnel)
String toString() // Comme join() mais avec virgule comme séparateur obligé.

COMPARER DEUX TABLEAUX

Savoir si deux tableaux sont identiques

Pour savoir si deux tableaux sont identiques, il faut les transformer en chaine :

if ( tab1.join() == tab2.join() )

 

.find()

find() retourne le premier élément d’un tableau respectant la condition via une fonction passée en paramètre. Sinon, undefined est retourné:

var numbers = [1, 2, 3, 4, 5, 6]
let estPair = function (n){
   return n % 2 === 0
}
let firstEven = numbers.find(estPair) //2

.findIndex()

findIndex() comme find sauf qu’elle retourne l’index du premier élément à la place de l’élément lui même. Si aucun element ne satisfait le critère, -1 est retourné.

const numbers = [1, 2, 3, 4, 5, 6];
let estPair = function (n) {
return n % 2 === 0;
};
let firstEvenIndex = numbers.findIndex(estPair); //1

.entries()

retourne un nouvel itérateur (Array Iterator) qui contient les clés/valeurs pour chaque index du tableau.

const arr = ['a', 'b', 'c'];
for (let item of arr) {
   console.log(item); // => 'a' 'b' 'c'
}
for (let pair of arr.entries()) {
   console.log(pair); // => [0, 'a'] [1, 'b'] [2, 'c']
}

keys()

retourne un nouvel itérateur ( Iterator) contenant les clés pour chaque index du tableau.

const arr = [1, 2, 3]
const arrIterator = arr.keys()
let nextVal
while (nextVal = arrIterator.next().value) {
   console.log(nextVal)
}
// => 1
// => 2
// => 3

.of()

créé une nouvelle instance d’un tableau contenant les valeurs passés en paramètres, quelque soit le type ou le nombre de paramètres.

Array.of(1); // => [1]
Array.of(1,2,3); // => [1,2,3]

.from()

créé une nouvelle instance d’un tableau à partir d’un objet assimilés à un tableau array-like (comme arguments ou des noeuds du DOM) ou d’un objet iterable.

On peut utiliser Array.from() depuis arguments, des éléments du DOM, Map, Set, String…

 

// Array-like object (arguments) to Array
function f() {
   return Array.from(arguments)
}
f(1, 2, 3)
// [1, 2, 3]
// Any iterable object...
// Set
var s = new Set(["foo", window]);
Array.from(s)
// ["foo", window]
// Map
var m = new Map([[1, 2], [2, 4], [4, 8]]);
Array.from(m)
// [[1, 2], [2, 4], [4, 8]]
// String
Array.from("foo")
// ["f", "o", "o"]
// Using an arrow function as the map function to
// manipulate the elements
Array.from([1, 2, 3], x => x + x)
// [2, 4, 6]
// Generate a sequence of numbers
Array.from({length: 5}, (v, k) => k)
// [0, 1, 2, 3, 4]

.includes() : retourne un booleen indiquant un élément est contenu dans du tableau.

.unobserve(): fonctionne de la même façon que pour .observe pour observer les modifications effectuées sur le tableau.

———

 

SUPPRIMER UN ELEMENT

delete() n’affecte pas la taille du tableau. Ainsi, il y aura des trous dans le tableau et les autres éléments garderont leur index.

var days = ["Sunday", "Monday", "Tuesday", "Wednesday"]
delete days[2]      // => delete the element at index 2
alert(days[2])      // => undefined
alert(days.length)  // => still 4

 

splice() ne crée pas de trous dans le tableau et ainsi, les autres éléments auront leur index modifié.

splice()

Le premier argument of splice() specifies the ordinal position at which the operation is to start. The required second argument specifies the number of elements to delete. The method operates on the array at hand and the return value consists of the array elements deleted.

In the following example the first splice indicates to begin the operation at index 5 and length 2. When the operation completes, the elements f and g have been removed. The second splice indicates a starting position of 2 and length 1. After the operation completes, the letters array has these elements left: a, b, e.

var letters = ["a","b","c","d","e","f","g"]
alert(letters.splice(5, 2))   // => f, g (deleted elements)
alert(letters)                // => a, b, c, d, e
alert(letters.splice(2, 1))   // => c  (the deleted element)
alert(letters)                // => a, b, d, e

 

Using the third argument and higher, the splice method can also be used to replace one or more elements with others. In the example below, the splice starts at position 1 and deletes two elements. Next it replaces the gap with the three elements provided: e, f, g. The final array has 5 elements.

var letters = ["a","b","c","d"]
alert(letters.splice(1, 2, "e", "f", "g")) // => b, c (deleted ones)
alert(letters)                             // => a, e, f, g, d

 

splice() permet aussi d’injecter de nouveaux éléments sans deleting existing ones. Simply specify a 0 for the second argument, like so:

var letters = ["a","b","e"]
alert(letters.splice(2, 0, "c", "d"))   // => no elements returned
alert(letters)                          // => a,b,c,d,e

push() et pop()

push() ajoute un ou plusieurs éléments à la fin du tableau et incrémente ainsi sa taille. pop() efface le dernier élément et décrémente sa taille.

var tab = ["A"]
tab.push("B", "C") // => 3
tab                // => Monday, Tuesday, Wednesday
tab.pop()          // => Wednesday
tab                // => Monday, Tuesday
tab.push("D")      // => 3
tab                // => Monday, Tuesday, Wednesday

Avec push() et pop(), on peut donc faire du LIFO (last in, first out).

unshift() et shift()

unshift() insère un ou plusieurs éléments au début du tableau, décale les autres éléments, incremente la taille du tableau. shift() retire le premier élément, décale les autres éléments et décrémente la taille du tableau.

var tab = ["A"]
tab.unshift("B", "C") // => 3
tab         // => A, B, Cy
tab.shift() // => 
tab.shift() // => Tuesday
tab         // => Wednesday

Avec unshift() et shift(), on peut donc faire du FIFO (first in, first out).

filter()

Array method reduce() is an accumulator method that iterates over the elements of the array, from left to right, and reduce it to a single value.

The first argument in reduce() is the callback function and the second optional argument is the initial value. The callback function accepts 4 arguments, of which the first 2 are the previous value and the current value. This is best explained with an example.

Say we have a numeric array and we wish to get the sum of all elements. This is how you would do it with reduce():

var values = [2, 4, 6]
var sum = values.reduce(function(prev, curr) {
      return prev + curr
   },
   0  // initial value
)
alert(sum)  // => 12

When the first callback call is made, the arguments passed to the callback function are 0 (the initial value and second argument to reduce() and 2 (the first element of the array). The function returns 0 + 2 = 2. In the second call, the 2 and 4 are passed and 2 + 4 = 6 is returned. In the last call, 6 and 6 are passed and the final result 12 is returned.

The second argument to reduce() is optional. Had you omitted the 0 in the example above, the first and second elements of the array would have been passed to the function, which also works.

map()

map() is used to change each element in the array and return a new array with the modified elements. For example, you could use map to iterate over an array with numbers and then create a new array in which each element is double the value of the original array. The array returned is of the same length as the original array.

Here’s how map() works. Each element of the array on which map() is invoked is passed to a callback function you pass into to map() as an argument. The values returned by the callback are returned in a new array, which is called double in our example below. The original array with the name values on which map() is invoked, is not modified. Since an array is an object, you can also add function methods directly in an array itself.

var values = [1, 2, 3, 4, 5]
alert(values.length) // => 5
var double = values.map( function (value) {
     return 2 * value
});
double         // => 2, 4, 6, 8, 10
double.length  // => 5

Ainsi, les deux tableaux ont la même taille. Si le tableau A contient des trous, alors le tableau B en aura aussi.

 

—

 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

.map()

crée un nouveau tableau alimenté par les retours de la fonction appelé par map() :

let newArray = arr.map(callback(currentValue, index, array) {
   // ajoute l'élément à newArray, après avoir fait des trucs
}, thisArg)

callback Fonction appelée pour chaque élément de arr. Each time callback executes, the returned value is added to newArray.

currentValue La valeur de l’élément courant.

index Optional L’index de l’élément courant.

array Optional The array map was called upon.

thisArg Optional Valeur à renvoyer si undefined est renvoyé.

 

EXEMPLES

 

Mappé le tableau de nombres avec un tableau de leurs racines carrés

let nb = [1, 4, 9]
let roots = nb.map(function(num) {
    return Math.sqrt(num)
})
// roots vaut [1, 2, 3]

 

The following code takes an array of objects and creates a new array containing the newly reformatted objects.

let kvArray = [{key: 1, value: 10},
               {key: 2, value: 20},
               {key: 3, value: 30}]

let nouveau = kvArray.map(obj => {
   let rObj = {}
   rObj[obj.key] = obj.value
   return rObj
})
// nouveau vaut [{1: 10}, {2: 20}, {3: 30}],

// kvArray is still:
// [{key: 1, value: 10},
//  {key: 2, value: 20},
//  {key: 3, value: 30}]

 

Liste des codes ASCII de chaque caractère d’un chaine :

let a = Array.prototype.map.call('Hello World', function(x) {
   return x.charCodeAt(0)
})
// a now equals [72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100]

 

Comment itérer des objets récoltés avec querySelectorAll.Ici, we return all the selected options’ values on the screen:

let elems = document.querySelectorAll('select option:checked')
let val = Array.prototype.map.call(elems, function(obj) {
  return obj.value
})

Ce serait plus facile avec .from()

 

Mappé sur un tableau qui contient des undefined :

let numbers = [1, 2, 3, 4]
let filteredNumbers = numbers.map(function(num, index) {
  if (index < 3) {
     return num
  }
})
// index goes from 0, so the filterNumbers are 1,2,3 and undefined.
// filteredNumbers is [1, 2, 3, undefined]
// numbers is still [1, 2, 3, 4]

Voir aussi

Array.prototype.forEach()

Map object

Array.from()

 

 

 

—

 

 

Array.prototype.sort()

La méthode sort() trie les éléments d’un tableau, dans ce même tableau, et renvoie le tableau. Par défaut, le tri s’effectue sur les éléments du tableau convertis en chaînes de caractères et triées selon les valeurs des unités de code UTF-16 des caractères.

La complexité en espace mémoire et en temps utilisée pour le tri ne peut pas être garantie car elle dépend de l’implémentation.

Syntaxe

arr.sort()
arr.sort(fonctionComparaison)

Paramètres

fonctionComparaison Facultatif

Ce paramètre optionnel permet de spécifier une fonction définissant l’ordre de tri. Si absente, le tableau est trié selon la valeur de point de code Unicode de chaque caractère, d’après la conversion en chaine de caractères de chaque élément. Cette fonction prendra deux arguments : le premier élément à comparer et le deuxième élément à comparer.

Valeur de retour

Le tableau trié (le tri est effectué sur le tableau courant qui est modifié, aucune copie n’est réalisée).

Description

Si le paramètre fonctionComparaison n’est pas fourni, les éléments qui ne valent pas undefined sont triés en les convertissant en chaines de caractères et en comparant ces chaines selon l’ordre des points de code Unicode. Par exemple, "banane" sera trié avant "cerise", mais "Cerise" arrivera avant "banane" à cause de la majuscule (les majuscules arrivent avant dans la liste). Dans un tri numérique, 9 sera trié avant 80, mais comme ces nombres sont convertis en chaînes de caractères, "80″ arrive avant "9″ selon l’ordre des unités de code UTF-16. Les éléments valant undefined sont placés à la fin du tableau.

Note : En UTF-16, les caractères Unicode situés après \uFFFF sont encodés avec deux unités de code surrogates sur l’intervalle \uD800-\uDFFF. Pour comparer les chaînes de caractères entre elles, ce sont les unités de code séparées qui sont prises en compte. Ainsi, le caractère formé par la paire surrogate \uD655 \uDE55 sera trié avant le caractère \uFF3A.

Si le paramètre fonctionComparaison est fourni, les éléments du tableau (qui ne valent pas undefined) sont triés selon la valeur de retour de la fonction de comparaison. Si a et b sont deux éléments à comparer, alors :

• Si fonctionComparaison(a, b) est inférieur à 0, on trie a avec un indice inférieur à b (a sera classé avant b)
• Si fonctionComparaison(a, b) renvoie 0, on laisse a et b inchangés l’un par rapport à l’autre, mais triés par rapport à tous les autres éléments. Note : la norme ECMAScript ne garantit pas ce comportement, par conséquent tous les navigateurs (par exemple les versions de Mozilla antérieures à 2003) ne respectent pas ceci.
• Si fonctionComparaison(a, b) est supérieur à 0, on trie b avec un indice inférieur à a.
• fonctionComparaison(a, b) doit toujours renvoyer le même résultat à partir de la même paire d’arguments. Si la fonction renvoie des résultats incohérents, alors l’ordre dans lequel sont triés les éléments n’est pas défini.

Une fonction de comparaison aura donc généralement la forme suivante :

function compare(a, b) {
  if (a est inférieur à b selon les critères de tri)
     return -1;
  if (a est supérieur à b selon les critères de tri)
     return 1;
  // a doit être égal à b
  return 0;
}

Pour comparer des nombres plutôt que des chaînes, la fonction de comparaison peut simplement soustraire b à a (cela fonctionnera si le tableau ne contient pas NaN ou Infinity) :

function compareNombres(a, b) {
  return a - b;
}

L’usage des expressions de fonctions s’avère très pratique avec la méthode sort() :

var nombres = [4, 2, 5, 1, 3];
nombres.sort(function(a, b) {
  return a - b;
});
console.log(nombres);
// [1, 2, 3, 4, 5]

ECMAScript 2015 permet d’utiliser les fonctions fléchées et ainsi d’obtenir une syntaxe plus concise :

let nombres = [4, 2, 5, 1, 3];
nombres.sort((a, b) => a - b);
console.log(nombres);

Les objets peuvent être triés d’après les valeurs d’une de leurs propriétés.

var items = [
  { name: "Edward", value: 21 },
  { name: "Sharpe", value: 37 },
  { name: "And", value: 45 },
  { name: "The", value: -12 },
  { name: "Magnetic", value: 13 },
  { name: "Zeros", value: 37 }
];
items.sort(function (a, b) {
  return a.value - b.value;
});

Différences d’implémentation

Certaines implémentations de JavaScript utilisent un tri stable : l’ordre partiel de a et b ne change pas si a et b sont égaux. Si l’indice de a était inférieur à celui de b avant le tri, il le sera toujours après, quels que soient les mouvements de a et b dus au tri.

Le tri est stable dans SpiderMonkey et tous les navigateurs basés sur Mozilla à partir de Gecko 1.9 (voir le bug 224128).

Le comportement de la méthode sort() a changé entre JavaScript 1.1 et JavaScript 1.2.

En JavaScript 1.1, sur certaines plateformes, la méthode sort ne fonctionnait pas. Le tri fonctionne sur toutes les plateformes à partir de JavaScript 1.2.

En JavaScript 1.2, cette méthode ne convertit plus les éléments non définis (undefined) en null ; elle les place en fin de tableau. Par exemple, supposons que vous ayez ce script :

var a = [];
a[0] = "araignée";
a[5] = "zèbre";

function writeArray(x) {
  for (i = 0; i < x.length; i++) {
    console.log(x[i]);
    if (i < x.length-1)
      console.log(", ");
  }
}

writeArray(a);
a.sort();
console.log("\n");
writeArray(a);

En JavaScript 1.1, cette fonction affichait :

araignée, null, null, null, null, zèbre
araignée, null, null, null, null, zèbre

En JavaScript 1.2, elle affichera :

araignée, undefined, undefined, undefined, undefined, zèbre
araignée, zèbre, undefined, undefined, undefined, undefined

Exemples

Création, affichage et tri d’un tableau

L’exemple qui suit crée quatre tableaux et affiche le tableau original, puis les tableaux triés. Les tableaux numériques sont triés d’abord sans, puis avec une fonction de comparaison.

var stringArray = ["Bosse", "Bleue", "Béluga"];
var numericStringArray = ["80", "9", "700"];
var numberArray = [40, 1, 5, 200];
var mixedNumericArray = ["80", "9", "700", 40, 1, 5, 200];

function compareNombres(a, b) {
  return a - b;
}

console.log("Chaînes : " + stringArray.join() +"\n");
console.log("Triées : " + stringArray.sort() +"\n\n");

console.log("Nombres : " + numberArray.join() +"\n");
console.log("Triés sans fonction de comparaison : " + numberArray.sort() +"\n");
console.log("Triés avec compareNombres : " + numberArray.sort(compareNombres) +"\n\n");

console.log("Chaînes numériques : " + numericStringArray.join() +"\n");
console.log("Triées sans fonction de comparaison : " + numericStringArray.sort() +"\n");
console.log("Triées avec compareNombres : " + numericStringArray.sort(compareNombres) +"\n\n");

console.log("Nombres et chaînes numériques : " + mixedNumericArray.join() +"\n");
console.log("Triés sans fonction de comparaison : " + mixedNumericArray.sort() +"\n");
console.log("Triés avec compareNombres : " + mixedNumericArray.sort(compareNombres) +"\n\n");

Cet exemple produit la sortie suivante. Comme on peut le voir, lorsqu’on utilise la fonction de comparaison, les nombres sont triés correctement qu’ils soient des nombres ou des chaînes numériques.

Chaînes : Bosse,Bleue,Béluga
Triées : Bleue,Bosse,Béluga

Nombres : 40,1,5,200
Triés sans fonction de comparaison : 1,200,40,5
Triés avec compareNombres : 1,5,40,200

Chaînes numériques : 80,9,700
Triées sans fonction de comparaison : 700,80,9
Triées avec compareNombres : 9,80,700

Nombres et chaînes numériques : 80,9,700,40,1,5,200
Triés sans fonction de comparaison : 1,200,40,5,700,80,9
Triés avec compareNombres : 1,5,9,40,80,200,700

Trier des caractères non-ASCII

Pour des chaines de caractères contenant des caractères non ASCII, c’est à dire des chaines de caractères contenant par exemple des accents (é, è, a, ä, etc.) : utilisez String.localeCompare. Cette fonction peut comparer ces caractères afin qu’ils apparaissent dans le bon ordre.

var items = ["réservé", "premier", "cliché", "communiqué", "café" ,"adieu"];
items.sort(function (a, b) {
  return a.localeCompare(b);
});

// items is [ 'adieu', 'café', 'cliché', 'communiqué', 'premier', 'réservé' ]

Trier avec map

La fonction de comparaison peut être amenée à être appelée plusieurs fois pour un même élément du tableau. Selon la fonction utilisée, cela peut entraîner des problèmes de performances. Plus le tableau est grand et plus la fonction de comparaison est complexe, plus il sera judicieux d’envisager des opérations de fonctions appliquées au tableau (map). L’idée est la suivante : on extrait les valeurs du tableau original, en appliquant des opérations dans un tableau temporaire, puis on trie ce tableau temporaire. Enfin, on recompose le tableau final avec les éléments du premier tableau et l’ordre obtenu.

// le tableau à trier
var liste = ['Delta', 'alpha', 'CHARLIE', 'bravo'];

// Création d'objet temporaire qui contient les positions
// et les valeurs en minuscules
var mapped = liste.map(function(e, i) {
  return { index: i, value: e.toLowerCase() };
})

// on trie l'objet temporaire avec les valeurs réduites
mapped.sort(function(a, b) {
  if (a.value > b.value) {
    return 1;
  }
  if (a.value < b.value) {
    return -1;
  }
  return 0;
});

// on utilise un objet final pour les résultats
var result = mapped.map(function(e){
  return liste[e.index];
});

Note : Une bibliothèque open source utilise cette approche : mapsort.

 

 

—

 

L’objet global Array est utilisé pour créer des tableaux. Les tableaux sont des objets de haut-niveau (en termes de complexité homme-machine) semblables à des listes.

Créer un tableau

var fruits = ['Apple', 'Banana'];

console.log(fruits.length);
// 2

Accéder (via son index) à un élément du tableau

var first = fruits[0];
// Apple

var last = fruits[fruits.length - 1];
// Banana

Boucler sur un tableau

fruits.forEach(function(item, index, array) {
  console.log(item, index);
});
// Apple 0
// Banana 1

Ajouter à la fin du tableau

var newLength = fruits.push('Orange');
// ["Apple", "Banana", "Orange"]

Supprimer le dernier élément du tableau

var last = fruits.pop(); // supprime Orange (à la fin)
// ["Apple", "Banana"];

Supprimer le premier élément du tableau

var first = fruits.shift(); // supprime Apple (au début)
// ["Banana"];

Ajouter au début du tableau

var newLength = fruits.unshift('Strawberry') // ajoute au début
// ["Strawberry", "Banana"];

Trouver l’index d’un élément dans le tableau

fruits.push('Mango');
// ["Strawberry", "Banana", "Mango"]

var pos = fruits.indexOf('Banana');
// 1

Supprimer un élément par son index

var removedItem = fruits.splice(pos, 1); // supprime 1 élément à la position pos

// ["Strawberry", "Mango"]

Supprimer des éléments à partir d’un index

var vegetables = ['Cabbage', 'Turnip', 'Radish', 'Carrot'];
console.log(vegetables);
// ["Cabbage", "Turnip", "Radish", "Carrot"]

var pos = 1, n = 2;

var removedItems = vegetables.splice(pos, n);
// n définit le nombre d'éléments à supprimer,
// à partir de la position pos

console.log(vegetables);
// ["Cabbage", "Carrot"] (le tableau d'origine est changé)

console.log(removedItems);
// ["Turnip", "Radish"] (splice retourne la liste des éléments supprimés)

Copier un tableau

var shallowCopy = fruits.slice(); // crée un nouveau tableau qui contient les éléments de fruits
// ["Strawberry", "Mango"]

Syntaxe

[element0, element1, ..., elementN]
new Array(element0, element1[, ...[, elementN]])
new Array(arrayLength)

Paramètres

element0, element1, …, elementN

Un tableau est initialisé avec les éléments donnés, sauf dans le cas où un seul argument est passé au constructeur Array et que cet argument est un nombre. (Voir ci-après.) Notez que ce cas spécial s’applique aux tableaux créés avec le constructeur Array, et non aux tableaux créés avec la syntaxe crochets.

arrayLength

Si le seul argument passé au constructeur Array est un entier entre 0 et 2³²-1 (inclus), un nouveau tableau sera créé avec ce nombre d’éléments (note : le tableau sera créé avec arrayLength emplacements vides, et non avec de véritables valeurs undefined). Si l’argument est un nombre en dehors de la plage autorisée, une exception RangeError est levée.

Description

Les tableaux sont des objets qui servent de liste et possèdent plusieurs méthodes incorporées pour exécuter des opérations de parcours et de modification.

Ni la taille d’un tableau ni le types de ses éléments n’est fixé. Puisque la dimension d’un tableau peut augmenter ou diminuer à tout moment, et que les éléments du tableau peuvent être stockés à des emplacements non contigus, les tableaux ne sont pas garantis d’être compacts. En général, ce sont des caractéristiques pratiques, mais si ces fonctionnalités ne sont pas souhaitables pour votre cas d’utilisation, vous pouvez envisager d’utiliser des tableaux typés.

Les tableaux ne peuvent pas utiliser de chaîne de caractères comme indice (comme dans un tableau associatif) mais des entiers. Utiliser ou accéder à des index non entiers, en utilisant la notation avec crochets (ou avec point) ne va pas définir ou récupérer un élément sur le tableau lui-même, mais une variable associée à la collection de propriétés d’objet de ce tableau. Les propriétés du tableau et la liste de ses éléments sont séparées, et les opérations de parcours et de modification ne s’appliquent pas à ces propriétés.

Accéder aux éléments d’un tableau

Si indice en dehors de  intervalle, le résultat sera undefined (sous réserve qu’aucune propriété n’ait été ajoutée au préalable avec cet indice).

arr[arr.length - 1] // affiche "le dernier élément"

Les éléments d’un tableau sont des propriétés d’objets de la même manière que toString est une propriété. Cependant, essayer d’accéder à un élément du tableau comme suit renverra une erreur car le nom de la propriété utilisé est invalide :

console.log(arr.0); // erreur de syntaxe

Ce comportement est tout à fait normal. En effet, il n’est pas possible d’accéder aux propriétés dont le nom commence par un chiffre avec cette notation (le point). Il est nécessaire d’utiliser la syntaxe avec les crochets pour accéder à ces propriétés. Ainsi, si pour un objet quelconque, on avait une propriété nommée ’3d’, on ne pourra y faire référence qu’en utilisant les crochets. Exemple :

var années = [1950, 1960, 1970, 1980, 1990, 2000, 2010];

console.log(années.0);  // erreur de syntaxe
console.log(années[0]); // fonctionne correctement

renderer.3d.setTexture(model, "personnage.png");   // erreur de syntaxe
renderer["3d"].setTexture(model, "personnage.png");// fonctionne correctement

Dans cet exemple, on utilise des doubles quotes autour de 3d. On peut aussi utiliser les doubles quotes pour accéder aux éléments d’un tableau (ex. : années["2"] au lieu de années[2]), mais ce n’est pas obligatoire. Dans l’instruction années[2], le nombre sera converti en une chaîne de caractères par le moteur JavaScript. Pour cette raison, si on utilise les noms de propriété "2″ et "02″, on fera référence à deux propriétés différentes, et le fragment de code suivant renvoie donc true:

console.log(années["2"] != années["02"]);

De manière similaire, les propriétés nommées avec des mots-clés réservés ne peuvent être consultées qu’en utilisant la syntaxe avec crochets :

var promise = {
  'var' : 'text',
  'array': [1, 2, 3, 4]
};

console.log(promise['var']);

Note spécifique à Firefox : Depuis Firefox 40.0a2, il est possible d’utiliser la notation avec le point pour accéder aux propriétés dont les noms ne sont pas des identifiants valides.

Relation entre length et les propriétés numériques

La propriété length d’un tableau est liée aux propriétés numériques du tableau. Plusieurs méthodes natives utilisent cette propriété : join(), slice(), indexOf(), etc. D’autres méthodes comme push() et splice() modifient le tableau et la propriété length.

var fruits = [];
fruits.push("banane", "pomme", "pêche");

console.log(fruits.length); // 3

Lorsqu’on définit une nouvelle propriété numérique pour un tableau, que l’index utilisé est valide et que celui-ci est dehors des limites actuelles du tableau, le moteur JavaScript mettra à jour la propriété length :

fruits[5] = "mangue";
console.log(fruits[5]);  // "mangue"
console.log(Object.keys(fruits)); // ['0', '1', '2', '5']
console.log(fruits.length); // 6

On peut également modifier la propriété directement (cela n’ajoutera pas de nouveaux éléments) :

fruits.length = 10;
console.log(Object.keys(fruits)); // ['0', '1', '2', '5']
console.log(fruits.length);  // 10

En revanche, si on diminue la valeur de length, cela supprimera des éléments :

fruits.length = 2;
console.log(Object.keys(fruits)); // ['0', '1']
console.log(fruits.length); // 2

Pour plus d’informations sur le comportement de cette propriété, voir la page Array.length.

Création d’un tableau utilisant le résultat d’une correspondance

Le résultat d’une correspondance entre une expression rationnelle et une chaîne peut créer un tableau. Ce tableau possède des propriétés et des éléments qui fournissent des informations sur cette correspondance. Il est possible d’obtenir un tableau grâce aux méthodes RegExp.exec, String.match, and String.replace. Pour mieux comprendre le fonctionnement de ces propriétés et de ces éléments, on pourra utiliser l’exemple et le tableau qui suivent :

// Matche un "d" suivit par un ou plusieurs "b" et suivit d'un "d"
// Capture les "b" et le "d" qui suit
// Ignore la casse

var maRegexp = /d(b+)(d)/i;
var monTableau = maRegexp.exec("cdbBdbsbz");

console.log(monTableau);
// [ 0:"dbBd", 1:"bB", 2:"d", index:1, input:"cdbBdbsbz", length:3 ]

Les propriétés et les éléments retournés depuis cette correspondance sont les suivants :

Propriétés

Array.prototype.length

La propriété de longueur pour le constructeur Array, elle vaut 1.

get Array[@@species]

La fonction de construction utilisée pour créer les objets dérivés.

Array.prototype

Cette propriété permet d’ajouter des propriétés à tous les tableaux.

Méthodes

Array.from()

Cette méthode permet de créer une nouvelle instance d’Array à partir d’un objet semblable à un tableau ou d’un itérable.

Array.isArray()

Cette méthode renvoie true si la variable est un tableau, false sinon.

Array.of()

Cette méthode permet de créer une nouvelle instance d’Array à partir d’un nombre variable d’arguments (peu importe la quantité ou le type des arguments utilisés).

Les méthodes génériques de manipulation de tableaux

Une chaîne est traitée comme un tableau de caractères. Pour vérifier chaque caractère d’une chaîne str est une lettre comprise entre ‘a’ et ‘z’ :

function estUneLettre(caractère) {
   return caractère >= 'a' && caractère <= 'z';
}

if (Array.prototype.every.call(str, estUneLettre)) {
   console.log("La chaîne '" + str + "' ne contient que des lettres entre a et z!");
}

Cette notation étant plutôt verbeuse, une notation raccourcie a été introduite avec JavaScript 1.6 :

if (Array.every(str,estUneLettre)) {
   console.log("La chaîne '" + str + "' ne contient que des lettres entre a et z !");
}

Des méthodes génériques sont également disponibles pour les String.

Cette fonctionnalité ne fait pas partie du standard ECMAScript et n’est pas prise en charge par les navigateurs qui ne sont pas basés sur Gecko. Comme alternative standard, vous pouvez convertir votre objet en véritable tableau grâce à la méthode Array.from() (attention, cette méthode n’est pas supportée dans les anciens navigateurs) :

if (Array.from(str).every(estUneLettre)) {
   console.log("La chaîne '" + str + "' contient uniquement des lettres !");
}

Créer un tableau à deux dimensions

Plateau d’échec avec un tableau en deux dimensions qui contient des caractères. Le premier mouvement est effectué en copiant ‘p’ de (6,4) vers (4,4). La position anciennement occupée par le pion (6,4) devient vide.

var plateau = [
  ['T','C','F','R','K','F','C','T'],
  ['P','P','P','P','P','P','P','P'],
  [' ',' ',' ',' ',' ',' ',' ',' '],
  [' ',' ',' ',' ',' ',' ',' ',' '],
  [' ',' ',' ',' ',' ',' ',' ',' '],
  [' ',' ',' ',' ',' ',' ',' ',' '],
  ['p','p','p','p','p','p','p','p'],
  ['t','c','f','k','r','f','c','t'] ];

console.log(plateau.join('\n') + '\n\n');

// On déplace le pion de deux cases en avant 2
plateau[4][4] = plateau[6][4];
plateau[6][4] = ' ';
console.log(plateau.join('\n'));

T,C,F,R,K,F,C,T
P,P,P,P,P,P,P,P
 , , , , , , ,
 , , , , , , ,
 , , , , , , ,
 , , , , , , ,
p,p,p,p,p,p,p,p
t,c,f,k,r,f,c,t

T,C,F,R,K,F,C,T
P,P,P,P,P,P,P,P
 , , , , , , ,
 , , , , , , ,
 , , , ,p, , ,
 , , , , , , ,
p,p,p,p, ,p,p,p
t,c,f,k,r,f,c,t

Utiliser un tableau pour tabuler un ensemble de valeurs

values = [];
for (var x = 0; x < 10; x++){
 values.push([
  2 ** x,
  2 * x ** 2
 ])
};
console.table(values)

Résulte en

0	1	0
1	2	2
2	4	8
3	8	18
4	16	32
5	32	50
6	64	72
7	128	98
8	256	128
9	512	162

(Le première colonne est l’index)

 

—
Array() constructor
at
concat
copyWithin
entries
every
fill
filter
find
findIndex
flat
flatMap
forEach
from
includes
indexOf
isArray
join
keys
lastIndexOf
length
map
of
pop
push
reduce
reduceRight
reverse
shift
slice
some
sort
splice
toLocaleString
toSource
toString
unshift
values
@@iterator
@@species
@@unscopables

—

Propriétés
Array.prototype[@@unscopables]
Array.prototype.length
Méthodes
Array.prototype[@@iterator]()
get Array[@@species]
Array.prototype.at()
Array.prototype.concat()
Array.prototype.copyWithin()
Array.prototype.entries()
Array.prototype.every()
Array.prototype.fill()
Array.prototype.filter()
Array.prototype.find()
Array.prototype.findIndex()
Array.prototype.flat()
Array.prototype.flatMap()
Array.prototype.forEach()
Array.from()
Array.prototype.includes()
Array.prototype.indexOf()
Array.isArray()
Array.prototype.join()
Array.prototype.keys()
Array.prototype.lastIndexOf()
Array.prototype.map()
Array.of()
Array.prototype.pop()
Array.prototype.push()
Array.prototype.reduce()
Array.prototype.reduceRight()
Array.prototype.reverse()
Array.prototype.shift()
Array.prototype.slice()
Array.prototype.some()
Array.prototype.sort()
Array.prototype.splice()
Array.prototype.toLocaleString()
Array.prototype.toSource()
Array.prototype.toString()
Array.prototype.unshift()
Array.prototype.values()
Propriétés
Function.arguments
Function.caller
Function.displayName

Function.length

Function.name

Méthodes

Function.prototype.apply()

Function.prototype.bind()

Function.prototype.call()
Function.prototype.toSource()

Function.prototype.toString()
Object
Propriétés

Object.prototype.constructor

Object.prototype.__proto__

Méthodes
Object.prototype.__defineGetter__()
Object.prototype.__defineSetter__()
Object.prototype.__lookupGetter__()
Object.prototype.__lookupSetter__()
Object.prototype.hasOwnProperty()
Object.prototype.isPrototypeOf()
Object.prototype.propertyIsEnumerable()
Object.setPrototypeOf()
Object.prototype.toLocaleString()
Object.prototype.toSource()
Object.prototype.toString()
Object.prototype.valueOf()

——