JavaScript
Tableaux

Syntaxe

• array = [ valeur , valeur , ... ]
• array = new Array ( valeur , valeur , ... )
• array = Array.of ( valeur , valeur , ... )
• array = Array.from ( arrayLike )

Remarques

console.log(new Array(53)); // This array has 53 'undefined' elements!

console.log([53]); // Much better!

Initialisation de tableau standard

Il existe plusieurs façons de créer des tableaux. Les plus courants sont les littéraux de tableau ou le constructeur Array:

var arr = [1, 2, 3, 4];
var arr2 = new Array(1, 2, 3, 4);

Si le constructeur Array est utilisé sans arguments, un tableau vide est créé.

var arr3 = new Array();

résulte en:

[]

Notez que s'il est utilisé avec exactement un argument et que cet argument est un number , un tableau de cette longueur avec toutes les valeurs undefined sera créé à la place:

var arr4 = new Array(4);

résulte en:

[undefined, undefined, undefined, undefined]

Cela ne s'applique pas si l'argument unique est non numérique:

var arr5 = new Array("foo");

résulte en:

["foo"]

Array.of(21, "Hello", "World");

[21, "Hello", "World"]

var newArray = Array.from({ length: 5 }, (_, index) => Math.pow(index, 4));

[0, 1, 16, 81, 256]

Rayon de propagation / repos

Opérateur de diffusion

let arr = [1, 2, 3, ...[4, 5, 6]];  // [1, 2, 3, 4, 5, 6]

// in ES < 6, the operations above are equivalent to
arr = [1, 2, 3];
arr.push(4, 5, 6);

let arr = [1, 2, 3, ...[..."456"].map(x=>parseInt(x))]; // [1, 2, 3, 4, 5, 6]

let arr = [..."123456"].map(x=>parseInt(x)); // [1, 2, 3, 4, 5, 6]

let arr = [..."123456"]; // ["1", "2", "3", "4", "5", "6"]

function myFunction(a, b, c) { }
let args = [0, 1, 2];

myFunction(...args);

// in ES < 6, this would be equivalent to:
myFunction.apply(null, args);

[a, b, ...rest] = [1, 2, 3, 4, 5, 6]; // rest is assigned [3, 4, 5, 6]

function myFunction(a, b, ...rest) { console.log(rest); }

myFunction(0, 1, 2, 3, 4, 5, 6); // rest is [2, 3, 4, 5, 6]

Valeurs de mappage

Il est souvent nécessaire de générer un nouveau tableau basé sur les valeurs d'un tableau existant.

Par exemple, pour générer un tableau de longueurs de chaîne à partir d'un tableau de chaînes:

['one', 'two', 'three', 'four'].map(function(value, index, arr) {
  return value.length;
});
// → [3, 3, 5, 4]

['one', 'two', 'three', 'four'].map(value => value.length);
// → [3, 3, 5, 4]

Dans cet exemple, une fonction anonyme est fournie à la fonction map() et la fonction map l'appellera pour chaque élément du tableau, en fournissant les paramètres suivants, dans cet ordre:

• L'élément lui-même
• L'index de l'élément (0, 1 ...)
• Le tableau entier

De plus, map() fournit un second paramètre facultatif afin de définir la valeur de this paramètre dans la fonction de mappage. En fonction de l'environnement d'exécution, la valeur par défaut de this peut varier:

Dans un navigateur, la valeur par défaut de c'est toujours la this window :

['one', 'two'].map(function(value, index, arr) {
  console.log(this); // window (the default value in browsers)
  return value.length;
});

Vous pouvez le changer en n'importe quel objet personnalisé comme ceci:

['one', 'two'].map(function(value, index, arr) {
  console.log(this); // Object { documentation: "randomObject" }
  return value.length;
}, {
  documentation: 'randomObject'
});

Valeurs de filtrage

La méthode filter() crée un tableau rempli de tous les éléments du tableau qui passent un test fourni en tant que fonction.

[1, 2, 3, 4, 5].filter(function(value, index, arr) {
  return value > 2;
});

[1, 2, 3, 4, 5].filter(value => value > 2);

Résultats dans un nouveau tableau:

[3, 4, 5]

Filtrer les valeurs de falsification

var filtered = [ 0, undefined, {}, null, '', true, 5].filter(Boolean);

Étant donné que Boolean est un constructeur / fonction javascript natif qui prend [un paramètre facultatif] et que la méthode filter prend également une fonction et lui transmet l'élément de tableau en cours, vous pouvez le lire comme suit:

1. Boolean(0) renvoie false
2. Boolean(undefined) renvoie false
3. Boolean({}) renvoie true, ce qui signifie le pousser dans le tableau renvoyé
4. Boolean(null) renvoie false
5. Boolean('') renvoie false
6. Boolean(true) renvoie true, ce qui signifie le pousser dans le tableau retourné
7. Boolean(5) renvoie true, ce qui signifie le pousser dans le tableau retourné

donc le processus global se traduira par

[ {}, true, 5 ]

Un autre exemple simple

Cet exemple utilise le même concept de passage d'une fonction qui prend un argument

function startsWithLetterA(str) {
    if(str && str[0].toLowerCase() == 'a') {
        return true
    }
    return false;
}

var str              = 'Since Boolean is a native javascript function/constructor that takes [one optional paramater] and the filter method also takes a function and passes it the current array item as a parameter, you could read it like the following';
var strArray         = str.split(" ");
var wordsStartsWithA = strArray.filter(startsWithLetterA);
//["a", "and", "also", "a", "and", "array", "as"]

Itération

Un traditionnel for -loop

Un traditionnel for boucle a trois composants:

1. L'initialisation: exécutée avant l'exécution du bloc de recherche la première fois
2. La condition: vérifie une condition à chaque fois avant l'exécution du bloc de boucle et quitte la boucle si elle est fausse
3. Après coup: effectué à chaque exécution du bloc de boucle

Ces trois composants sont séparés les uns des autres par un ; symbole. Le contenu de chacun de ces trois composants est facultatif, ce qui signifie que ce qui suit est le plus minimal possible for boucle:

for (;;) {
    // Do stuff
}

Bien sûr, vous devrez inclure un if(condition === true) { break; } ou un if(condition === true) { return; } quelque part à l'intérieur de cela for que Loop arrête de fonctionner.

Cependant, l'initialisation est généralement utilisée pour déclarer un index, la condition est utilisée pour comparer cet index avec une valeur minimale ou maximale, et la réflexion est utilisée pour incrémenter l'index:

for (var i = 0, length = 10; i < length; i++) {
    console.log(i);
}

Utiliser une boucle for traditionnelle for parcourir un tableau

La manière traditionnelle de parcourir un tableau est la suivante:

for (var i = 0, length = myArray.length; i < length; i++) {
    console.log(myArray[i]);
}

Ou, si vous préférez faire une boucle en arrière, vous faites ceci:

for (var i = myArray.length - 1; i > -1; i--) {
    console.log(myArray[i]);
}

Il existe cependant de nombreuses variantes possibles, comme par exemple celle-ci:

for (var key = 0, value = myArray[key], length = myArray.length; key < length; value = myArray[++key]) {
    console.log(value);
}

... ou celui-ci ...

var i = 0, length = myArray.length;
for (; i < length;) {
    console.log(myArray[i]);
    i++;
}

... ou celui-ci:

var key = 0, value;
for (; value = myArray[key++];){
    console.log(value);
}

Tout ce qui fonctionne le mieux est en grande partie une question de goût personnel et de cas d'utilisation spécifique que vous implémentez.

Notez que chacune de ces variantes est supportée par tous les navigateurs, y compris les très anciens!

A while la boucle

Une alternative à une for la boucle est while boucle. Pour parcourir un tableau, vous pouvez le faire:

var key = 0;
while(value = myArray[key++]){
    console.log(value);
}

Comme traditionnel for les boucles, while les boucles sont prises en charge par même les plus anciennes des navigateurs.

Notez également que chaque boucle while peut être réécrite comme une boucle for . Par exemple, le while ci - dessus de la boucle se comporte de la même manière exacte que cela for -loop:

for(var key = 0; value = myArray[key++];){
    console.log(value);
}

for...in

En JavaScript, vous pouvez aussi faire ceci:

for (i in myArray) {
    console.log(myArray[i]);
}

Cela devrait être utilisé avec précaution, cependant, car il ne se comporte pas comme un traditionnel for boucle dans tous les cas, et il y a des effets secondaires potentiels qui doivent être pris en considération. Voir Pourquoi utiliser "for ... in" avec une itération de tableau est-il une mauvaise idée? pour plus de détails.

for...of

Dans l'ES 6, la boucle for-of défaut est la méthode recommandée pour itérer sur les valeurs d'un tableau:

let myArray = [1, 2, 3, 4];
for (let value of myArray) {
  let twoValue = value * 2;
  console.log("2 * value is: %d", twoValue);
}

L'exemple suivant montre la différence entre un for...of boucle et for...in boucle:

let myArray = [3, 5, 7];
myArray.foo = "hello";

for (var i in myArray) {
  console.log(i); // logs 0, 1, 2, "foo"
}

for (var i of myArray) {
  console.log(i); // logs 3, 5, 7
}

Array.prototype.keys()

La méthode Array.prototype.keys() peut être utilisée pour parcourir des index comme celui-ci:

let myArray = [1, 2, 3, 4];
for (let i of myArray.keys()) {
  let twoValue = myArray[i] * 2;
  console.log("2 * value is: %d", twoValue);
}

Array.prototype.forEach()

La .forEach(...) est une option dans ES 5 et .forEach(...) . Il est pris en charge par tous les navigateurs modernes, ainsi qu’Internet Explorer 9 et les versions ultérieures.

[1, 2, 3, 4].forEach(function(value, index, arr) {
  var twoValue = value * 2;
  console.log("2 * value is: %d", twoValue);
});

En comparaison avec la boucle for traditionnelle, nous ne pouvons pas sortir de la boucle dans .forEach() . Dans ce cas, utilisez la boucle for ou utilisez l'itération partielle présentée ci-dessous.

Dans toutes les versions de JavaScript, il est possible de parcourir les index d'un tableau en utilisant un style C traditionnel for boucle.

var myArray = [1, 2, 3, 4];
for(var i = 0; i < myArray.length; ++i) {
  var twoValue = myArray[i] * 2;
  console.log("2 * value is: %d", twoValue);
}

Il est également possible d'utiliser while loop:

var myArray = [1, 2, 3, 4],
    i = 0, sum = 0;
while(i++ < myArray.length) {
  sum += i;
}
console.log(sum);

Array.prototype.every

Depuis ES5, si vous souhaitez effectuer une itération sur une partie d'un tableau, vous pouvez utiliser Array.prototype.every , qui itère jusqu'à ce que nous Array.prototype.every false :

// [].every() stops once it finds a false result
// thus, this iteration will stop on value 7 (since 7 % 2 !== 0)
[2, 4, 7, 9].every(function(value, index, arr) {
  console.log(value);
  return value % 2 === 0; // iterate until an odd number is found
}); 

Équivalent dans toute version JavaScript:

var arr = [2, 4, 7, 9];
for (var i = 0; i < arr.length && (arr[i] % 2 !== 0); i++) { // iterate until an odd number is found
  console.log(arr[i]);
}

Array.prototype.some

Array.prototype.some itère jusqu'à ce que nous Array.prototype.some true :

// [].some stops once it finds a false result
// thus, this iteration will stop on value 7 (since 7 % 2 !== 0)
[2, 4, 7, 9].some(function(value, index, arr) {
  console.log(value);
  return value === 7; // iterate until we find value 7
}); 

Équivalent dans toute version JavaScript:

var arr = [2, 4, 7, 9];
for (var i = 0; i < arr.length && arr[i] !== 7; i++) {
  console.log(arr[i]);
}

Bibliothèques

Enfin, de nombreuses bibliothèques de services publics ont aussi leur propre foreach variation. Les trois plus populaires sont les suivantes:

jQuery.each() , dans jQuery :

$.each(myArray, function(key, value) {
    console.log(value);
});

_.each() , dans Underscore.js :

_.each(myArray, function(value, key, myArray) {
    console.log(value);
});

_.forEach() , dans Lodash.js :

_.forEach(myArray, function(value, key) {
    console.log(value);
});

Voir aussi la question suivante sur SO, où une grande partie de ces informations a été initialement publiée:

• Boucle à travers un tableau en JavaScript

Filtrage des tableaux d'objets

La méthode filter() accepte une fonction de test et renvoie un nouveau tableau contenant uniquement les éléments du tableau d'origine ayant réussi le test fourni.

// Suppose we want to get all odd number in an array:
var numbers = [5, 32, 43, 4];

var odd = numbers.filter(function(n) {
  return n % 2 !== 0;
});

let odd = numbers.filter(n => n % 2 !== 0); // can be shortened to (n => n % 2)

odd contiendrait le tableau suivant: [5, 43] .

Il fonctionne également sur un tableau d'objets:

var people = [{
  id: 1,
  name: "John",
  age: 28
}, {
  id: 2,
  name: "Jane",
  age: 31
}, {
  id: 3,
  name: "Peter",
  age: 55
}];

var young = people.filter(function(person) {
  return person.age < 35;
});

let young = people.filter(person => person.age < 35);

young contiendrait le tableau suivant:

[{
  id: 1,
  name: "John",
  age: 28
}, {
  id: 2,
  name: "Jane",
  age: 31
}]

Vous pouvez rechercher dans le tableau entier une valeur comme celle-ci:

var young = people.filter((obj) => {
  var flag = false;
  Object.values(obj).forEach((val) => {
    if(String(val).indexOf("J") > -1) {
      flag = true;
      return;
    }    
  });
  if(flag) return obj;
});

Ceci renvoie:

[{
  id: 1,
  name: "John",
  age: 28
},{
  id: 2,
  name: "Jane",
  age: 31
}]

Joindre des éléments de tableau dans une chaîne

Pour joindre tous les éléments d'un tableau dans une chaîne, vous pouvez utiliser la méthode de join :

console.log(["Hello", " ", "world"].join("")); // "Hello world"
console.log([1, 800, 555, 1234].join("-")); // "1-800-555-1234"

Comme vous pouvez le voir sur la deuxième ligne, les éléments qui ne sont pas des chaînes seront convertis en premier.

Conversion d'objets de type tableau en tableaux

Quels sont les objets de type tableau?

JavaScript contient des "objets de type tableau", qui sont des représentations d'objets de tableaux ayant une propriété de longueur. Par exemple:

var realArray = ['a', 'b', 'c'];
var arrayLike = {
  0: 'a',
  1: 'b',
  2: 'c',
  length: 3
};

Des exemples courants d'objets Array comme sont les arguments objet dans les fonctions et HTMLCollection ou NodeList objets retournés des méthodes comme document.getElementsByTagName ou document.querySelectorAll .

Cependant, une différence essentielle entre les tableaux et les objets de type tableau est que les objets de type tableau héritent de Object.prototype au lieu de Array.prototype . Cela signifie que les objets de type tableau ne peuvent pas accéder aux méthodes de prototype Array communes telles que forEach() , push() , map() , filter() et slice() :

var parent = document.getElementById('myDropdown');
var desiredOption = parent.querySelector('option[value="desired"]');
var domList = parent.children;

domList.indexOf(desiredOption); // Error! indexOf is not defined.
domList.forEach(function() { 
  arguments.map(/* Stuff here */) // Error! map is not defined.
}); // Error! forEach is not defined.

function func() {
  console.log(arguments);
}
func(1, 2, 3);   // → [1, 2, 3]

Convertir des objets de type tableau en tableaux dans ES6

1. Array.from :

const arrayLike = {
  0: 'Value 0',
  1: 'Value 1',
  length: 2
};
arrayLike.forEach(value => {/* Do something */}); // Errors
const realArray = Array.from(arrayLike);
realArray.forEach(value => {/* Do something */}); // Works

2. for...of :

var realArray = [];
for(const element of arrayLike) {
  realArray.append(element);
}

3. Opérateur de diffusion:

[...arrayLike]

4. Object.values :

var realArray = Object.values(arrayLike);

5. Object.keys :

var realArray = Object
   .keys(arrayLike)
   .map((key) => arrayLike[key]);

Convertir des objets de type tableau en tableaux dans ≤ ES5

Utilisez Array.prototype.slice comme Array.prototype.slice :

var arrayLike = {
  0: 'Value 0',
  1: 'Value 1',
  length: 2
};
var realArray = Array.prototype.slice.call(arrayLike);
realArray = [].slice.call(arrayLike); // Shorter version

realArray.indexOf('Value 1'); // Wow! this works

Vous pouvez également utiliser Function.prototype.call pour appeler Array.prototype méthodes Array.prototype sur des objets de type Array, sans les convertir:

var domList = document.querySelectorAll('#myDropdown option');

domList.forEach(function() { 
  // Do stuff
}); // Error! forEach is not defined.

Array.prototype.forEach.call(domList, function() { 
  // Do stuff
}); // Wow! this works

Vous pouvez également utiliser [].method.bind( arrayLikeObject ) pour emprunter des méthodes de tableau et les rendre glissantes sur votre objet:

var arrayLike = {
  0: 'Value 0',
  1: 'Value 1',
  length: 2
};

arrayLike.forEach(function() {
  // Do stuff
}); // Error! forEach is not defined.

[].forEach.bind(arrayLike)(function(val){
  // Do stuff with val
}); // Wow! this works

Modification d'éléments pendant la conversion

Dans ES6, tout en utilisant Array.from , nous pouvons spécifier une fonction de carte qui renvoie une valeur mappée pour le nouveau tableau en cours de création.

Array.from(domList, element => element.tagName); // Creates an array of tagName's

Voir Tableaux sont des objets pour une analyse détaillée.

Réduire les valeurs

[1, 2, 3, 4].reduce(function(a, b) {
  return a + b;
});
// → 10

[2].reduce(function(a, b) {
  console.log(a, b); // prints: 1 2
  return a + b;
}, 1);
// → 3

var array = [{
    key: 'one',
    value: 1
}, {
    key: 'two',
    value: 2
}, {
    key: 'three',
    value: 3
}];

array.reduce(function(obj, current) {
  obj[current.key] = current.value;
  return obj;
}, {});

array.reduce((obj, current) => Object.assign(obj, {
  [current.key]: current.value
}), {});

array.reduce((obj, current) => ({...obj, [current.key]: current.value}), {});

Tous les exemples ci-dessus pour Flatten Array entraînent:

{
  one: 1,
  two: 2,
  three: 3
}

function map(list, fn) {
  return list.reduce(function(newList, item) {
    return newList.concat(fn(item));
  }, []);
}

// Usage:
map([1, 2, 3], function(n) { return n * n; });
// → [1, 4, 9]

var arr = [4, 2, 1, -10, 9]

arr.reduce(function(a, b) {
  return a < b ? a : b
}, Infinity);
// → -10

var arr = [1, 2, 1, 5, 9, 5];

arr.reduce((prev, number) => {
  if(prev.indexOf(number) === -1) {
    prev.push(number);
  }
  return prev;
}, []);
// → [1, 2, 5, 9]

Connectivité logique des valeurs

[false, false].some(function(value) {
  return value;
});
// Result: false

[false, true].some(function(value) {
  return value;
});
// Result: true

[true, true].some(function(value) {
  return value;
});
// Result: true

[false, false].every(function(value) {
  return value;
});
// Result: false

[false, true].every(function(value) {
  return value;
});
// Result: false

[true, true].every(function(value) {
  return value;
});
// Result: true

Tableaux de concaténation

Deux tableaux

var array1 = [1, 2];
var array2 = [3, 4, 5];

var array3 = array1.concat(array2);  // returns a new array

var array3 = [...array1, ...array2]

Résultats dans un nouveau Array :

[1, 2, 3, 4, 5]

Plusieurs tableaux

var array1 = ["a", "b"],
    array2 = ["c", "d"],
    array3 = ["e", "f"],
    array4 = ["g", "h"];

var arrConc = array1.concat(array2, array3, array4);

var arrConc = [...array1, ...array2, ...array3, ...array4]

Résultats dans un nouveau Array :

["a", "b", "c", "d", "e", "f", "g", "h"]

Sans copier le premier tableau

var longArray = [1, 2, 3, 4, 5, 6, 7, 8],
    shortArray = [9, 10];

longArray.push.apply(longArray, shortArray);

longArray.push(...shortArray)

La valeur de longArray est maintenant:

[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

Notez que si le second tableau est trop long (> 100 000 entrées), vous risquez d’obtenir une erreur de dépassement de capacité de la pile (en raison du mode d’ apply ). Pour être sûr, vous pouvez itérer à la place:

shortArray.forEach(function (elem) {
    longArray.push(elem);
});

Valeurs matricielles et non matricielles

var array = ["a", "b"];

var arrConc = array.concat("c", "d");

var arrConc = [...array, "c", "d"]

Résultats dans un nouveau Array :

["a", "b", "c", "d"]

Vous pouvez également mélanger des tableaux avec des non-tableaux

var arr1 = ["a","b"];
var arr2 = ["e", "f"];

var arrConc = arr1.concat("c", "d", arr2);

Résultats dans un nouveau Array :

["a", "b", "c", "d", "e", "f"]

Ajouter / ajouter des éléments à un tableau

Décalage

Utilisez .unshift pour ajouter un ou plusieurs éléments au début d'un tableau.

Par exemple:

var array = [3, 4, 5, 6];
array.unshift(1, 2);

tableau donne:

[1, 2, 3, 4, 5, 6]

Pousser

En outre, .push est utilisé pour ajouter des éléments après le dernier élément existant.

Par exemple:

var array = [1, 2, 3];
array.push(4, 5, 6);

tableau donne:

[1, 2, 3, 4, 5, 6]

Les deux méthodes renvoient la nouvelle longueur du tableau.

Clés d'objet et valeurs à un tableau

var object = {
    key1: 10,
    key2: 3,
    key3: 40,
    key4: 20
};
 
var array = [];
for(var people in object) {
  array.push([people, object[people]]);
}

Maintenant, le tableau est

[
  ["key1", 10],
  ["key2", 3],
  ["key3", 40],
  ["key4", 20]
]

Tri d'un tableau multidimensionnel

Étant donné le tableau suivant

var array = [
  ["key1", 10],
  ["key2", 3],
  ["key3", 40],
  ["key4", 20]
];

Vous pouvez le trier par numéro (deuxième index)

array.sort(function(a, b) {
  return a[1] - b[1];
})

array.sort((a,b) => a[1] - b[1]);

Cela va sortir

[
  ["key2", 3],
  ["key1", 10],
  ["key4", 20],
  ["key3", 40]
]

Sachez que la méthode de tri fonctionne sur le tableau en place . Cela change le tableau. La plupart des autres méthodes de tableau renvoient un nouveau tableau, laissant l’original intact. Il est particulièrement important de noter si vous utilisez un style de programmation fonctionnel et que vous attendez que les fonctions n'aient pas d'effets secondaires.

Suppression d'éléments d'un tableau

Décalage

Utilisez .shift pour supprimer le premier élément d'un tableau.

Par exemple:

var array = [1, 2, 3, 4];
array.shift();

tableau donne:

[2, 3, 4]

Pop

En outre, .pop est utilisé pour supprimer le dernier élément d'un tableau.

Par exemple:

var array = [1, 2, 3];
array.pop();

tableau donne:

[1, 2]

Les deux méthodes renvoient l'élément supprimé.

Épissure

Utilisez .splice() pour supprimer une série d'éléments d'un tableau. .splice() accepte deux paramètres, l'index de départ et un nombre optionnel d'éléments à supprimer. Si le second paramètre est .splice() , .splice() supprimera tous les éléments de l'index de début à la fin du tableau.

Par exemple:

var array = [1, 2, 3, 4];
array.splice(1, 2);

laisse array contenant:

[1, 4]

Le retour de array.splice() est un nouveau tableau contenant les éléments supprimés. Pour l'exemple ci-dessus, le retour serait:

[2, 3]

Ainsi, l'omission du second paramètre divise effectivement le tableau en deux tableaux, l'original se terminant avant l'index spécifié:

var array = [1, 2, 3, 4];
array.splice(2);

... laisse array contenant [1, 2] et retourne [3, 4] .

Effacer

Utilisez delete pour supprimer un élément du tableau sans changer la longueur du tableau:

var array = [1, 2, 3, 4, 5];
console.log(array.length); // 5
delete array[2];
console.log(array); // [1, 2, undefined, 4, 5]
console.log(array.length); // 5

Array.prototype.length

L'affectation de valeur à la length du tableau modifie la longueur en valeur donnée. Si la nouvelle valeur est inférieure à la longueur du tableau, les éléments seront supprimés de la fin de la valeur.

array = [1, 2, 3, 4, 5];
array.length = 2;
console.log(array); // [1, 2]

Tableaux inverseurs

.reverse est utilisé pour inverser l'ordre des éléments dans un tableau.

Exemple pour .reverse :

[1, 2, 3, 4].reverse();

Résulte en:

[4, 3, 2, 1]

Remarque : Veuillez noter que .reverse ( Array.prototype.reverse ) inversera le tableau en place . Au lieu de renvoyer une copie inversée, elle renverra le même tableau, inversé.

var arr1 = [11, 22, 33];
var arr2 = arr1.reverse();
console.log(arr2); // [33, 22, 11]
console.log(arr1); // [33, 22, 11]

Vous pouvez également inverser un tableau "profondément" en:

function deepReverse(arr) {
  arr.reverse().forEach(elem => {
    if(Array.isArray(elem)) {
      deepReverse(elem);
    }
  });
  return arr;
}

Exemple pour deepReverse:

var arr = [1, 2, 3, [1, 2, 3, ['a', 'b', 'c']]];

deepReverse(arr);

Résulte en:

arr // -> [[['c','b','a'], 3, 2, 1], 3, 2, 1]

Supprimer la valeur du tableau

Lorsque vous devez supprimer une valeur spécifique d'un tableau, vous pouvez utiliser le one-liner suivant pour créer un tableau de copie sans la valeur donnée:

array.filter(function(val) { return val !== to_remove; });

Ou si vous souhaitez modifier le tableau lui-même sans créer de copie (par exemple, si vous écrivez une fonction qui obtient un tableau en tant que fonction et la manipule), vous pouvez utiliser cet extrait:

while(index = array.indexOf(3) !== -1) { array.splice(index, 1); }

Et si vous ne souhaitez supprimer que la première valeur trouvée, supprimez la boucle while:

var index = array.indexOf(to_remove);
if(index !== -1) { array.splice(index , 1); }

Vérifier si un objet est un tableau

Array.isArray(obj) renvoie true si l'objet est un Array , sinon false .

Array.isArray([])           // true
Array.isArray([1, 2, 3])    // true
Array.isArray({})           // false
Array.isArray(1)            // false

Dans la plupart des cas, vous pouvez instanceof une instanceof pour vérifier si un objet est un Array .

[] instanceof Array; // true
{} instanceof Array; // false

Array.isArray a un avantage sur l'utilisation d'une vérification d' instanceof qu'il retournera toujours true même si le prototype du tableau a été modifié et retournera false si un prototype de non-tableaux a été changé pour le prototype Array .

var arr = [];
Object.setPrototypeOf(arr, null);
Array.isArray(arr);   // true
arr instanceof Array; // false

Tri des tableaux

La méthode .sort() trie les éléments d'un tableau. La méthode par défaut va trier le tableau en fonction de la chaîne Unicode. Pour trier un tableau numériquement, la méthode .sort() doit avoir une fonction compareFunction .

Note: La méthode .sort() est impure. .sort() va trier le tableau à la place , c. -à- d. qu'au lieu de créer une copie triée du tableau d'origine, il réordonnera le tableau d'origine et le renverra.

Tri par défaut

Trie le tableau dans l'ordre UNICODE.

['s', 't', 'a', 34, 'K', 'o', 'v', 'E', 'r', '2', '4', 'o', 'W', -1, '-4'].sort();

Résulte en:

[-1, '-4', '2', 34, '4', 'E', 'K', 'W', 'a', 'l', 'o', 'o', 'r', 's', 't', 'v']

Remarque: les caractères majuscules ont été déplacés au-dessus des minuscules. Le tableau n'est pas dans l'ordre alphabétique et les nombres ne sont pas dans l'ordre numérique.

Tri alphabétique

['s', 't', 'a', 'c', 'K', 'o', 'v', 'E', 'r', 'f', 'l', 'W', '2', '1'].sort((a, b) => {
  return a.localeCompare(b);        
});

Résulte en:

['1', '2', 'a', 'c', 'E', 'f', 'K', 'l', 'o', 'r', 's', 't', 'v', 'W']

Remarque: Le tri ci-dessus génère une erreur si des éléments de tableau ne sont pas une chaîne. Si vous savez que le tableau peut contenir des éléments qui ne sont pas des chaînes, utilisez la version sécurisée ci-dessous.

['s', 't', 'a', 'c', 'K', 1, 'v', 'E', 'r', 'f', 'l', 'o', 'W'].sort((a, b) => {
  return a.toString().localeCompare(b);      
});

Tri des chaînes par longueur (la plus longue en premier)

["zebras", "dogs", "elephants", "penguins"].sort(function(a, b) {
  return b.length - a.length;
});

Résulte en

["elephants", "penguins", "zebras", "dogs"];

Tri des chaînes par longueur (la plus courte en premier)

["zebras", "dogs", "elephants", "penguins"].sort(function(a, b) {
  return a.length - b.length;
});

Résulte en

["dogs", "zebras", "penguins", "elephants"];

Tri numérique (croissant)

[100, 1000, 10, 10000, 1].sort(function(a, b) {
  return a - b;
});

Résulte en:

[1, 10, 100, 1000, 10000]

Tri numérique (décroissant)

[100, 1000, 10, 10000, 1].sort(function(a, b) {
  return b - a;
});

Résulte en:

[10000, 1000, 100, 10, 1]

Tri des tableaux par nombres pairs et impairs

[10, 21, 4, 15, 7, 99, 0, 12].sort(function(a, b) {
    return (a & 1) - (b & 1) || a - b;
});

Résulte en:

[0, 4, 10, 12, 7, 15, 21, 99]

Date de tri (décroissant)

var dates = [
  new Date(2007, 11, 10),
  new Date(2014, 2, 21),
  new Date(2009, 6, 11),
  new Date(2016, 7, 23)
];

dates.sort(function(a, b) {
  if (a > b) return -1;
  if (a < b) return 1;
  return 0;
});

// the date objects can also sort by its difference
// the same way that numbers array is sorting
dates.sort(function(a, b) {
  return b-a;
});

Résulte en:

[
  "Tue Aug 23 2016 00:00:00 GMT-0600 (MDT)",
  "Fri Mar 21 2014 00:00:00 GMT-0600 (MDT)",
  "Sat Jul 11 2009 00:00:00 GMT-0600 (MDT)",
  "Mon Dec 10 2007 00:00:00 GMT-0700 (MST)"
]

Clonage superficiel d'un tableau

Parfois, vous devez travailler avec un tableau tout en veillant à ne pas modifier l'original. Au lieu d'une méthode clone , les tableaux ont une méthode de slice qui vous permet d'effectuer une copie superficielle de n'importe quelle partie d'un tableau. Gardez à l'esprit que cela ne clone que le premier niveau. Cela fonctionne bien avec les types primitifs, comme les nombres et les chaînes, mais pas les objets.

Pour cloner un tableau en profondeur (par exemple, avoir une nouvelle instance de tableau mais avec les mêmes éléments), vous pouvez utiliser le one-liner suivant:

var clone = arrayToClone.slice();

Cela appelle la méthode JavaScript Array.prototype.slice . Si vous passez des arguments à slice , vous pouvez obtenir des comportements plus complexes qui créent des clones peu profonds d'une partie seulement d'un tableau, mais pour notre usage, il suffit d'appeler slice() pour créer une copie superficielle de l'ensemble du tableau.

Toutes les méthodes utilisées pour convertir des objets de type tableau en tableau sont applicables pour cloner un tableau:

arrayToClone = [1, 2, 3, 4, 5];
clone1 = Array.from(arrayToClone);
clone2 = Array.of(...arrayToClone);
clone3 = [...arrayToClone] // the shortest way

arrayToClone = [1, 2, 3, 4, 5];
clone1 = Array.prototype.slice.call(arrayToClone);
clone2 = [].slice.call(arrayToClone);

Rechercher un tableau

La méthode recommandée (depuis ES5) consiste à utiliser Array.prototype.find :

let people = [
  { name: "bob" },
  { name: "john" }
];

let bob = people.find(person => person.name === "bob");

// Or, more verbose
let bob = people.find(function(person) {
  return person.name === "bob";
});

Dans toute version de JavaScript, une norme for boucle peut également être utilisée:

for (var i = 0; i < people.length; i++) {
  if (people[i].name === "bob") {
    break; // we found bob
  }
}

FindIndex

La méthode findIndex () renvoie un index dans le tableau, si un élément du tableau satisfait à la fonction de test fournie. Sinon, -1 est renvoyé.

array = [
  { value: 1 },
  { value: 2 },
  { value: 3 },
  { value: 4 },
  { value: 5 }
];
var index = array.findIndex(item => item.value === 3); // 2
var index = array.findIndex(item => item.value === 12); // -1

Suppression / ajout d'éléments à l'aide de splice ()

La méthode splice() peut être utilisée pour supprimer des éléments d'un tableau. Dans cet exemple, nous supprimons les 3 premiers du tableau.

var values = [1, 2, 3, 4, 5, 3];
var i = values.indexOf(3);
if (i >= 0) {
  values.splice(i, 1);
}
// [1, 2, 4, 5, 3]

La méthode splice() peut également être utilisée pour ajouter des éléments à un tableau. Dans cet exemple, nous allons insérer les nombres 6, 7 et 8 à la fin du tableau.

var values = [1, 2, 4, 5, 3];
var i = values.length + 1;
values.splice(i, 0, 6, 7, 8);
//[1, 2, 4, 5, 3, 6, 7, 8]

Le premier argument de la méthode splice() est l'index auquel supprimer / insérer des éléments. Le second argument est le nombre d'éléments à supprimer. Le troisième argument et les suivants sont les valeurs à insérer dans le tableau.

Comparaison tableau

Pour une comparaison de tableau simple, vous pouvez utiliser la méthode JSON stringify et comparer les chaînes de sortie:

JSON.stringify(array1) === JSON.stringify(array2)

Remarque: cela ne fonctionnera que si les deux objets sont sérialisables JSON et ne contiennent pas de références cycliques. Il peut lancer TypeError: Converting circular structure to JSON

Vous pouvez utiliser une fonction récursive pour comparer des tableaux.

function compareArrays(array1, array2) { 
  var i, isA1, isA2;
  isA1 = Array.isArray(array1);
  isA2 = Array.isArray(array2);
  
  if (isA1 !== isA2) { // is one an array and the other not?
    return false;      // yes then can not be the same
  }
  if (! (isA1 && isA2)) {      // Are both not arrays 
    return array1 === array2;  // return strict equality
  }
  if (array1.length !== array2.length) { // if lengths differ then can not be the same
    return false;
  }
  // iterate arrays and compare them
  for (i = 0; i < array1.length; i += 1) {
    if (!compareArrays(array1[i], array2[i])) { // Do items compare recursively
      return false;
    }           
  }
  return true; // must be equal
}

AVERTISSEMENT: L' utilisation de la fonction ci - dessus est dangereux et doit être enveloppé dans un try catch si vous pensez qu'il est possible que le tableau a des références cycliques (une référence à un tableau qui contient une référence à lui - même)

a = [0] ;
a[1] = a;
b = [0, a]; 
compareArrays(a, b); // throws RangeError: Maximum call stack size exceeded

Note: La fonction utilise l’opérateur d’égalité stricte === pour comparer les éléments non tableaux {a: 0} === {a: 0} est false

Destructurer un tableau

const triangle = [3, 4, 5];
const [length, height, hypotenuse] = triangle;

length === 3;     // → true
height === 4;     // → true
hypotneuse === 5; // → true

const [,b,,c] = [1, 2, 3, 4];

console.log(b, c); // → 2, 4

const [b,c, ...xs] = [2, 3, 4, 5];
console.log(b, c, xs); // → 2, 3, [4, 5]

function area([length, height]) {
  return (length * height) / 2;
}

const triangle = [3, 4, 5];

area(triangle); // → 6

Suppression d'éléments en double

À partir de ES5.1, vous pouvez utiliser la méthode native Array.prototype.filter pour parcourir un tableau et ne laisser que les entrées qui transmettent une fonction de rappel donnée.

Dans l'exemple suivant, notre rappel vérifie si la valeur donnée apparaît dans le tableau. Si c'est le cas, il s'agit d'un doublon et ne sera pas copié dans le tableau résultant.

var uniqueArray = ['a', 1, 'a', 2, '1', 1].filter(function(value, index, self) { 
  return self.indexOf(value) === index;
}); // returns ['a', 1, 2, '1']

Si votre environnement prend en charge ES6, vous pouvez également utiliser l'objet Set . Cet objet vous permet de stocker des valeurs uniques de tout type, qu'il s'agisse de valeurs primitives ou de références d'objet:

var uniqueArray = [... new Set(['a', 1, 'a', 2, '1', 1])];

Voir aussi les réponses suivantes sur SO:

• Réponse SO associée
• Réponse connexe avec ES6

Supprimer tous les éléments

var arr = [1, 2, 3, 4];

Méthode 1

Crée un nouveau tableau et remplace la référence de tableau existante par un nouveau.

arr = [];

Des précautions doivent être prises car cela ne supprime aucun élément du tableau d'origine. Le tableau peut avoir été fermé lorsqu'il est passé à une fonction. Le tableau restera en mémoire pendant toute la durée de la fonction, mais vous ne le savez peut-être pas. C'est une source courante de fuites de mémoire.

Exemple de fuite de mémoire résultant d'un effacement de matrice incorrect:

var count = 0;

function addListener(arr) { // arr is closed over
  var b = document.body.querySelector("#foo" + (count++));
  b.addEventListener("click", function(e) { // this functions reference keeps
    // the closure current while the
    // event is active
    // do something but does not need arr       
  });
}

arr = ["big data"];
var i = 100;
while (i > 0) {
  addListener(arr); // the array is passed to the function
  arr = []; // only removes the reference, the original array remains
  array.push("some large data"); // more memory allocated
  i--;
}
// there are now 100 arrays closed over, each referencing a different array
// no a single item has been deleted

Pour éviter le risque de fuite de mémoire, utilisez l'une des 2 méthodes suivantes pour vider le tableau dans la boucle while de l'exemple ci-dessus.

Méthode 2

La définition de la propriété length supprime tous les éléments du tableau de la nouvelle longueur du tableau à l’ancienne longueur du tableau. C'est le moyen le plus efficace de supprimer et de déréférencer tous les éléments du tableau. Conserve la référence au tableau d'origine

arr.length = 0;

Méthode 3

Similaire à la méthode 2 mais renvoie un nouveau tableau contenant les éléments supprimés. Si vous n'avez pas besoin des éléments, cette méthode est inefficace car le nouveau tableau est toujours créé pour être immédiatement déréférencé.

arr.splice(0); // should not use if you don't want the removed items
// only use this method if you do the following
var keepArr = arr.splice(0); // empties the array and creates a new array containing the
                             // removed items

Question connexe

Utilisation de la carte pour reformater des objets dans un tableau

Array.prototype.map() : renvoie un nouveau tableau avec les résultats de l'appel d'une fonction fournie sur chaque élément du tableau d'origine.

L'exemple de code suivant prend un tableau de personnes et crée un nouveau tableau contenant des personnes avec une propriété 'fullName'

var personsArray = [
  {
    id: 1,
    firstName: "Malcom",
    lastName: "Reynolds"
  }, {
    id: 2,
    firstName: "Kaylee",
    lastName: "Frye"
  }, {
    id: 3,
    firstName: "Jayne",
    lastName: "Cobb"
  }
];

// Returns a new array of objects made up of full names.
var reformatPersons = function(persons) {
  return persons.map(function(person) {
    // create a new object to store full name.
    var newObj = {};
    newObj["fullName"] = person.firstName + " " + person.lastName;

    // return our new object.
    return newObj;
  });
};

Nous pouvons maintenant appeler reformatPersons(personsArray) et recevoir un nouveau tableau reformatPersons(personsArray) uniquement les noms complets de chaque personne.

var fullNameArray = reformatPersons(personsArray);
console.log(fullNameArray);
/// Output
[
  { fullName: "Malcom Reynolds" }, 
  { fullName: "Kaylee Frye" },
  { fullName: "Jayne Cobb" }
]

personsArray et son contenu reste inchangé.

console.log(personsArray);
/// Output
[
  {
    firstName: "Malcom",
    id: 1,
    lastName: "Reynolds"
  }, {
    firstName: "Kaylee",
    id: 2,
    lastName: "Frye"
  }, {
    firstName: "Jayne",
    id: 3,
    lastName: "Cobb"
  }
]

Fusionnez deux matrices en tant que paire de valeurs de clé

Lorsque nous avons deux tableaux distincts et que nous voulons créer une paire de valeurs de clé à partir de ce tableau, nous pouvons utiliser la fonction de réduction du tableau ci-dessous:

var columns = ["Date", "Number", "Size", "Location", "Age"];
var rows = ["2001", "5", "Big", "Sydney", "25"];
var result =  rows.reduce(function(result, field, index) {
  result[columns[index]] = field;
  return result;
}, {})

console.log(result);

Sortie:

{
  Date: "2001",
  Number: "5",
  Size: "Big",
  Location: "Sydney",
  Age: "25"
}

Convertir une chaîne en un tableau

La méthode .split() divise une chaîne en un tableau de sous-chaînes. Par défaut, .split() la chaîne en sous-chaînes sur des espaces ( " " ), ce qui équivaut à appeler .split(" ") .

Le paramètre passé à .split() spécifie le caractère ou l'expression régulière à utiliser pour diviser la chaîne.

Pour diviser une chaîne en un appel de tableau .split avec une chaîne vide ( "" ). Remarque importante: Cela ne fonctionne que si tous vos personnages correspondent aux caractères de la plage inférieure Unicode, qui couvre la plupart des langues anglaises et la plupart des langues européennes. Pour les langues qui nécessitent des caractères Unicode de 3 et 4 octets, slice("") les séparera.

var strArray = "StackOverflow".split("");
// strArray = ["S", "t", "a", "c", "k", "O", "v", "e", "r", "f", "l", "o", "w"]

var strArray = [..."sky is blue"];        
// strArray = ["s", "k", "y", " ", "i", "s", " ", "b", "l", "u", "e"]

Tester tous les éléments du tableau pour l'égalité

La méthode .every teste si tous les éléments du tableau réussissent un test de prédicat fourni.

Pour tester l'égalité de tous les objets, vous pouvez utiliser les extraits de code suivants.

[1, 2, 1].every(function(item, i, list) { return item === list[0]; }); // false
[1, 1, 1].every(function(item, i, list) { return item === list[0]; }); // true

[1, 1, 1].every((item, i, list) => item === list[0]); // true

Les extraits de code suivants testent l'égalité des propriétés

let data = [
  { name: "alice", id: 111 },
  { name: "alice", id: 222 }
];

data.every(function(item, i, list) { return item === list[0]; }); // false
data.every(function(item, i, list) { return item.name === list[0].name; }); // true

data.every((item, i, list) => item.name === list[0].name); // true

Copier une partie d'un tableau

La méthode slice () renvoie une copie d'une partie d'un tableau.

Il faut deux paramètres, arr.slice([begin[, end]]) :

commencer

Index basé sur zéro qui est le début de l'extraction.

fin

Index basé sur zéro qui est la fin de l'extraction, tranchant jusqu'à cet index mais qui n'est pas inclus.

Si la fin est un nombre négatif, end = arr.length + end .

Exemple 1

// Let's say we have this Array of Alphabets
var arr = ["a", "b", "c", "d"...];

// I want an Array of the first two Alphabets
var newArr = arr.slice(0, 2); // newArr === ["a", "b"]

Exemple 2

// Let's say we have this Array of Numbers
// and I don't know it's end
var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9...];

// I want to slice this Array starting from
// number 5 to its end
var newArr = arr.slice(4); // newArr === [5, 6, 7, 8, 9...]

Trouver l'élément minimum ou maximum

Si votre tableau ou objet de type tableau est numérique , c'est-à-dire si tous ses éléments sont des nombres, vous pouvez utiliser Math.min.apply ou Math.max.apply en transmettant null comme premier argument et votre tableau comme deuxième argument. .

var myArray = [1, 2, 3, 4];

Math.min.apply(null, myArray); // 1
Math.max.apply(null, myArray); // 4

var myArray = [1, 2, 3, 4, 99, 20];

var maxValue = Math.max(...myArray); // 99
var minValue = Math.min(...myArray); // 1

L'exemple suivant utilise une boucle for :

var maxValue = myArray[0];
for(var i = 1; i < myArray.length; i++) {
   var currentValue = myArray[i];
   if(currentValue > maxValue) {
      maxValue = currentValue;
   }
}

var myArray = [1, 2, 3, 4];

myArray.reduce(function(a, b) {
  return Math.min(a, b);
}); // 1

myArray.reduce(function(a, b) {
  return Math.max(a, b);
}); // 4

myArray.reduce((a, b) => Math.min(a, b)); // 1
myArray.reduce((a, b) => Math.max(a, b)); // 4

function myMax(array) {
  return array.reduce(function(maxSoFar, element) {
    return Math.max(maxSoFar, element);
  }, -Infinity);
}

myMax([3, 5]);             // 5
myMax([]);                 // -Infinity
Math.max.apply(null, []);  // -Infinity

Matrices d'aplatissement

Tableaux à 2 dimensions

function flattenES6(arr) {
  return [].concat(...arr);
}

var arrL1 = [1, 2, [3, 4]];
console.log(flattenES6(arrL1)); // [1, 2, 3, 4]

function flatten(arr) {
  return [].concat.apply([], arr);
}

var arrL1 = [1, 2, [3, 4]];
console.log(flatten(arrL1)); // [1, 2, 3, 4]

Tableaux de dimension supérieure

Étant donné un tableau profondément imbriqué comme ça

var deeplyNested = [4,[5,6,[7,8],9]];

Il peut être aplati avec cette magie

console.log(String(deeplyNested).split(',').map(Number);
#=> [4,5,6,7,8,9]

Ou

const flatten = deeplyNested.toString().split(',').map(Number)
console.log(flatten);
#=> [4,5,6,7,8,9]

Les deux méthodes ci-dessus ne fonctionnent que lorsque le tableau est composé exclusivement de nombres. Un tableau multidimensionnel d'objets ne peut pas être aplati par cette méthode.

Insérer un élément dans un tableau à un index spécifique

Une insertion simple d'éléments peut être effectuée avec la méthode Array.prototype.splice :

arr.splice(index, 0, item);

Variante plus avancée avec plusieurs arguments et support de chaînage:

/* Syntax:
   array.insert(index, value1, value2, ..., valueN) */

Array.prototype.insert = function(index) {
  this.splice.apply(this, [index, 0].concat(
    Array.prototype.slice.call(arguments, 1)));
  return this;
};

["a", "b", "c", "d"].insert(2, "X", "Y", "Z").slice(1, 6);  // ["b", "X", "Y", "Z", "c"]

Et avec les arguments de type tableau fusionnant et en chaînant:

/* Syntax:
   array.insert(index, value1, value2, ..., valueN) */

Array.prototype.insert = function(index) {
  index = Math.min(index, this.length);
  arguments.length > 1
    && this.splice.apply(this, [index, 0].concat([].pop.call(arguments)))
    && this.insert.apply(this, arguments);
  return this;
};

["a", "b", "c", "d"].insert(2, "V", ["W", "X", "Y"], "Z").join("-");  // "a-b-V-W-X-Y-Z-c-d"

La méthode entries ()

La méthode entries() renvoie un nouvel objet Array Iterator qui contient les paires clé / valeur pour chaque index du tableau.

var letters = ['a','b','c'];

for(const[index,element] of letters.entries()){
  console.log(index,element);
}

résultat

0 "a"
1 "b"
2 "c"

Remarque : cette méthode n'est pas prise en charge dans Internet Explorer.

Des parties de ce contenu d' Array.prototype.entries par Mozilla Contributors sous licence CC-by-SA 2.5