From 39f2114f9797eb51994966c6bb8ff1814c9a4da8 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 12:36:08 +0100 Subject: unslug fr: move --- .../global_objects/array/@@iterator/index.html | 90 +++++ .../global_objects/array/@@species/index.html | 78 ++++ .../global_objects/array/@@unscopables/index.html | 76 ++++ .../global_objects/array/array/index.html | 86 ++++ .../global_objects/array/concat/index.html | 160 ++++++++ .../global_objects/array/copywithin/index.html | 199 +++++++++ .../global_objects/array/entries/index.html | 97 +++++ .../global_objects/array/every/index.html | 201 ++++++++++ .../reference/global_objects/array/fill/index.html | 155 +++++++ .../global_objects/array/filter/index.html | 228 +++++++++++ .../reference/global_objects/array/find/index.html | 145 +++++++ .../global_objects/array/findindex/index.html | 179 +++++++++ .../reference/global_objects/array/flat/index.html | 148 +++++++ .../global_objects/array/flatmap/index.html | 126 ++++++ .../global_objects/array/foreach/index.html | 278 +++++++++++++ .../reference/global_objects/array/from/index.html | 138 +++++++ .../global_objects/array/includes/index.html | 135 +++++++ .../reference/global_objects/array/index.html | 446 +++++++++++++++++++++ .../global_objects/array/indexof/index.html | 214 ++++++++++ .../global_objects/array/isarray/index.html | 117 ++++++ .../reference/global_objects/array/join/index.html | 110 +++++ .../reference/global_objects/array/keys/index.html | 87 ++++ .../global_objects/array/lastindexof/index.html | 167 ++++++++ .../global_objects/array/length/index.html | 123 ++++++ .../reference/global_objects/array/map/index.html | 215 ++++++++++ .../reference/global_objects/array/of/index.html | 105 +++++ .../reference/global_objects/array/pop/index.html | 111 +++++ .../reference/global_objects/array/push/index.html | 144 +++++++ .../global_objects/array/reduce/index.html | 407 +++++++++++++++++++ .../global_objects/array/reduceright/index.html | 282 +++++++++++++ .../global_objects/array/reverse/index.html | 105 +++++ .../global_objects/array/shift/index.html | 118 ++++++ .../global_objects/array/slice/index.html | 178 ++++++++ .../reference/global_objects/array/some/index.html | 133 ++++++ .../reference/global_objects/array/sort/index.html | 286 +++++++++++++ .../global_objects/array/splice/index.html | 146 +++++++ .../global_objects/array/tolocalestring/index.html | 190 +++++++++ .../global_objects/array/tosource/index.html | 68 ++++ .../global_objects/array/tostring/index.html | 83 ++++ .../global_objects/array/unshift/index.html | 122 ++++++ .../global_objects/array/values/index.html | 100 +++++ 41 files changed, 6576 insertions(+) create mode 100644 files/fr/web/javascript/reference/global_objects/array/@@iterator/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/array/@@species/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/array/@@unscopables/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/array/array/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/array/concat/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/array/copywithin/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/array/entries/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/array/every/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/array/fill/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/array/filter/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/array/find/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/array/findindex/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/array/flat/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/array/flatmap/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/array/foreach/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/array/from/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/array/includes/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/array/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/array/indexof/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/array/isarray/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/array/join/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/array/keys/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/array/lastindexof/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/array/length/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/array/map/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/array/of/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/array/pop/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/array/push/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/array/reduce/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/array/reduceright/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/array/reverse/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/array/shift/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/array/slice/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/array/some/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/array/sort/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/array/splice/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/array/tolocalestring/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/array/tosource/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/array/tostring/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/array/unshift/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/array/values/index.html (limited to 'files/fr/web/javascript/reference/global_objects/array') diff --git a/files/fr/web/javascript/reference/global_objects/array/@@iterator/index.html b/files/fr/web/javascript/reference/global_objects/array/@@iterator/index.html new file mode 100644 index 0000000000..1843ed0508 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/array/@@iterator/index.html @@ -0,0 +1,90 @@ +--- +title: 'Array.prototype[@@iterator]()' +slug: Web/JavaScript/Reference/Objets_globaux/Array/@@iterator +tags: + - Array + - ECMAScript 2015 + - Iterator + - JavaScript + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Array/@@iterator +--- +
{{JSRef}}
+ +

La valeur initiale de la propriété @@iterator correspond à la valeur initiale fournie par l'itérateur {{jsxref("Array.prototype.values()", "values")}}.

+ +

Syntaxe

+ +
arr[Symbol.iterator]()
+ +

Valeur de retour

+ +

La première valeur fournie par {{jsxref("Array.prototype.values()","values()")}}. Si on utilise arr[Symbol.iterator] (sans les parenthèses) le navigateur renverra par défaut la fonction {{jsxref("Array.prototype.values()", "values()")}}.

+ +

Exemples

+ +

Parcourir un tableau avec une boucle for...of

+ +
var arr = ['w', 'y', 'k', 'o', 'p'];
+var eArr  = arr[Symbol.iterator]();
+// il est nécessaire que l'environnement supporte
+// les boucles for..of et les variables
+// utilisées avec let ou const ou var
+for (let letter of eArr) {
+  console.log(letter);
+}
+
+ +

Parcourir un tableau avec next

+ +
var arr = ['w', 'y', 'k', 'o', 'p'];
+var eArr = arr[Symbol.iterator]();
+console.log(eArr.next().value); // w
+console.log(eArr.next().value); // y
+console.log(eArr.next().value); // k
+console.log(eArr.next().value); // o
+console.log(eArr.next().value); // p
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-array.prototype-@@iterator', 'Array.prototype[@@iterator]()')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-array.prototype-@@iterator', 'Array.prototype[@@iterator]()')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Array.@@iterator")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/array/@@species/index.html b/files/fr/web/javascript/reference/global_objects/array/@@species/index.html new file mode 100644 index 0000000000..58064e558b --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/array/@@species/index.html @@ -0,0 +1,78 @@ +--- +title: 'get Array[@@species]' +slug: Web/JavaScript/Reference/Objets_globaux/Array/@@species +tags: + - Array + - JavaScript + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Array/@@species +--- +
{{JSRef}}
+ +

La propriété d'accesseur Array[@@species] renvoie le constructeur Array.

+ +

Syntaxe

+ +
Array[Symbol.species]
+
+ +

Valeur de retour

+ +

Le constructeur {{jsxref("Array")}}.

+ +

Description

+ +

L'accesseur species renvoie le constructeur par défaut pour les objets Array. Les constructeurs des sous-classes peuvent le surcharger afin de modifier l'affectation du constructeur.

+ +

Exemples

+ +

La propriété renvoie le constructeur par défaut, dans le cas des objets Array, c'est le constructeur Array :

+ +
Array[Symbol.species]; // function Array()
+ +

Pour un objet dérivé, la valeur de species pour une classe MonArray sera le constructeur de cette classe. Vous pouvez surcharger ce comportement afin de renvoyer le constructeur Array :

+ +
class MonArray extends Array {
+  // On surcharge le symbole species
+  // pour renvoyer le constructeur Array parent
+  static get [Symbol.species]() { return Array; }
+}
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES6', '#sec-get-array-@@species', 'get Array [ @@species ]')}}{{Spec2('ES6')}}Définition initiale.
{{SpecName('ESDraft', '#sec-get-array-@@species', 'get Array [ @@species ]')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Array.@@species")}}

+
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/array/@@unscopables/index.html b/files/fr/web/javascript/reference/global_objects/array/@@unscopables/index.html new file mode 100644 index 0000000000..b61ceb5279 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/array/@@unscopables/index.html @@ -0,0 +1,76 @@ +--- +title: 'Array.prototype[@@unscopables]' +slug: Web/JavaScript/Reference/Objets_globaux/Array/@@unscopables +tags: + - Array + - ECMAScript 2015 + - JavaScript + - Propriété + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Array/@@unscopables +--- +
{{JSRef}}
+ +

La propriété symbol @@unscopable contient les noms des propriétés qui ne faisait pas partie du standard ECMAScript avant ES2015 (ES6). Ces propriétés sont exclues lors de liaisons effectuée via l'instruction with.

+ +

Syntaxe

+ +
arr[Symbol.unscopables]
+ +

Description

+ +

Les propriétés natives d'un objet Array qui sont exclues lorsqu'on utilise with sont copyWithin, entries, fill, find, findIndex, includes, keys et values.

+ +

Voir la page sur le symbole {{jsxref("Symbol.unscopables")}} pour manipuler unscopables sur des objets personnalisés.

+ +

{{js_property_attributes(0,0,1)}}

+ +

Exemples

+ +

Le code qui suit fonctionne bien pour ES5 et les versions antérieures. En revanche, pour ECMAScript 2015 (ES6) et les versions ultérieures où la méthode  {{jsxref("Array.prototype.keys()")}} existe, lorsqu'on utilise un environnement créé avec with, "keys" serait désormais la méthode et non la variable. C'est là que le symbole natif @@unscopables Array.prototype[@@unscopables] intervient et empêche d'explorer ces méthodes avec with.

+ +
var keys = [];
+
+with(Array.prototype) {
+  keys.push("something");
+}
+
+Object.keys(Array.prototype[Symbol.unscopables]);
+// ["copyWithin", "entries", "fill", "find", "findIndex",
+//  "includes", "keys", "values"]
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-array.prototype-@@unscopables', 'Array.prototype[@@unscopables]')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-array.prototype-@@unscopables', 'Array.prototype[@@unscopables]')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Array.@@unscopables")}}

+
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/array/array/index.html b/files/fr/web/javascript/reference/global_objects/array/array/index.html new file mode 100644 index 0000000000..de1394bdd9 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/array/array/index.html @@ -0,0 +1,86 @@ +--- +title: Constructeur Array() +slug: Web/JavaScript/Reference/Objets_globaux/Array/Array +tags: + - Array + - Constructeur + - JavaScript + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Array/Array +--- +
{{JSRef}}
+ +

Le constructeur Array() permet de créer des objets {{jsxref("Array")}}.

+ +

Syntaxe

+ +
[element0, element1, ..., elementN]
+
+new Array(element0, element1[, ...[, elementN]])
+new Array(longueurTableau)
+ +

Paramètres

+ +
+
elementN
+
Un tableau JavaScript est initialisé avec les éléments indiqués à moins qu'un seul argument ne soit passé (cf. longueurTableau ci-après). On notera que ce cas au limite ne s'applique qu'avec le constructeur Array. Si on utilise la forme littérale (avec les crochets), on peut initialiser un tableau avec un seul élément.
+
longueurTableau
+
Si le seul argument passé au constructeur Array est un entier entre 0 et 232-1 (inclus), le constructeur renverra un tableau dont la propriété length vaut ce nombre. Note : le tableau contiendra des éléments vides (à ne pas confondre avec des éléments qui vaudraient undefined). Si l'argument est un autre nombre, une exception {{jsxref("RangeError")}} sera levée.
+
+ +

Exemples

+ +

Utilisation de la notation littérale

+ +

Les tableaux peuvent être créés avec une notation littérale :

+ +
let fruits = ['Pomme', 'Banane'];
+
+console.log(fruits.length); // 2
+console.log(fruits[0]);     // "Pomme"
+
+ +

Utilisation du constructeur avec un seul paramètre

+ +

On peut créer des tableaux grâce au constructeur avec un seul paramètre numérique. On crée alors un tableau dont la propriété length vaut le nombre passé en argument et dont les éléments sont vides.

+ +
let fruits = new Array(2);
+
+console.log(fruits.length); // 2
+console.log(fruits[0]);     // undefined
+
+ +

Utilisation du constructeur avec plusieurs paramètres

+ +

Si on utilise plus d'un argument, un nouveau tableau ({{jsxref("Array")}}) sera construit avec les éléments passés en arguments.

+ +
let fruits = new Array('Pomme', 'Banane');
+
+console.log(fruits.length); // 2
+console.log(fruits[0]);     // "Pomme"
+
+ +

Spécifications

+ + + + + + + + + + +
Spécification
{{SpecName('ESDraft', '#sec-array-constructor', 'Array constructor')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Array.Array")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/array/concat/index.html b/files/fr/web/javascript/reference/global_objects/array/concat/index.html new file mode 100644 index 0000000000..bd788c4e7c --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/array/concat/index.html @@ -0,0 +1,160 @@ +--- +title: Array.prototype.concat() +slug: Web/JavaScript/Reference/Objets_globaux/Array/concat +tags: + - Array + - JavaScript + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Array/concat +--- +
{{JSRef}}
+ +

La méthode concat() est utilisée afin de fusionner un ou plusieurs tableaux en les concaténant. Cette méthode ne modifie pas les tableaux existants, elle renvoie un nouveau tableau qui est le résultat de l'opération.

+ +
{{EmbedInteractiveExample("pages/js/array-concat.html")}}
+ + + +

Syntaxe

+ +
let nouveau_tableau = ancien_tableau.concat(valeur1[, valeur2[, ...[, valeurN]]])
+ +

Paramètres

+ +
+
valeurN{{optional_inline}}
+
Des tableaux et/ou des valeurs à concaténer dans le nouveau tableau. Si tous les arguments valeurN valent undefined, concat renverra une copie superficielle du tableau sur lequel elle est appelée. Voir ci-après pour plus de détails.
+
+ +

Valeur de retour

+ +

Une nouvelle instance de {{jsxref("Array")}}.

+ +

Description

+ +

La méthode concat permet de créer un nouveau tableau constitué des éléments de l'objet this sur lequel elle a été appelée, suivis dans l'ordre par, pour chaque paramètre, les éléments de ce paramètre (s'il s'agit d'un tableau) ou le paramètre lui-même (s'il ne s'agit pas d'un tableau). La concaténation ne « déplie » pas les tableaux imbriqués.

+ +

La méthode concat ne modifie pas this ni aucun des tableaux passés en paramètres, mais renvoie une copie qui contient des copies des mêmes éléments combinées que ceux des tableaux originaux. Les éléments des tableaux originaux sont copiés dans le nouveau tableau comme suit :

+ + + + + +
+

Note : La concaténation n'impactera pas les tableaux originaux. Par la suite, toute opération sur le nouveau tableau n'aura aucun effet sur les tableaux d'origine, et vice versa.

+
+ +

Exemples

+ +

Concaténer deux tableaux

+ +

Le code qui suit concatène deux tableaux :

+ +
let alpha = ["a", "b", "c"];
+let numerique = [1, 2, 3];
+
+alpha.concat(numerique);
+// donne : ["a", "b", "c", 1, 2, 3]
+
+ +

Concaténer trois tableaux

+ +

Le code qui suit concatène trois tableaux :

+ +
let num1 = [1, 2, 3];
+let num2 = [4, 5, 6];
+let num3 = [7, 8, 9];
+
+let nums = num1.concat(num2, num3);
+
+console.log(nums);
+// [1, 2, 3, 4, 5, 6, 7, 8, 9]
+
+ +

Concaténer des valeurs avec un tableau

+ +

Le code qui suit ajoute trois valeurs à un tableau :

+ +
let alpha = ['a', 'b', 'c'];
+
+let alphanumerique = alpha.concat(1, [2, 3]);
+
+console.log(alphanumerique);
+// ['a', 'b', 'c', 1, 2, 3]
+
+ +

Concaténer des tableaux imbriqués

+ +

Dans le code qui suit, on concatène deux tableaux qui ont plusieurs dimensions et on illustre la conservation des références :

+ +
let num1 = [[1]];
+let num2 = [2, [3]];
+
+let nums = num1.concat(num2);
+
+console.log(nums);
+// affichera [[1], 2, [3]]
+
+// Ici, on modifie le premier élément de num1
+num1[0].push(4);
+
+console.log(nums);
+// affichera [[1, 4], 2, [3]]
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale. Implémentée avec JavaScript 1.2.
{{SpecName('ES5.1', '#sec-15.4.4.4', 'Array.prototype.concat')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-array.prototype.concat', 'Array.prototype.concat')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-array.prototype.concat', 'Array.prototype.concat')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Array.concat")}}

+
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/array/copywithin/index.html b/files/fr/web/javascript/reference/global_objects/array/copywithin/index.html new file mode 100644 index 0000000000..32ffdd57e3 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/array/copywithin/index.html @@ -0,0 +1,199 @@ +--- +title: Array.prototype.copyWithin() +slug: Web/JavaScript/Reference/Objets_globaux/Array/copyWithin +tags: + - Array + - ECMAScript 2015 + - JavaScript + - Méthode + - Prototype + - Reference + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/copyWithin +--- +
{{JSRef}}
+ +

La méthode copyWithin() effectue une copie superficielle (shallow copy) d'une partie d'un tableau sur ce même tableau et le renvoie, sans modifier sa taille.

+ +
{{EmbedInteractiveExample("pages/js/array-copywithin.html")}}
+ + + +

Syntaxe

+ +
arr.copyWithin(cible)
+arr.copyWithin(cible, début)
+arr.copyWithin(cible, début, fin)
+
+ +

Paramètres

+ +
+
cible
+
+

Indice à partir duquel la séquence sera copiée. Si la valeur est négative, cible sera compté à partir de la fin du tableau.

+ +

Si cible est supérieur ou égal à arr.length, rien ne sera copié. Si cible est positionné apès début, la séquence copiée sera réduite pour correspondre à arr.length.

+
+
début {{optional_inline}}
+
Indice de début de la séquence a copier. Si la valeur est négative, début sera compté à partir de la fin du tableau.
+
Si début est omis, copyWithin copiera à partir du début du tableau (par défaut 0).
+
fin {{optional_inline}}
+
Indice de fin de la séquence a copier. copyWithin copie jusqu'à fin (non-inclusif). Si la valeur est négative, end sera compté à partir de la fin du tableau.
+
Si end est omis, copyWithin copiera jusqu'à la fin du tableau (par défaut arr.length).
+
+ +

Valeur de retour

+ +

Le tableau modifié par la méthode.

+ +

Description

+ +

La fonction copyWithin() fonctionne de la même façon que memmove en C/C++. C'est une méthode très performante pour décaler les données d'un {{jsxref("Array")}} ou d'un {{jsxref("TypedArray")}} (dans ce cas, on pourra utiliser {{jsxref("TypedArray/copyWithin", "TypedArray.copyWithin()")}}). La séquence est copiée et collée en une opération. La séquence collée aura les valeurs copiées même si les zones de copiage et de collage se chevauchent.

+ +

La fonction copyWithin() est intentionnellement générique, il n'est pas nécessaire que this soit un objet {{jsxref("Array", "Array")}}.

+ +

De plus, copyWithin() est une méthode qui modifie l'objet courant. Elle ne modifie pas la longueur de this, mais change son contenu et créé de nouvelles propriétés si nécessaire.

+ +

Exemples

+ +
[1, 2, 3, 4, 5].copyWithin(-2);
+// [1, 2, 3, 1, 2]
+
+[1, 2, 3, 4, 5].copyWithin(0, 3);
+// [4, 5, 3, 4, 5]
+
+[1, 2, 3, 4, 5].copyWithin(0, 3, 4);
+// [4, 2, 3, 4, 5]
+
+[1, 2, 3, 4, 5].copyWithin(-2, -3, -1);
+// [1, 2, 3, 3, 4]
+
+[].copyWithin.call({length: 5, 3: 1}, 0, 3);
+// {0: 1, 3: 1, length: 5}
+
+// Les tableaux typés ES2015 sont des sous-classes d'Array
+var i32a = new Int32Array([1, 2, 3, 4, 5]);
+
+i32a.copyWithin(0, 2);
+// Int32Array [3, 4, 5, 4, 5]
+
+// Sur les plates-formes qui ne supportent pas encore ES2015 :
+[].copyWithin.call(new Int32Array([1, 2, 3, 4, 5]), 0, 3, 4);
+// Int32Array [4, 2, 3, 4, 5]
+
+ +

Prothèse d'émulation (polyfill)

+ +

Cette méthode a été ajoutée à la spécification ECMAScript 6 et peut ne pas être utilisable dans tous les environnements. Voici un fragment de code qui permet d'émuler cette méthode :

+ +
if (!Array.prototype.copyWithin) {
+  Object.defineProperty(Array.prototype, 'copyWithin', {
+    value: function(target, start/*, end*/) {
+    // Steps 1-2.
+    if (this == null) {
+      throw new TypeError('this is null or not defined');
+    }
+
+    var O = Object(this);
+
+    // Steps 3-5.
+    var len = O.length >>> 0;
+
+    // Steps 6-8.
+    var relativeTarget = target >> 0;
+
+    var to = relativeTarget < 0 ?
+      Math.max(len + relativeTarget, 0) :
+      Math.min(relativeTarget, len);
+
+    // Steps 9-11.
+    var relativeStart = start >> 0;
+
+    var from = relativeStart < 0 ?
+      Math.max(len + relativeStart, 0) :
+      Math.min(relativeStart, len);
+
+    // Steps 12-14.
+    var end = arguments[2];
+    var relativeEnd = end === undefined ? len : end >> 0;
+
+    var final = relativeEnd < 0 ?
+      Math.max(len + relativeEnd, 0) :
+      Math.min(relativeEnd, len);
+
+    // Step 15.
+    var count = Math.min(final - from, len - to);
+
+    // Steps 16-17.
+    var direction = 1;
+
+    if (from < to && to < (from + count)) {
+      direction = -1;
+      from += count - 1;
+      to += count - 1;
+    }
+
+    // Step 18.
+    while (count > 0) {
+      if (from in O) {
+        O[to] = O[from];
+      } else {
+        delete O[to];
+      }
+
+      from += direction;
+      to += direction;
+      count--;
+    }
+
+    // Step 19.
+    return O;
+  },
+  configurable: true,
+  writable: true
+  });
+}
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-array.prototype.copywithin', 'Array.prototype.copyWithin')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ES2016', '#sec-array.prototype.copywithin', 'Array.prototype.copyWithin')}}{{Spec2('ES2016')}} 
{{SpecName('ESDraft', '#sec-array.prototype.copywithin', 'Array.prototype.copyWithin')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Array.copyWithin")}}

+
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/array/entries/index.html b/files/fr/web/javascript/reference/global_objects/array/entries/index.html new file mode 100644 index 0000000000..127cec9f99 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/array/entries/index.html @@ -0,0 +1,97 @@ +--- +title: Array.prototype.entries() +slug: Web/JavaScript/Reference/Objets_globaux/Array/entries +tags: + - Array + - ECMAScript 2015 + - Iterator + - JavaScript + - Méthode + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Array/entries +--- +
{{JSRef}}
+ +

La méthode entries() renvoie un nouvel objet de type  Array Iterator qui contient le couple clef/valeur pour chaque éléments du tableau.

+ +
{{EmbedInteractiveExample("pages/js/array-entries.html")}}
+ + + +

Syntaxe

+ +
arr.entries()
+ +

Valeur de retour

+ +

Un nouvel objet qui est un itérateur pour {{jsxref("Array")}}.

+ +

Exemples

+ +

Parcourir un tableau avec ses index et éléments

+ +
const arr = ["a", "b", "c"];
+for (const [index, element] of arr.entries()) {
+  console.log(index, element);
+}
+// 0 "a"
+// 1 "b"
+// 2 "c"
+
+ +

Boucle for...of

+ +

On peut avoir le même résultat en utilisant une boucle for...of :

+ +
var arr = ['a', 'b', 'c'];
+var eArr = arr.entries();
+
+for (let e of eArr) {
+  console.log(e);
+}
+// [0, 'a']
+// [1, 'b']
+// [2, 'c']
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-array.prototype.entries', 'Array.prototype.entries')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-array.prototype.entries', 'Array.prototype.entries')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Array.entries")}}

+
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/array/every/index.html b/files/fr/web/javascript/reference/global_objects/array/every/index.html new file mode 100644 index 0000000000..2c3e71dca6 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/array/every/index.html @@ -0,0 +1,201 @@ +--- +title: Array.prototype.every() +slug: Web/JavaScript/Reference/Objets_globaux/Array/every +tags: + - Array + - ECMAScript 5 + - JavaScript + - Méthode + - Prototype + - Reference + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/every +--- +
{{JSRef}}
+ +

La méthode every() permet de tester si tous les éléments d'un tableau vérifient une condition donnée par une fonction en argument. Cette méthode renvoie un booléen pour le résultat du test.

+ +
+

Note : Cette méthode renvoie true pour n'importe quelle condition utilisée sur un tableau vide.

+
+ +
{{EmbedInteractiveExample("pages/js/array-every.html")}}
+ + + +

Syntaxe

+ +
arr.every(callback[, thisArg])
+ +

Paramètres

+ +
+
callback
+
La fonction sur laquelle on souhaite tester chaque élément du tableau. Elle prend en compte trois arguments : +
+
currentValue
+
La valeur de l'élément à traiter.
+
index{{Optional_inline}}
+
L'indice de l'élément du tableau à tester.
+
array{{Optional_inline}}
+
Le tableau sur lequel on a appelé la méthode every.
+
+
+
thisArg{{Optional_inline}}
+
Paramètre optionnel. La valeur à utiliser pour this lors de l'exécution de la fonction.
+
+ +

Valeur de retour

+ +

true si la fonction de rappel obtient une valeur équivalente à vrai (truthy) pour chaque élément du tableau et false sinon.

+ +

Description

+ +

La méthode every exécute la fonction callback fournie sur chacun des éléments contenus dans le tableau jusqu'à ce qu'un élément pour lequel la fonction callback renvoie une valeur fausse (falsy value) soit trouvé. Si un tel élément est trouvé, la méthode every renvoie directement false. Sinon, si la fonction callback a renvoyé une valeur vraie pour tous les éléments, la méthode every renverra true. La fonction callback n'est appelée que pour les indices du tableau pour lesquels il existe des valeurs affectées. Elle n'est pas appelée pour les indices supprimés ou ceux qui n'ont jamais reçu de valeur.

+ +

callback est appelée avec trois arguments : la valeur de l'élément en cours de traitement, l'indice de l'élément dans le tableau et le tableau qui est parcouru.

+ +

Si un paramètre thisArg est fourni à la méthode every, ce sera la valeur this de la fonction callback. Si ce paramètre n'est pas fourni, la valeur undefined sera utilisée comme valeur pour this. La valeur this « définitivement » utilisée par la fonction callback est déterminée selon les règles usuelles de détermination de this.

+ +

every ne modifie pas le tableau sur lequel elle a été appelée.

+ +

Les éléments traités par la méthode every sont définis lors du premier appel à callback. Les éléments ajoutés au tableau après que l'appel à every ait commencé ne seront pas traités par la fonction callback. Si des éléments du tableau sont modifiés, la valeur passée à la fonction callback sera celle qu'ils ont au moment où every les traitera. Les éléments qui sont supprimés ne sont pas traités par la fonction every.

+ +

every agit de la même façon que le quantificateur mathématiques « pour tous », notamment pour le cas au limite d'un tableau vide pour lequel elle renvoie true (on dit qu'il est trivialement vrai que tous les éléments d'un ensemble vide respectent n'importe quelle condition).

+ +

Exemples

+ +

Tester la valeur des éléments d'un tableau

+ +

Dans l'exemple suivant, on teste si tous les éléments du tableau sont supérieurs à 10.

+ +
function estAssezGrand(element, index, array) {
+  return element >= 10;
+}
+[12, 5, 8, 130, 44].every(estAssezGrand);   // false
+[12, 54, 18, 130, 44].every(estAssezGrand); // true
+
+ +

Utiliser les fonctions fléchées avec every

+ +

{{jsxref("Fonctions/Fonctions_fl%C3%A9ch%C3%A9es","Les fonctions fléchées","","1")}} permettent d'utiliser une syntaxe plus concise pour effectuer le même test.

+ +
[12, 5, 8, 130, 44].every(elem => elem >= 10); // false
+[12, 54, 18, 130, 44].every(elem => elem >= 10); // true
+[{a:1, b:2}, {a:1, b:3}].every(elem => elem.a === 1); // true
+[{a:2, b:2}, {a:1, b:3}].every(elem => elem.a === 1); // false
+
+ +

Prothèse d'émulation (polyfill)

+ +

every fut ajouté avec la cinquième édition du standard ECMA-262. Pour cette raison, il n'est pas nécessairement présent dans les différentes implémentations de ce standard. Afin de faire fonctionner du code dans un environnement qui ne possède pas cette fonctionnalité, on pourra utiliser le fragment de code suivant au début des scripts. Cet algorithme correspond exactement à celui défini dans la cinquième édition du standard ECMA-262. On prend l'hypothèse que Object et TypeError ont leurs valeurs originales (n'ont pas été modifiés) et que callbackfn.call correspond bien à la valeur originale de {{jsxref("Function.prototype.call")}}

+ +
if (!Array.prototype.every) {
+  Array.prototype.every = function(callbackfn, thisArg) {
+    'use strict';
+    var T, k;
+
+    if (this == null) {
+      throw new TypeError('this vaut null ou n est pas défini');
+    }
+
+    // 1. Soit O le résultat de l'appel à ToObject auquel on a
+    // passé this comme argument
+    var O = Object(this);
+
+    // 2. Soit lenValue le résultat de l'appel de la méthode interne
+    //   Get sur O avec l'argument "length".
+    // 3. Soit len le résultat de ToUint32(lenValue).
+    var len = O.length >>> 0;
+
+    // 4. Si IsCallable(callbackfn) est faux, on lève une exception
+    // TypeError.
+    if (typeof callbackfn !== 'function') {
+      throw new TypeError();
+    }
+
+    // 5. Si thisArg a été fourni : soit T cette valeur thisArg, undefined sinon.
+    if (arguments.length > 1) {
+      T = thisArg;
+    }
+
+    // 6. Soit k égal à 0.
+    k = 0;
+
+    // 7. On répète tant que k < len
+    while (k < len) {
+
+      var kValue;
+
+      // a. Soit Pk la valeur de ToString(k).
+      //   (ce qui est implicite pour les opérandes gauche de in)
+      // b. Soit kPresent le résultat de l'appel de la méthode
+      //    interne de O avec l'argument Pk.
+      //    Cette étape peut être combinée avec l'étape c
+      // c. Si kPresent vaut true, alors
+      if (k in O) {
+
+        // i. Soit kValue le résultat de l'appel de la méthode
+        //    interne Get de O avec l'argument Pk.
+        kValue = O[k];
+
+        // ii. Soit testResult le résultat de l'appel de la méthode
+        //     interne Call de callbackfn avec T comme valeur this et
+        //     la liste d'argument contenant kValue, k, et O.
+        var testResult = callbackfn.call(T, kValue, k, O);
+
+        // iii. Si ToBoolean(testResult) vaut false, on renvoie false.
+        if (!testResult) {
+          return false;
+        }
+      }
+      k++;
+    }
+    return true;
+  };
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES5.1', '#sec-15.4.4.16', 'Array.prototype.every')}}{{Spec2('ES5.1')}}Définition initiale. Implémentée avec JavaScript 1.6.
{{SpecName('ES6', '#sec-array.prototype.every', 'Array.prototype.every')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-array.prototype.every', 'Array.prototype.every')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Array.every")}}

+
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/array/fill/index.html b/files/fr/web/javascript/reference/global_objects/array/fill/index.html new file mode 100644 index 0000000000..9c5d0c1e6f --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/array/fill/index.html @@ -0,0 +1,155 @@ +--- +title: Array.prototype.fill() +slug: Web/JavaScript/Reference/Objets_globaux/Array/fill +tags: + - Array + - ECMAScript 2015 + - JavaScript + - Méthode + - Prototype + - Reference + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/fill +--- +
{{JSRef}}
+ +

La méthode fill() remplit tous les éléments d'un tableau entre deux index avec une valeur statique. La valeur de l'index de fin n'est pas incluse. Cette méthode renvoie le tableau modifié.

+ +
{{EmbedInteractiveExample("pages/js/array-fill.html")}}
+ + + +

Syntaxe

+ +
arr.fill(valeur)
+arr.fill(valeur, début)
+arr.fill(valeur, début, fin)
+
+ +

Paramètres

+ +
+
valeur
+
Valeur avec laquelle remplir le tableau.
+
début {{optional_inline}}
+
Index de début, la valeur par défaut est 0.
+
fin {{optional_inline}}
+
Index de fin, la valeur par défaut est this.length.
+
+ +

Valeur de retour

+ +

Le tableau modifié par la méthode.

+ +

Description

+ +

Les éléments pour lesquels on utilisera la valeur sont ceux contenus dans l'intervalle de positions [début, fin].

+ +

La méthode fill() prend jusqu'à trois arguments : valeur, début et fin. Les arguments début et fin sont optionnels. Leurs valeurs par défaut sont respectivement 0 et la taille length de l'objet this.

+ +

Si début est négatif, il sera traité comme length+début où length est la taille du tableau. Si fin est négatif, il est traité comme length+fin.

+ +

La fonction fill() est intentionnellement générique, il n'est pas nécessaire que sa valeur this soit un objet Array.

+ +

La méthode fill() est une méthode de modification, elle changera l'objet this lui-même, et renverra l'objet modifié. Elle ne crée pas de copie. Lorsque cette méthode reçoit un objet comme valeur, elle copiera l'objet passé et remplira le tableau avec une référence vers cette copie.

+ +

Exemples

+ +
[1, 2, 3].fill(4);            // [4, 4, 4]
+[1, 2, 3].fill(4, 1);         // [1, 4, 4]
+[1, 2, 3].fill(4, 1, 2);      // [1, 4, 3]
+[1, 2, 3].fill(4, 1, 1);      // [1, 2, 3]
+[1, 2, 3].fill(4, -3, -2);    // [4, 2, 3]
+[1, 2, 3].fill(4, 3, 3);      // [1, 2, 3]
+[1, 2, 3].fill(4, NaN, NaN);  // [1, 2, 3]
+Array(3).fill(4);             // [4, 4, 4]
+[].fill.call({length: 3}, 4); // {0: 4, 1: 4, 2: 4, length: 3}
+
+// Les objets sont copiés via une référence
+var arr = Array(3).fill({}); // [{}, {}, {}];
+arr[0].yop = "yop"; // [{yop: "yop"}, {yop: "yop"}, {yop: "yop"}]
+
+ +

Prothèse d'émulation (polyfill)

+ +
if (!Array.prototype.fill) {
+  Object.defineProperty(Array.prototype, 'fill', {
+    value: function(value) {
+
+      // Steps 1-2.
+      if (this == null) {
+        throw new TypeError('this is null or not defined');
+      }
+
+      var O = Object(this);
+
+      // Steps 3-5.
+      var len = O.length >>> 0;
+
+      // Steps 6-7.
+      var start = arguments[1];
+      var relativeStart = start >> 0;
+
+      // Step 8.
+      var k = relativeStart < 0 ?
+        Math.max(len + relativeStart, 0) :
+        Math.min(relativeStart, len);
+
+      // Steps 9-10.
+      var end = arguments[2];
+      var relativeEnd = end === undefined ?
+        len : end >> 0;
+
+      // Step 11.
+      var final = relativeEnd < 0 ?
+        Math.max(len + relativeEnd, 0) :
+        Math.min(relativeEnd, len);
+
+      // Step 12.
+      while (k < final) {
+        O[k] = value;
+        k++;
+      }
+
+      // Step 13.
+      return O;
+    }
+  });
+}
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-array.prototype.fill', 'Array.prototype.fill')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-array.prototype.fill', 'Array.prototype.fill')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Array.fill")}}

+
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/array/filter/index.html b/files/fr/web/javascript/reference/global_objects/array/filter/index.html new file mode 100644 index 0000000000..fdd8fa023a --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/array/filter/index.html @@ -0,0 +1,228 @@ +--- +title: Array.prototype.filter() +slug: Web/JavaScript/Reference/Objets_globaux/Array/filter +tags: + - Array + - ECMAScript 5 + - JavaScript + - Méthode + - Prototype + - Reference + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/filter +--- +
{{JSRef}}
+ +

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 callback.

+ +
{{EmbedInteractiveExample("pages/js/array-filter.html")}}
+ + + +

Syntaxe

+ +
arr.filter(callback); // callback(elementCourant[, index[, tableauEntier]])
+var nouveauTableau = arr.filter(callback, thisArg);
+
+ +

Paramètres

+ +
+
callback
+
La fonction de test (ou prédicat) à appliquer à chaque élément du tableau. Cette fonction est appelée avec les arguments suivants : +
+
elementCourant
+
L'élément à traiter
+
index
+
Son indice.
+
array
+
Le tableau complet
+
+ Cette fonction renvoie true — ou une valeur équivalente — si l'élément doit être conservé pour le tableau résultat et false dans le cas contraire.
+
thisArg {{optional_inline}}
+
Objet à utiliser en tant que this quand la fonction callback est exécutée.
+
+ +

Valeur de retour

+ +

Un nouveau tableau contenant les éléments qui respectent la condition du filtre. Si aucun élément ne respecte la condition, c'est un tableau vide qui est renvoyé.

+ +

Description

+ +

filter() appelle la fonction callback fournie pour chacun des éléments d'un tableau, et construit un nouveau tableau contenant tous les éléments pour lesquels l'appel de callback retourne true ou une valeur équivalente à true dans un contexte booléen. La fonction callback n'est utilisée que pour les éléments du tableau ayant une valeur assignée — les index supprimés ou pour lesquels il n'y a jamais eu de valeur ne sont pas pris en compte. Les éléments du tableau qui ne passent pas le test effectué par la fonction callback sont ignorés, ils ne sont pas inclus dans le nouveau tableau.

+ +

La fonction callback est appelée avec trois arguments :

+ +
    +
  1. la valeur de l'élément courant,
    2. +
  2. l'index de l'élément courant,
    3. +
  3. l'objet Array parcouru.
    4. +
+ +

Si le paramètre thisArg est fourni, il sera utilisé comme valeur this lors de l'appel de la fonction callback. S'il n'est pas fourni, la valeur undefined sera utilisée à la place. La valeur de this qui est finalement utilisée par la fonction callback est déterminée selon les règles usuelles pour déterminer la valeur this au sein d'une fonction.

+ +

Noter que filter() ne modifie pas le tableau d'origine.

+ +

La liste des éléments parcourus par filter() est définie avant la première invocation de la fonction callback. Les éléments qui sont ajoutés à la liste après le début de l'appel de filter() (grâce à la fonction callback par exemple) ne seront pas concernés par le filtre. Si des éléments de la liste sont modifiés ou supprimés au cours du traitement, la valeur fournie à la fonction callback sera la valeur de ces éléments au moment où filter() les traite — les éléments supprimés ne seront pas traités par la fonction.

+ +

Exemples

+ +

Filtrer les petites valeurs

+ +

L'exemple suivant utilise filter pour créer une nouvelle liste où tous les éléments dont la valeur est inférieure à 10 ont été retirés.

+ +
function suffisammentGrand(element) {
+  return element >= 10;
+}
+var filtre = [12, 5, 8, 130, 44].filter(suffisammentGrand);
+// filtre vaut [12, 130, 44]
+
+ +

Filtrer des éléments JSON invalides et les trier en fonction d'un identifiant avec filter()

+ +

Dans l'exemple qui suit, on utilise filter() pour créer un objet JSON qui contient des éléments dont l'id est un entier.

+ +
var arr = [
+  { id: 15 },
+  { id: -1 },
+  { id: 0 },
+  { id: 3 },
+  { id: 12.2 },
+  { },
+  { id: null },
+  { id: NaN },
+  { id: 'undefined' }
+];
+
+var elementsInvalides = 0;
+
+function filtrerParID(obj) {
+  // Si c'est un nombre
+  if (obj.id !== undefined && typeof(obj.id) === 'number' && !isNaN(obj.id)) {
+    return true;
+  } else {
+    elementsInvalides++;
+    return false;
+  }
+}
+
+var arrByID = arr.filter(filtrerParID);
+
+console.log('Tableau filtré\n', arrByID);
+// Le tableau filtré est :
+// [{ id: 15 }, { id: -1 }, { id: 0 }, { id: 3 }, { id: 12.2 }]
+
+console.log('Nombre d\'éléments invalides = ', elementsInvalides);
+// Nombre d'éléments invalides 4
+ +

Recherche dans un tableau

+ +

Dans l'exemple qui suit, on utilise filter() pour filtrer le contenu d'un tableau selon un critère donné.

+ +
var fruits = ['pomme', 'banane', 'raisin', 'mangue'];
+
+function filtreTexte(arr, requete) {
+  return arr.filter(function (el) {
+    return el.toLowerCase().indexOf(requete.toLowerCase()) !== -1;
+  })
+}
+
+console.log(filtreTexte(fruits, 'an')); // ['banane', 'mangue'];
+console.log(filtreTexte(fruits, 'm')); // ['pomme', 'mangue'];
+
+ +

Implémentation avec la syntaxe ECMAScript 2015 (ES6)

+ +

L'exemple suivant utilise les fonctions fléchées, et le mot clé const disponible en ES6.

+ +
const fruits = ['pomme', 'banane', 'raisin', 'mangue'];
+
+const filtreTexte = (arr, requete) => {
+  return arr.filter(el =>  el.toLowerCase().indexOf(requete.toLowerCase()) !== -1);
+}
+
+console.log(filtreTexte(fruits, 'an')); // ['banane', 'mangue'];
+console.log(filtreTexte(fruits, 'm')); // ['pomme', 'mangue'];
+ +

Prothèse d'émulation (polyfill)

+ +

Array.prototype.filter() a été ajoutée avec la cinquième édition du standard ECMA-262 — ainsi elle pourrait ne pas être présente dans toutes les implémentations du standard. Ce problème peut être contourné en ajoutant le code suivant au début des scripts et permettra d'utiliser filter au sein d'implémentations qui n'en bénéficient pas nativement. Cet algorithme est strictement celui spécifié par la cinquième édition d'ECMA-262, en considérant que callbackfn.call est évaluée avec la valeur d'origine de {{jsxref("Function.prototype.call")}} et que {{jsxref("Array.prototype.push")}} a sa valeur d'origine.

+ +
if (!Array.prototype.filter){
+  Array.prototype.filter = function(func, thisArg) {
+    'use strict';
+    if ( ! ((typeof func === 'Function' || typeof func === 'function') && this) )
+        throw new TypeError();
+
+    var len = this.length >>> 0,
+        res = new Array(len), // preallocate array
+        t = this, c = 0, i = -1;
+    if (thisArg === undefined){
+      while (++i !== len){
+        // checks to see if the key was set
+        if (i in this){
+          if (func(t[i], i, t)){
+            res[c++] = t[i];
+          }
+        }
+      }
+    }
+    else{
+      while (++i !== len){
+        // checks to see if the key was set
+        if (i in this){
+          if (func.call(thisArg, t[i], i, t)){
+            res[c++] = t[i];
+          }
+        }
+      }
+    }
+
+    res.length = c; // shrink down array to proper size
+    return res;
+  };
+}
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES5.1', '#sec-15.4.4.20', 'Array.prototype.filter')}}{{Spec2('ES5.1')}}Définition initiale. Implémentée avec JavaScript 1.6.
{{SpecName('ES2015', '#sec-array.prototype.filter', 'Array.prototype.filter')}}{{Spec2('ES2015')}} 
{{SpecName('ESDraft', '#sec-array.prototype.filter', 'Array.prototype.filter')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Array.filter")}}

+
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/array/find/index.html b/files/fr/web/javascript/reference/global_objects/array/find/index.html new file mode 100644 index 0000000000..c6675f0b1b --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/array/find/index.html @@ -0,0 +1,145 @@ +--- +title: Array.prototype.find() +slug: Web/JavaScript/Reference/Objets_globaux/Array/find +tags: + - Array + - ECMAScript 2015 + - JavaScript + - Méthode + - Prototype + - Reference + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/find +--- +
{{JSRef}}
+ +

La méthode find() renvoie la valeur du premier élément trouvé dans le tableau qui respecte la condition donnée par la fonction de test passée en argument. Sinon, la valeur {{jsxref("undefined")}} est renvoyée.

+ +
{{EmbedInteractiveExample("pages/js/array-find.html")}}
+ + + +

Voir aussi la méthode {{jsxref("Array.findIndex", "findIndex()")}} qui renvoie l'index de l'élément trouvé et non sa valeur. Si on souhaite repérer la position d'un élément donné dans le tableau, on pourra utiliser {{jsxref("Array.prototype.indexOf()")}}. Si on souhaite déterminer si un tableau contient un élément donné, on pourra utiliser la méthode {{jsxref("Array.prototype.includes()")}}.

+ +

Syntaxe

+ +
arr.find(callback(element[, index[, tableau]])[, thisArg])
+ +

Paramètres

+ +
+
callback
+
Fonction à exécuter sur chaque valeur du tableau, elle prend 3 arguments : +
+
element
+
L'élément actuellement traité dans le tableau.
+
index{{optional_inline}}
+
L'index de l'élément actuellement traité dans le tableau
+
array{{optional_inline}}
+
Le tableau pour lequel la méthode find a été appelée.
+
+
+
thisArg {{optional_inline}}
+
Ce paramètre est optionnel. Objet à utiliser en tant que this lorsque la fonction callback est exécutée.
+
+ +

Valeur de retour

+ +

La valeur du premier élément du tableau qui réussit le test, sinon {{jsxref("undefined")}}.

+ +

Description

+ +

La méthode find exécute la fonction callback une fois pour chaque élément présent dans le tableau jusqu'à ce qu'elle retourne une valeur vraie (qui peut être convertie en true). Si un élément est trouvé, find retourne immédiatement la valeur de l'élément. Autrement, find retourne undefined. La méthode callback est seulement appelée pour les index du tableau pour lesquels on dispose d'une valeur. Elle n'est pas appelée pour les index supprimés ou pour ceux qui n'ont pas de valeur.

+ +

La méthode callback est appelée avec trois arguments : la valeur de l'élément, l'index de l'élément, et l'objet correspondant au tableau traversé.

+ +

Si le paramètre thisArg est fourni à find, il sera utilisé comme le this pour chaque exécution de la fonction callback. S'il n'est pas fourni, alors {{jsxref("undefined")}} sera utilisé.

+ +

find ne modifie pas le tableau à partir duquel elle est appelée.

+ +

L'intervalle des éléments inspectés par find est défini avant la première exécution de callback. Les éléments ajoutés au tableau après l'appel à find ne seront pas inspectés par la fonction callback. Si un élément existant est modifié avant le passage du callback, alors la valeur traitée par le callback sera celle présente lors du passage de find sur son index. Les éléments supprimés ne seront pas traités.

+ +

Exemples

+ +

Trouver un objet dans un tableau grâce à une de ses propriétés

+ +
const inventaire = [
+  {nom: 'pommes', quantité: 2},
+  {nom: 'bananes', quantité: 0},
+  {nom: 'cerises', quantité: 5}
+];
+
+function estCerises(fruit) {
+  return fruit.nom === 'cerises';
+}
+
+console.log(inventaire.find(estCerises));
+// { nom: 'cerises', quantité: 5}
+ +

Utiliser les fonctions fléchées ES6/ES2015

+ +
const inventaire = [
+                     {nom: 'pommes', quantité: 2},
+                     {nom: 'bananes', quantité: 0},
+                     {nom: 'cerises', quantité: 5}
+                   ];
+
+const resultat = inventaire.find( fruit => fruit.nom === 'cerises');
+console.log(resultat);
+// { nom: 'cerises', quantité: 5}
+ +

Trouver un nombre premier dans un tableau

+ +

Dans l'exemple suivant, on cherche un nombre premier parmi les éléments d'un tableau (ou retourne undefined s'il n'y en a pas ).

+ +
function estPremier(element, index, array) {
+    let début = 2;
+    while (début <= Math.sqrt(element)) {
+        if (element % début ++ < 1) return false;
+    }
+    return (element > 1);
+}
+
+console.log( [4, 6, 8, 12].find(estPremier) ); // undefined, rien trouvé
+console.log( [4, 5, 8, 12].find(estPremier) ); // 5
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-array.prototype.find', 'Array.prototype.find')}}{{Spec2('ES2015')}}Définition initiale
{{SpecName('ESDraft', '#sec-array.prototype.find', 'Array.prototype.find')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Array.find")}}

+
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/array/findindex/index.html b/files/fr/web/javascript/reference/global_objects/array/findindex/index.html new file mode 100644 index 0000000000..3d116dfe97 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/array/findindex/index.html @@ -0,0 +1,179 @@ +--- +title: Array.prototype.findIndex() +slug: Web/JavaScript/Reference/Objets_globaux/Array/findIndex +tags: + - Array + - ECMAScript6 + - JavaScript + - Méthode + - Prototype + - Reference + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/findIndex +--- +
{{JSRef}}
+ +

La méthode findIndex() renvoie l'indice du premier élément du tableau qui satisfait une condition donnée par une fonction. Si la fonction renvoie faux pour tous les éléments du tableau, le résultat vaut -1.

+ +
{{EmbedInteractiveExample("pages/js/array-findindex.html")}}
+ + + +

Voir également la méthode {{jsxref("Array.find", "find()")}} qui renvoie la valeur (et non l'indice) d'un des éléments trouvés.

+ +

Syntaxe

+ +
arr.findIndex(callback(element[, index[, tableau]])[, thisArg])
+ +

Paramètres

+ +
+
callback
+
Une fonction à exécuter sur chaque valeur du tableau jusqu'à ce que celle-ci renvoie true. Cette fonction prend trois arguments : +
+
élément
+
L'élément du tableau qui doit être traité.
+
indice{{optional_inline}}
+
L'indice de l'élément du tableau en cours de traitement.
+
tableau{{optional_inline}}
+
Le tableau sur lequel a été appelé findIndex.
+
+
+
argumentThis{{optional_inline}}
+
L'objet à utiliser comme contexte this lorsque le callback est exécuté.
+
+ +

Valeur de retour

+ +

Un indice d'un élément du tableau qui réussit le test décrit, -1 sinon.

+ +

Description

+ +

La méthode findIndex exécute la fonction callback une fois pour chaque élément présent dans le tableau (le tableau est parcouru entre les indices 0 et length-1 compris) jusqu'à ce que callback renvoie une valeur vraie.

+ +

S'il existe un tel élément, findIndex renverra immédiatement l'indice de l'élément concerné. Sinon, findIndex renverra -1. À la différence des autres méthodes liées aux tableaux comme some(), callback est également appelée pour les indices du tableau pour lesquels aucun élément n'est défini.

+ +

callback possède trois arguments : la valeur de l'élément, l'indice de l'élément et l'objet Array qui est parcouru

+ +

Si l'argument argumentThis est fourni à la méthode findIndex, il sera utilisé comme « contexte » this pour chaque appel de callback. S'il n'est pas fourni, {{jsxref("undefined")}} sera utilisé.

+ +

findIndex ne modifie pas le tableau sur laquelle elle est appelée. Les éléments qui seront traités par findIndex sont « récoltés » avant le premier appel de callback. Tout élément qui sera ajouté au tableau après l'appel de findIndex ne sera pas utilisé avec callback. Si un élément existant, pas encore visité, est modifié par callback, la valeur qui sera passé au callback pour cet élément modifié sera celle que findIndex utilise lorsqu'elle utilise l'indice de l'élément en question. Les éléments supprimés sont bien parcourus.

+ +

Exemples

+ +

Trouver l'indice d'un nombre premier dans un tableau

+ +

L'exemple qui suit illustre comment trouver l'indice d'un élément qui est un nombre premier dans un tableau (ou qui renvoie -1 s'il n'y a pas de nombre premier).

+ +
function estPremier(élément, index, array) {
+  var début = 2;
+  while (début <= Math.sqrt(élément)) {
+    if (élément % début < 1) {
+      return false;
+    } else {
+      début++;
+    }
+  }
+  return élément > 1;
+}
+
+console.log([4, 6, 8, 12].findIndex(estPremier)); // -1, aucun trouvé
+console.log([4, 6, 7, 12].findIndex(estPremier)); // 2
+ +

Trouver un indice avec une fonction fléchée

+ +

Dans cet exemple, on utilise une fonction fléchée pour trouver l'indice d'un élément :

+ +
const fruits = ["pomme", "banane", "melon", "fraise", "raisin"];
+
+const indice = fruits.findIndex(fruit => fruit === "fraise");
+console.log(indice); // 3
+console.log(fruits[indice]); // fraise
+ +

Prothèse d'émulation (polyfill)

+ +
// https://tc39.github.io/ecma262/#sec-array.prototype.findindex
+if (!Array.prototype.findIndex) {
+  Object.defineProperty(Array.prototype, 'findIndex', {
+    value: function(predicate) {
+     // 1. Let O be ? ToObject(this value).
+      if (this == null) {
+        throw new TypeError('"this" is null or not defined');
+      }
+
+      var o = Object(this);
+
+      // 2. Let len be ? ToLength(? Get(O, "length")).
+      var len = o.length >>> 0;
+
+      // 3. If IsCallable(predicate) is false, throw a TypeError exception.
+      if (typeof predicate !== 'function') {
+        throw new TypeError('predicate must be a function');
+      }
+
+      // 4. If thisArg was supplied, let T be thisArg; else let T be undefined.
+      var thisArg = arguments[1];
+
+      // 5. Let k be 0.
+      var k = 0;
+
+      // 6. Repeat, while k < len
+      while (k < len) {
+        // a. Let Pk be ! ToString(k).
+        // b. Let kValue be ? Get(O, Pk).
+        // c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)).
+        // d. If testResult is true, return k.
+        var kValue = o[k];
+        if (predicate.call(thisArg, kValue, k, o)) {
+          return k;
+        }
+        // e. Increase k by 1.
+        k++;
+      }
+
+      // 7. Return -1.
+      return -1;
+    },
+    configurable: true,
+    writable: true
+  });
+}
+ +

S'il est vraiment nécessaire de prendre en charge les moteurs JavaScript qui ne prennent pas en charge {{jsxref("Object.defineProperty()")}}, mieux vaut ne pas ajouter de prothèse aux méthodes d'Array.prototype car on ne peut pas les rendre non-énumérables.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-array.prototype.findindex', 'Array.prototype.findIndex')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-array.prototype.findIndex', 'Array.prototype.findIndex')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Array.findIndex")}}

+
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/array/flat/index.html b/files/fr/web/javascript/reference/global_objects/array/flat/index.html new file mode 100644 index 0000000000..27a0337822 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/array/flat/index.html @@ -0,0 +1,148 @@ +--- +title: Array.prototype.flat() +slug: Web/JavaScript/Reference/Objets_globaux/Array/flat +tags: + - Array + - JavaScript + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Array/flat +--- +
{{JSRef}}
+ +

La méthode flat() permet de créer un nouveau tableau contenant les éléments des sous-tableaux du tableau passé en argument, qui sont concaténés récursivement pour atteindre une profondeur donnée.

+ + + + + +

Syntaxe

+ +
var nouveauTableau = monTableau.flat([profondeur]);
+ +

Paramètres

+ +
+
profondeur {{optional_inline}}
+
Le niveau de profondeur en termes d'imbrication de tableau. Autrement dit, jusqu'à quel niveau d'imbrication un tableau imbriqué doit il être aplati. La valeur par défaut est 1.
+
+ +

Valeur de retour

+ +

Un nouveau tableau qui contient la concaténation des éléments des sous-tableaux du tableau passé en argument.

+ +

Exemples

+ +

Aplatir des tableaux imbriqués

+ +
var arr1 = [1, 2, [3, 4]];
+arr1.flat();
+// [1, 2, 3, 4]
+
+var arr2 = [1, 2, [3, 4, [5, 6]]];
+arr2.flat();
+// [1, 2, 3, 4, [5, 6]]
+
+var arr3 = [1, 2, [3, 4, [5, 6]]];
+arr3.flat(2);
+// [1, 2, 3, 4, 5, 6]
+
+ +

Aplatir et combler les trous

+ +

La méthode flat() permet également de retirer les « trous » d'un tableau :

+ +
var arr4 = [1, 2, , 4, 5];
+arr4.flat();
+// [1, 2, 4, 5]
+ +

Équivalent

+ +

reduce et concat

+ +
var arr = [1, 2, [3, 4]];
+
+// pour un tableau avec un seul niveau de profondeur
+arr.flat();
+// est équivalent à
+arr.reduce((acc, val) => acc.concat(val), []);
+// [1, 2, 3, 4]
+
+// avec la décomposition et les compositions flechées, on peut écrire :
+const flat = arr => [].concat(...arr);
+
+ +

reduce + concat + isArray + récursivité

+ +
var arr = [1, 2, [3, 4, [5, 6]]];
+
+// Pour gérer plusieurs niveaux, on pourra utiliser
+// une méthode récursive avec reduce et concat
+function flatDeep(arr) {
+   return arr.reduce((acc, val) => acc.concat(Array.isArray(val) ? flatDeep(val) : val), []);
+};
+
+flatDeep(arr);
+// [1, 2, 3, 4, 5, 6]
+
+ +

Utiliser une pile

+ +
var arr = [1, 2, [3, 4]];
+
+// Version non récursive utilisant une pile
+function flatStack(input) {
+  const stack = [...input];
+  const res = [];
+  while (stack.length) {
+    // On sort une valeur de la pile
+    const next = stack.pop();
+    if (Array.isArray(next)) {
+      // On place les éléments qui sont des tableaux dans
+      // la pile sans modifier l'entrée
+      stack.push(...next);
+    } else {
+      res.push(next);
+    }
+  }
+  // On inverse le résultat pour revenir
+  // à l 'ordre de l'entrée
+  return res.reverse();
+}
+
+flatStack(arr);
+// [1, 2, 3, 4]
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
ECMAScript 2019FinaliséProposition initiale
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Array.flat")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/array/flatmap/index.html b/files/fr/web/javascript/reference/global_objects/array/flatmap/index.html new file mode 100644 index 0000000000..f69e64607c --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/array/flatmap/index.html @@ -0,0 +1,126 @@ +--- +title: Array.prototype.flatMap() +slug: Web/JavaScript/Reference/Objets_globaux/Array/flatMap +tags: + - Array + - JavaScript + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Array/flatMap +--- +
{{JSRef}}
+ +

La méthode flatMap() permet d'appliquer une fonction à chaque élément du tableau puis d'aplatir le résultat en un tableau. Cela correspond à l'enchaînement de {{jsxref("Array.prototype.map()")}} suivi de {{jsxref("Array.prototype.flat()")}} de profondeur 1. flatMap est plus efficace que la combinaison de ces deux opérations, souvent réalisées conjointement.

+ + + + + +

Syntaxe

+ +
var new_array = arr.flatMap(function callback(currentValue[, index[, array]]) {
+    // return element for new_array
+}[, thisArg])
+ +

Paramètres

+ +
+
callback
+
La fonction qui produit un élément du nouveau tableau et qui prend trois arguments : +
+
+
currentValue
+
La valeur du tableau qui est traitée.
+
index{{optional_inline}}
+
L'indice de l'élément du tableau qui est traitée.
+
array{{optional_inline}}
+
Le tableau sur lequel flatMap a été appelée.
+
+
+
thisArg{{optional_inline}}
+
La valeur à utiliser comme contexte this lors de l'exécution de callback.
+
+ +

Valeur de retour

+ +

Un nouveau tableau composé d'éléments résultants de la fonction de rappel (callback) et aplati d'un niveau de profondeur.

+ +

Description

+ +

Pour la fonction de rappel, voir {{jsxref("Array.prototype.map()")}}. La méthode flatMap() est identique à un appel de {{jsxref("Array.prototype.map()")}} suivi d'un appel de {{jsxref("Array.prototype.flat()")}} avec la profondeur 1.

+ +

Exemples

+ +

map() et flatMap()

+ +
var arr1 = [1, 2, 3, 4];
+
+arr1.map(x => [x * 2]);
+// [[2], [4], [6], [8]]
+
+arr1.flatMap(x => [x * 2]);
+// [2, 4, 6, 8]
+
+// seul un niveau est aplati
+arr1.flatMap(x => [[x * 2]]);
+// [[2], [4], [6], [8]]
+
+ +

On peut utiliser un autre exemple où on génère une liste de mots à partir d'une liste de phrases :

+ +
let tableau1 = ["Coucou comment", "", "ça va ?"];
+
+tableau1.map(x => x.split(" "));
+// [["Coucou", "comment"], [""], ["ça", "va", "?"]]
+
+tableau1.flatMap(x => x.split(" "));
+// ["Coucou", "comment", "", "ça", "va", "?"]
+
+ +

On notera que la longueur de la liste obtenue avec flatMap est différente de la longueur de la liste originale.

+ +
//=> [1, 2, 3, 4, 5, 6, 7, 8, 9]
+ +

Équivalent

+ +

reduce() et concat()

+ +
var arr = [1, 2, 3, 4];
+
+arr.flatMap(x => [x, x * 2]);
+// est équivalent à
+arr.reduce((acc, x) => acc.concat([x, x * 2]), []);
+// [1, 2, 2, 4, 3, 6, 4, 8]
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
ECMAScript 2019FinaliséProposition initiale
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Array.flatMap")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/array/foreach/index.html b/files/fr/web/javascript/reference/global_objects/array/foreach/index.html new file mode 100644 index 0000000000..d5fe37c438 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/array/foreach/index.html @@ -0,0 +1,278 @@ +--- +title: Array.prototype.forEach() +slug: Web/JavaScript/Reference/Objets_globaux/Array/forEach +tags: + - Array + - ECMAScript 5 + - JavaScript + - Méthode + - Prototype + - Reference + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/forEach +--- +
{{JSRef}}
+ +

La méthode forEach() permet d'exécuter une fonction donnée sur chaque élément du tableau.

+ +
{{EmbedInteractiveExample("pages/js/array-foreach.html")}}
+ + + +

Syntaxe

+ +
arr.forEach(callback);
+arr.forEach(callback, thisArg);
+ +

Paramètres

+ +
+
callback
+
La fonction à utiliser pour chaque élément du tableau. Elle prend en compte trois arguments : +
+
valeurCourante
+
La valeur de l'élément du tableau en cours de traitement.
+
index {{optional_inline}}
+
L'indice de l'élément du tableau en cours de traitement.
+
array {{optional_inline}}
+
Le tableau sur lequel la méthode forEach est appliquée.
+
+
+
thisArg {{optional_inline}}
+
Paramètre optionnel. La valeur à utiliser pour this lors de l'exécution de callback.
+
+ +

Valeur de retour

+ +

{{jsxref("undefined")}}.

+ +

Description

+ +

forEach() exécute la fonction callback une fois pour chaque élément du tableau, dans l'ordre croissant des indices. Cette fonction n'est pas appelée pour les indices pour lesquels les éléments ont été supprimés ou qui n'ont pas été définis. Attention, en revanche elle est appelée pour les éléments qui sont présents et qui valent {{jsxref("undefined")}}.

+ +

callback est appelé avec trois arguments :

+ + + +

Si un paramètre thisArg est fourni à la méthode forEach, il sera utilisé en tant que valeur this pour chaque appel de callback. Sinon, ce sera la valeur undefined qui sera utilisée comme valeur this. La valeur this finalement prise en compte par la fonction callback est déterminée selon les règles usuelles pour déterminer la valeur de this utilisée dans une fonction.

+ +

L'ensemble des éléments traités par forEach est défini avant le premier appel à callback. Les éléments ajoutés au tableau après que l'appel à forEach ait commencé ne seront pas visités par callback. Si des éléments déjà présents dans le tableau sont modifiés, leur valeur telle qu'elle est passée au callback sera la valeur au moment du passage du forEach ; les éléments supprimés ne sont pas parcourus. Voir l'exemple ci-après.

+ +

forEach() exécute la fonction callback une fois pour chaque élément. À la différence de {{jsxref("Array.prototype.map()", "map()")}} ou de {{jsxref("Array.prototype.reduce()", "reduce()")}} il renvoie toujours la valeur {{jsxref("undefined")}} et ne peut donc pas être « enchaîné ». Généralement, l'effet voulu est de déclencher des effets de bord en fin de chaîne.

+ +

forEach() ne modifie pas le tableau sur lequel elle est appelée, en revanche, la fonction de retour (callback) utilisée peut modifier le tableau.

+ +
Note : + +

Il n'existe aucun moyen d'arrêter une boucle forEach en dehors de lever une exception. Si vous avez besoin d'arrêter la boucle, étudiez plutôt :

+ + + +

Les autres méthodes associées aux tableaux ({{jsxref("Array.prototype.every()")}}, {{jsxref("Array.prototype.some()")}}, {{jsxref("Array.prototype.find()")}}, {{jsxref("Array.prototype.findIndex()")}}) utilisent une fonction de texte qui permet de renvoyer une valeur équivalente à true si besoin de poursuivre la boucle.

+
+ +

forEach exécute la fonction callback une fois pour chaque élément ; contrairement à every et some, cette méthode renvoie toujours undefined et ne peut pas être enchaînée.

+ +

Exemples

+ +

Équivalence entre une boucle for et une boucle forEach

+ +

Voici un fragment de code simple qui utilise une boucle for

+ +
var items = ["item1", "item2", "item3"];
+var copie = [];
+
+for (var i = 0; i < items.length; i++) {
+  copie.push(items[i]);
+}
+
+ +

Et voici un fragment de code équivalent qui utilise forEach :

+ +
var items = ["item1", "item2", "item3"]
+var copie = [];
+
+items.forEach(function(item){
+  copie.push(item);
+});
+ +

Afficher le contenu d'un tableau

+ +
+

Note : Pour afficher le contenu d'un tableau, on pourra utiliser console.table() qui met en forme les éléments du tableau. L'exemple suivant est laissé à titre d'illustration pour forEach().

+
+ +

Le code suivant affiche une ligne pour chaque élément du tableau :

+ +
function logArrayElements(element, index, array) {
+    console.log("a[" + index + "] = " + element);
+}
+[2, 5, , 9].forEach(logArrayElements);
+// logs:
+// a[0] = 2
+// a[1] = 5
+// a[3] = 9
+
+
+ +

Utiliser l'argument pour this

+ +

Dans l'exemple qui suit, on met à jour les propriétés d'un objet à partir des éléments d'un tableau :

+ +
function Compteur() {
+  this.somme = 0;
+  this.compte = 0;
+}
+
+Compteur.prototype.ajouter = function(tableau) {
+  tableau.forEach(function(element) {
+    this.somme += element;
+    ++this.compte;
+  },  this);
+  //  ^---- On a ajouté l'argument this ici.
+};
+
+var obj = new Compteur();
+obj.ajouter([2, 5, 9]);
+console.log(obj.compte); // 3
+console.log(obj.somme);  // 16
+
+ +
+

Note : Le paramètre pour this est passé à la méthode forEach(), à chaque appel du callback, celui-ci sera utilisé comme valeur pour this.

+
+ +
+

Note : Si la fonction passée en argument est une fonction fléchée, il n'est pas nécessaire d'ajouter le paramètre this car les fonctions fléchées utilisent le this fourni par le contexte lexical.

+
+ +

Stopper une boucle

+ +

Le code qui suit utilise la méthode {{jsxref("Array.prototype.every")}} pour afficher le contenu d'un tableau et s'arrêter lorsqu'il atteint une valeur supérieure à SEUIL_MAX.

+ +
var SEUIL_MAX = 12;
+var v = [5, 2, 16, 4, 3, 18, 20];
+var res;
+
+res = v.every(function(element, index, array) {
+  console.log('élément :', element);
+  if (element >= SEUIL_MAX) {
+    return false;
+  }
+
+  return true;
+});
+console.log('res:', res);
+// affiche :
+// élément : 5
+// élément : 2
+// élément : 16
+// res : false
+
+res = v.some(function(element, index, array) {
+  console.log('élément:', element);
+  if (element >= SEUIL_MAX) {
+    return true;
+  }
+
+  return false;
+});
+console.log('res:', res);
+// affiche :
+// élément : 5
+// élément : 2
+// élément : 16
+// res: true
+ +

Une fonction de copie d'objet

+ +

Le code qui suit permet de créer une copie d'un objet donné. Il existe différentes façons pour créer une copie d'un objet. L'exemple suivant illustre une de ces façons afin d'expliquer le fonctionnement d'Array.prototype.forEach et d'utiliser les fonctions ECMAScript 5 Object.*.

+ +
function copie(obj) {
+  var copie = Object.create(Object.getPrototypeOf(obj));
+  var propNames = Object.getOwnPropertyNames(obj);
+
+  propNames.forEach(function(nom) {
+    var desc = Object.getOwnPropertyDescriptor(obj, nom);
+    Object.defineProperty(copie, nom, desc);
+  });
+
+  return copie;
+}
+
+var obj1 = { a: 1, b: 2 };
+var obj2 = copie(obj1); // obj2 ressemble désormais à obj1
+ +

Attention aux modifications en cours

+ +

Dans l'exemple qui suit, on utilise un tableau qui contient quatre élément : "un", "deux", "trois", "quatre". Lorsque le parcours du tableau arrive à l'élément "deux", on décale le tableau d'un cran vers les premiers éléments. Aussi, l'élément "quatre" est décalé à la place de "trois" et "trois" est déplacé à la place de "deux". Pour cette raison, lorsque forEach poursuit son parcours, elle saute la valeur "trois". Autrement dit, forEach n'utilise pas une copie du tableau au moment où elle est appelée, elle manipule le tableau directement. On voit aussi dans cet exemple que les éléments non initialisés ne sont pas traités par la fonction de rappel.

+ +
var mots = ["un", "deux", "trois",, "quatre"];
+mots.forEach(function(mot) {
+  console.log(mot);
+  if (mot === "deux") {
+    mots.shift();
+  }
+});
+// un
+// deux
+// quatre
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES5.1', '#sec-15.4.4.18', 'Array.prototype.forEach')}}{{Spec2('ES5.1')}}Définition initiale. Implémentée avec JavaScript 1.6.
{{SpecName('ES6', '#sec-array.prototype.foreach', 'Array.prototype.forEach')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-array.prototype.foreach', 'Array.prototype.forEach')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Array.forEach")}}

+
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/array/from/index.html b/files/fr/web/javascript/reference/global_objects/array/from/index.html new file mode 100644 index 0000000000..61e8b828cb --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/array/from/index.html @@ -0,0 +1,138 @@ +--- +title: Array.from() +slug: Web/JavaScript/Reference/Objets_globaux/Array/from +tags: + - Array + - ECMAScript 2015 + - JavaScript + - Méthode + - Reference + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/from +--- +
{{JSRef}}
+ +

La méthode Array.from() permet de créer une nouvelle instance d'Array (une copie superficielle) à partir d'un objet itérable ou semblable à un tableau.

+ +
{{EmbedInteractiveExample("pages/js/array-from.html")}}
+ + + +

Syntaxe

+ +
Array.from(arrayLike [, fonctionMap[, thisArg]])
+ +

Paramètres

+ +
+
arrayLike
+
Un objet semblable à un tableau ou bien un objet itérable dont on souhaite créer un tableau, instance d'Array.
+
fonctionMap {{optional_inline}}
+
Argument optionnel, une fonction à appliquer à chacun des éléments du tableau.
+
thisArg {{optional_inline}}
+
Argument optionnel. La valeur à utiliser pour this lors de l'exécution de la fonction fonctionMap.
+
+ +

Valeur de retour

+ +

Une nouvelle instance de {{jsxref("Array")}}.

+ +

Description

+ +

Array.from() permet de créer des instances d'Array à partir :

+ + + +

Array.from() possède un paramètre optionnel fonctionMap, qui permet d'exécuter une fonction {{jsxref("Array.prototype.map", "map")}} sur chacun des éléments du tableau (ou de l'instance de la classe fille) qui est créé. Autrement dit Array.from(obj, mapFn, thisArg) correspond exactement à Array.from(obj).map(mapFn, thisArg), sauf qu'il n'y a pas de tableau intermédiaire de créé. Cet aspect est notamment important pour certaines classes filles, comme les tableaux typés (en effet, un tableau intermédiaire aurait eu ses valeurs tronquées pour qu'elles soient du type approprié).

+ +

La propriété length de la méthode from() est 1.

+ +

Avec ES6, la syntaxe de classe permet d'avoir des sous-classes pour les objets natifs comme pour les objets définis par l'utilisateur. Ainsi, les méthodes statiques de classe comme Array.from() sont héritées par les sous-classes d'Array et créent de nouvelles instances de la sous-classe d'Array.

+ +

Exemples

+ +
// créer une instance d'Array à partir de l'objet arguments qui est semblable à un tableau
+function f() {
+  return Array.from(arguments);
+}
+
+f(1, 2, 3);
+// [1, 2, 3]
+
+
+// Ça fonctionne avec tous les objets itérables...
+// Set
+const s = new Set(["toto", "truc", "truc", "bidule"]);
+Array.from(s);
+// ["toto", "truc", "bidule"]
+
+
+// Map
+const m = new Map([[1, 2], [2, 4], [4, 8]]);
+Array.from(m);
+// [[1, 2], [2, 4], [4, 8]]
+
+const mapper = new Map([["1", "a"], ["2", "b"]]);
+Array.from(mapper.values());
+// ["a", "b"]
+
+Array.from(mapper.keys());
+// ["1", "2"]
+
+// String
+Array.from("toto");
+// ["t", "o", "t", "o"]
+
+
+// En utilisant une fonction fléchée pour remplacer map
+// et manipuler des éléments
+Array.from([1, 2, 3], x => x + x);
+// [2, 4, 6]
+
+
+// Pour générer une séquence de nombres
+Array.from({length: 5}, (v, k) => k);
+// [0, 1, 2, 3, 4]
+
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-array.from', 'Array.from')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-array.from', 'Array.from')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Array.from")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/array/includes/index.html b/files/fr/web/javascript/reference/global_objects/array/includes/index.html new file mode 100644 index 0000000000..8567f02fbf --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/array/includes/index.html @@ -0,0 +1,135 @@ +--- +title: Array.prototype.includes() +slug: Web/JavaScript/Reference/Objets_globaux/Array/includes +tags: + - Array + - JavaScript + - Méthode + - Prototype + - Reference + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/includes +--- +
{{JSRef}}
+ +

La méthode includes() permet de déterminer si un tableau contient une valeur et renvoie true si c'est le cas, false sinon.

+ +
{{EmbedInteractiveExample("pages/js/array-includes.html")}}
+ + + +
+

Note : Cette méthode utilise l'algorithme de comparaison SameValueZero qui fonctionne comme l'égalité stricte, à la différence que NaN est ici égal à lui même.

+
+ +

Syntaxe

+ +
array.includes(élémentRecherché)
+array.includes(élémentRecherché, indiceDépart)
+
+ +

Paramètres

+ +
+
élémentRecherché
+
La valeur qu'on souhaite trouver dans le tableau (lorsqu'on manipule des caractères et des chaînes, la comparaison est sensible à la casse).
+
indiceDépart {{optional_inline}}
+
La position du tableau à partir de laquelle commencer à chercher élémentRecherché. Si on utilise une valeur négative, la recherche commencera à partir de la fin du tableau (autrement dit à l'indice array.length - indiceDépart). La valeur par défaut est 0.
+
+ +

Valeur de retour

+ +

Un {{jsxref("Boolean","booléen","",1)}} qui vaut true si élémentRecherché est trouvé dans le tableau (à partir de l'indiceDépart si celui-ci est indiqué). Les valeurs -0, +0 et 0 sont considérées comme équivalentes mais false n'est pas considéré comme équivalent à 0.

+ +
+

Note : Pour être tout à fait précis, includes() utilise l'algorithme SameValueZero afin de déterminer si un élément donné est trouvé.

+
+ +

Exemples

+ +
[1, 2, 3].includes(2);     // true
+[1, 2, 3].includes(4);     // false
+[1, 2, 3].includes(3, 3);  // false
+[1, 2, 3].includes(3, -1); // true
+[1, 2, NaN].includes(NaN); // true
+
+['a', 'b', 'c'].includes('c', 5);    // false
+['a', 'b', 'c'].includes('c', -100); // true
+
+ +

indiceDépart supérieur ou égal à la longueur du tableau

+ +

SI indiceDépart est supérieur ou égal à la longueur du tableau, la méthode retourne false. Le tableau n'est pas parcouru.

+ +
var arr = ['a', 'b', 'c'];
+
+arr.includes('c', 3);   // false
+arr.includes('c', 100); // false
+
+ +

indiceDépart strictement négatif

+ +

Si indiceDépart est strictement négatif, l'indice de départ effectif est la somme entre la taille du tableau et indiceDépart. Si cette somme est toujours négative, le tableau est intégralement parcouru.

+ +
// Le tableau a une taille de 3
+// indiceDépart vaut -2
+// L'indice de départ effectif vaut is 3 + (-2) = 1
+
+var arr = ['a', 'b', 'c'];
+
+arr.includes('a', -2); // false
+arr.includes('b', -2); // true
+arr.includes('c', -100); // true
+
+ +

Utilisation d'includes() comme méthode générique

+ +

includes() est une méhtode générique : l'objet sur lequel elle est appelée ne doit pas nécessairement être un tableau. On peut l'utiliser sur des objets semblables à des tableaux (ex. arguments ou des chaînes de caractères) :

+ +
function argumentsContientA(){
+  return [].includes.call(arguments, 'a');
+}
+
+console.log(argumentsContientA('a','b','c')); // true
+console.log(argumentsContientA('d','e','f')); // false
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES7', '#sec-array.prototype.includes', 'Array.prototype.includes')}}{{Spec2('ES7')}}Définition initiale.
{{SpecName('ESDraft', '#sec-array.prototype.includes', 'Array.prototype.includes')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Array.includes")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/array/index.html b/files/fr/web/javascript/reference/global_objects/array/index.html new file mode 100644 index 0000000000..b871ff6573 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/array/index.html @@ -0,0 +1,446 @@ +--- +title: Array +slug: Web/JavaScript/Reference/Objets_globaux/Array +tags: + - Array + - JavaScript + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Array +--- +
{{JSRef}}
+ +

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 232-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 {{jsxref("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

+ +

Les tableaux sont indexés à partir de zéro: le premier élément d'un tableau a pour indice 0, et la position du dernier élément est donnée par {{jsxref("Array.length", "length")}} moins 1. Si on utilise un indice en dehors de cet intervalle, le résultat sera {{jsxref("undefined")}} (sous réserve qu'aucune propriété n'ait été ajoutée au préalable avec cet indice).

+ +
var arr = ["le premier élément", "le deuxième élément", "le dernier élément"];
+console.log(arr[0]);             // affiche "le premier élément"
+console.log(arr[1]);             // affiche "le deuxième élément"
+console.log(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é {{jsxref("Array.length", "length")}} d'un tableau est liée aux propriétés numériques du tableau. Plusieurs méthodes natives utilisent cette propriété : {{jsxref("Array.join", "join()")}}, {{jsxref("Array.slice", "slice()")}}, {{jsxref("Array.indexOf", "indexOf()")}}, etc. D'autres méthodes comme {{jsxref("Array.push", "push()")}} et {{jsxref("Array.splice", "splice()")}} modifient le tableau et la propriété {{jsxref("Array.length", "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é {{jsxref("Array.length", "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 {{jsxref("Array.length", "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 {{jsxref("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 {{jsxref("RegExp.exec")}}, {{jsxref("String.match")}}, and {{jsxref("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é/ÉlémentDescriptionExemple
inputUne propriété en lecture seule qui reflète la chaîne originale sur laquelle l'expression rationnelle a été appliquée.cdbBdbsbz
indexUne propriété en lecture seule qui est l'indice de la correspondance dans la chaîne (les indices commencent à 0)1
[0]Une propriété en lecture seule qui spécifie les derniers caractères correspondants.dbBd
[1], ...[n]Des éléments en lecture seule qui contiennent les groupes capturés, s'il y en a dans l'expression régulière. Le nombre de groupes capturés possibles est illimité.[1]: bB
+ [2]: d
+ +

Propriétés

+ +
+
{{jsxref("Array.prototype.length")}}
+
La propriété de longueur pour le constructeur Array, elle vaut 1.
+
{{jsxref("Array.@@species", "get Array[@@species]")}}
+
La fonction de construction utilisée pour créer les objets dérivés.
+
{{jsxref("Array.prototype")}}
+
Cette propriété permet d'ajouter des propriétés à tous les tableaux.
+
+ +

Méthodes

+ +
+
{{jsxref("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.
+
{{jsxref("Array.isArray()")}}
+
Cette méthode renvoie true si la variable est un tableau, false sinon.
+
{{jsxref("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).
+
+ +

Instances d'Array

+ +

Toutes les instances d'Array héritent de {{jsxref("Array.prototype")}}. Le prototype du constructeur Array peut être modifié afin d'affecter l'ensemble des instances grâce à l'héritage.

+ +

Les propriétés

+ +
{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/prototype', 'Propriétés')}}
+ +

Les méthodes

+ +

Les mutateurs

+ +
{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/prototype', 'Mutateurs')}}
+ +

Les accesseurs

+ +
{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/prototype', 'Accesseurs')}}
+ +

Les méthodes d'itération

+ +
{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/prototype', 'Méthodes_itératives')}}
+ +

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

+ +
+

Attention : Ces méthodes génériques ne sont pas standard. Elles sont dépréciées et seront retirées dans un avenir proche. Celles-ci ne peuvent être utilisées sur tous les navigateurs. Toutefois, il existe un shim disponible sur GitHub.

+
+ +

Parfois, on peut vouloir appliquer des méthodes pour les tableaux sur des chaînes ou d'autres objets semblables aux tableaux (ex. : l'objet {{jsxref("Fonctions/arguments", "arguments", "", 1)}}). Une chaîne sera donc traitée comme un tableau de caractères. Ainsi, si on souhaite vérifier que chaque caractère d'une chaîne str est bien une lettre comprise entre 'a' et 'z', on pourra utiliser :

+ +
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 {{jsxref("Objets_globaux/String", "méthodes génériques", "#Méthodes_génériques_de_String", 1)}} sont également disponibles pour les {{jsxref("Objets_globaux/String", "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 {{jsxref("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 !");
+}
+ +

Exemples

+ +

Créer un tableau

+ +

Dans l'exemple suivant, on crée un tableau tableauMsg, d'une longueur nulle. Ensuite, on lui affecte des valeurs pour tableauMsg[0] et tableauMsg[99], ce qui aura pour effet de modifier la propriété length (qui vaudra alors 100).

+ +
var tableauMsg = [];
+tableauMsg[0] = 'Coucou';
+tableauMsg[99] = 'monde';
+
+if (tableauMsg.length === 100) {
+  console.log('La longueur du tableau vaut 100.');
+}
+
+ +

Créer un tableau à deux dimensions

+ +

Dans l'exemple qui suit, on crée un plateau d'échec grâce à 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'));
+
+ +

Voici le résultat affiché :

+ +
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)

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale
{{SpecName('ES5.1', '#sec-15.4', 'Array')}}{{Spec2('ES5.1')}}Ajout de nouvelles méthodes : {{jsxref("Array.isArray")}}, {{jsxref("Array.prototype.indexOf", "indexOf")}}, {{jsxref("Array.prototype.lastIndexOf", "lastIndexOf")}}, {{jsxref("Array.prototype.every", "every")}}, {{jsxref("Array.prototype.some", "some")}}, {{jsxref("Array.prototype.forEach", "forEach")}}, {{jsxref("Array.prototype.map", "map")}}, {{jsxref("Array.prototype.filter", "filter")}}, {{jsxref("Array.prototype.reduce", "reduce")}}, {{jsxref("Array.prototype.reduceRight", "reduceRight")}}
{{SpecName('ES6', '#sec-array-objects', 'Array')}}{{Spec2('ES6')}}Ajout de nouvelles méthodes : {{jsxref("Array.from")}}, {{jsxref("Array.of")}}, {{jsxref("Array.prototype.find", "find")}}, {{jsxref("Array.prototype.findIndex", "findIndex")}}, {{jsxref("Array.prototype.fill", "fill")}}, {{jsxref("Array.prototype.copyWithin", "copyWithin")}}
{{SpecName('ES7', '#sec-array-objects', 'Array')}}{{Spec2('ES7')}}Ajout de la méthode {{jsxref("Array.prototype.includes()")}}.
{{SpecName('ESDraft', '#sec-array-objects', 'Array')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Array")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/array/indexof/index.html b/files/fr/web/javascript/reference/global_objects/array/indexof/index.html new file mode 100644 index 0000000000..5ff4981c2e --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/array/indexof/index.html @@ -0,0 +1,214 @@ +--- +title: Array.prototype.indexOf() +slug: Web/JavaScript/Reference/Objets_globaux/Array/indexOf +tags: + - Array + - JavaScript + - Méthode + - Prototype + - Reference + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/indexOf +--- +
{{JSRef}}
+ +

La méthode indexOf() renvoie le premier indice pour lequel on trouve un élément donné dans un tableau. Si l'élément cherché n'est pas présent dans le tableau, la méthode renverra -1.

+ +
+

Note : pour la méthode associée aux chaînes de caractères, voir la page {{jsxref("String.prototype.indexOf()")}}.

+
+ +
{{EmbedInteractiveExample("pages/js/array-indexof.html")}}
+ + + +

Syntaxe

+ +
arr.indexOf(élémentRecherché)
+arr.indexOf(élémentRecherché, indiceDébut)
+
+ +

Paramètres

+ +
+
élémentRecherché
+
L'élément qu'on cherche dans le tableau
+
indiceDébut {{optional_inline}}
+
L'index à partir duquel commencer la recherche. La valeur par défaut est 0 (le tableau sera parcouru dans sa totalité). Si l'index est plus grand ou égal à la longueur du tableau, la méthode renverra -1. Si l'index est négatif, la recherche commencera d'autant d'éléments, à partir de la fin du tableau. À noter que même si l'index est négatif, la recherche s'effectue toujours du début jusqu'à la fin du tableau. Si l'index fourni est inférieur à 0, le tableau sera entièrement parcouru.
+
+ +

Valeur de retour

+ +

Le premier index de l'élément dans le tableau ou -1 si la valeur n'est pas trouvée.

+ +

Description

+ +

indexOf compare élémentRecherché aux éléments contenus dans le tableau en utilisant une égalité stricte (la même méthode utilisée par l'opérateur ===).

+ +

Exemples

+ +

Utiliser indexOf()

+ +

Dans l'exemple qui suit, on peut utiliser indexOf afin de trouver l'emplacement d'un élément dans un tableau.

+ +
var tableau = [2, 9, 9];
+tableau.indexOf(2);     // 0
+tableau.indexOf(7);     // -1
+tableau.indexOf(9, 2);  // 2
+tableau.indexOf(2, -1); // -1
+tableau.indexOf(2, -3); // 0
+ +

Trouver toutes les occurences d'un élément

+ +

Dans l'exemple qui suit, on utilise indexOf() afin de trouver tous les indices d'un élément dans un tableau. On peut utiliser la méthode {{jsxref("Array.prototype.push", "push")}} afin d'ajouter ces indices dans un autre tableau.

+ +
var indices = [];
+var tableau = ['a', 'b', 'a', 'c', 'a', 'd'];
+var élément = 'a';
+var idx = tableau.indexOf(élément);
+while (idx != -1) {
+  indices.push(idx);
+  idx = tableau.indexOf(élément, idx + 1);
+}
+console.log(indices);
+// [0, 2, 4]
+ +

Trouver si un élément existe et l'ajouter dans le tableau si ce n'est pas le cas

+ +
function mettreAJourLegumes(tabLégumes, légume) {
+    if (tabLégumes.indexOf(légume) === -1) {
+        tabLégumes.push(légume);
+        console.log('Le nouveau tableau est : ' + tabLégumes);
+    } else if (tabLégumes.indexOf(légume) > -1) {
+        console.log(légume + ' existe déjà dans le tableau.');
+    }
+}
+
+var tabLégumes = ['pomme de terre', 'tomate', 'poivron'];
+
+mettreAJourLegumes(tabLégumes, 'épinard');
+// Le nouveau tableau est : pomme de terre,tomate,poivron,épinard
+mettreAJourLegumes(tabLégumes, 'épinard');
+// épinard existe déjà dans le tableau.
+ +

Prothèse d'émulation (polyfill)

+ +

indexOf fut ajouté avec la cinquième édition du standard ECMA-262 ; il peut donc ne pas être présent dans tous les navigateurs web. Vous pouvez contourner ce problème en insérant le code suivant au début de vos scripts. Il permet d'utiliser indexOf dans les environnements qui ne le supportent pas nativement. L'algorithme est le même que celui spécifié dans ECMAScript 5 si on a bien {{jsxref("TypeError", "TypeError")}} et {{jsxref("Math.abs")}} qui ont leurs valeurs originales :

+ +
// Production steps of ECMA-262, Edition 5, 15.4.4.14
+// Référence : http://es5.github.io/#x15.4.4.14
+if (!Array.prototype.indexOf) {
+  Array.prototype.indexOf = function(searchElement, fromIndex) {
+
+    var k;
+
+    // 1. Soit O le résultat de l'appel à ToObject avec
+    //    this en argument.
+    if (this == null) {
+      throw new TypeError('"this" vaut null ou n est pas défini');
+    }
+
+    var O = Object(this);
+
+    // 2. Soit lenValue le résultat de l'appel de la
+    //    méthode interne Get de O avec l'argument
+    //    "length".
+    // 3. Soit len le résultat de ToUint32(lenValue).
+    var len = O.length >>> 0;
+
+    // 4. Si len vaut 0, on renvoie -1.
+    if (len === 0) {
+      return -1;
+    }
+
+    // 5. Si l'argument fromIndex a été utilisé, soit
+    //    n le résultat de ToInteger(fromIndex)
+    //    0 sinon
+    var n = +fromIndex || 0;
+
+    if (Math.abs(n) === Infinity) {
+      n = 0;
+    }
+
+    // 6. Si n >= len, on renvoie -1.
+    if (n >= len) {
+      return -1;
+    }
+
+    // 7. Si n >= 0, soit k égal à n.
+    // 8. Sinon, si n<0, soit k égal à len - abs(n).
+    //    Si k est inférieur à 0, on ramène k égal à 0.
+    k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);
+
+    // 9. On répète tant que k < len
+    while (k < len) {
+      // a. Soit Pk égal à ToString(k).
+      //    Ceci est implicite pour l'opérande gauche de in
+      // b. Soit kPresent le résultat de l'appel de la
+      //    méthode interne HasProperty de O avec Pk en
+      //    argument. Cette étape peut être combinée avec
+      //    l'étape c
+      // c. Si kPresent vaut true, alors
+      //    i.  soit elementK le résultat de l'appel de la
+      //        méthode interne Get de O avec ToString(k) en
+      //        argument
+      //   ii.  Soit same le résultat de l'application de
+      //        l'algorithme d'égalité stricte entre
+      //        searchElement et elementK.
+      //  iii.  Si same vaut true, on renvoie k.
+      if (k in O && O[k] === searchElement) {
+        return k;
+      }
+      k++;
+    }
+    return -1;
+  };
+}
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES5.1', '#sec-15.4.4.14', 'Array.prototype.indexOf')}}{{Spec2('ES5.1')}}Définition initiale. Implémentée avec JavaScript 1.6.
{{SpecName('ES6', '#sec-array.prototype.indexof', 'Array.prototype.indexOf')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-array.prototype.indexof', 'Array.prototype.indexOf')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Array.indexOf")}}

+
+ +

Notes de compatibilité

+ + + +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/array/isarray/index.html b/files/fr/web/javascript/reference/global_objects/array/isarray/index.html new file mode 100644 index 0000000000..bc07a159b0 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/array/isarray/index.html @@ -0,0 +1,117 @@ +--- +title: Array.isArray() +slug: Web/JavaScript/Reference/Objets_globaux/Array/isArray +tags: + - Array + - ECMAScript 5 + - JavaScript + - Méthode + - Reference + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/isArray +--- +
{{JSRef}}
+ +

La méthode Array.isArray() permet de déterminer si l'objet passé en argument est un objet {{jsxref("Array")}}, elle renvoie true si le paramètre passé à la fonction est de type Array et false dans le cas contraire.

+ +
Array.isArray([1, 2, 3]);   // true
+Array.isArray({toto: 123}); // false
+Array.isArray("tototruc");  // false
+Array.isArray(undefined);   // false
+
+ +

Syntaxe

+ +
Array.isArray(value)
+ +

Paramètres

+ +
+
value
+
La valeur dont on veut vérifier le type
+
+ +

Valeur de retour

+ +

true si la valeur est un tableau (une instance de {{jsxref("Array")}}), false sinon.

+ +

Description

+ +

Si l'objet indiqué en paramètre est un {{jsxref("Array")}}, la méthode renvoie true, sinon, elle renvoie false.

+ +

Voir aussi : « Determining with absolute accuracy whether or not a JavaScript object is an array » (en anglais) pour avoir plus de détails. Si on passe un objet {{jsxref("TypedArray")}} en argument, ce sera toujours la valeur false qui sera renvoyée.

+ +

Exemples

+ +
// Tous les appels suivant renvoient true
+Array.isArray([]);
+Array.isArray([1]);
+Array.isArray(new Array());
+Array.isArray(new Array('a', 'b', 'c'));
+Array.isArray(new Array(3));
+// Une petite anecdote: Array.prototype lui même est un Array
+Array.isArray( Array.prototype );
+
+// Tous les appels suivant renvoient false
+Array.isArray();
+Array.isArray({});
+Array.isArray(null);
+Array.isArray(undefined);
+Array.isArray(17);
+Array.isArray("Array");
+Array.isArray(true);
+Array.isArray(false);
+Array.isArray(new Uint8Array(32));
+Array.isArray({ __proto__ : Array.prototype });
+
+ +

Prothèse d'émulation (polyfill)

+ +

Exécuter ce code avant tout les autres aboutira à la création de la méthode Array.isArray()si elle n'est pas nativement prise en charge par le navigateur.

+ +
if(!Array.isArray) {
+  Array.isArray = function(arg) {
+    return Object.prototype.toString.call(arg) === '[object Array]';
+  };
+}
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES5.1', '#sec-15.4.3.2', 'Array.isArray')}}{{Spec2('ES5.1')}}Définition initiale. Implémentée avec JavaScript 1.8.5.
{{SpecName('ES6', '#sec-array.isarray', 'Array.isArray')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-array.isarray', 'Array.isArray')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Array.isArray")}}

+
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/array/join/index.html b/files/fr/web/javascript/reference/global_objects/array/join/index.html new file mode 100644 index 0000000000..e28efaae77 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/array/join/index.html @@ -0,0 +1,110 @@ +--- +title: Array.prototype.join() +slug: Web/JavaScript/Reference/Objets_globaux/Array/join +tags: + - Array + - JavaScript + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Array/join +--- +
{{JSRef}}
+ +

La méthode join() crée et renvoie une nouvelle chaîne de caractères en concaténant tous les éléments d'un tableau (ou d'un objet semblable à un tableau). La concaténation utilise la virgule ou une autre chaîne, fournie en argument, comme séparateur.

+ +
{{EmbedInteractiveExample("pages/js/array-join.html")}}
+ + + +

Syntaxe

+ +
arr.join()
+arr.join(séparateur)
+
+ +

Paramètres

+ +
+
séparateur {{optional_inline}}
+
Ce paramètre optionnel indique une chaine de caractères pour séparer chaque élément du tableau. Le séparateur est converti en une chaine de caractères si nécessaire. Si ce paramètre n'est pas utilisé, les éléments du tableau seront séparés par une virgule (,). Si ce paramètre est la chaîne vide, les éléments seront accolés les uns aux autres sans espace entre. La valeur par défaut de ce paramètre est ",".
+
+ +

Valeur de retour

+ +

Une chaîne de caractères composée de tous les éléments du tableau joints les uns aux autres. Si la longueur du tableau (arr.length) vaut 0, c'est la chaîne vide qui est renvoyée. Si le tableau ne contient qu'un élément, sa version texte sera renvoyée sans être suivie du séparateur.

+ +

Description

+ +

Les différents éléments du tableau sont convertis en une chaîne de caractères puis fusionnés en une seule chaîne. Si un élément vaut undefined ou null, il sera converti en la chaîne vide. Cette fonction est générique et peut donc être utilisée avec les objets semblables aux tableaux.

+ +

Exemples

+ +

Fusionner un tableau de quatre façons différentes

+ +

L'exemple suivant crée un tableau, a, avec trois éléments, puis joint le tableau à trois reprises : en utilisant le séparateur par défaut, une virgule et un espace, puis un plus, puis avec la chaîne vide.

+ +
var a = new Array("Vent","Pluie","Feu");
+a.join();      // "Vent,Pluie,Feu"
+a.join(", ");  // "Vent, Pluie, Feu"
+a.join(" + "); // "Vent + Pluie + Feu"
+a.join("");    // "VentPluieFeu"
+ +

Fusionner un objet semblable à un tableau

+ +

Dans l'exemple suivant, on effectue la fusion sur un objet semblable à un tableau (arguments) en appelant {{jsxref("Function.prototype.call")}} sur Array.prototype.join.

+ +
function f(a, b, c) {
+  var s = Array.prototype.join.call(arguments);
+  console.log(s);
+}
+f(1, 'a', true); // '1,a,true'
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.4.4.5', 'Array.prototype.join')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-array.prototype.join', 'Array.prototype.join')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-array.prototype.join', 'Array.prototype.join')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Array.join")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/array/keys/index.html b/files/fr/web/javascript/reference/global_objects/array/keys/index.html new file mode 100644 index 0000000000..b9907b9340 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/array/keys/index.html @@ -0,0 +1,87 @@ +--- +title: Array.prototype.keys() +slug: Web/JavaScript/Reference/Objets_globaux/Array/keys +tags: + - Array + - ECMAScript 2015 + - Iterator + - JavaScript + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Array/keys +--- +
{{JSRef}}
+ +

La méthode keys() renvoie un nouvel objet Array Iterator qui contient les clefs pour chaque indice du tableau.

+ +
{{EmbedInteractiveExample("pages/js/array-keys.html")}}
+ + + +

Syntaxe

+ +
arr.keys()
+ +

Valeur de retour

+ +

Un nouvel objet itérateur pour {{jsxref("Array")}}.

+ +

Exemples

+ +

Utilisation simple

+ +
var arr = ["a","b","c"];
+var itérateur = arr.keys();
+
+console.log(itérateur.next()); // { value: 0, done: false }
+console.log(itérateur.next()); // { value: 1, done: false }
+console.log(itérateur.next()); // { value: 2, done: false }
+console.log(itérateur.next()); // { value: undefined, done: true }
+
+ +

Un itérateur de clés prend en compte les trous

+ +
var arr = ["a", , "c"];
+var clésCreuses = Object.keys(arr);
+var clésDenses = [...arr.keys()];
+console.log(clésCreuses); // ["0", "2"]
+console.log(clésDenses);  // [0, 1, 2]
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-array.prototype.keys', 'Array.prototype.keys')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-array.prototype.keys', 'Array.prototype.keys')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Array.keys")}}

+
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/array/lastindexof/index.html b/files/fr/web/javascript/reference/global_objects/array/lastindexof/index.html new file mode 100644 index 0000000000..cc7d68a61a --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/array/lastindexof/index.html @@ -0,0 +1,167 @@ +--- +title: Array.prototype.lastIndexOf() +slug: Web/JavaScript/Reference/Objets_globaux/Array/lastIndexOf +tags: + - Array + - ECMAScript 5 + - JavaScript + - Méthode + - Prototype + - Reference + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf +--- +
{{JSRef}}
+ +

La méthode lastIndexOf() permet de renvoyer le dernier indice pour lequel une valeur donnée est présente dans un tableau. Si la valeur recherchée n'est pas présente, le résultat sera -1. Lors de la recherche, le tableau est parcouru dans le sens des index décroissants, à partir de l'index indexDébut.

+ +
{{EmbedInteractiveExample("pages/js/array-lastindexof.html")}}
+ + + +

Syntaxe

+ +
arr.lastIndexOf(élémentRecherché)
+arr.lastIndexOf(élémentRecherché, indexDébut)
+
+ +

Paramètres

+ +
+
élémentRecherché
+
L'élément à qu'on cherche dans le tableau.
+
indexDébut {{optional_inline}}
+
L'index à partir duquel commencer la recherche dans le tableau (la recherche s'effectuant à l'envers). Si le paramètre est absent, sa valeur par défaut sera la longueur du tableau moins 1 (c'est-à-dire arr.length - 1), le tableau sera alors parcouru dans sa totalité. Si l'index est plus grand ou égal à la longueur du tableau, le tableau sera parcouru en entier. Si l'index est négatif, la recherche commencera d'autant d'éléments à partir de la fin du tableau. À noter que, même si l'index est négatif, la recherche s'effectuera toujours de la fin jusqu'au début du tableau. Si l'index calculé est inférieur à 0, la méthode renverra -1 et le tableau ne sera pas parcouru.
+
+ +

Valeur de retour

+ +

Le dernier index auquel on trouve la valeur dans le tableau, -1 si elle n'est pas trouvée.

+ +

Description

+ +

lastIndexOf compare élémentRecherché aux éléments contenus dans le tableau en utilisant une égalité stricte (l'égalité utilisée par l'opérateur ===).

+ +

Exemples

+ +

Utiliser lastIndexOf

+ +

Dans l'exemple suivant, on utilise lastIndexOf afin de situer une valeur dans un tableau.

+ +
var tableau = [2, 5, 9, 2];
+tableau.lastIndexOf(2);     // 3
+tableau.lastIndexOf(7);     // -1
+tableau.lastIndexOf(2, 3);  // 3
+tableau.lastIndexOf(2, 2);  // 0
+tableau.lastIndexOf(2, -2); // 0
+tableau.lastIndexOf(2, -1); // 3
+ +

Trouver toutes les occurrences d'un élément

+ +

L’exemple suivant utilise lastIndexOf pour trouver tous les index (indices) d’un élément dans un tableau donné, en utilisant {{jsxref("Array.prototype.push", "push")}} pour les ajouter dans un autre tableau quand ils sont trouvés.

+ +
var indices = [];
+var tableau = ['a', 'b', 'a', 'c', 'a', 'd'];
+var élément = 'a';
+var idx = tableau.lastIndexOf(élément);
+while (idx !== -1) {
+  indices.push(idx);
+  idx = (idx > 0 ? tableau.lastIndexOf(élément, idx - 1) : -1);
+}
+
+console.log(indices);
+// [4, 2, 0]
+ +

Remarquez que nous avons dû traiter le cas de idx === 0 séparément (idx > 0) parce que l’élément sera toujours trouvé, indépendamment du paramètre de fromIndex, si c’est le premier élément du tableau. C’est une différence avec la méthode {{jsxref("Array.prototype.indexOf", "indexOf")}}.

+ + +

Prothèse d'émulation (polyfill)

+ +

lastIndexOf a été ajouté avec la cinquième édition du standard ECMA-262 ; il peut donc ne pas être présent dans tous les navigateurs web. Vous pouvez contourner ce problème en insérant le code suivant au début de vos scripts. Il vous permettra d'utiliser lastIndexOf avec les navigateurs qui ne le supportent pas nativement. L'algorithme qui suit est le même que celui spécifié par ECMAScript 5 si {{jsxref("Object", "Object")}}, {{jsxref("TypeError", "TypeError")}}, {{jsxref("Number", "Number")}}, {{jsxref("Math.floor")}}, {{jsxref("Math.abs")}}, et {{jsxref("Math.min")}} n'ont pas été modifiés et conservent leurs valeurs originales.

+ +
// Production steps of ECMA-262, Edition 5, 15.4.4.15
+// Reference: http://es5.github.io/#x15.4.4.15
+if (!Array.prototype.lastIndexOf) {
+  Array.prototype.lastIndexOf = function(searchElement /*, fromIndex*/) {
+    'use strict';
+
+    if (this === void 0 || this === null) {
+      throw new TypeError();
+    }
+
+    var n, k,
+      t = Object(this),
+      len = t.length >>> 0;
+    if (len === 0) {
+      return -1;
+    }
+
+    n = len - 1;
+    if (arguments.length > 1) {
+      n = Number(arguments[1]);
+      if (n != n) {
+        n = 0;
+      }
+      else if (n != 0 && n != (1 / 0) && n != -(1 / 0)) {
+        n = (n > 0 || -1) * Math.floor(Math.abs(n));
+      }
+    }
+
+    for (k = n >= 0 ? Math.min(n, len - 1) : len - Math.abs(n); k >= 0; k--) {
+      if (k in t && t[k] === searchElement) {
+        return k;
+      }
+    }
+    return -1;
+  };
+}
+ +

On notera que cette implémentation vise une compatibilité absolue de lastIndexOf dans Firefox et le moteur JavaScript SpiderMonkey, incluant plusieurs cas très particuliers. Si vous comptez l'utiliser dans une application, vous devriez pouvoir calculer from avec un code beaucoup moins compliqué.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES5.1', '#sec-15.4.4.15', 'Array.prototype.lastIndexOf')}}{{Spec2('ES5.1')}}Définition initiale. Implémentée avec JavaScript 1.6.
{{SpecName('ES6', '#sec-array.prototype.lastindexof', 'Array.prototype.lastIndexOf')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-array.prototype.lastindexof', 'Array.prototype.lastIndexOf')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Array.lastIndexOf")}}

+
+ +

Notes de compatibilité

+ + + +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/array/length/index.html b/files/fr/web/javascript/reference/global_objects/array/length/index.html new file mode 100644 index 0000000000..b586607721 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/array/length/index.html @@ -0,0 +1,123 @@ +--- +title: Array.prototype.length +slug: Web/JavaScript/Reference/Objets_globaux/Array/length +tags: + - Array + - JavaScript + - Propriété + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Array/length +--- +
{{JSRef}}
+ +

La propriété length (longueur) est un entier non-signé de 32 bits qui indique le nombre d'éléments présents dans le tableau. Elle est toujours supérieure au plus grand indice du tableau.

+ +
{{EmbedInteractiveExample("pages/js/array-length.html")}}
+ + + +

Description

+ +

La valeur de la propriété length est un entier de signe positif dont la valeur est inférieure à 2 à la puissance 32 (232).

+ +
var tableauA = new Array(4294967296); // 2 à la puissance 32 = 4294967296
+var tableauC = new Array(-100) // une valeur négative
+
+console.log(tableauA.length); // RangeError: Invalid array length
+console.log(tableauC.length); // RangeError: Invalid array length
+
+var tableauB = [];
+tableauB.length = Math.pow(2,32)-1; // On déclare une longueur inférieure à 2 puissance 32
+console.log(tableauB.length); // 4294967295
+
+ +

Vous pouvez modifier la propriété length d'un tableau à loisir pour le tronquer. Quand vous étendez un tableau en modifiant la valeur de sa propriété length, le nombre d'éléments réellement présents dans ce tableau n'augmente pas : par exemple, si vous affectez la valeur 3 à la propriété length d'un tableau alors qu'elle vaut 2, le tableau contiendra toujours seulement 2 éléments. La troisième « case » ne sera pas itérable. De ce fait, la propriété length d'un tableau ne renseigne en rien sur le nombre de valeurs définies dans le tableau. Voir aussi la relation entre longueur et propriétés numériques.

+ +
const arr = [1, 2, 3];
+console.table(arr);
+// [1, 2]
+
+arr.length = 5; // On définit une longueur à 5
+console.table(arr);
+// [1, 2, <3 éléments vides>]
+
+arr.forEach(element => console.log(element));
+// 1
+// 2
+
+ +

{{js_property_attributes(1,0,0)}}

+ +

Exemples

+ +

Renvoyer la longueur d'un tableau

+ +
var items = ["chaise", "bureau", "table", "sac"];
+items.length; // 4
+
+ +

Parcourir un tableau

+ +

Dans l'exemple suivant, on itère sur le tableau nombres en utilisant la propriété length afin de connaître son nombre d'élément. La valeur de chaque élément est ensuite multipliée par deux :

+ +
var nombres = [1,2,3,4,5];
+
+for (var i = 0; i < nombres.length; i++) {
+  nombres[i] *= 2;
+}
+// nombres vaut maintenant [2,4,6,8,10];
+
+ +

Tronquer un tableau

+ +

L'exemple suivant raccourcit le tableau etatsUS à 50 si sa longueur actuelle est supérieure à 50.

+ +
if (etatsUS.length > 50) {
+   etatsUS.length = 50;
+}
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale.
{{SpecName('ES5.1', '#sec-15.4.5.2', 'Array.length')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-properties-of-array-instances-length', 'Array.length')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-properties-of-array-instances-length', 'Array.length')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Array.length")}}

+
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/array/map/index.html b/files/fr/web/javascript/reference/global_objects/array/map/index.html new file mode 100644 index 0000000000..2cdabaddba --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/array/map/index.html @@ -0,0 +1,215 @@ +--- +title: Array.prototype.map() +slug: Web/JavaScript/Reference/Objets_globaux/Array/map +tags: + - Array + - ECMAScript 5 + - JavaScript + - Méthode + - Prototype + - Reference + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/map +--- +
{{JSRef}}
+ +

La méthode map() crée un nouveau tableau avec les résultats de l'appel d'une fonction fournie sur chaque élément du tableau appelant.

+ +
{{EmbedInteractiveExample("pages/js/array-map.html")}}
+ + + +

Syntaxe

+ +
var nouveauTableau = arr.map(callback [, thisArg])
+ +

Paramètres

+ +
+
callback
+
La fonction qui est utilisée pour créer un élément du nouveau tableau. Elle utilise trois arguments : +
+
valeurCourante
+
La valeur de l'élément du tableau à traiter.
+
index{{optional_inline}}
+
L'index de l'élément qui est traité par la fonction.
+
tableau{{optional_inline}}
+
Le tableau sur lequel on a appelé la méthode map.
+
+
+
thisArg {{optional_inline}}
+
La valeur à utiliser pour this lors de l'exécution de callback. La valeur par défaut est l'objet global de l'environnement (Window pour un navigateur).
+
+ +

Valeur de retour

+ +

Un nouveau tableau composé des images de la fonction de rappel.

+ +

Description

+ +

Lorsqu'on utilise map, la fonction callback fournie en argument est exécutée une fois pour chacun des éléments du tableau, dans l'ordre du tableau. Chaque résultat de l'opération sur un élément sera un élément du nouveau tableau. La fonction callback est appelée uniquement pour les indices du tableau pour lesquels il y a des valeurs affectées (y compris si cette valeur est {{jsxref("undefined")}}). Si les valeurs ont été supprimées ou qu'elles n'ont jamais été initialisées, la fonction ne sera pas appelée.

+ +

callback est appelée avec trois arguments : la valeur de l'élément du tableau, l'index de cet élément et l'objet {{jsxref("Array")}} qui est parcouru.

+ +
+

Attention ! map() construit un nouveau tableau. Si on utilise cette méthode sans utiliser le résultat, mieux vaudra utiliser forEach ou for...of.  Pour mieux décider si map()est adéquat, regardez si vous utilisez la valeur de retour et/ou si vous renvoyez une valeur avec la fonction callback : si ce n'est pas le cas, il ne faut pas utiliser map().

+
+ +

Si le paramètre thisArg est utilisé, il sera utilisé en tant que this par la fonction callback lorsqu'elle sera appelée. S'il n'est pas utilisé, ce sera la valeur {{jsxref("undefined")}} qui sera utilisée pour définir this. La valeur this finalement prise en compte par la fonction callback est définie selon les règles usuelles qui déterminent la valeur this observée par une fonction.

+ +

map ne modifie pas le tableau sur lequel elle est appelée (bien que la fonction callback, si elle est appelée, puisse modifier le tableau).

+ +

La liste des éléments à traiter lors de l'opération map est définie avant le premier appel à callback. Les éléments qui sont ajoutés au tableau après que l'appel à map ait été initié ne seront pas traités par la fonction callback. Si des éléments ont été modifiés, la valeur utilisée par la fonction callback sera celle au moment où map est utilisée. Les éléments qui sont supprimés ne sont pas traités. De la même façon, si on applique map sur un tableau dont certains éléments sont indéfinis, le résultat possèdera également les mêmes éléments indéfinis.

+ +

Exemples

+ +

Créer un tableau des racines carrées d'un tableau de nombre

+ +

Dans l'exemple suivant, on crée un tableau composé des racines carrées des éléments d'un premier tableau :

+ +
var nombres = [1, 4, 9];
+var racines = nombres.map(Math.sqrt);
+// racines vaut désormais [1, 2, 3]
+// nombres vaut toujours [1, 4, 9]
+
+ +

Créer un tableau de nombres avec une fonction à un argument

+ +

Ici, on illustre le fonctionnement de map avec une fonction à un argument. Cet argument sera automatiquement remplacé par chaque élément du tableau au fur et à mesure que map parcourt le tableau :

+ +
var nombres = [1, 4, 9];
+var doubles = nombres.map(function(num) {
+  return num * 2;
+});
+// doubles vaut désormais [2, 8, 18].
+// nombres vaut toujours [1, 4, 9]
+
+ +

Utiliser map pour changer le format d'objets dans un tableau

+ +

Dans le code qui suit, on utilise un tableau d'objets pour créer un autre tableau contenant de nouveaux objets dans un autre format :

+ +
var tableauOrig = [{clé:1, valeur:10}, {clé:2, valeur:20}, {clé:3, valeur: 30}];
+var tableauFormaté = tableauOrig.map(obj => {
+  var rObj = {};
+  rObj[obj.clé] = obj.valeur;
+  return rObj;
+});
+// tableauFormaté vaut maintenant [{1:10}, {2:20}, {3:30}],
+// tableauOrig vaut toujours
+// [{clé:1, valeur:10},
+//  {clé:2, valeur:20},
+//  {clé:3, valeur: 30}
+// ]
+
+ +

Utiliser map de façon générique

+ +

Dans cet exemple, on voit comment utiliser la fonction map sur une chaîne de caractères pour obtenir un tableau contenant les codes ASCII des valeurs encodées :

+ +
var map = Array.prototype.map;
+var a = map.call('Hello World', function(x) { return x.charCodeAt(0); });
+// a vaut désormais [72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100]
+
+ +

Utiliser map avec querySelectorAll

+ +

Dans cet exemple, on illustre comment utiliser la méthode map de façon générique, sur un tableau d'objets collectés grâce à querySelectorAll :

+ +
var elems = document.querySelectorAll('select option:checked');
+var values = Array.prototype.map.call(elems, function(obj) {
+  return obj.value;
+});
+
+ +

On aurait également pu utiliser la méthode {{jsxref("Array.from()")}} qui permet de produire un tableau à partir d'un objet itérable.

+ +

Un résultat inattendu

+ +

Exemple inspiré par ce billet (en anglais)

+ +

Il est fréquent d'utiliser la fonction callback avec un seul argument (l'élément en cours). Certaines fonctions natives sont également souvent appelées avec un unique argument même si elles peuvent prendre en compte plusieurs arguments. En combinant ces deux « habitudes », on peut obtenir certains résultats inattendus :

+ +
// Si on utilise :
+['1', '2', '3'].map(parseInt);
+// On s'attend à obtenir [1, 2, 3]
+// Le résultat qu'on obtient est en fait [1, NaN, NaN]
+
+// parseInt est souvent utilisé avec un argument mais il
+// peut être utilisé avec deux arguments
+// Le premier correspond à l'expression à parser et le second
+// à la base dans laquelle convertir
+// Array.prototype.map passe 3 arguments à callback :
+// l'élément, l'index et le tableau
+// Le troisième argument sera ignoré par parseInt mais pas le
+// deuxième, ce qui donnera ce résultat étrange
+
+function returnInt(element) {
+  return parseInt(element, 10);
+}
+
+['1', '2', '3'].map(returnInt); // [1, 2, 3]
+// Le résultat qu'on obtient avec la fonction auxiliaire
+
+['1', '2', '3'].map(parseInt);  // [1, NaN, NaN]
+// car map passe trois argument à la fonction et que parseInt
+// considère le second argument comme base.
+// En détails :
+// Premier élément :   "1" à l'indice 0 : parseInt("1",0); donne 1
+// Deuxième élément :  "2" à l'indice 1 : parseInt("2",1); donne NaN
+// Troisième élément : "3" à l'indice 2 : parseInt("3",2); donne NaN
+
+
+// Formulation équivalente plus concise avec
+// une fonction fléchée
+['1', '2', '3'].map( str => parseInt(str));
+
+// Une autre méthode, plus simple
+['1', '2', '3'].map(Number); // [1, 2, 3]
+// à la différence de parseInt, cela fonctionnera pour les
+// nombres décimaux ou en notation exponentielle
+['1.1', '2.2e2', '3e300'].map(Number); // [1.1, 220, 3e+300]
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES5.1', '#sec-15.4.4.19', 'Array.prototype.map')}}{{Spec2('ES5.1')}}Définition initiale. Implémentée avec JavaScript 1.6.
{{SpecName('ES6', '#sec-array.prototype.map', 'Array.prototype.map')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-array.prototype.map', 'Array.prototype.map')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Array.map")}}

+
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/array/of/index.html b/files/fr/web/javascript/reference/global_objects/array/of/index.html new file mode 100644 index 0000000000..ffd20e3bf1 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/array/of/index.html @@ -0,0 +1,105 @@ +--- +title: Array.of() +slug: Web/JavaScript/Reference/Objets_globaux/Array/of +tags: + - Array + - ECMAScript 2015 + - JavaScript + - Méthode + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/of +--- +
{{JSRef}}
+ +

La methode Array.of() permet de créer une nouvelle instance d'objet Array à partir d'un nombre variable d'arguments, quels que soient leur nombre ou leur type.

+ +

La différence entre Array.of() et le constructeur Array se situe dans la gestion de d'arguments entiers : Array.of(7) crée un tableau avec un seul élément, 7, tandis que Array(7) produit un tableau avec 7 éléments vides (à ne pas confondre avec des éléments qui auraient explicitement la valeur undefined).

+ +
Array.of(7);       // [7]
+Array.of(1, 2, 3); // [1, 2, 3]
+
+Array(7);          // un tableau avec 7 emplacements vides
+Array(1, 2, 3);    // [1, 2, 3]
+
+ +

Syntaxe

+ +
Array.of(element0[, element1[, ...[, elementN]]])
+
+ +

Paramètres

+ +
+
element0, element1, ..., elementN
+
Les éléments avec lesquels on souhaite construire le nouveau tableau.
+
+ +

Valeur de retour

+ +

Une nouvelle instance de {{jsxref("Array")}}.

+ +

Description

+ +

Cette fonction fait partie du standard ECMAScript 2015. Pour plus d'informations, voir les pages sur la proposition pour Array.of et Array.from ainsi que la page sur le fragment d'émulation pour Array.of.

+ +
Array.of(7);       // [7]
+Array.of(1, 2, 3); // [1, 2, 3]
+
+Array(7);          // [ , , , , , , ]
+Array(1, 2, 3);    // [1, 2, 3]
+
+ +

Exemples

+ +
Array.of(1);         // [1]
+Array.of(1, 2, 3);   // [1, 2, 3]
+Array.of(undefined); // [undefined]
+
+ +

Prothèse d'émulation (polyfill)

+ +

Exécuter ce code avant tout autre code permettra de créer la méthode Array.of() si elle n'est pas prise en charge nativement.

+ +
if (!Array.of) {
+  Array.of = function() {
+    return Array.prototype.slice.call(arguments);
+  };
+}
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-array.of', 'Array.of')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-array.of', 'Array.of')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Array.of")}}

+
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/array/pop/index.html b/files/fr/web/javascript/reference/global_objects/array/pop/index.html new file mode 100644 index 0000000000..7d06b9f5f7 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/array/pop/index.html @@ -0,0 +1,111 @@ +--- +title: Array.prototype.pop() +slug: Web/JavaScript/Reference/Objets_globaux/Array/pop +tags: + - Array + - JavaScript + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Array/pop +--- +
{{JSRef}}
+ +

La méthode pop() supprime le dernier élément d'un tableau et retourne cet élément. Cette méthode modifie la longueur du tableau.

+ +
{{EmbedInteractiveExample("pages/js/array-pop.html")}}
+ + + +

Syntaxe

+ +
arr.pop()
+ +

Valeur de retour

+ +

L'élément qui a été retiré du tableau. Si le tableau est vide, elle renvoie {{jsxref("undefined")}}.

+ +

Description

+ +

La méthode pop() supprime le dernier élément d'un tableau et retourne cette valeur.

+ +

pop() est volontairement générique ; cette méthode peut être {{jsxref("Function.call", "appelée")}} ou {{jsxref("Function.apply", "appliquée")}} pour des objets ressemblant à des tableaux. Les objets qui ne contiennent pas une propriété length reflétant la fin d'une série de propriétés consécutives numérotées peuvent se comporter bizarrement.

+ +

Si vous appelez pop() sur un tableau vide, il renverra la valeur {{jsxref("undefined")}}.

+ +
+

Note : La méthode {{jsxref("Array.prototype.shift()")}} possède un comportement analogue mais retire le premier élément du tableau.

+
+ +

Exemples

+ +

Supprimer le dernier élément d'un tableau

+ +

Le code suivant crée le tableau mesPoissons qui contient quatre éléments puis supprime le dernier élément.

+ +
var mesPoissons = ["angel", "clown", "mandarin", "sturgeon"];
+
+var popped = mesPoissons.pop();
+
+console.table(mesPoissons); // angel, clown, madarin
+console.log(popped);        // sturgeon
+ +

Utiliser apply() ou call() sur les objets semblables aux tableaux

+ +

Le code suivant crée un objet mesPoissons semblable à un tableau, qui contient 4 propriétés indexées avec des nombres et une propriété length. On utilise la méthode {{jsxref("Function.call()")}} pour invoquer pop() sur cet objet :

+ +
var mesPoissons = {0: 'angel', 1: 'clown', 2: 'mandarin', 3: 'sturgeon', length: 4};
+
+var popped = Array.prototype.pop.call(mesPoissons); // on aurait pu utiliser apply()
+console.log(mesPoissons); // {0: 'angel', 1: 'clown', 2: 'mandarin', length: 3}
+console.log(popped);      // 'sturgeon'
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale. Implémentée avec JavaScript 1.2.
{{SpecName('ES5.1', '#sec-15.4.4.6', 'Array.prototype.pop')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-array.prototype.pop', 'Array.prototype.pop')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-array.prototype.pop', 'Array.prototype.pop')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Array.pop")}}

+
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/array/push/index.html b/files/fr/web/javascript/reference/global_objects/array/push/index.html new file mode 100644 index 0000000000..1ca8d57e8f --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/array/push/index.html @@ -0,0 +1,144 @@ +--- +title: Array.prototype.push() +slug: Web/JavaScript/Reference/Objets_globaux/Array/push +tags: + - Array + - JavaScript + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Array/push +--- +
{{JSRef}}
+ +

La méthode push() ajoute un ou plusieurs éléments à la fin d'un tableau et retourne la nouvelle taille du tableau.

+ +
{{EmbedInteractiveExample("pages/js/array-push.html")}}
+ + + +

Syntaxe

+ +
arr.push(élément1, ..., élémentN)
+ +

Paramètres

+ +
+
élément1, ...,élémentN
+
Les éléments à ajouter à la fin du tableau.
+
+ +

Valeur de retour

+ +

La nouvelle valeur de la propriété {{jsxref("Array.length", "length")}} de l'objet sur lequel la méthode a été appelée.

+ +

Description

+ +

La méthode push permet d'ajouter des valeurs à un tableau.

+ +

push est une méthode générique. Cette méthode peut ainsi être utilisée avec les méthodes {{jsxref("Function.call()")}} ou {{jsxref("Function.apply()")}} sur des objets similaires aux tableaux.

+ +

La méthode push se base sur la propriété length pour déterminer à partir de quel index les valeurs données doivent être insérées. Si la propriété length ne peut pas être convertie en nombre, l'index utilisé est 0. Si la propriété length n'est pas définie, elle est alors créée.

+ +

Bien que push soit une méthode générique, elle ne peut pas être utilisée sur les chaînes de caractères ou sur l'objet arguments car ils sont immuables.

+ +

Exemples

+ +

Ajouter des éléments à un tableau

+ +

Le code suivant crée un tableau sports contenant à sa création deux éléments, auxquels sont ajoutés deux nouveaux éléments. La variable total contient la nouvelle taille du tableau.

+ +
var sports = ["plongée", "baseball"];
+var total = sports.push("football", "tennis");
+
+console.log(sports); // ["plongée", "baseball", "football", "tennis"]
+console.log(total);  // 4
+
+ +

Fusionner deux tableaux

+ +

Dans l'exemple qui suit, on utilise la méthode {{jsxref("Function.apply()")}} pour ajouter les différents éléments d'un second tableau

+ +
var legumes = ['navet', 'pomme de terre'];
+var autresLegumes = ['céleri', 'radis'];
+
+// On fusionne les deux tableaux
+// Équivalent à legumes.push('céleri', 'radis');
+Array.prototype.push.apply(legumes, autresLegumes);
+
+console.log(legumes); // ['navet', 'pomme de terre', 'céleri', 'radis']
+ +
+

Note : Attention à ne pas utiliser cette méthode lorsque les tableaux sont très grands car une fonction n'accepte qu'un nombre limité d'arguments. Voir {{jsxref("Function.apply","apply()")}} pour plus d'informations sur ces limites.

+
+ +

Utiliser un objet comme on utiliserait un tableau

+ +

Comme nous l'avons vu auparavant, push est une méthode générique et nous pouvons donc utiliser Array.prototype.push sur les objets. On notera qu'il n'est pas nécessaire de stocker un ensemble d'objets. En fait, on enregistre l'ensemble dans l'objet et on utilise call sur Array.prototype.push :

+ +
var obj = {
+    length: 0,
+
+    ajoutElem: function ajoutElem (elem) {
+        // obj.length est automatiquement incrémenté
+        // quand on ajoute un élément
+        [].push.call(this, elem);
+    }
+};
+
+// Ajoutons quelques objets vides pour illustrer
+// l'exemple.
+obj.ajoutElem({});
+obj.ajoutElem({});
+console.log(obj.length);
+// → 2
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale. Implémentée avec JavaScript 1.2.
{{SpecName('ES5.1', '#sec-15.4.4.7', 'Array.prototype.push')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-array.prototype.push', 'Array.prototype.push')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-array.prototype.push', 'Array.prototype.push')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Array.push")}}

+
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/array/reduce/index.html b/files/fr/web/javascript/reference/global_objects/array/reduce/index.html new file mode 100644 index 0000000000..17b90678b9 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/array/reduce/index.html @@ -0,0 +1,407 @@ +--- +title: Array.prototype.reduce() +slug: Web/JavaScript/Reference/Objets_globaux/Array/reduce +tags: + - Array + - ECMAScript 5 + - JavaScript + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Array/Reduce +--- +
{{JSRef}}
+ +

La méthode reduce() applique une fonction qui est un « accumulateur » et qui traite chaque valeur d'une liste (de la gauche vers la droite) afin de la réduire à une seule valeur.

+ +
{{EmbedInteractiveExample("pages/js/array-reduce.html")}}
+ + + +

Syntaxe

+ +
arr.reduce(callback)
+arr.reduce(callback, valeurInitiale)
+ +

Paramètres

+ +
+
callback
+
La fonction à exécuter sur chaque valeur de la liste (sauf le premier si aucune valeurInitiale n'est fournie), elle prend quatre arguments en entrée : +
+
accumulateur
+
La valeur précédemment retournée par le dernier appel du callback, ou valeurInitiale, si elle est fournie (voir ci-après) (c'est la valeur « accumulée » au fur et à mesure des appels
+
valeurCourante
+
La valeur de l'élément courant actuellement manipulé dans le tableau.
+
index{{optional_inline}}
+
L'index de l'élément courant actuellement manipulé dans le tableau.
+
array{{optional_inline}}
+
Le tableau sur lequel on a appelé la méthode reduce().
+
+
+
valeurInitiale{{optional_inline}}
+
Une valeur utilisée comme premier argument lors du premier appel de la fonction callback. Si aucune valeur initiale n'est fournie, le premier élément du tableau est utilisé (et la boucle de traitement ne le parcourera pas). Si on appelle reduce() sur un tableau vide sans fournir de valeur initiale, on aura une erreur.
+
+ +

Valeur de retour

+ +

La valeur obtenue grâce à la fonction de réduction.

+ +

Description

+ +

reduce() exécute la fonction callback une fois pour chaque élément présent dans le tableau et ignore les éléments vides du tableau. La fonction callback utilise quatre arguments :

+ +
    +
  1. L'accumulateur (la valeur retournée par le précédent appel de la fonction callback), ou la valeur initiale s'il sagit du premier appel ;
    2. +
  2. la valeur de l'élément courant ;
    3. +
  3. l'index de l'élément courant ;
    4. +
  4. le tableau parcouru par la méthode.
    5. +
+ +

La première fois que la fonction callback est appelée, valeurInitiale et valeurCourante peuvent correspondre à un ou deux éléments. Si valeurInitiale est fournie dans l'appel de reduce(), alors accumulateur sera égale à valeurInitiale et valeurCourante sera égale à la première valeur de la liste. Si valeurInitiale n'est pas fournie, alors accumulateur sera égale à la première valeur de la liste, et valeurCourante sera alors égale à la seconde.

+ +

Autrement dit, si valeurInitiale n'est pas fournie, reduce exécutera la fonction de rappel à partir de l'indice 1 et la première valeur du tableau (d'indice 0) sera utilisée pour valeurInitiale.

+ +

En considérant le code suivant :

+ +
[0, 1, 2, 3, 4].reduce(function(accumulateur, valeurCourante, index, array){
+  return accumulateur + valeurCourante;
+});
+
+ +

La fonction callback sera appelée quatre fois, avec les arguments et les valeurs de retour de chaque appel suivant :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
accumulateurvaleurCouranteindexarrayvaleur retournée
premier appel011[0,1,2,3,4]1
deuxième appel122[0,1,2,3,4]3
troisième appel333[0,1,2,3,4]6
quatrième appel644[0,1,2,3,4]10
+ +

La valeur retournée par reduce() sera alors celle du dernier appel de la callback (ici 10).

+ +

Il est aussi possible d'utiliser une {{jsxref("Fonctions/Fonctions_fléchées","fonction fléchée","",1)}} au lieu d'une fonction classique. Le code suivant, par exemple, produit le même résultat que l'exemple précédent :

+ +
[0, 1, 2, 3, 4].reduce(
+  (accumulateur, valeurCourante) => accumulateur + valeurCourante;
+);
+ +

Si on fournit une valeur initiale comme second argument à l'appel de reduce(), le résultat sera alors le suivant :

+ +
[0, 1, 2, 3, 4].reduce(function(accumulateur, valeurCourante, index, array){
+  return accumulateur + valeurCourante;
+}, 10);
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
accumulateurvaleurCouranteindexarrayvaleur retournée
premier appel1000[0,1,2,3,4]10
deuxième appel1011[0,1,2,3,4]11
troisième appel1122[0,1,2,3,4]13
quatrième appel1333[0,1,2,3,4]16
cinquième appel1644[0,1,2,3,4]20
+ +

Ici, la valeur renvoyée par reduce() serait 20.

+ +

Exemples

+ +

Additionner toutes les valeurs d'un tableau

+ +
var total = [0, 1, 2, 3].reduce((a, b)=> a + b,0);
+// total == 6
+
+ +

Additionner les valeurs d'une propriétés pour un tableau d'objets

+ +

Pour additionner les valeurs d'une propriété donnée des objets d'un tableau, il sera nécessaire de fournir une valeur initiale afin que tous les éléments soient parcourus :

+ +
var valeurInitiale = 0;
+var somme = [{x: 1}, {x:2}, {x:3}].reduce(function (accumulateur, valeurCourante) {
+    return accumulateur + valeurCourante.x;
+}, valeurInitiale);
+
+console.log(somme); // affiche 6 dans la console
+
+ +

On peut également écrire une version plus concise avec les fonctions fléchées :

+ +
var valeurInitiale = 0;
+var somme = [{x: 1}, {x:2}, {x:3}].reduce(
+    (accumulateur, valeurCourante) => accumulateur + valeurCourante.x
+    , valeurInitiale
+);
+
+console.log(somme); // affiche 6 dans la console
+ +

Aplatir une liste de listes

+ +
var applati = [[0, 1], [2, 3], [4, 5]].reduce(function(a, b) {
+    return a.concat(b);
+});
+// applati vaut [0, 1, 2, 3, 4, 5]
+
+ +

Utiliser le paramètre valeurInitiale

+ +
var amis = [
+  { "nom": "Quentin", "livres": ["City Hall", "Harry Potter"]},
+  { "nom": "Alice", "livres": ["L'Avare", "Les Fleurs du Mal"]}
+]
+
+var tousLivres = amis.reduce(function(prev, curr) {
+  return [...prev, ...curr.livres];
+}, ["Perceval"]);
+
+// tousLivres = ["Perceval", "City Hall", "Harry Potter",
+//               "L'Avare", "Les Fleurs du Mal"]
+ +

Exécuter une suite de promesses stockées dans un tableau

+ +
/**
+ * Exécuter un enchaînement de promesses à partir d'un tableau
+ *
+ * @param {array} arr - un tableau de promesses
+ * @return {Object} un objet Promise
+ */
+function runPromiseInSequense(arr) {
+  return arr.reduce((promiseChain, currentPromise) => {
+    return promiseChain.then((chainedResult) => {
+      return currentPromise(chainedResult)
+        .then((res) => res)
+    })
+  }, Promise.resolve());
+}
+
+// promise function 1
+function p1() {
+  return new Promise((resolve, reject) => {
+    resolve(5);
+  });
+}
+
+// promise function 2
+function p2(a) {
+  return new Promise((resolve, reject) => {
+    resolve(a * 2);
+  });
+}
+
+// promise function 3
+function p3(a) {
+  return new Promise((resolve, reject) => {
+    resolve(a * 3);
+  });
+}
+
+const promiseArr = [p1, p2, p3];
+runPromiseInSequense(promiseArr)
+  .then((res) => {
+    console.log(res);   // 30
+  });
+
+ +

Regrouper des objets selon une propriété

+ +
var personnes = [
+  { nom: "Alice", age: 21 },
+  { nom: "Bob", age: 20 },
+  { nom: "Charlie", age: 20 }
+];
+
+function groupBy(tableauObjets, propriete){
+  return tableauObjets.reduce(function (acc, obj) {
+    var cle = obj[propriete];
+    if(!acc[cle]){
+      acc[cle] = [];
+    }
+    acc[cle].push(obj);
+    return acc;
+  }, {});
+}
+
+var personnesParAge = groupBy(personnes, "age");
+// personnesParAge aura la valeur :
+// {
+//    20: [
+//       { nom: "Bob", age: 20 },
+//       { nom: "Charlie", age: 20 }
+//    ],
+//    21: [{ nom: "Alice", age: 21 }]
+// }
+
+ +

Composition de fonctions

+ +
// Les briques de base que nous allons composer
+const double = x => x + x;
+const triple = x => 3 * x;
+const quadruple = x => 4 * x;
+
+// Une fonction qui permet d'appliquer une composition
+const pipe = (...functions) => input => functions.reduce(
+    (acc, fn) => fn(acc),
+    input
+);
+
+// On crée des fonctions pour multiplier par un facteur donné
+const multiply6 = pipe(double, triple);
+const multiply9 = pipe(triple, triple);
+const multiply16 = pipe(quadruple, quadruple);
+const multiply24 = pipe(double, triple, quadruple);
+
+// Utilisation
+multiply6(6); // 36
+multiply9(9); // 81
+multiply16(16); // 256
+multiply24(10); // 240
+
+ +

Retirer les doublons d'un tableau

+ +

Avec ECMAScript 2015 (ES6)

+ +
let tableauAvecDoublons = [1, 2, 3, 1, 4, 5, 4, 6];
+let tableauSansDoublon = Array.from(new Set(tableauAvecDoublons));
+console.table(tableauSansDoublon); // [1, 2, 3, 4, 5, 6]
+ +

Avec reduce()

+ +
var tableauAvecDoublons = [1, 2, 3, 1, 4, 5, 4, 6];
+var tableauSansDoublon = tableauAvecDoublon.reduce(function (acc, valCourante) {
+  if(acc.indexOf(valCourante) === -1) {
+    acc.push(valCourante);
+  }
+  return acc
+}, []);
+
+console.log(tableauSansDoublon); // [1, 2, 3, 4, 5, 6]
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES5.1', '#sec-15.4.4.21', 'Array.prototype.reduce()')}}{{Spec2('ES5.1')}}Définition initiale.
+ Implémenté dans JavaScript 1.8
{{SpecName('ES6', '#sec-array.prototype.reduce', 'Array.prototype.reduce()')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-array.prototype.reduce', 'Array.prototype.reduce()')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Array.reduce")}}

+
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/array/reduceright/index.html b/files/fr/web/javascript/reference/global_objects/array/reduceright/index.html new file mode 100644 index 0000000000..f29060283b --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/array/reduceright/index.html @@ -0,0 +1,282 @@ +--- +title: Array.prototype.reduceRight() +slug: Web/JavaScript/Reference/Objets_globaux/Array/reduceRight +tags: + - Array + - ECMAScript 5 + - JavaScript + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Array/ReduceRight +--- +
{{JSRef}}
+ +

La méthode reduceRight() applique une fonction sur un accumulateur et chaque valeur d'un tableau (de la droite vers la gauche) de sorte à réduire le tableau en une seule valeur.

+ +
{{EmbedInteractiveExample("pages/js/array-reduce-right.html")}}
+ + + +

Voir également {{jsxref("Array.prototype.reduce()")}} pour une méthode qui réduit de gauche à droite.

+ +

Syntaxe

+ +
arr.reduceRight(callback[, valeurInitiale])
+ +

Paramètres

+ +
+
callback
+
La fonction à éxécuter sur chaque valeur de la liste. Elle utilise quatres arguments : +
+
accumulator
+
La valeur précédemment retournée par le dernier appel de la fonction callback, ou valeurInitial si elle est fournie. (Voir ci-après.)
+
valeurCourante
+
La valeur de l'élément courant dans le tableau.
+
index
+
L'index de l'élément du tableau actuellement manipulé.
+
array
+
Le tableau sur lequel reduceRight() est appelée.
+
+
+
valeurInitiale {{optional_inline}}
+
C'est l'objet à utiliser comme accumulateur/premier argument lors du premier appel de la fonction callback. Si aucune valeur n'est fournie, c'est le dernier élément du tableau qui sera utilisé. Si on appelle reduce() ou reduceRight() sur un tableau vide sans fournir de valeur initiale, on aura une exception {{jsxref("TypeError")}}.
+
+ +

Valeur de retour

+ +

La valeur obtenue grâce à la fonction de réduction.

+ +

Description

+ +

reduceRight exécute la fonction callback une fois pour chaque élément présent dans le tableau, les éléments vides sont ignorés. La fonction callback utilise quatre arguments : la valeur initiale (ou la valeur retournée par le précédent appel de la fonction callback), la valeur de l'élément courant, l'index de l'élément courant, et le tableau qui est parcouru.

+ +

L'usage de reduceRight avec définition d'un callback devrait ressembler à ceci :

+ +
array.reduceRight(function(accumulator, valeurCourante, index, array) {
+    // ...
+});
+ +

La première fois que la fonction de callback est appelée, accumulator et valeurCourante peuvent correspondre à un ou deux éléments. Si valeurInitiale est fournie lors de l'appel à reduceRight, alors accumulator sera égale à valeurInitiale et valeurCourante sera égale à la dernière valeur de la liste. Si valeurInitiale n'est pas fournie, alors accumulator sera égale à la dernière valeur de la liste, et valeurCourante sera alors égale à l'avant-dernière valeur du tableau.

+ +

Si on utilise la méthode reduceRight de la façon suivante :

+ +
[0, 1, 2, 3, 4].reduceRight(function(accumulator, valeurCourante, index, array) {
+    return accumulator + valeurCourante;
+});
+
+ +

La fonction callback sera appelée quatre fois, avec les arguments et les valeurs de retour de chaque appel suivant :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
callbackaccumulatorvaleurCouranteindexarrayValeur renvoyée
premier appel433[0,1,2,3,4]7
second appel722[0,1,2,3,4]9
troisième appel911[0,1,2,3,4]10
quatrième appel1000[0,1,2,3,4]10
+ +

La valeur retournée par reduceRight sera alors celle du dernier appel de la fonction callback (10).

+ +

Si vous fournissez une valeur initiale comme second argument à l'appel de reduceRight, le résultat sera alors le suivant :

+ +
[0, 1, 2, 3, 4].reduceRight(function(accumulator, valeurCourante, index, array) {
+    return accumulator + valeurCourante;
+}, 10);
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
accumulatorvaleurCouranteindexarrayValeur renvoyée
premier appel1044[0,1,2,3,4]14
second appel1433[0,1,2,3,4]17
troisième appel1722[0,1,2,3,4]19
quatrième appel1911[0,1,2,3,4]20
cinquième appel2000[0,1,2,3,4]20
+ +

La valeur renvoyée par reduceRight sera ici 20.

+ +

Exemples

+ +

Additionner toutes les valeurs d'une liste

+ +
var total = [0, 1, 2, 3].reduceRight(function(a, b) {
+    return a + b;
+});
+// total == 6
+
+ +

Aplatir une liste de listes

+ +
var aplati = [[0, 1], [2, 3], [4, 5]].reduceRight(function(a, b) {
+    return a.concat(b);
+}, []);
+// aplati [4, 5, 2, 3, 0, 1]
+
+ +

Différence entre reduce et reduceRight

+ +
var a = ['1', '2', '3', '4','5']
+var gauche = a.reduce(function(prev, cur) {
+  return prev + cur;
+});
+
+var droite = a.reduceRight(function(prev, cur) {
+  return prev + cur;
+});
+
+console.log(gauche); // "12345"
+console.log(droite); // "54321"
+ +

Composition de fonctions à l'aide de reduce

+ +

La composition de fonctions consiste en l'enchaînement de n fonctions l'une après l'autre (où les appels sont généralement exécutés de droite à gauche.

+ +
/**
+ *
+ * h(x) = f(g(x))
+ *
+ * https://fr.wikipedia.org/wiki/Composition_de_fonctions
+ */
+
+const compose = (...args) => (value) => args.reduceRight((acc, fn) => fn(acc), value)
+
+// On incrémente un nombre passé en argument
+const inc = (n) => n + 1
+
+// On double la valeur passée en argument
+const double = (n) => n * 2
+
+// On compose double(inc(x))
+compose(double, inc)(2) // 6
+
+// On compose inc(double(x))
+compose(inc, double)(2) // 5
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES5.1', '#sec-15.4.4.22', 'Array.prototype.reduceRight')}}{{Spec2('ES5.1')}}Définition initiale. Implémentée avec JavaScript 1.8.
{{SpecName('ES6', '#sec-array.prototype.reduceright', 'Array.prototype.reduceRight')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-array.prototype.reduceright', 'Array.prototype.reduceRight')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Array.reduceRight")}}

+
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/array/reverse/index.html b/files/fr/web/javascript/reference/global_objects/array/reverse/index.html new file mode 100644 index 0000000000..515b437842 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/array/reverse/index.html @@ -0,0 +1,105 @@ +--- +title: Array.prototype.reverse() +slug: Web/JavaScript/Reference/Objets_globaux/Array/reverse +tags: + - Array + - JavaScript + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Array/reverse +--- +
{{JSRef}}
+ +

La méthode reverse() transpose les éléments d'un tableau : le premier élément devient le dernier et le dernier devient le premier et ainsi de suite.

+ +
{{EmbedInteractiveExample("pages/js/array-reverse.html")}}
+ + + +

Syntaxe

+ +
arr.reverse()
+ +

Valeur de retour

+ +

Le tableau inversé.

+ +

Description

+ +

La méthode reverse() permet d'inverser l'ordre des éléments du tableau. La méthode modifie le tableau courant et renvoie une référence à ce tableau.

+ +

Cette méthode est intentionnellement générique et peut être appelée (via {{jsxref("Function.call()")}}) ou appliquée (via {{jsxref("Function.apply()")}}) sur des objets semblables à des tableaux. Les objets qui ne contiennent pas de propriété length qui soit cohérente avec leurs propriétés indexées sur des nombres ne seront pas traités par reverse().

+ +

Exemples

+ +

Inverser l'ordre des éléments d'un tableau

+ +

L'exemple qui suit crée un tableau monArray, qui contient trois éléments, puis inverse celui-ci.

+ +
var monArray = ["un", "deux", "trois"];
+monArray.reverse();
+
+console.log(monArray) // ["trois", "deux", "un"]
+
+ +

Inverser l'ordre des éléments d'un objet semblable à un tableau

+ +

Dans l'exemple suivant, on crée un objet semblable à un tableau a qui contient trois éléments et une propriété length. On appelle ensuite reverse() grâce à call() sur cet objet pour inverser ses éléments :

+ +
const a = {0: 1, 1: 2, 2: 3, length: 3};
+
+console.log(a); // {0: 1, 1: 2, 2: 3, length: 3}
+
+Array.prototype.reverse.call(a); // On aurait pu utiliser apply() également
+
+console.log(a); // {0: 3, 1: 2, 2 : 1, length: 3}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.4.4.8', 'Array.prototype.reverse')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-array.prototype.reverse', 'Array.prototype.reverse')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-array.prototype.reverse', 'Array.prototype.reverse')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Array.reverse")}}

+
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/array/shift/index.html b/files/fr/web/javascript/reference/global_objects/array/shift/index.html new file mode 100644 index 0000000000..9711ca9d25 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/array/shift/index.html @@ -0,0 +1,118 @@ +--- +title: Array.prototype.shift() +slug: Web/JavaScript/Reference/Objets_globaux/Array/shift +tags: + - Array + - JavaScript + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Array/shift +--- +
{{JSRef}}
+ +

La méthode shift() permet de retirer le premier élément d'un tableau et de renvoyer cet élément. Cette méthode modifie la longueur du tableau.

+ +
{{EmbedInteractiveExample("pages/js/array-shift.html")}}
+ + + +

Syntaxe

+ +
arr.shift()
+ +

Valeur de retour

+ +

L'élément retiré du tableau ou {{jsxref("undefined")}} si le tableau est vide.

+ +

Description

+ +

La méthode shift retire l'élément situé à l'index zéro et décrémente l'index des éléments suivant avant de retourner l'élément supprimé. Si la propriété {{jsxref("Array.length", "length")}} vaut 0, {{jsxref("undefined")}} est retourné.

+ +

Cette méthode est générique et peut être {{jsxref("Function.call", "appelée","",1)}} ou {{jsxref("Function.apply", "appliquée","",1)}} sur des objets similaires à des tableaux. 

+ +

Cette méthode n'est pas exploitable pour les objets dont la propriété length ne reflète pas la taille du contenu, ou pour lesquels la propriété length n'est pas définie.

+ +
+

Note : La méthode {{jsxref("Array.prototype.pop()")}} possède un comportement similaire mais retire le dernier élément du tableau (et non le premier).

+
+ +

Exemples

+ +

Supprimer un élément d'un tableau

+ +

Le code suivant affiche le tableau mesPoissons avant et après avoir enlevé le premier élément. Il affiche aussi l'élément supprimé :

+ +
var mesPoissons = ["ange", "clown", "mandarin", "chirurgien"];
+
+console.log("mesPoissons avant : " + JSON.stringify(mesPoissons));
+// mesPoissons avant : ["ange","clown","mandarin","chirurgien"]
+
+var premierÉlément = mesPoissons.shift();
+
+console.log("mesPoissons après :", mesPoissons);
+// mesPoissons après : ["clown", "mandarin", "chirurgien"]
+
+console.log("Cet élément a été enlevé :", premierÉlément);
+// "Cet élément a été enlevé : ange"
+
+ +

Utiliser shift() dans une boucle while

+ +

La méthode shift() peut être utilisée dans une boucle while. Dans l'exemple suivant, chaque itération de la boucle retire un élément du tableau et l'affiche dans la console, jusqu'à ce que ce dernier soit vide.

+ +
var noms = ["André", "Édouard", "Paul", "Christophe", "Jean"];
+while ( (i = noms.shift()) !== undefined ) {
+  console.log(i);
+}
+// André, Édouard, Paul, Christophe, Jean
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale. Implémentée avec JavaScript 1.2.
{{SpecName('ES5.1', '#sec-15.4.4.9', 'Array.prototype.shift')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-array.prototype.shift', 'Array.prototype.shift')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-array.prototype.shift', 'Array.prototype.shift')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Array.shift")}}

+
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/array/slice/index.html b/files/fr/web/javascript/reference/global_objects/array/slice/index.html new file mode 100644 index 0000000000..98dac60521 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/array/slice/index.html @@ -0,0 +1,178 @@ +--- +title: Array.prototype.slice() +slug: Web/JavaScript/Reference/Objets_globaux/Array/slice +tags: + - Array + - JavaScript + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Array/slice +--- +
{{JSRef}}
+ +

La méthode slice() renvoie un objet 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é.

+ +
{{EmbedInteractiveExample("pages/js/array-slice.html")}}
+ + + +

Syntaxe

+ +
arr.slice()
+arr.slice(début)
+arr.slice(début, fin)
+
+ +

Paramètres

+ +
+
début {{optional_inline}}
+
Indice (à partir de zéro) depuis lequel commencer l'extraction.
+
S'il s'agit d'un indice négatif, début indique un décalage depuis la fin de la séquence. Par exemple, slice(-2) extrait les avant-dernier et dernier éléments dans la séquence.
+
+ Si début est absent, slice() commencera depuis 0. Si début est supérieur à la taille du tableau, c'est un tableau vide qui sera renvoyé.
+
+ +
+
fin {{optional_inline}}
+
Indice (à partir de zéro) auquel arrêter l'extraction. slice() extrait jusqu'à cet indice, mais pas l'élément situé en fin lui-même.
+
slice(1,4) extrait du deuxième au quatrième élément (les éléments d'indices 1, 2 et 3).
+
S'il s'agit d'un indice négatif, fin indique un décalage depuis la fin de la séquence. slice(2,-1) extrait du troisième à l'avant-dernier élément dans la séquence.
+
Si fin n'est pas fourni, slice() extraira jusqu'à la fin de la séquence (arr.length). Si fin est supérieur à la longueur de la séquence, slice() fera une extraction jusqu'à la fin de la séquence.
+
+ +

Valeur de retour

+ +

Un nouveau tableau contenant les éléments extraits.

+ +

Description

+ +

slice() ne modifie pas le tableau original, mais renvoie une nouvelle copie du tableau (shallow copy — copie superficielle) dont les éléments sont des copies des éléments extraits du tableau original. Les éléments du tableau original sont copiés dans le nouveau tableau de la manière suivante :

+ + + +

Si un nouvel élément est ajouté à l'un ou l'autre tableau, le second n'est pas affecté.

+ +

Exemples

+ +

Renvoyer un fragment d'un tableau existant

+ +
var fruits = ["Banane", "Orange", "Citron", "Pomme", "Mangue"];
+var agrumes = fruits.slice(1, 3);
+
+// fruits vaut --> ["Banane", "Orange", "Citron", "Pomme", "Mangue"]
+// agrumes vaut --> ["Orange", "Citron"]
+ +

Utiliser slice()

+ +

Dans l'exemple qui suit, slice() crée un nouveau tableau, nouvelleVoiture, à partir de maVoiture. Chacun d'entre eux contient une référence à l'objet maHonda. Lorsque la couleur de maHonda est changée en bordeaux, les deux tableaux reflètent ce changement.

+ +
// Avec slice, crée nouvelleVoiture depuis maVoiture
+var maHonda = { couleur : "rouge", roues : 4, moteur : { cylindres : 4, capacité : 2.2 } };
+var maVoiture = [maHonda, 2, "excellente condition", "achetée en 1997"];
+var nouvelleVoiture = maVoiture.slice(0, 2);
+
+// Affiche les valeurs de maVoiture, nouvelleVoiture et la couleur de maHonda
+// référencées depuis chacun des tableaux.
+console.log("maVoiture = " + JSON.stringify(maVoiture));
+console.log("nouvelleVoiture = " + JSON.stringify(nouvelleVoiture));
+console.log("maVoiture[0].couleur = " + maVoiture[0].couleur);
+console.log("nouvelleVoiture[0].couleur = " + nouvelleVoiture[0].couleur);
+
+// Change la couleur de maHonda.
+maHonda.couleur = "bordeaux";
+console.log("La nouvelle couleur de ma Honda est " + maHonda.couleur);
+
+// Affiche la couleur de maHonda référencées depuis les deux tableaux.
+console.log("maVoiture[0].couleur = " + maVoiture[0].couleur);
+console.log("nouvelleVoiture[0].couleur = " + nouvelleVoiture[0].couleur);
+
+ +

Ce script affichera :

+ +
maVoiture = [{couleur:"rouge", roues:4, moteur:{cylindres:4, capacité:2.2}}, 2,
+             "excellente condition", "achetée en 1997"]
+nouvelleVoiture = [{couleur:"rouge", roues:4, moteur:{cylindres:4, capacité:2.2}}, 2]
+maVoiture[0].couleur = rouge
+nouvelleVoiture[0].couleur = rouge
+La nouvelle couleur de ma Honda est bordeaux
+maVoiture[0].couleur = bordeaux
+nouvelleVoiture[0].couleur = bordeaux
+
+ +

Utilisation avec les objets similaires aux tableaux

+ +

La méthode slice() peut aussi être appelée pour convertir des objets/collections similaires à des tableaux, en un nouveau tableau. L'objet {{jsxref("Fonctions/arguments", "arguments")}} d'une fonction est un exemple d'objet similaire à un tableau.

+ +
function list() {
+  return Array.prototype.slice.call(arguments, 0);
+}
+
+var list1 = list(1, 2, 3); // [1, 2, 3]
+
+ +

Il est possible de lier avec la fonction .call de {{jsxref("Function.prototype")}} et on peut effectuer la réduction avec [].slice.call(arguments) plutôt qu'avec Array.prototype.slice.call. Voici comment on peut simplifier avec {{jsxref("Function.prototype.bind", "bind")}} :

+ +
var unboundSlice = Array.prototype.slice;
+var slice = Function.prototype.call.bind(unboundSlice);
+
+function list() {
+  return slice(arguments, 0);
+}
+
+var list1 = list(1, 2, 3); // [1, 2, 3]
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale. Implémentée avec JavaScript 1.2.
{{SpecName('ES5.1', '#sec-15.4.4.10', 'Array.prototype.slice')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-array.prototype.slice', 'Array.prototype.slice')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-array.prototype.slice', 'Array.prototype.slice')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Array.slice")}}

+
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/array/some/index.html b/files/fr/web/javascript/reference/global_objects/array/some/index.html new file mode 100644 index 0000000000..2d3b197c16 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/array/some/index.html @@ -0,0 +1,133 @@ +--- +title: Array.prototype.some() +slug: Web/JavaScript/Reference/Objets_globaux/Array/some +tags: + - Array + - ECMAScript 5 + - JavaScript + - Méthode + - Prototype + - Reference + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/some +--- +
{{JSRef}}
+ +

La méthode some() teste si au moins un élément du tableau passe le test implémenté par la fonction fournie. Elle renvoie un booléen indiquant le résultat du test.

+ +
+

Note : Cette méthode renverra false, quelle que soit la condition, si elle est utilisée sur un tableau vide.

+
+ +
{{EmbedInteractiveExample("pages/js/array-some.html")}}
+ + + +

Syntaxe

+ +
arr.some(callback[, objetThis])
+ +

Paramètres

+ +
+
callback
+
La fonction à tester pour chaque élément du tableau. Cette fonction utilise trois arguments : +
+
valeurCourante
+
L'élément du tableau à traiter par la fonction.
+
index {{optional_inline}}
+
L'indice de l'élément qui est traité par la fonction.
+
array {{optional_inline}}
+
Le tableau sur lequel on a appelé la méthode some.
+
+
+
objetThis {{optional_inline}}
+
Paramètre optionnel. Il correspond à la valeur à utiliser pour this lors de l'exécution de la fonction callback.
+
+ +

Valeur de retour

+ +

true si la fonction callback renvoie une valeur équivalente à true pour au moins un des éléments du tableau, sinon elle renvoie false.

+ +

Description

+ +

La méthode some() exécute la fonction callback une seule fois pour chaque élément présent dans le tableau jusqu'à ce qu'elle en trouve un pour lequel callback renvoie une valeur équivalente à true dans un contexte booléen. Si un tel élément est trouvé, some() renvoie immédiatement true. Dans le cas contraire, some renvoie false. callback n'est invoquée que pour les indices du tableau auxquels des valeurs sont assignées ; elle n'est pas invoquée pour les indices qui ont été supprimés ou auxquels aucune valeur n'a jamais été assignée.

+ +

La fonction callback est invoquée avec trois paramètres : la valeur de l'élément, l'indice de l'élément et l'objet Array parcouru.

+ +

Si un paramètre objetThis est fourni à some(), il sera utilisé comme valeur de this pour chaque invocation du callback. Sinon, la valeur  {{jsxref("undefined")}} sera passée pour utilisation comme valeur this. La valeur this finalement utilisée par callback est déterminée en fonction des règles habituelles pour déterminer this pour une fonction.

+ +

La méthode some() ne modifie pas le tableau sur lequel elle est appelée.

+ +

La liste des éléments traités par some() est définie avant la première invocation du callback. Les éléments qui sont ajoutés au tableau après le début de l'appel à some ne seront pas visités par callback. Si un élément existant non encore visité est modifié par callback, sa valeur passée à callback sera sa valeur au moment où some visite l'indice de cet élément ; les éléments supprimés ne seront pas visités.

+ +

Exemples

+ +

Tester la valeur des éléments d'un tableau

+ +

L'exemple suivant teste si certains éléments d'un tableau sont plus grands que 10.

+ +
function estAssezGrand(element, indice, array) {
+  return (element >= 10);
+}
+var resultat = [2, 5, 8, 1, 4].some(estAssezGrand);
+// resultat vaut false
+passed = [12, 5, 8, 1, 4].some(estAssezGrand);
+// passed vaut true
+
+ +

Tester la valeur des éléments avec les fonctions fléchées

+ +

Les fonctions fléchées permettent d'utiliser une syntaxe plus concise pour réaliser la même opération que l'exemple précédent.

+ +
[2, 5, 8, 1, 4].some(elem => elem > 10); // false
+[12, 5, 8, 1, 4].some(elem => elem > 10); // true
+ +
+

Note : Si on veut vérifier qu'un élément est dans un tableau, on pourra utiliser la méthode {{jsxref("Array.prototype.includes()")}}.

+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES5.1', '#sec-15.4.4.17', 'Array.prototype.some')}}{{Spec2('ES5.1')}}Définition initiale. Implémentée avec JavaScript 1.6.
{{SpecName('ES6', '#sec-array.prototype.some', 'Array.prototype.some')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-array.prototype.some', 'Array.prototype.some')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Array.some")}}

+
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/array/sort/index.html b/files/fr/web/javascript/reference/global_objects/array/sort/index.html new file mode 100644 index 0000000000..a7fb7a8981 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/array/sort/index.html @@ -0,0 +1,286 @@ +--- +title: Array.prototype.sort() +slug: Web/JavaScript/Reference/Objets_globaux/Array/sort +tags: + - Array + - JavaScript + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Array/sort +--- +
{{JSRef}}
+ +

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.

+ +
{{EmbedInteractiveExample("pages/js/array-sort.html")}}
+ + + +

Syntaxe

+ +
arr.sort()
+arr.sort(fonctionComparaison)
+ +

Paramètres

+ +
+
fonctionComparaison {{optional_inline}}
+
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 :

+ + + +

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 {{jsxref("NaN")}} ou {{jsxref("Infinity")}}) :

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

L'usage des {{jsxref("Opérateurs/L_opérateur_function", "expressions de fonctions","",11)}} 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 {{jsxref("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.

+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale.
{{SpecName('ES5.1', '#sec-15.4.4.11', 'Array.prototype.sort')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-array.prototype.sort', 'Array.prototype.sort')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-array.prototype.sort', 'Array.prototype.sort')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Array.sort")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/array/splice/index.html b/files/fr/web/javascript/reference/global_objects/array/splice/index.html new file mode 100644 index 0000000000..660bd81fb3 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/array/splice/index.html @@ -0,0 +1,146 @@ +--- +title: Array.prototype.splice() +slug: Web/JavaScript/Reference/Objets_globaux/Array/splice +tags: + - Array + - JavaScript + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Array/splice +--- +
{{JSRef}}
+ +

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.

+ +
{{EmbedInteractiveExample("pages/js/array-splice.html")}}
+ + + +

Syntaxe

+ +
var tabElementsSupprimes = array.splice(début, nbASupprimer[, élem1[, élem2[, ...]]])
+
+ +

Paramètres

+ +
+
début
+
L'indice à partir duquel commencer à changer le tableau (l'indice du premier élement étant 0).
+
Si sa valeur est supérieure à la longueur du tableau array.length, début est ramené à la longueur du tableau array.length.
+
S'il est négatif, le changement commencera d'autant d'éléments à partir de la fin du tableau, c'est à dire à partir de l'index  array.length + début. Si array.length + début est inférieur à 0, le changement commencera à l'index 0.
+
+ +
+
nbASupprimer
+
Un entier indiquant le nombre d'anciens éléments à remplacer.
+ Si ce paramètre est absent ou si sa valeur est supérieure ou égale à array.length - début, alors les éléments entre début et la fin du tableau seront supprimés.
+
Si nbASupprimer vaut 0, aucun élément ne sera supprimé. Dans ce cas, il est nécessaire de spécifier au moins un nouvel élément.
+
+ +
+
élemN
+
Les éléments à ajouter au tableau à partir de début. Si vous ne spécifiez pas de nouvel élément, les anciens éléments seront simplement supprimés du tableau.
+
+ +

Valeur de retour

+ +

Un tableau contenant les éléments supprimés. Si un seul élément est supprimé, un tableau contenant un unique élément est retourné.

+ +

Description

+ +

Si vous spécifiez un nombre différent d'éléments à insérer et d'éléments à supprimer, le tableau aura une longueur différente après l'appel de la méthode.

+ +

Exemples

+ +

Utiliser splice

+ +

Le script suivant illustre l'utilisation de splice :

+ +
var mesPoissons  = ["scalaire", "clown", "mandarin", "chirurgien"];
+
+// supprime 0 élément à partir de l'index 2, et insère "tambour"
+var enleves = mesPoissons.splice(2, 0, "tambour");
+// mesPoissons est ["scalaire", "clown", "tambour", "mandarin", "chirurgien"]
+// enleves est [], aucun élément supprimé
+
+// supprime 1 élément à partir de l'index 3
+enleves = mesPoissons.splice(3, 1);
+// mesPoissons est ["scalaire", "clown", "tambour", "chirurgien"]
+// enleves est ["mandarin"]
+
+// supprime 1 élément à partir de l'index 2, et insère "trompette"
+enleves = mesPoissons.splice(2, 1, "trompette");
+// mesPoissons est ["scalaire", "clown", "trompette", "chirurgien"]
+// enleves est ["tambour"]
+
+// supprime 2 éléments à partir de l'index 0, et insère "perroquet", "anémone" et"bleu"
+enleves = mesPoissons.splice(0, 2, "perroquet", "anémone", "bleu");
+// mesPoissons est ["perroquet", "anémone", "bleu", "trompette", "chirurgien"]
+// enleves est ["scalaire", "clown"]
+
+// supprime 2 éléments à partir de l'indice 2
+enleves = mesPoissons.splice(mesPoissons.length - 3, 2);
+// mesPoissons est ["perroquet", "anémone", "chirurgien"]
+// enleves est ["bleu", "trompette"]
+
+var mesPoissons = ["perroquet", "anémone", "bleu", "trompette", "chirurgien"];
+// on retire trois éléments à partir de l'indice 2
+enleves = mesPoissons.splice(2);
+// mesPoissons vaut ["perroquet", "anémone"]
+// enleves vaut ["bleu", "trompette", "chirurgien"]
+
+var mesAnimaux = ["cheval", "chien", "chat", "dauphin"];
+enleves = mesAnimaux.splice(-2, 1);
+
+// mesAnimaux vaut ["cheval", "chien", "dauphin"]
+// enleves vaut ["chat"]
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-array.prototype.splice', 'Array.prototype.splice')}}{{Spec2('ESDraft')}}
{{SpecName('ES6', '#sec-array.prototype.splice', 'Array.prototype.splice')}}{{Spec2('ES6')}}
{{SpecName('ES5.1', '#sec-15.4.4.12', 'Array.prototype.splice')}}{{Spec2('ES5.1')}}
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale. Implémentée avec JavaScript 1.2.
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Array.splice")}}

+
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/array/tolocalestring/index.html b/files/fr/web/javascript/reference/global_objects/array/tolocalestring/index.html new file mode 100644 index 0000000000..5d686a85bd --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/array/tolocalestring/index.html @@ -0,0 +1,190 @@ +--- +title: Array.prototype.toLocaleString() +slug: Web/JavaScript/Reference/Objets_globaux/Array/toLocaleString +tags: + - Array + - Internationalisation + - JavaScript + - Méthode + - Prototype + - Reference + - i18n + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/toLocaleString +--- +
{{JSRef}}
+ +

La méthode toLocaleString() renvoie une chaîne de caractères qui représente les éléments du tableau. Les éléments sont convertis en chaînes de caractères grâce à leurs méthodes toLocaleString et chacune de ces chaînes est séparée des autres avec un séparateur propre à la locale courante (par exemple une virgule ou un point).

+ +
{{EmbedInteractiveExample("pages/js/array-tolocalestring.html")}}
+ + + +

Syntaxe

+ +
arr.toLocaleString();
+arr.toLocaleString(locales);
+arr.toLocaleString(locales, options);
+
+ +

Paramètres

+ +
+
locales {{optional_inline}}
+
Une chaine de caractères avec un identifiant de langue BCP 47, ou un tableau de ce type de chaine de caractères. Pour le format général et l'interprétation de l'argument locales. Pour plus de détails quant à la forme et l'interprétation de l'argument locales, on consultera la page {{jsxref("Intl")}}.
+
options {{optional_inline}}
+
Un objet qui contient des propriétés de configuration. Pour les nombres, consulter {{jsxref("Number.prototype.toLocaleString()")}}, pour les dates, consulter {{jsxref("Date.prototype.toLocaleString()")}}.
+
+ +

Valeur de retour

+ +

Une chaîne de caractères qui représente les éléments du tableau.

+ +

Exemples

+ +

Utiliser les arguments locales et options

+ +

Les éléments du tableau sont converties en chaînes de caractères via leurs méthodes toLocaleString().

+ + + +

Ici, on voit qu'on affiche le symbole de la devise de la locale pour chacun des éléments (nombres ou chaînes de caractères) du tableau prix :

+ +
var prix = ["￥7", 500, 8123, 12];
+prix.toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' });
+
+// "￥7,￥500,￥8,123,￥12"
+
+ +

Pour plus d'exemples, on peut se référer aux pages {{jsxref("Intl")}}, {{jsxref("NumberFormat")}} et {{jsxref("DateTimeFormat")}}.

+ +

Prothèse d'émulation (polyfill)

+ +
// https://tc39.github.io/ecma402/#sup-array.prototype.tolocalestring
+if (!Array.prototype.toLocaleString) {
+  Object.defineProperty(Array.prototype, 'toLocaleString', {
+    value: function(locales, options) {
+      // 1. Let O be ? ToObject(this value).
+      if (this == null) {
+        throw new TypeError('"this" is null or not defined');
+      }
+
+      var a = Object(this);
+
+      // 2. Let len be ? ToLength(? Get(A, "length")).
+      var len = a.length >>> 0;
+
+      // 3. Let separator be the String value for the
+      //    list-separator String appropriate for the
+      //    host environment's current locale (this is
+      //    derived in an implementation-defined way).
+      // NOTE: In this case, we will use a comma
+      var separator = ',';
+
+      // 4. If len is zero, return the empty String.
+      if (len === 0) {
+        return '';
+      }
+
+      // 5. Let firstElement be ? Get(A, "0").
+      var firstElement = a[0];
+      // 6. If firstElement is undefined or null, then
+      //  a.Let R be the empty String.
+      // 7. Else,
+      //  a. Let R be ?
+      //     ToString(?
+      //       Invoke(
+      //        firstElement,
+      //        "toLocaleString",
+      //        « locales, options »
+      //       )
+      //     )
+      var r = firstElement == null ?
+        '' : firstElement.toLocaleString(locales, options);
+
+      // 8. Let k be 1.
+      var k = 1;
+
+      // 9. Repeat, while k < len
+      while (k < len) {
+        // a. Let S be a String value produced by
+        //   concatenating R and separator.
+        var s = r + separator;
+
+        // b. Let nextElement be ? Get(A, ToString(k)).
+        var nextElement = a[k];
+
+        // c. If nextElement is undefined or null, then
+        //   i. Let R be the empty String.
+        // d. Else,
+        //   i. Let R be ?
+        //     ToString(?
+        //       Invoke(
+        //        nextElement,
+        //        "toLocaleString",
+        //        « locales, options »
+        //       )
+        //     )
+        r = nextElement == null ?
+          '' : nextElement.toLocaleString(locales, options);
+
+        // e. Let R be a String value produced by
+        //   concatenating S and R.
+        r = s + r;
+
+        // f. Increase k by 1.
+        k++;
+      }
+
+      // 10. Return R.
+      return r;
+    }
+  });
+}
+
+ +

S'il faut absolument prendre en charge les moteurs JavaScript qui ne supportent pas {{jsxref("Object.defineProperty()")}}, mieux vaut ne pas ajouter de prothèse pour les méthodes Array.prototype car elles ne peuvent pas être rendues non-énumérables.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-array.prototype.tolocalestring', 'Array.prototype.toLocaleString')}}{{Spec2('ESDraft')}}Définition initiale dans ECMAScript 3.
{{SpecName('ES Int Draft', '#sup-array.prototype.tolocalestring', 'Array.prototype.toLocaleString')}}{{Spec2('ES Int Draft')}}Cette définition remplace la définition fournit dans ECMA-262.
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Array.toLocaleString")}}

+
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/array/tosource/index.html b/files/fr/web/javascript/reference/global_objects/array/tosource/index.html new file mode 100644 index 0000000000..e6800fd64c --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/array/tosource/index.html @@ -0,0 +1,68 @@ +--- +title: Array.prototype.toSource() +slug: Web/JavaScript/Reference/Objets_globaux/Array/toSource +tags: + - Array + - JavaScript + - Méthode + - Non-standard + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Array/toSource +--- +
{{JSRef}}{{Non-standard_header}}
+ +

La méthode toSource() renvoie une chaine de caractères représentant le code source du tableau.

+ +

Syntaxe

+ +
arr.toSource()
+ +

Valeur de retour

+ +

Une chaîne de caractères qui représente le code source du tableau.

+ +

Description

+ +

La méthode toSource() renvoie les valeurs suivantes :

+ + + +

Cette méthode est habituellement appelée en interne par le moteur JavaScript et n'est pas utilisée explicitement dans du code. Il est cependant possible d'appeler toSource() lors du débogage pour examiner le contenu d'un tableau.

+ +

Exemples

+ +

Examiner le code source d'un tableau

+ +

Pour examiner le code source d'un tableau :

+ +
var alpha = new Array("a", "b", "c");
+alpha.toSource();
+// renvoie ["a", "b", "c"]
+
+ +

Spécifications

+ +

Ne fait partie d'aucun standard. Implémenté dans JavaScript 1.3.

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Array.toSource")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/array/tostring/index.html b/files/fr/web/javascript/reference/global_objects/array/tostring/index.html new file mode 100644 index 0000000000..b7b252c1fb --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/array/tostring/index.html @@ -0,0 +1,83 @@ +--- +title: Array.prototype.toString() +slug: Web/JavaScript/Reference/Objets_globaux/Array/toString +tags: + - Array + - JavaScript + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Array/toString +--- +
{{JSRef}}
+ +

La méthode toString() renvoie une chaine de caractères représentant le tableau spécifié et ses éléments.

+ +
{{EmbedInteractiveExample("pages/js/array-tostring.html")}}
+ + + +

Syntaxe

+ +
arr.toString()
+ +

Valeur de retour

+ +

Une chaîne de caractères qui représente les éléments du tableau.

+ +

Description

+ +

L'objet {{jsxref("Array")}} redéfinit la méthode toString d'{{jsxref("Object")}}. Pour les objets Array, la méthode toString() concatène les éléments du tableau et renvoie une chaîne contenant chacun des éléments, séparés par des virgules.

+ +

JavaScript appelle la méthode toString() automatiquement lorsqu'un tableau doit être représenté par une valeur texte ou lorsqu'on fait référence à un tableau dans une concaténation de chaines de caractères.

+ +

Sémantique d'ECMAScript 5

+ +

À partir de JavaScript 1.8.5 (Firefox 4), et en cohérence avec la 5e édition d'ECMAScript, la méthode toString() est générique et peut être utilisé avec n'importe quel objet. {{jsxref("Object.prototype.toString()")}} sera appelée, et la valeur résultante sera renvoyée.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.4.4.2', 'Array.prototype.toString')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-array.prototype.tostring', 'Array.prototype.toString')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-array.prototype.tostring', 'Array.prototype.toString')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Array.toString")}}

+
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/array/unshift/index.html b/files/fr/web/javascript/reference/global_objects/array/unshift/index.html new file mode 100644 index 0000000000..04115c0986 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/array/unshift/index.html @@ -0,0 +1,122 @@ +--- +title: Array.prototype.unshift() +slug: Web/JavaScript/Reference/Objets_globaux/Array/unshift +tags: + - Array + - JavaScript + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Array/unshift +--- +
{{JSRef}}
+ +

La méthode unshift() ajoute un ou plusieurs éléments au début d'un tableau et renvoie la nouvelle longueur du tableau.

+ +
{{EmbedInteractiveExample("pages/js/array-unshift.html")}}
+ + + +

Syntaxe

+ +
arr.unshift([élém1[, ...[, élémN]]])
+ +

Paramètres

+ +
+
élémN
+
Les éléments que l'on souhaite ajouter en début de tableau.
+
+ +

Valeur de retour

+ +

La nouvelle valeur de la propriété {{jsxref("Array.length", "length")}} du tableau sur lequel a été appelée la méthode.

+ +

Description

+ +

La méthode unshift() insère les valeurs renseignées au début d'un objet ressemblant à un tableau.

+ +

unshift() est volontairement générique ; cette méthode peut être {{jsxref("Function.call", "appelée","",1)}} ou {{jsxref("Function.apply", "appliquée","",1)}} sur des objets ressemblant à des tableaux. Les objets qui ne contiennent pas une propriété length reflètant la fin d'une série de propriétés indexées numériquement pourront ne pas avoir un comportement cohérent avec cette méthode.

+ +

Attention, lorsqu'on utilise unshift() avec plusieurs arguments, ceux-ci sont insérés au début du tableau dans l'ordre selon lequel ils sont passés en arguments. Aussi, on n'obtiendra pas le même résultat en appelant unshift() n fois avec 1 arguments ou en appelant unshift() avec n arguments.

+ +
let arr = [4, 5, 6];
+
+arr.unshift(1, 2, 3);
+console.table(arr);
+// [1, 2, 3, 4, 5, 6]
+
+let arr2 = [4, 5, 6];
+
+arr2.unshift(1);
+arr2.unshift(2);
+arr2.unshift(3);
+
+console.table(arr2);
+// [3, 2, 1, 4, 5, 6]
+ +

Exemples

+ +
var arr = [1, 2];
+
+arr.unshift(0); // renvoie 3, la nouvelle longueur du tableau
+// arr est [0, 1, 2]
+
+arr.unshift(-2, -1); // = 5
+// arr est [-2, -1, 0, 1, 2]
+
+arr.unshift( [-3] ); // 6
+// arr est [[-3], -2, -1, 0, 1, 2]
+
+arr.unshift([-7, -6], [-5]); // 8
+// arr est [[-7, -6], [-5], [-3], -2, -1, 0, 1, 2]
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale. Implémentée avec JavaScript 1.2.
{{SpecName('ES5.1', '#sec-15.4.4.13', 'Array.prototype.unshift')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-array.prototype.unshift', 'Array.prototype.unshift')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-array.prototype.unshift', 'Array.prototype.unshift')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Array.unshift")}}

+
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/array/values/index.html b/files/fr/web/javascript/reference/global_objects/array/values/index.html new file mode 100644 index 0000000000..26e1c20bf8 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/array/values/index.html @@ -0,0 +1,100 @@ +--- +title: Array.prototype.values() +slug: Web/JavaScript/Reference/Objets_globaux/Array/values +tags: + - Array + - ECMAScript 2015 + - Iterator + - JavaScript + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Array/values +--- +
{{JSRef}}
+ +

La méthode values() renvoie un nouvel objet Array Iterator qui contient les valeurs pour chaque indice du tableau. Cette méthode est l'implémentation par défaut de Array.prototype[Symbol.Iterator].

+ +

{{EmbedInteractiveExample("pages/js/array-values.html")}}

+ +
var a = ['t', 'i', 't', 'o', 'u'];
+var iterateur = a.values();
+
+console.log(iterateur.next().value); // t
+console.log(iterateur.next().value); // i
+console.log(iterateur.next().value); // t
+console.log(iterateur.next().value); // o
+console.log(iterateur.next().value); // u
+
+ +

Syntaxe

+ +
array.values()
+ +

Valeur de retour

+ +

Un nouvel objet itérateur sur {{jsxref("Array")}}.

+ +

Exemples

+ +

Itérer avec une boucle for...of

+ +
var arr = ['w', 'y', 'k', 'o', 'p'];
+var eArr = arr.values();
+// votre navigateur doit supporter les boucles for..of
+// et les variables définies avec let
+for (let lettre of eArr) {
+  console.log(lettre);
+}
+
+ +

Itérer avec next()

+ +
var arr = ['w', 'y', 'k', 'o', 'p'];
+var eArr = arr.values();
+console.log(eArr.next().value); // w
+console.log(eArr.next().value); // y
+console.log(eArr.next().value); // k
+console.log(eArr.next().value); // o
+console.log(eArr.next().value); // p
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-array.prototype.values', 'Array.prototype.values')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-array.prototype.values', 'Array.prototype.values')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Array.values")}}

+
+ +

Voir aussi

+ + -- cgit v1.2.3-54-g00ecf