diff options
Diffstat (limited to 'files/fr/web/javascript/reference/global_objects/array')
41 files changed, 6576 insertions, 0 deletions
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 +--- +<div>{{JSRef}}</div> + +<p>La valeur initiale de la propriété <code><strong>@@iterator</strong></code> correspond à la valeur initiale fournie par l'itérateur {{jsxref("Array.prototype.values()", "values")}}.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><var>arr</var>[Symbol.iterator]()</pre> + +<h3 id="Valeur_de_retour">Valeur de retour</h3> + +<p>La première valeur fournie par {{jsxref("Array.prototype.values()","values()")}}. Si on utilise <code>arr[Symbol.iterator]</code> (sans les parenthèses) le navigateur renverra par défaut la fonction {{jsxref("Array.prototype.values()", "values()")}}.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Parcourir_un_tableau_avec_une_boucle_for...of">Parcourir un tableau avec une boucle <code>for...of</code></h3> + +<pre class="brush: js">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); +} +</pre> + +<h3 id="Parcourir_un_tableau_avec_next">Parcourir un tableau avec <code>next</code></h3> + +<pre class="brush: js">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 +</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ES2015', '#sec-array.prototype-@@iterator', 'Array.prototype[@@iterator]()')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Définition initiale.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype-@@iterator', 'Array.prototype[@@iterator]()')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> + +<p>{{Compat("javascript.builtins.Array.@@iterator")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Array.prototype.keys()")}}</li> + <li>{{jsxref("Array.prototype.entries()")}}</li> + <li>{{jsxref("Array.prototype.forEach()")}}</li> + <li>{{jsxref("Array.prototype.every()")}}</li> + <li>{{jsxref("Array.prototype.some()")}}</li> + <li>{{jsxref("Array.prototype.values()")}}</li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p>La propriété d'accesseur <code><strong>Array[@@species]</strong></code> renvoie le constructeur <code>Array</code>.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">Array[Symbol.species] +</pre> + +<h3 id="Valeur_de_retour">Valeur de retour</h3> + +<p>Le constructeur {{jsxref("Array")}}.</p> + +<h2 id="Description">Description</h2> + +<p>L'accesseur <code>species</code> renvoie le constructeur par défaut pour les objets <code>Array</code>. Les constructeurs des sous-classes peuvent le surcharger afin de modifier l'affectation du constructeur.</p> + +<h2 id="Exemples">Exemples</h2> + +<p>La propriété renvoie le constructeur par défaut, dans le cas des objets <code>Array</code>, c'est le constructeur <code>Array</code> :</p> + +<pre class="brush: js">Array[Symbol.species]; // function Array()</pre> + +<p>Pour un objet dérivé, la valeur de <code>species</code> pour une classe <code>MonArray</code> sera le constructeur de cette classe. Vous pouvez surcharger ce comportement afin de renvoyer le constructeur <code>Array</code> :</p> + +<pre class="brush: js">class MonArray extends Array { + // On surcharge le symbole species + // pour renvoyer le constructeur Array parent + static get [Symbol.species]() { return Array; } +}</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-get-array-@@species', 'get Array [ @@species ]')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Définition initiale.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-get-array-@@species', 'get Array [ @@species ]')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div> +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> + +<p>{{Compat("javascript.builtins.Array.@@species")}}</p> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Array")}}</li> + <li>{{jsxref("Symbol.species")}}</li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p>La propriété symbol <code><strong>@@unscopable</strong></code> 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 <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/with">with</a></code>.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><var>arr</var>[Symbol.unscopables]</pre> + +<h2 id="Description">Description</h2> + +<p>Les propriétés natives d'un objet <code>Array</code> qui sont exclues lorsqu'on utilise <code>with</code> sont <code>copyWithin</code>, <code>entries</code>, <code>fill</code>, <code>find</code>, <code>findIndex</code>, <code>includes</code>, <code>keys</code> et <code>values</code>.</p> + +<p>Voir la page sur le symbole {{jsxref("Symbol.unscopables")}} pour manipuler <code>unscopables</code> sur des objets personnalisés.</p> + +<p>{{js_property_attributes(0,0,1)}}</p> + +<h2 id="Exemples">Exemples</h2> + +<p>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 <code>with</code>, <code>"keys"</code> serait désormais la méthode et non la variable. C'est là que le symbole natif <code>@@unscopables</code> <code>Array.prototype[@@unscopables]</code> intervient et empêche d'explorer ces méthodes avec <code>with</code>.</p> + +<pre class="brush: js">var keys = []; + +with(Array.prototype) { + keys.push("something"); +} + +Object.keys(Array.prototype[Symbol.unscopables]); +// ["copyWithin", "entries", "fill", "find", "findIndex", +// "includes", "keys", "values"]</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-array.prototype-@@unscopables', 'Array.prototype[@@unscopables]')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Définition initiale.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype-@@unscopables', 'Array.prototype[@@unscopables]')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div> +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> + +<p>{{Compat("javascript.builtins.Array.@@unscopables")}}</p> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Symbol.unscopables")}}</li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p>Le constructeur <strong><code>Array()</code></strong> permet de créer des objets {{jsxref("Array")}}.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox notranslate">[<var>element0</var>, <var>element1</var>, ..., <var>elementN</var>] + +new Array(<var>element0</var>, <var>element1</var>[, ...[, <var>elementN</var>]]) +new Array(<var>longueurTableau</var>)</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>element<em>N</em></code></dt> + <dd>Un tableau JavaScript est initialisé avec les éléments indiqués à moins qu'un seul argument ne soit passé (cf. <code>longueurTableau</code> ci-après). On notera que ce cas au limite ne s'applique qu'avec le constructeur <code>Array</code>. Si on utilise la forme littérale (avec les crochets), on peut initialiser un tableau avec un seul élément.</dd> + <dt><code>longueurTableau</code></dt> + <dd>Si le seul argument passé au constructeur <code>Array</code> est un entier entre 0 et 2<sup>32</sup>-1 (inclus), le constructeur renverra un tableau dont la propriété <code>length</code> vaut ce nombre. <strong>Note :</strong> le tableau contiendra des éléments vides (à ne pas confondre avec des éléments qui vaudraient <code>undefined</code>). Si l'argument est un autre nombre, une exception {{jsxref("RangeError")}} sera levée.</dd> +</dl> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Utilisation_de_la_notation_littérale">Utilisation de la notation littérale</h3> + +<p>Les tableaux peuvent être créés avec une notation <a href="/fr/docs/Web/JavaScript/Reference/Grammaire_lexicale#Litt%C3%A9raux_de_tableaux">littérale</a> :</p> + +<pre class="brush: js notranslate">let fruits = ['Pomme', 'Banane']; + +console.log(fruits.length); // 2 +console.log(fruits[0]); // "Pomme" +</pre> + +<h3 id="Utilisation_du_constructeur_avec_un_seul_paramètre">Utilisation du constructeur avec un seul paramètre</h3> + +<p>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é <code>length</code> vaut le nombre passé en argument et dont les éléments sont vides.</p> + +<pre class="brush: js notranslate">let fruits = new Array(2); + +console.log(fruits.length); // 2 +console.log(fruits[0]); // undefined +</pre> + +<h3 id="Utilisation_du_constructeur_avec_plusieurs_paramètres">Utilisation du constructeur avec plusieurs paramètres</h3> + +<p>Si on utilise plus d'un argument, un nouveau tableau ({{jsxref("Array")}}) sera construit avec les éléments passés en arguments.</p> + +<pre class="brush: js notranslate">let fruits = new Array('Pomme', 'Banane'); + +console.log(fruits.length); // 2 +console.log(fruits[0]); // "Pomme" +</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array-constructor', 'Array constructor')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("javascript.builtins.Array.Array")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>La classe {{jsxref("Array")}}</li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p>La méthode <code><strong>concat()</strong></code> 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.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-concat.html")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">let <var>nouveau_tableau</var> = <var>ancien_tableau</var>.concat(<var>valeur1</var>[, <var>valeur2</var>[, ...[, <var>valeurN</var>]]])</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>valeurN</code>{{optional_inline}}</dt> + <dd>Des tableaux et/ou des valeurs à concaténer dans le nouveau tableau. Si tous les arguments <code>valeurN</code> valent <code>undefined</code>, <code>concat</code> renverra une copie superficielle du tableau sur lequel elle est appelée. Voir ci-après pour plus de détails.</dd> +</dl> + +<h3 id="Valeur_de_retour">Valeur de retour</h3> + +<p>Une nouvelle instance de {{jsxref("Array")}}.</p> + +<h2 id="Description">Description</h2> + +<p>La méthode <code>concat</code> permet de créer un nouveau tableau constitué des éléments de l'objet <code>this</code> 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.</p> + +<p>La méthode <code>concat</code> ne modifie pas <code>this</code> 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 :</p> + +<ul> + <li>Pour les références à des objets (et non les objets eux-mêmes) : <code>concat</code> copie ces références dans le nouveaux tableau. Le tableau original et le nouveau tableau feront référence au même objet. C'est-à-dire que si un objet référencé est modifié, ces changements seront visibles tant dans le nouveau que dans les tableaux originaux.</li> +</ul> + +<ul> + <li>Pour les chaînes, les booléens et les nombres « primitifs » (c'est-à-dire pas les objets {{jsxref("String", "String")}}, {{jsxref("Boolean")}} et {{jsxref("Number", "Number")}}) : <code>concat</code> copie les valeurs des chaînes et des nombres dans le nouveau tableau. (voir <a href="/fr/docs/Web/JavaScript/Structures_de_donn%C3%A9es#Les_types_de_donn%C3%A9es">Les types de données en JavaScript</a>).</li> +</ul> + +<div class="note"> +<p><strong>Note :</strong> 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.</p> +</div> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Concaténer_deux_tableaux">Concaténer deux tableaux</h3> + +<p>Le code qui suit concatène deux tableaux :</p> + +<pre class="brush: js">let alpha = ["a", "b", "c"]; +let numerique = [1, 2, 3]; + +alpha.concat(numerique); +// donne : ["a", "b", "c", 1, 2, 3] +</pre> + +<h3 id="Concaténer_trois_tableaux">Concaténer trois tableaux</h3> + +<p>Le code qui suit concatène trois tableaux :</p> + +<pre class="brush: js">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] +</pre> + +<h3 id="Concaténer_des_valeurs_avec_un_tableau">Concaténer des valeurs avec un tableau</h3> + +<p>Le code qui suit ajoute trois valeurs à un tableau :</p> + +<pre class="brush: js">let alpha = ['a', 'b', 'c']; + +let alphanumerique = alpha.concat(1, [2, 3]); + +console.log(alphanumerique); +// ['a', 'b', 'c', 1, 2, 3] +</pre> + +<h3 id="Concaténer_des_tableaux_imbriqués">Concaténer des tableaux imbriqués</h3> + +<p>Dans le code qui suit, on concatène deux tableaux qui ont plusieurs dimensions et on illustre la conservation des références :</p> + +<pre class="brush: js">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]]</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Définition initiale. Implémentée avec JavaScript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.4', 'Array.prototype.concat')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.concat', 'Array.prototype.concat')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.concat', 'Array.prototype.concat')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div> +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> + +<p>{{Compat("javascript.builtins.Array.concat")}}</p> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Array.push", "push")}} / {{jsxref("Array.pop", "pop")}} qui permettent d'ajouter/retirer des éléments à partir de la fin du tableau</li> + <li>{{jsxref("Array.unshift", "unshift")}} / {{jsxref("Array.shift", "shift")}} qui permettent d'ajouter/retirer des éléments à partir du début du tableau</li> + <li>{{jsxref("Array.splice", "splice")}} qui permet d'ajouter/retirer des éléments à un endroit donné du tableau</li> + <li>{{jsxref("String.prototype.concat()")}}</li> + <li>{{jsxref("Symbol.isConcatSpreadable")}} (permet de contrôler la façon dont un tableau est ramené à une valeur)</li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p>La méthode <code><strong>copyWithin()</strong></code> effectue une copie superficielle (<em>shallow copy</em>) d'une partie d'un tableau sur ce même tableau et le renvoie, sans modifier sa taille.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-copywithin.html")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">arr.copyWithin(cible) +arr.copyWithin(cible, début) +arr.copyWithin(cible, début, fin) +</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>cible</code></dt> + <dd> + <p>Indice à partir duquel la séquence sera copiée. Si la valeur est négative, <code>cible </code>sera compté à partir de la fin du tableau.</p> + + <p>Si <code>cible </code>est supérieur ou égal à <code>arr.length</code>, rien ne sera copié. Si <code>cible</code> est positionné apès <code>début</code>, la séquence copiée sera réduite pour correspondre à <code>arr.length</code>.</p> + </dd> + <dt><code>début</code> {{optional_inline}}</dt> + <dd>Indice de début de la séquence a copier. Si la valeur est négative, <code>début</code> sera compté à partir de la fin du tableau.</dd> + <dd>Si <code>début</code> est omis, <code>copyWithin</code> copiera à partir du début du tableau (par défaut 0).</dd> + <dt><code>fin</code> {{optional_inline}}</dt> + <dd>Indice de fin de la séquence a copier. <code>copyWithin</code> copie jusqu'à <code>fin</code> (non-inclusif). Si la valeur est négative, <code>end</code> sera compté à partir de la fin du tableau.</dd> + <dd>Si <code>end</code> est omis, <code>copyWithin</code> copiera jusqu'à la fin du tableau (par défaut <code>arr.length</code>).</dd> +</dl> + +<h3 id="Valeur_de_retour">Valeur de retour</h3> + +<p>Le tableau modifié par la méthode.</p> + +<h2 id="Description">Description</h2> + +<p>La fonction <code>copyWithin()</code> fonctionne de la même façon que <code>memmove</code> 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.</p> + +<p>La fonction <code>copyWithin()</code> est intentionnellement générique, il n'est pas nécessaire que <code>this</code> soit un objet {{jsxref("Array", "Array")}}.</p> + +<p>De plus, <code>copyWithin()</code> est une méthode qui modifie l'objet courant. Elle ne modifie pas la longueur de <code>this</code>, mais change son contenu et créé de nouvelles propriétés si nécessaire.</p> + +<h2 id="Exemples">Exemples</h2> + +<pre class="brush: js">[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] +</pre> + +<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2> + +<p>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 :</p> + +<pre class="brush: js">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 + }); +}</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ES2015', '#sec-array.prototype.copywithin', 'Array.prototype.copyWithin')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Définition initiale.</td> + </tr> + <tr> + <td>{{SpecName('ES2016', '#sec-array.prototype.copywithin', 'Array.prototype.copyWithin')}}</td> + <td>{{Spec2('ES2016')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.copywithin', 'Array.prototype.copyWithin')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div> +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> + +<p>{{Compat("javascript.builtins.Array.copyWithin")}}</p> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Array", "Array")}}</li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p>La méthode <code><strong>entries()</strong></code> renvoie un nouvel objet de type <code><strong>Array Iterator</strong></code> qui contient le couple clef/valeur pour chaque éléments du tableau.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-entries.html")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><var>arr</var>.entries()</pre> + +<h3 id="Valeur_de_retour">Valeur de retour</h3> + +<p>Un nouvel objet qui est un itérateur pour {{jsxref("Array")}}.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Parcourir_un_tableau_avec_ses_index_et_éléments">Parcourir un tableau avec ses index et éléments</h3> + +<pre class="brush:js">const arr = ["a", "b", "c"]; +for (const [index, element] of arr.entries()) { + console.log(index, element); +} +// 0 "a" +// 1 "b" +// 2 "c" +</pre> + +<h3 id="Boucle_for...of">Boucle <code>for...of</code></h3> + +<p>On peut avoir le même résultat en utilisant une boucle <a href="/fr/docs/Web/JavaScript/Reference/Instructions/for...of">for...of</a> :</p> + +<pre class="brush: js">var arr = ['a', 'b', 'c']; +var eArr = arr.entries(); + +for (let e of eArr) { + console.log(e); +} +// [0, 'a'] +// [1, 'b'] +// [2, 'c'] +</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-array.prototype.entries', 'Array.prototype.entries')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Définition initiale.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.entries', 'Array.prototype.entries')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div> +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> + +<p>{{Compat("javascript.builtins.Array.entries")}}</p> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Array.prototype.keys()")}}</li> + <li>{{jsxref("Array.prototype.values()")}}</li> + <li>{{jsxref("Array.prototype.forEach()")}}</li> + <li>{{jsxref("Array.prototype.every()")}}</li> + <li>{{jsxref("Array.prototype.some()")}}</li> + <li><code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/for...of">for...of</a></code></li> + <li><a href="/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration">Les protocoles d'itération</a></li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p>La méthode <code><strong>every()</strong></code> 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.</p> + +<div class="note"> +<p><strong>Note :</strong> Cette méthode renvoie <code>true</code> pour n'importe quelle condition utilisée sur un tableau vide.</p> +</div> + +<div>{{EmbedInteractiveExample("pages/js/array-every.html")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><var>arr</var>.every(<var>callback</var>[, <var>thisArg</var>])</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>La fonction sur laquelle on souhaite tester chaque élément du tableau. Elle prend en compte trois arguments : + <dl> + <dt><code>currentValue</code></dt> + <dd>La valeur de l'élément à traiter.</dd> + <dt><code>index</code>{{Optional_inline}}</dt> + <dd>L'indice de l'élément du tableau à tester.</dd> + <dt><code>array</code>{{Optional_inline}}</dt> + <dd>Le tableau sur lequel on a appelé la méthode <code>every</code>.</dd> + </dl> + </dd> + <dt><code>thisArg</code>{{Optional_inline}}</dt> + <dd>Paramètre optionnel. La valeur à utiliser pour <code>this</code> lors de l'exécution de la fonction.</dd> +</dl> + +<h3 id="Valeur_de_retour">Valeur de retour</h3> + +<p><code>true</code> si la fonction de rappel obtient une valeur équivalente à vrai (<em>truthy</em>) pour chaque élément du tableau et <code>false</code> sinon.</p> + +<h2 id="Description">Description</h2> + +<p>La méthode <code>every</code> exécute la fonction <code>callback</code> fournie sur chacun des éléments contenus dans le tableau jusqu'à ce qu'un élément pour lequel la fonction <code>callback</code> renvoie une valeur fausse (<em>falsy value</em>) soit trouvé. Si un tel élément est trouvé, la méthode <code>every</code> renvoie directement <code>false</code>. Sinon, si la fonction <code>callback</code> a renvoyé une valeur vraie pour tous les éléments, la méthode <code>every</code> renverra <code>true</code>. La fonction <code>callback</code> 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.</p> + +<p><code>callback</code> 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.</p> + +<p>Si un paramètre <code>thisArg</code> est fourni à la méthode <code>every</code>, ce sera la valeur <code>this</code> de la fonction <code>callback</code>. Si ce paramètre n'est pas fourni, la valeur <code>undefined</code> sera utilisée comme valeur pour <code>this</code>. La valeur <code>this</code> « définitivement » utilisée par la fonction <code>callback</code> est déterminée selon <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_this">les règles usuelles de détermination de <code>this</code></a>.</p> + +<p><code>every</code> ne modifie pas le tableau sur lequel elle a été appelée.</p> + +<p>Les éléments traités par la méthode <code>every</code> sont définis lors du premier appel à <code>callback</code>. Les éléments ajoutés au tableau après que l'appel à <code>every</code> ait commencé ne seront pas traités par la fonction <code>callback</code>. Si des éléments du tableau sont modifiés, la valeur passée à la fonction <code>callback</code> sera celle qu'ils ont au moment où <code>every</code> les traitera. Les éléments qui sont supprimés ne sont pas traités par la fonction <code>every</code>.</p> + +<p><code>every</code> 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 <code>true</code> (on dit qu'il est trivialement vrai que tous les éléments d'un <a href="https://fr.wikipedia.org/wiki/Ensemble_vide#Difficult.C3.A9s_de_la_notion_d.27ensemble_vide">ensemble vide</a> respectent n'importe quelle condition).</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Tester_la_valeur_des_éléments_d'un_tableau">Tester la valeur des éléments d'un tableau</h3> + +<p>Dans l'exemple suivant, on teste si tous les éléments du tableau sont supérieurs à 10.</p> + +<pre class="brush: js">function estAssezGrand(element, index, array) { + return element >= 10; +} +[12, 5, 8, 130, 44].every(estAssezGrand); // false +[12, 54, 18, 130, 44].every(estAssezGrand); // true +</pre> + +<h3 id="Utiliser_les_fonctions_fléchées_avec_every">Utiliser les fonctions fléchées avec <code>every</code></h3> + +<p>{{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.</p> + +<pre class="brush: js">[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 +</pre> + +<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2> + +<p><code>every</code> 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 <code>Object</code> et <code>TypeError</code> ont leurs valeurs originales (n'ont pas été modifiés) et que <code>callbackfn.call</code> correspond bien à la valeur originale de {{jsxref("Function.prototype.call")}}</p> + +<pre class="brush: js">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; + }; +} +</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.16', 'Array.prototype.every')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Définition initiale. Implémentée avec JavaScript 1.6.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.every', 'Array.prototype.every')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.every', 'Array.prototype.every')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div> +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> + +<p>{{Compat("javascript.builtins.Array.every")}}</p> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Array.prototype.forEach()")}}</li> + <li>{{jsxref("Array.prototype.some()")}}</li> + <li>{{jsxref("Array.prototype.find()")}}</li> + <li>{{jsxref("TypedArray.prototype.every()")}}</li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p>La méthode <strong><code>fill()</code></strong> 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é.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-fill.html")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><var>arr</var>.fill(valeur<var><var>) +</var>arr</var>.fill(valeur, <var>début<var>) +</var>arr</var>.fill(valeur, <var>début<var>, <var>fin</var>)</var></var> +</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>valeur</code></dt> + <dd>Valeur avec laquelle remplir le tableau.</dd> + <dt><code>début</code> {{optional_inline}}</dt> + <dd>Index de début, la valeur par défaut est 0.</dd> + <dt><code>fin</code> {{optional_inline}}</dt> + <dd>Index de fin, la valeur par défaut est <code>this.length</code>.</dd> +</dl> + +<h3 id="Valeur_de_retour">Valeur de retour</h3> + +<p>Le tableau modifié par la méthode.</p> + +<h2 id="Description">Description</h2> + +<p>Les éléments pour lesquels on utilisera la valeur sont ceux contenus dans l'intervalle de positions [<code>début</code>, <code>fin</code>].</p> + +<p>La méthode <code>fill()</code> prend jusqu'à trois arguments : <code>valeur</code>, <code>début</code> et <code>fin</code>. Les arguments <code>début</code> et <code>fin</code> sont optionnels. Leurs valeurs par défaut sont respectivement <code>0</code> et la taille <code>length</code> de l'objet <code>this</code>.</p> + +<p>Si <code>début</code> est négatif, il sera traité comme <code>length+début</code> où <code>length</code> est la taille du tableau. Si <code>fin</code> est négatif, il est traité comme <code>length+fin</code>.</p> + +<p>La fonction <code>fill()</code> est intentionnellement générique, il n'est pas nécessaire que sa valeur <code>this</code> soit un objet <code>Array</code>.</p> + +<p>La méthode <code>fill()</code> est une méthode de modification, elle changera l'objet <code>this</code> 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.</p> + +<h2 id="Exemples">Exemples</h2> + +<pre class="brush: js">[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"}] +</pre> + +<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2> + +<pre class="brush: js">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; + } + }); +}</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-array.prototype.fill', 'Array.prototype.fill')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Définition initiale.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.fill', 'Array.prototype.fill')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div> +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> + +<p>{{Compat("javascript.builtins.Array.fill")}}</p> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Array")}}</li> + <li>{{jsxref("TypedArray.prototype.fill()")}}</li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p>La méthode <code><strong>filter()</strong></code> 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 <code>callback</code>.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-filter.html")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><var>arr</var>.filter(<var>callback)</var>; // callback(elementCourant[, index[, tableauEntier]]) +var nouveauTableau = arr.filter(callback, <var>thisArg</var>); +</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>La fonction de test (ou <em>prédicat</em>) à appliquer à chaque élément du tableau. Cette fonction est appelée avec les arguments suivants : + <dl> + <dt><code>elementCourant</code></dt> + <dd>L'élément à traiter</dd> + <dt><code>index</code></dt> + <dd>Son indice.</dd> + <dt><code>array</code></dt> + <dd>Le tableau complet</dd> + </dl> + Cette fonction renvoie <code>true</code> — ou une valeur équivalente — si l'élément doit être conservé pour le tableau résultat et <code>false</code> dans le cas contraire.</dd> + <dt><code>thisArg</code> {{optional_inline}}</dt> + <dd>Objet à utiliser en tant que <code>this</code> quand la fonction <code>callback</code> est exécutée.</dd> +</dl> + +<h3 id="Valeur_de_retour">Valeur de retour</h3> + +<p>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é.</p> + +<h2 id="Description">Description</h2> + +<p><code>filter()</code> appelle la fonction <code>callback</code> fournie pour chacun des éléments d'un tableau, et construit un nouveau tableau contenant tous les éléments pour lesquels l'appel de <code>callback</code> retourne <code>true</code> ou une valeur équivalente à <code>true</code> dans un contexte booléen. La fonction <code>callback</code> 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 <code>callback</code> sont ignorés, ils ne sont pas inclus dans le nouveau tableau.</p> + +<p>La fonction <code>callback</code> est appelée avec trois arguments :</p> + +<ol> + <li>la valeur de l'élément courant,</li> + <li>l'index de l'élément courant,</li> + <li>l'objet <code>Array</code> parcouru.</li> +</ol> + +<p>Si le paramètre <code>thisArg</code> est fourni, il sera utilisé comme valeur <code>this</code> lors de l'appel de la fonction <code>callback</code>. S'il n'est pas fourni, la valeur <code>undefined</code> sera utilisée à la place. La valeur de <code>this</code> qui est finalement utilisée par la fonction <code>callback</code> est déterminée selon <a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_this">les règles usuelles pour déterminer la valeur <code>this</code> au sein d'une fonction</a>.</p> + +<p>Noter que <code>filter()</code> ne modifie pas le tableau d'origine.</p> + +<p>La liste des éléments parcourus par <code>filter()</code> est définie avant la première invocation de la fonction <code>callback</code>. Les éléments qui sont ajoutés à la liste après le début de l'appel de <code>filter()</code> (grâce à la fonction <code>callback</code> 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 <code>callback</code> sera la valeur de ces éléments au moment où <code>filter()</code> les traite — les éléments supprimés ne seront pas traités par la fonction.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Filtrer_les_petites_valeurs">Filtrer les petites valeurs</h3> + +<p>L'exemple suivant utilise <code>filter</code> pour créer une nouvelle liste où tous les éléments dont la valeur est inférieure à 10 ont été retirés.</p> + +<pre class="brush: js">function suffisammentGrand(element) { + return element >= 10; +} +var filtre = [12, 5, 8, 130, 44].filter(suffisammentGrand); +// filtre vaut [12, 130, 44] +</pre> + +<h3 id="Filtrer_des_éléments_JSON_invalides_et_les_trier_en_fonction_d'un_identifiant_avec_filter()">Filtrer des éléments JSON invalides et les trier en fonction d'un identifiant avec <code>filter()</code></h3> + +<p>Dans l'exemple qui suit, on utilise <code>filter()</code> pour créer un objet JSON qui contient des éléments dont l'<code>id</code> est un entier.</p> + +<pre class="brush: js">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</pre> + +<h3 id="Recherche_dans_un_tableau">Recherche dans un tableau</h3> + +<p>Dans l'exemple qui suit, on utilise <code>filter()</code> pour filtrer le contenu d'un tableau selon un critère donné.</p> + +<pre class="brush: js">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']; +</pre> + +<h3 id="Implémentation_avec_la_syntaxe_ECMAScript_2015_(ES6)">Implémentation avec la syntaxe ECMAScript 2015 (ES6)</h3> + +<p>L'exemple suivant utilise <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fléchées">les fonctions fléchées</a>, et le mot clé <a href="/fr/docs/Web/JavaScript/Reference/Instructions/const"><code>const</code> </a>disponible en ES6.</p> + +<pre class="brush: js">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'];</pre> + +<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2> + +<p><code>Array.prototype.filter()</code> 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 <code>filter</code> 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 <code>callbackfn.call</code> est évaluée avec la valeur d'origine de {{jsxref("Function.prototype.call")}} et que {{jsxref("Array.prototype.push")}} a sa valeur d'origine.</p> + +<pre class="brush: js">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; + }; +}</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.20', 'Array.prototype.filter')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Définition initiale. Implémentée avec JavaScript 1.6.</td> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-array.prototype.filter', 'Array.prototype.filter')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.filter', 'Array.prototype.filter')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div> +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> + +<p>{{Compat("javascript.builtins.Array.filter")}}</p> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Array.prototype.forEach()")}}</li> + <li>{{jsxref("Array.prototype.every()")}}</li> + <li>{{jsxref("Array.prototype.some()")}}</li> + <li>{{jsxref("Array.prototype.reduce()")}}</li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p>La méthode <code><strong>find()</strong></code> renvoie la <strong>valeur</strong> du <strong>premier élément trouvé </strong>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.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-find.html")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<p>Voir aussi la méthode {{jsxref("Array.findIndex", "findIndex()")}} qui renvoie l'<strong>index</strong> 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()")}}.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><var>arr</var>.find(<var>callback</var>(element[, index[, tableau]])[, <var>thisArg</var>])</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Fonction à exécuter sur chaque valeur du tableau, elle prend 3 arguments : + <dl> + <dt><code>element</code></dt> + <dd>L'élément actuellement traité dans le tableau.</dd> + <dt><code>index</code>{{optional_inline}}</dt> + <dd>L'index de l'élément actuellement traité dans le tableau</dd> + <dt><code>array</code>{{optional_inline}}</dt> + <dd>Le tableau pour lequel la méthode <code>find</code> a été appelée.</dd> + </dl> + </dd> + <dt><code>thisArg</code> {{optional_inline}}</dt> + <dd>Ce paramètre est optionnel. Objet à utiliser en tant que <code>this</code> lorsque la fonction <code>callback</code> est exécutée.</dd> +</dl> + +<h3 id="Valeur_de_retour">Valeur de retour</h3> + +<p>La valeur du premier élément du tableau qui réussit le test, sinon {{jsxref("undefined")}}.</p> + +<h2 id="Description">Description</h2> + +<p>La méthode <code>find</code> exécute la fonction <code>callback</code> une fois pour chaque élément présent dans le tableau jusqu'à ce qu'elle retourne une valeur vraie (qui peut être convertie en <code>true</code>). Si un élément est trouvé, <code>find</code> retourne immédiatement la valeur de l'élément. Autrement, <code>find</code> retourne <code>undefined</code>. La méthode <code>callback</code> 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.</p> + +<p>La méthode <code>callback</code> 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é.</p> + +<p>Si le paramètre <code>thisArg</code> est fourni à <code>find</code>, il sera utilisé comme le <code>this</code> pour chaque exécution de la fonction <code>callback</code>. S'il n'est pas fourni, alors {{jsxref("undefined")}} sera utilisé.</p> + +<p><code>find</code> ne modifie pas le tableau à partir duquel elle est appelée.</p> + +<p>L'intervalle des éléments inspectés par <code>find</code> est défini avant la première exécution de <code>callback</code>. Les éléments ajoutés au tableau après l'appel à <code>find</code> ne seront pas inspectés par la fonction <code>callback</code>. Si un élément existant est modifié avant le passage du <code>callback</code>, alors la valeur traitée par le <code>callback</code> sera celle présente lors du passage de <code>find</code> sur son index. Les éléments supprimés ne seront pas traités.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Trouver_un_objet_dans_un_tableau_grâce_à_une_de_ses_propriétés">Trouver un objet dans un tableau grâce à une de ses propriétés</h3> + +<pre class="brush: js">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}</pre> + +<h4 id="Utiliser_les_fonctions_fléchées_ES6ES2015">Utiliser les fonctions fléchées ES6/ES2015</h4> + +<pre class="brush: js">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}</pre> + +<h3 id="Trouver_un_nombre_premier_dans_un_tableau">Trouver un nombre premier dans un tableau</h3> + +<p>Dans l'exemple suivant, on cherche un nombre premier parmi les éléments d'un tableau (ou retourne <code>undefined</code> s'il n'y en a pas ).</p> + +<pre class="brush: js">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 +</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-array.prototype.find', 'Array.prototype.find')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Définition initiale</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.find', 'Array.prototype.find')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div> +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> + +<p>{{Compat("javascript.builtins.Array.find")}}</p> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Array.prototype.findIndex()")}} – trouver et renvoyer un index</li> + <li>{{jsxref("Array.prototype.includes()")}} – tester si une valeur existe dans le tableau</li> + <li>{{jsxref("Array.prototype.filter()")}} – trouver tous les éléments correspondants</li> + <li>{{jsxref("Array.prototype.every()")}} – tester l'ensemble des éléments d'un tableau</li> + <li>{{jsxref("Array.prototype.some()")}} – tester si au moins un élément du tableau respecte un critère</li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p>La méthode <code><strong>findIndex()</strong></code> renvoie l'<strong>indice</strong> du <strong>premier élément</strong> 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.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-findindex.html")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<p>Voir également la méthode {{jsxref("Array.find", "find()")}} qui renvoie la <strong>valeur</strong> (et non l'indice) d'un des éléments trouvés.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><var>arr</var>.findIndex(<var>callback</var>(element[, index[, tableau]])[, <var>thisArg</var>])</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Une fonction à exécuter sur chaque valeur du tableau jusqu'à ce que celle-ci renvoie <code>true</code>. Cette fonction prend trois arguments : + <dl> + <dt><code>élément</code></dt> + <dd>L'élément du tableau qui doit être traité.</dd> + <dt><code>indice</code>{{optional_inline}}</dt> + <dd>L'indice de l'élément du tableau en cours de traitement.</dd> + <dt><code>tableau</code>{{optional_inline}}</dt> + <dd>Le tableau sur lequel a été appelé <code>findIndex</code>.</dd> + </dl> + </dd> + <dt><code>argumentThis</code>{{optional_inline}}</dt> + <dd>L'objet à utiliser comme contexte <code>this</code> lorsque le <code>callback</code> est exécuté.</dd> +</dl> + +<h3 id="Valeur_de_retour">Valeur de retour</h3> + +<p>Un indice d'un élément du tableau qui réussit le test décrit, -1 sinon.</p> + +<h2 id="Description">Description</h2> + +<p>La méthode <code>findIndex</code> exécute la fonction <code>callback</code> une fois pour chaque élément présent dans le tableau (le tableau est parcouru entre les indices <code>0</code> et <code>length-1</code> compris) jusqu'à ce que <code>callback</code> renvoie une valeur vraie.</p> + +<p>S'il existe un tel élément, <code>findIndex</code> renverra immédiatement l'indice de l'élément concerné. Sinon, <code>findIndex</code> renverra -1. À la différence des autres méthodes liées aux tableaux comme <code>some()</code>, <code>callback</code> est également appelée pour les indices du tableau pour lesquels aucun élément n'est défini.</p> + +<p><code>callback</code> possède trois arguments : la valeur de l'élément, l'indice de l'élément et l'objet Array qui est parcouru</p> + +<p>Si l'argument <code>argumentThis</code> est fourni à la méthode <code>findIndex</code>, il sera utilisé comme « contexte » <code><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_this">this</a></code> pour chaque appel de <code>callback</code>. S'il n'est pas fourni, {{jsxref("undefined")}} sera utilisé.</p> + +<p><code>findIndex</code> ne modifie pas le tableau sur laquelle elle est appelée. Les éléments qui seront traités par <code>findIndex</code> sont « récoltés » avant le premier appel de <code>callback</code>. Tout élément qui sera ajouté au tableau après l'appel de <code>findIndex</code> ne sera pas utilisé avec <code>callback</code>. Si un élément existant, pas encore visité, est modifié par <code>callback</code>, la valeur qui sera passé au <code>callback</code> pour cet élément modifié sera celle que <code>findIndex</code> utilise lorsqu'elle utilise l'indice de l'élément en question. Les éléments supprimés sont bien parcourus.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Trouver_l'indice_d'un_nombre_premier_dans_un_tableau">Trouver l'indice d'un nombre premier dans un tableau</h3> + +<p>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).</p> + +<pre class="brush: js">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</pre> + +<h3 id="Trouver_un_indice_avec_une_fonction_fléchée">Trouver un indice avec une fonction fléchée</h3> + +<p>Dans cet exemple, on utilise <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fléchées">une fonction fléchée</a> pour trouver l'indice d'un élément :</p> + +<pre class="brush: js">const fruits = ["pomme", "banane", "melon", "fraise", "raisin"]; + +const indice = fruits.findIndex(fruit => fruit === "fraise"); +console.log(indice); // 3 +console.log(fruits[indice]); // fraise </pre> + +<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2> + +<pre class="brush: js">// 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 + }); +}</pre> + +<p>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'<code>Array.prototype</code> car on ne peut pas les rendre non-énumérables.</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-array.prototype.findindex', 'Array.prototype.findIndex')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Définition initiale.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.findIndex', 'Array.prototype.findIndex')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div> +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> + +<p>{{Compat("javascript.builtins.Array.findIndex")}}</p> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Array.prototype.find()")}}</li> + <li>{{jsxref("Array.prototype.indexOf()")}}</li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p>La méthode <code><strong>flat()</strong></code> 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.</p> + +<p class="hidden">\{{EmbedInteractiveExample("pages/js/array-flatten.html")}}</p> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><var>var nouveauTableau = monTableau</var>.flat([<var>profondeur</var>]);</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>profondeur</code> {{optional_inline}}</dt> + <dd>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.</dd> +</dl> + +<h3 id="Valeur_de_retour">Valeur de retour</h3> + +<p>Un nouveau tableau qui contient la concaténation des éléments des sous-tableaux du tableau passé en argument.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Aplatir_des_tableaux_imbriqués">Aplatir des tableaux imbriqués</h3> + +<pre class="brush: js">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] +</pre> + +<h3 id="Aplatir_et_combler_les_trous">Aplatir et combler les trous</h3> + +<p>La méthode <code>flat()</code> permet également de retirer les « trous » d'un tableau :</p> + +<pre class="brush: js">var arr4 = [1, 2, , 4, 5]; +arr4.flat(); +// [1, 2, 4, 5]</pre> + +<h2 id="Équivalent">Équivalent</h2> + +<h3 id="reduce_et_concat"><code>reduce</code> et <code>concat</code></h3> + +<pre class="brush: js">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); +</pre> + +<h3 id="reduce_concat_isArray_récursivité"><code>reduce</code> + <code>concat</code> + <code>isArray</code> + récursivité</h3> + +<pre class="brush: js">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] +</pre> + +<h3 id="Utiliser_une_pile">Utiliser une pile</h3> + +<pre class="brush: js">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] +</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td><a href="https://www.ecma-international.org/ecma-262/10.0/index.html#sec-array.prototype.flat">ECMAScript 2019</a></td> + <td>Finalisé</td> + <td>Proposition initiale</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("javascript.builtins.Array.flat")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Array.prototype.flatMap()")}}</li> + <li>{{jsxref("Array.prototype.map()")}}</li> + <li>{{jsxref("Array.prototype.reduce()")}}</li> + <li>{{jsxref("Array.prototype.concat()")}}</li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p>La méthode <code><strong>flatMap()</strong></code> 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. <code>flatMap</code> est plus efficace que la combinaison de ces deux opérations, souvent réalisées conjointement.</p> + +<p class="hidden">\{{EmbedInteractiveExample("pages/js/array-flatmap.html")}}</p> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><var>var new_array = arr</var>.flatMap(function <var>callback(currentValue[, index[, array]]) { + // return element for new_array +}</var>[, <var>thisArg</var>])</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>La fonction qui produit un élément du nouveau tableau et qui prend trois arguments : + <dl> + <dt></dt> + <dt><code>currentValue</code></dt> + <dd>La valeur du tableau qui est traitée.</dd> + <dt><code>index</code>{{optional_inline}}</dt> + <dd>L'indice de l'élément du tableau qui est traitée.</dd> + <dt><code>array</code>{{optional_inline}}</dt> + <dd>Le tableau sur lequel <code>flatMap</code> a été appelée.</dd> + </dl> + </dd> + <dt><code>thisArg</code>{{optional_inline}}</dt> + <dd>La valeur à utiliser comme contexte <code>this</code> lors de l'exécution de <code>callback</code>.</dd> +</dl> + +<h3 id="Valeur_de_retour">Valeur de retour</h3> + +<p>Un nouveau tableau composé d'éléments résultants de la fonction de rappel (<em>callback</em>) et aplati d'un niveau de profondeur.</p> + +<h2 id="Description">Description</h2> + +<p>Pour la fonction de rappel, voir {{jsxref("Array.prototype.map()")}}. La méthode <code>flatMap()</code> est identique à un appel de {{jsxref("Array.prototype.map()")}} suivi d'un appel de {{jsxref("Array.prototype.flat()")}} avec la profondeur 1.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="map_et_flatMap"><code>map()</code> et <code>flatMap()</code></h3> + +<pre class="brush: js">var arr1 = <span class="js source"><span class="function-call js meta"><span class="js meta"><span class="brace js meta square"><span>[</span></span><span class="constant decimal js numeric"><span>1</span></span><span class="comma delimiter js meta object"><span>,</span></span><span> </span><span class="brace js meta square"><span>2, 3, 4]; + +arr1.map(</span></span></span></span></span>x => [x * 2]<span class="js source"><span class="function-call js meta"><span class="js meta"><span class="brace js meta square"><span>);</span></span></span></span></span> +// [[2], [4], [6], [8]] + +arr1.flatMap(x => [x * 2]<span class="js source"><span class="function-call js meta"><span class="js meta"><span class="brace js meta square"><span>); +// [2, 4, 6, 8]</span></span></span></span></span> + +// seul un niveau est aplati +arr1.flatMap(x => [[x * 2]]); +// [[2], [4], [6], [8]] +</pre> + +<p>On peut utiliser un autre exemple où on génère une liste de mots à partir d'une liste de phrases :</p> + +<pre class="brush: js">let tableau1 = ["Coucou comment", "", "ça va ?"]; + +tableau1.map(x => x.split(" ")); +// [["Coucou", "comment"], [""], ["ça", "va", "?"]] + +tableau1.flatMap(x => x.split(" ")); +// ["Coucou", "comment", "", "ça", "va", "?"] +</pre> + +<p>On notera que la longueur de la liste obtenue avec <code>flatMap</code> est différente de la longueur de la liste originale.</p> + +<div class="line"><span class="js source"><span class="comment double-slash js line"><span class="comment definition js punctuation"><span>//</span></span><span>=> [1, 2, 3, 4, 5, 6, 7, 8, 9]</span></span></span></div> + +<h2 id="Équivalent">Équivalent</h2> + +<h3 id="reduce_et_concat"><code>reduce()</code> et <code>concat()</code></h3> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> arr <span class="operator token">=</span> <span class="punctuation token">[</span><span class="number token">1</span><span class="punctuation token">,</span> <span class="number token">2</span><span class="punctuation token">,</span> <span class="number token">3</span><span class="punctuation token">,</span> <span class="number token">4</span><span class="punctuation token">]</span><span class="punctuation token">;</span> + +arr<span class="punctuation token">.</span><span class="function token">flatMap</span><span class="punctuation token">(</span>x <span class="operator token">=</span><span class="operator token">></span> <span class="punctuation token">[x, </span>x <span class="operator token">*</span> <span class="number token">2</span><span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="comment token">// est équivalent à</span> +arr<span class="punctuation token">.</span><span class="function token">reduce</span><span class="punctuation token">(</span><span class="punctuation token">(</span>acc<span class="punctuation token">,</span> x<span class="punctuation token">)</span> <span class="operator token">=</span><span class="operator token">></span> acc<span class="punctuation token">.</span><span class="function token">concat</span><span class="punctuation token">(</span><span class="punctuation token">[x, </span>x <span class="operator token">*</span> <span class="number token">2</span><span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">,</span> <span class="punctuation token">[</span><span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="comment token">// [1, 2, 2, 4, 3, 6, 4, 8]</span></code></pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td><a href="https://www.ecma-international.org/ecma-262/10.0/index.html#sec-array.prototype.flatmap">ECMAScript 2019</a></td> + <td>Finalisé</td> + <td>Proposition initiale</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("javascript.builtins.Array.flatMap")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Array.prototype.flat()")}}</li> + <li>{{jsxref("Array.prototype.map()")}}</li> + <li>{{jsxref("Array.prototype.reduce()")}}</li> + <li>{{jsxref("Array.prototype.concat()")}}</li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p>La méthode <code><strong>forEach()</strong></code> permet d'exécuter une fonction donnée sur chaque élément du tableau.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-foreach.html")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><var>arr</var>.forEach(<var>callback</var>); +arr.forEach(callback, <var>thisArg</var>);</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>La fonction à utiliser pour chaque élément du tableau. Elle prend en compte trois arguments : + <dl> + <dt><code>valeurCourante</code></dt> + <dd>La valeur de l'élément du tableau en cours de traitement.</dd> + <dt><code>index</code> {{optional_inline}}</dt> + <dd>L'indice de l'élément du tableau en cours de traitement.</dd> + <dt><code>array</code> {{optional_inline}}</dt> + <dd>Le tableau sur lequel la méthode <code>forEach</code> est appliquée.</dd> + </dl> + </dd> + <dt><code>thisArg</code> {{optional_inline}}</dt> + <dd>Paramètre optionnel. La valeur à utiliser pour <code>this</code> lors de l'exécution de <code>callback</code>.</dd> +</dl> + +<h3 id="Valeur_de_retour">Valeur de retour</h3> + +<p>{{jsxref("undefined")}}.</p> + +<h2 id="Description">Description</h2> + +<p><code>forEach()</code> exécute la fonction <code><em>callback</em></code> 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")}}.</p> + +<p><code>callback</code> est appelé avec trois arguments :</p> + +<ul> + <li>la valeur de l'élément</li> + <li>l'index de l'élément</li> + <li>le tableau utilisé</li> +</ul> + +<p>Si un paramètre <code>thisArg</code> est fourni à la méthode <code>forEach</code>, il sera utilisé en tant que valeur <code>this</code> pour chaque appel de <code>callback</code>. Sinon, ce sera la valeur <code>undefined</code> qui sera utilisée comme valeur <code>this</code>. La valeur <code>this</code> finalement prise en compte par la fonction <code>callback</code> est déterminée selon <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_this">les règles usuelles pour déterminer la valeur de <code>this</code> utilisée dans une fonction</a>.</p> + +<p>L'ensemble des éléments traités par <code>forEach</code> est défini avant le premier appel à <code>callback</code>. Les éléments ajoutés au tableau après que l'appel à <code>forEach</code> ait commencé ne seront pas visités par <code>callback</code>. Si des éléments déjà présents dans le tableau sont modifiés, leur valeur telle qu'elle est passée au <code>callback</code> sera la valeur au moment du passage du <code>forEach</code> ; les éléments supprimés ne sont pas parcourus. Voir <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/forEach#Attention_aux_modifications_en_cours">l'exemple ci-après</a>.</p> + +<p><code>forEach()</code> exécute la fonction <code>callback</code> 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.</p> + +<p><code>forEach()</code> ne modifie pas le tableau sur lequel elle est appelée, en revanche, la fonction de retour (<em>callback</em>) utilisée peut modifier le tableau.</p> + +<div class="note"><strong>Note :</strong> + +<p>Il n'existe aucun moyen d'arrêter une boucle <code>forEach</code> en dehors de lever une exception. Si vous avez besoin d'arrêter la boucle, étudiez plutôt :</p> + +<ul> + <li>Une boucle <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/for">for</a></code> classique</li> + <li>Une boucle <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/for...in">for...in</a></code> ou <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/for...of">for...of</a></code></li> + <li>{{jsxref("Array.prototype.every()")}}</li> + <li>{{jsxref("Array.prototype.some()")}}</li> + <li>{{jsxref("Array.prototype.find()")}}</li> + <li>{{jsxref("Array.prototype.findIndex()")}}</li> +</ul> + +<p>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 à <code>true</code> si besoin de poursuivre la boucle.</p> +</div> + +<p><code>forEach</code> exécute la fonction <code>callback</code> une fois pour chaque élément ; contrairement à <code>every</code> et <code><code>some</code></code>, cette méthode renvoie toujours <code>undefined</code> et ne peut pas être enchaînée.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Équivalence_entre_une_boucle_for_et_une_boucle_forEach">Équivalence entre une boucle <code>for</code> et une boucle <code>forEach</code></h3> + +<p>Voici un fragment de code simple qui utilise une boucle <code>for</code></p> + +<pre class="brush: js">var items = ["item1", "item2", "item3"]; +var copie = []; + +for (var i = 0; i < items.length; i++) { + copie.push(items[i]); +} +</pre> + +<p>Et voici un fragment de code équivalent qui utilise <code>forEach</code> :</p> + +<pre class="brush: js">var items = ["item1", "item2", "item3"] +var copie = []; + +items.forEach(function(item){ + copie.push(item); +});</pre> + +<h3 id="Afficher_le_contenu_d'un_tableau">Afficher le contenu d'un tableau</h3> + +<div class="blockIndicator note"> +<p><strong>Note :</strong> Pour afficher le contenu d'un tableau, on pourra utiliser <code><a href="/fr/docs/Web/API/Console/table">console.table()</a></code> qui met en forme les éléments du tableau. L'exemple suivant est laissé à titre d'illustration pour <code>forEach()</code>.</p> +</div> + +<p>Le code suivant affiche une ligne pour chaque élément du tableau :</p> + +<pre class="brush:js">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 + +</pre> + +<h3 id="Utiliser_l'argument_pour_this">Utiliser l'argument pour <code>this</code></h3> + +<p>Dans l'exemple qui suit, on met à jour les propriétés d'un objet à partir des éléments d'un tableau :</p> + +<pre class="brush: js">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 +</pre> + +<div class="note"> +<p><strong>Note :</strong> Le paramètre pour <code>this</code> est passé à la méthode <code>forEach()</code>, à chaque appel du callback, celui-ci sera utilisé comme valeur pour <code>this</code>.</p> +</div> + +<div class="note"> +<p><strong>Note : </strong>Si la fonction passée en argument est <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fléchées">une fonction fléchée</a>, il n'est pas nécessaire d'ajouter le paramètre <code>this</code> car les fonctions fléchées utilisent le <code><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_this">this</a></code> fourni par le contexte lexical.</p> +</div> + +<h3 id="Stopper_une_boucle">Stopper une boucle</h3> + +<p>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 à <code>SEUIL_MAX</code>.</p> + +<pre class="brush: js">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</pre> + +<h3 id="Une_fonction_de_copie_d'objet">Une fonction de copie d'objet</h3> + +<p>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'<code>Array.prototype.forEach</code> et d'utiliser les fonctions ECMAScript 5 <code>Object.*</code>.</p> + +<pre class="brush: js">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</pre> + +<h3 id="Attention_aux_modifications_en_cours">Attention aux modifications en cours</h3> + +<p>Dans l'exemple qui suit, on utilise un tableau qui contient quatre élément : <code>"un"</code>, <code>"deux"</code>, <code>"trois"</code>, <code>"quatre"</code>. Lorsque le parcours du tableau arrive à l'élément <code>"deux"</code>, on décale le tableau d'un cran vers les premiers éléments. Aussi, l'élément <code>"quatre"</code> est décalé à la place de <code>"trois"</code> et <code>"trois"</code> est déplacé à la place de <code>"deux"</code>. Pour cette raison, lorsque <code>forEach</code> poursuit son parcours, elle saute la valeur "trois". Autrement dit, <code>forEach</code> 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.</p> + +<pre class="brush: js">var mots = ["un", "deux", "trois",, "quatre"]; +mots.forEach(function(mot) { + console.log(mot); + if (mot === "deux") { + mots.shift(); + } +}); +// un +// deux +// quatre</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.18', 'Array.prototype.forEach')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Définition initiale. Implémentée avec JavaScript 1.6.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.foreach', 'Array.prototype.forEach')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.foreach', 'Array.prototype.forEach')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div> +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> + +<p>{{Compat("javascript.builtins.Array.forEach")}}</p> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Array.prototype.filter()")}}</li> + <li>{{jsxref("Array.prototype.find()")}}</li> + <li>{{jsxref("Array.prototype.findIndex()")}}</li> + <li>{{jsxref("Array.prototype.map()")}}</li> + <li>{{jsxref("Array.prototype.every()")}}</li> + <li>{{jsxref("Array.prototype.some()")}}</li> + <li>{{jsxref("Map.prototype.forEach()")}}</li> + <li>{{jsxref("Set.prototype.forEach()")}}</li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p>La méthode <code><strong>Array.from()</strong></code> permet de créer une nouvelle instance d'<code>Array</code> (une copie superficielle) à partir d'un objet itérable ou semblable à un tableau.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-from.html")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">Array.from(arrayLike [, fonctionMap[, thisArg]])</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>arrayLike</code></dt> + <dd>Un objet semblable à un tableau ou bien un objet itérable dont on souhaite créer un tableau, instance d'<code>Array</code>.</dd> + <dt><code>fonctionMap</code> {{optional_inline}}</dt> + <dd>Argument optionnel, une fonction à appliquer à chacun des éléments du tableau.</dd> + <dt><code>thisArg</code> {{optional_inline}}</dt> + <dd>Argument optionnel. La valeur à utiliser pour <code>this</code> lors de l'exécution de la fonction <code>fonctionMap</code>.</dd> +</dl> + +<h3 id="Valeur_de_retour">Valeur de retour</h3> + +<p>Une nouvelle instance de {{jsxref("Array")}}.</p> + +<h2 id="Description">Description</h2> + +<p><code>Array.from()</code> permet de créer des instances d'<code>Array</code> à partir :</p> + +<ul> + <li>d'objets semblables à des tableaux (qui disposent d'une propriété <code>length</code> et d'éléments indexés) ou</li> + <li><a href="/fr/docs/Web/JavaScript/Guide/iterable">d'objets itérables</a> (des objets dont on peut avoir les éléments comme {{jsxref("Map")}} et {{jsxref("Set")}}).</li> +</ul> + +<p><code>Array.from()</code> possède un paramètre optionnel <code>fonctionMap</code>, 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<code> Array.from(obj, mapFn, thisArg)</code> correspond exactement à <code>Array.from(obj).map(mapFn, thisArg)</code>, sauf qu'il n'y a pas de tableau intermédiaire de créé. Cet aspect est notamment important pour certaines classes filles, comme les <a href="/fr/docs/JavaScript/Tableaux_typ%C3%A9s">tableaux typés</a> (en effet, un tableau intermédiaire aurait eu ses valeurs tronquées pour qu'elles soient du type approprié).</p> + +<p>La propriété <code>length</code> de la méthode <code>from()</code> est 1.</p> + +<p>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 <code>Array.from()</code> sont héritées par les sous-classes d'<code>Array</code> et créent de nouvelles instances de la sous-classe d'<code>Array</code>.</p> + +<h2 id="Exemples">Exemples</h2> + +<pre class="brush: js">// 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] + +</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ES2015', '#sec-array.from', 'Array.from')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Définition initiale.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.from', 'Array.from')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> + +<p>{{Compat("javascript.builtins.Array.from")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Array")}}</li> + <li>{{jsxref("Array.prototype.map()")}}</li> + <li>{{jsxref("TypedArray.from()")}}</li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p>La méthode <code><strong>includes()</strong></code> permet de déterminer si un tableau contient une valeur et renvoie <code>true</code> si c'est le cas, <code>false</code> sinon.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-includes.html")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<div class="note"> +<p><strong>Note :</strong> Cette méthode utilise l'algorithme de comparaison <em><a href="/fr/docs/Web/JavaScript/Les_différents_tests_d_égalité#Un_modèle_pour_mieux_comprendre">SameValueZero</a></em> qui fonctionne comme l'égalité stricte, à la différence que <code>NaN</code> est ici égal à lui même.</p> +</div> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">array.includes(élémentRecherché) +array.includes(élémentRecherché, indiceDépart) +</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>élémentRecherché</code></dt> + <dd>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).</dd> + <dt><code>indiceDépart</code> {{optional_inline}}</dt> + <dd>La position du tableau à partir de laquelle commencer à chercher <code>élémentRecherché</code>. Si on utilise une valeur négative, la recherche commencera à partir de la fin du tableau (autrement dit à l'indice <code>array.length - indiceDépart</code>). La valeur par défaut est 0.</dd> +</dl> + +<h3 id="Valeur_de_retour">Valeur de retour</h3> + +<p>Un {{jsxref("Boolean","booléen","",1)}} qui vaut <code>true</code> si <code>élémentRecherché</code> est trouvé dans le tableau (à partir de l'<code>indiceDépart</code> si celui-ci est indiqué). Les valeurs -0, +0 et 0 sont considérées comme équivalentes mais <code>false</code> n'est pas considéré comme équivalent à 0.</p> + +<div class="note"> +<p><strong>Note :</strong> Pour être tout à fait précis, <code>includes()</code> utilise l'algorithme <em><a href="/fr/docs/Web/JavaScript/Les_différents_tests_d_égalité#Un_modèle_pour_mieux_comprendre">SameValueZero</a></em> afin de déterminer si un élément donné est trouvé.</p> +</div> + +<h2 id="Exemples">Exemples</h2> + +<pre class="brush: js">[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 +</pre> + +<h3 id="indiceDépart_supérieur_ou_égal_à_la_longueur_du_tableau"><code>indiceDépart</code> supérieur ou égal à la longueur du tableau</h3> + +<p>SI <code>indiceDépart</code> est supérieur ou égal à la longueur du tableau, la méthode retourne <code>false</code>. Le tableau n'est pas parcouru.</p> + +<pre class="brush: js">var arr = ['a', 'b', 'c']; + +arr.includes('c', 3); // false +arr.includes('c', 100); // false +</pre> + +<h3 id="indiceDépart_strictement_négatif"><code>indiceDépart</code> strictement négatif</h3> + +<p>Si <code>indiceDépart</code> est strictement négatif, l'indice de départ effectif est la somme entre la taille du tableau et <code>indiceDépart</code>. Si cette somme est toujours négative, le tableau est intégralement parcouru.</p> + +<pre class="brush: js">// 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 +</pre> + +<h3 id="Utilisation_d'includes()_comme_méthode_générique">Utilisation d'<code>includes()</code> comme méthode générique</h3> + +<p><code>includes()</code> 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. <code><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/arguments">arguments</a></code> ou des chaînes de caractères) :</p> + +<pre class="brush: js">function argumentsContientA(){ + return [].includes.call(arguments, 'a'); +} + +console.log(argumentsContientA('a','b','c')); // true +console.log(argumentsContientA('d','e','f')); // false +</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ES7', '#sec-array.prototype.includes', 'Array.prototype.includes')}}</td> + <td>{{Spec2('ES7')}}</td> + <td>Définition initiale.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.includes', 'Array.prototype.includes')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> + +<p>{{Compat("javascript.builtins.Array.includes")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("TypedArray.prototype.includes()")}}</li> + <li>{{jsxref("String.prototype.includes()")}}</li> + <li>{{jsxref("Array.prototype.indexOf()")}}</li> + <li>{{jsxref("Array.prototype.find()")}}</li> + <li>{{jsxref("Array.prototype.findIndex()")}}</li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p>L'objet global <strong><code>Array</code></strong> est utilisé pour créer des tableaux. Les tableaux sont des objets de haut-niveau (en termes de complexité homme-machine) semblables à des listes.</p> + +<p><strong>Créer un tableau</strong></p> + +<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">var</span> fruits <span class="operator token">=</span> <span class="punctuation token">[</span><span class="string token">'Apple'</span><span class="punctuation token">,</span> <span class="string token">'Banana'</span><span class="punctuation token">]</span><span class="punctuation token">;</span> + +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>fruits<span class="punctuation token">.</span>length<span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="comment token">// 2</span></code></pre> + +<p><strong>Accéder (via son index) à un élément du tableau</strong></p> + +<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">var</span> first <span class="operator token">=</span> fruits<span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">;</span> +<span class="comment token">// Apple</span> + +<span class="keyword token">var</span> last <span class="operator token">=</span> fruits<span class="punctuation token">[</span>fruits<span class="punctuation token">.</span>length <span class="operator token">-</span> <span class="number token">1</span><span class="punctuation token">]</span><span class="punctuation token">;</span> +<span class="comment token">// Banana</span></code></pre> + +<p><strong>Boucler sur un tableau</strong></p> + +<pre class="brush: js line-numbers language-js notranslate"><code class="language-js">fruits<span class="punctuation token">.</span><span class="function token">forEach</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span>item<span class="punctuation token">,</span> index<span class="punctuation token">,</span> array<span class="punctuation token">)</span> <span class="punctuation token">{</span> + console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>item<span class="punctuation token">,</span> index<span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="comment token">// Apple 0</span> +<span class="comment token">// Banana 1</span></code></pre> + +<p><strong>Ajouter à la fin du tableau</strong></p> + +<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">var</span> newLength <span class="operator token">=</span> fruits<span class="punctuation token">.</span><span class="function token">push</span><span class="punctuation token">(</span><span class="string token">'Orange'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="comment token">// ["Apple", "Banana", "Orange"]</span></code></pre> + +<p><strong>Supprimer le dernier élément du tableau</strong></p> + +<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">var</span> last <span class="operator token">=</span> fruits<span class="punctuation token">.</span><span class="function token">pop</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// supprime Orange (à la fin)</span> +<span class="comment token">// ["Apple", "Banana"];</span></code></pre> + +<p><strong>Supprimer le premier élément du tableau</strong></p> + +<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">var</span> first <span class="operator token">=</span> fruits<span class="punctuation token">.</span><span class="function token">shift</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// supprime Apple (au début)</span> +<span class="comment token">// ["Banana"];</span></code></pre> + +<p><strong>Ajouter au début du tableau</strong></p> + +<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">var</span> newLength <span class="operator token">=</span> fruits<span class="punctuation token">.</span><span class="function token">unshift</span><span class="punctuation token">(</span><span class="string token">'Strawberry'</span><span class="punctuation token">)</span> <span class="comment token">// ajoute au début</span> +<span class="comment token">// ["Strawberry", "Banana"];</span></code></pre> + +<p><strong>Trouver l'index d'un élément dans le tableau</strong></p> + +<pre class="brush: js line-numbers language-js notranslate"><code class="language-js">fruits<span class="punctuation token">.</span><span class="function token">push</span><span class="punctuation token">(</span><span class="string token">'Mango'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="comment token">// ["Strawberry", "Banana", "Mango"]</span> + +<span class="keyword token">var</span> pos <span class="operator token">=</span> fruits<span class="punctuation token">.</span><span class="function token">indexOf</span><span class="punctuation token">(</span><span class="string token">'Banana'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="comment token">// 1</span></code></pre> + +<p><strong>Supprimer un élément par son index</strong></p> + +<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">var</span> removedItem <span class="operator token">=</span> fruits<span class="punctuation token">.</span><span class="function token">splice</span><span class="punctuation token">(</span>pos<span class="punctuation token">,</span> <span class="number token">1</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// supprime 1 élément à la position pos</span> + +<span class="comment token">// ["Strawberry", "Mango"]</span></code></pre> + +<p><strong>Supprimer des éléments à partir d'un index</strong></p> + +<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">var</span> vegetables <span class="operator token">=</span> <span class="punctuation token">[</span><span class="string token">'Cabbage'</span><span class="punctuation token">,</span> <span class="string token">'Turnip'</span><span class="punctuation token">,</span> <span class="string token">'Radish'</span><span class="punctuation token">,</span> <span class="string token">'Carrot'</span><span class="punctuation token">]</span><span class="punctuation token">;</span> +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>vegetables<span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="comment token">// ["Cabbage", "Turnip", "Radish", "Carrot"]</span> + +<span class="keyword token">var</span> pos <span class="operator token">=</span> <span class="number token">1</span><span class="punctuation token">,</span> n <span class="operator token">=</span> <span class="number token">2</span><span class="punctuation token">;</span> + +<span class="keyword token">var</span> removedItems <span class="operator token">=</span> vegetables<span class="punctuation token">.</span><span class="function token">splice</span><span class="punctuation token">(</span>pos<span class="punctuation token">,</span> n<span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="comment token">// n définit le nombre d'éléments à supprimer,</span> +<span class="comment token">// à partir de la position pos</span> + +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>vegetables<span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="comment token">// ["Cabbage", "Carrot"] (le tableau d'origine est changé)</span> + +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>removedItems<span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="comment token">// ["Turnip", "Radish"] (splice retourne la liste des éléments supprimés)</span></code></pre> + +<p><strong>Copier un tableau</strong></p> + +<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">var</span> shallowCopy <span class="operator token">=</span> fruits<span class="punctuation token">.</span><span class="function token">slice</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// crée un nouveau tableau qui contient les éléments de fruits</span> +<span class="comment token">// ["Strawberry", "Mango"]</span></code></pre> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox notranslate">[<var>element0</var>, <var>element1</var>, ..., <var>elementN</var>] +new Array(<var>element0</var>, <var>element1</var>[, ...[, <var>elementN</var>]]) +new Array(<var>arrayLength</var>)</pre> + +<dl> + <dt> + <h3 id="Paramètres">Paramètres</h3> + </dt> + <dt><code><var>element0</var>, <var>element1</var>, ..., <var>elementN</var> </code></dt> + <dd>Un tableau est initialisé avec les éléments donnés, sauf dans le cas où un seul argument est passé au constructeur <code>Array</code> 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 <code>Array</code>, et non aux tableaux créés avec la syntaxe crochets.</dd> + <dt><code><var>arrayLength</var></code></dt> + <dd>Si le seul argument passé au constructeur <code>Array</code> est un entier entre 0 et 2<sup>32</sup>-1 (inclus), un nouveau tableau sera créé avec ce nombre d'éléments (note : le tableau sera créé avec <code>arrayLength</code> emplacements vides, et non avec de véritables valeurs <code>undefined</code>). Si l'argument est un nombre en dehors de la plage autorisée, une exception {{jsxref("RangeError")}} est levée.</dd> +</dl> + +<h2 id="Description">Description</h2> + +<p>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.</p> + +<p>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.</p> + +<p>Les tableaux ne peuvent pas utiliser de chaîne de caractères comme indice (comme dans un <a href="https://fr.wikipedia.org/wiki/Tableau_associatif">tableau associatif</a>) mais des entiers. Utiliser ou accéder à des index non entiers, en utilisant la <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide/Utiliser_les_objets#Les_objets_et_les_propri%C3%A9t%C3%A9s">notation avec crochets</a> (ou <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_de_membres">avec point</a>) ne va pas définir ou récupérer un élément sur le tableau lui-même, mais une variable associée à la <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Structures_de_donn%C3%A9es#Propri%C3%A9t%C3%A9s">collection de propriétés d'objet</a> de ce tableau. Les propriétés du tableau et la liste de ses éléments sont séparées, et les <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide/Collections_index%C3%A9es#M%C3%A9thodes_des_tableaux">opérations de parcours et de modification</a> ne s'appliquent pas à ces propriétés.</p> + +<h3 id="Accéder_aux_éléments_dun_tableau">Accéder aux éléments d'un tableau</h3> + +<p>Les tableaux sont indexés à partir de zéro: le premier élément d'un tableau a pour indice <code>0</code>, 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).</p> + +<pre class="brush: js notranslate">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"</pre> + +<p>Les éléments d'un tableau sont des propriétés d'objets de la même manière que <code>toString</code> 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 :</p> + +<pre class="brush: js notranslate">console.log(arr.0); // erreur de syntaxe</pre> + +<p>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 '<code>3d</code>', on ne pourra y faire référence qu'en utilisant les crochets. Exemple :</p> + +<pre class="brush: js notranslate">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</pre> + +<pre class="brush: js notranslate">renderer.3d.setTexture(model, "personnage.png"); // erreur de syntaxe +renderer["3d"].setTexture(model, "personnage.png");// fonctionne correctement </pre> + +<p>Dans cet exemple, on utilise des doubles quotes autour de <code>3d</code>. On peut aussi utiliser les doubles quotes pour accéder aux éléments d'un tableau (ex. : <code>années["2"]</code> au lieu de <code>années[2]</code>), mais ce n'est pas obligatoire. Dans l'instruction <code>années[2]</code>, 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 <code>true</code>:</p> + +<pre class="brush: js notranslate">console.log(années["2"] != années["02"]); </pre> + +<p>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 :</p> + +<pre class="brush: js notranslate">var promise = { + 'var' : 'text', + 'array': [1, 2, 3, 4] +}; + +console.log(promise['var']);</pre> + +<div class="note"> +<p><strong>Note spécifique à Firefox :</strong> 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.</p> +</div> + +<h3 id="Relation_entre_length_et_les_propriétés_numériques">Relation entre <code>length</code> et les propriétés numériques</h3> + +<p>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")}}.</p> + +<pre class="brush: js notranslate">var fruits = []; +fruits.push("banane", "pomme", "pêche"); + +console.log(fruits.length); // 3</pre> + +<p>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")}} :</p> + +<pre class="brush: js notranslate">fruits[5] = "mangue"; +console.log(fruits[5]); // "mangue" +console.log(Object.keys(fruits)); // ['0', '1', '2', '5'] +console.log(fruits.length); // 6 </pre> + +<p>On peut également modifier la propriété directement (cela n'ajoutera pas de nouveaux éléments) :</p> + +<pre class="brush: js notranslate">fruits.length = 10; +console.log(Object.keys(fruits)); // ['0', '1', '2', '5'] +console.log(fruits.length); // 10</pre> + +<p>En revanche, si on diminue la valeur de {{jsxref("Array.length", "length")}}, cela supprimera des éléments :</p> + +<pre class="brush: js notranslate">fruits.length = 2; +console.log(Object.keys(fruits)); // ['0', '1'] +console.log(fruits.length); // 2</pre> + +<p>Pour plus d'informations sur le comportement de cette propriété, voir la page {{jsxref("Array.length")}}.</p> + +<h3 id="Création_dun_tableau_utilisant_le_résultat_dune_correspondance">Création d'un tableau utilisant le résultat d'une correspondance</h3> + +<p>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 :</p> + +<pre class="brush: js notranslate">// 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 ]</pre> + +<p>Les propriétés et les éléments retournés depuis cette correspondance sont les suivants :</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td class="header">Propriété/Élément</td> + <td class="header">Description</td> + <td class="header">Exemple</td> + </tr> + <tr> + <td><code>input</code></td> + <td>Une propriété en lecture seule qui reflète la chaîne originale sur laquelle l'expression rationnelle a été appliquée.</td> + <td>cdbBdbsbz</td> + </tr> + <tr> + <td><code>index</code></td> + <td>Une propriété en lecture seule qui est l'indice de la correspondance dans la chaîne (les indices commencent à 0)</td> + <td>1</td> + </tr> + <tr> + <td><code>[0]</code></td> + <td>Une propriété en lecture seule qui spécifie les derniers caractères correspondants.</td> + <td>dbBd</td> + </tr> + <tr> + <td><code>[1], ...[n]</code></td> + <td>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é.</td> + <td>[1]: bB<br> + [2]: d</td> + </tr> + </tbody> +</table> + +<h2 id="Propriétés">Propriétés</h2> + +<dl> + <dt>{{jsxref("Array.prototype.length")}}</dt> + <dd>La propriété de longueur pour le constructeur <code>Array</code>, elle vaut 1.</dd> + <dt>{{jsxref("Array.@@species", "get Array[@@species]")}}</dt> + <dd>La fonction de construction utilisée pour créer les objets dérivés.</dd> + <dt>{{jsxref("Array.prototype")}}</dt> + <dd>Cette propriété permet d'ajouter des propriétés à tous les tableaux.</dd> +</dl> + +<h2 id="Méthodes">Méthodes</h2> + +<dl> + <dt>{{jsxref("Array.from()")}}</dt> + <dd>Cette méthode permet de créer une nouvelle instance d'<code>Array</code> à partir d'un objet semblable à un tableau ou d'un itérable.</dd> + <dt>{{jsxref("Array.isArray()")}}</dt> + <dd>Cette méthode renvoie <code>true</code> si la variable est un tableau, <code>false</code> sinon.</dd> + <dt>{{jsxref("Array.of()")}}</dt> + <dd>Cette méthode permet de créer une nouvelle instance d'<code>Array</code> à partir d'un nombre variable d'arguments (peu importe la quantité ou le type des arguments utilisés).</dd> +</dl> + +<h2 id="Instances_dArray">Instances d'<code>Array</code></h2> + +<p>Toutes les instances d'<code>Array</code> héritent de {{jsxref("Array.prototype")}}. Le prototype du constructeur <code>Array</code> peut être modifié afin d'affecter l'ensemble des instances grâce à l'héritage.</p> + +<h3 id="Les_propriétés">Les propriétés</h3> + +<div>{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/prototype', 'Propriétés')}}</div> + +<h3 id="Les_méthodes">Les méthodes</h3> + +<h4 id="Les_mutateurs">Les mutateurs</h4> + +<div>{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/prototype', 'Mutateurs')}}</div> + +<h4 id="Les_accesseurs">Les accesseurs</h4> + +<div>{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/prototype', 'Accesseurs')}}</div> + +<h4 id="Les_méthodes_ditération">Les méthodes d'itération</h4> + +<div>{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/prototype', 'Méthodes_itératives')}}</div> + +<h2 id="Les_méthodes_génériques_de_manipulation_de_tableaux">Les méthodes génériques de manipulation de tableaux</h2> + +<div class="warning"> +<p><strong>Attention :</strong> 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 <a href="https://github.com/plusdude/array-generics">un <em>shim</em> disponible sur GitHub</a>.</p> +</div> + +<p>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 <code><var>str</var></code> est bien une lettre comprise entre 'a' et 'z', on pourra utiliser :</p> + +<pre class="brush: js notranslate">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!"); +} +</pre> + +<p>Cette notation étant plutôt verbeuse, une notation raccourcie a été introduite avec JavaScript 1.6 :</p> + +<pre class="brush: js notranslate">if (Array.every(str,estUneLettre)) { + console.log("La chaîne '" + str + "' ne contient que des lettres entre a et z !"); +} +</pre> + +<p>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")}}.</p> + +<p>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) :</p> + +<pre class="brush: js notranslate">if (Array.from(str).every(estUneLettre)) { + console.log("La chaîne '" + str + "' contient uniquement des lettres !"); +}</pre> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Créer_un_tableau">Créer un tableau</h3> + +<p>Dans l'exemple suivant, on crée un tableau <code>tableauMsg</code>, d'une longueur nulle. Ensuite, on lui affecte des valeurs pour <code>tableauMsg[0]</code> et <code>tableauMsg[99]</code>, ce qui aura pour effet de modifier la propriété <code>length</code> (qui vaudra alors 100).</p> + +<pre class="brush: js notranslate">var tableauMsg = []; +tableauMsg[0] = 'Coucou'; +tableauMsg[99] = 'monde'; + +if (tableauMsg.length === 100) { + console.log('La longueur du tableau vaut 100.'); +} +</pre> + +<h3 id="Créer_un_tableau_à_deux_dimensions">Créer un tableau à deux dimensions</h3> + +<p>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.</p> + +<pre class="brush: js notranslate">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')); +</pre> + +<p>Voici le résultat affiché :</p> + +<pre class="eval notranslate">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 +</pre> + +<h3 id="Utiliser_un_tableau_pour_tabuler_un_ensemble_de_valeurs">Utiliser un tableau pour tabuler un ensemble de valeurs</h3> + +<pre class="brush: js line-numbers language-js notranslate"><code class="language-js">values <span class="operator token">=</span> <span class="punctuation token">[</span><span class="punctuation token">]</span><span class="punctuation token">;</span> +<span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> x <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> x <span class="operator token"><</span> <span class="number token">10</span><span class="punctuation token">;</span> x<span class="operator token">++</span><span class="punctuation token">)</span><span class="punctuation token">{</span> + values<span class="punctuation token">.</span><span class="function token">push</span><span class="punctuation token">(</span><span class="punctuation token">[</span> + <span class="number token">2</span> <span class="operator token">*</span><span class="operator token">*</span> x<span class="punctuation token">,</span> + <span class="number token">2</span> <span class="operator token">*</span> x <span class="operator token">*</span><span class="operator token">*</span> <span class="number token">2</span> + <span class="punctuation token">]</span><span class="punctuation token">)</span> +<span class="punctuation token">}</span><span class="punctuation token">;</span> +console<span class="punctuation token">.</span><span class="function token">table</span><span class="punctuation token">(</span>values<span class="punctuation token">)</span></code></pre> + +<p>Résulte en</p> + +<pre class="eval line-numbers language-html notranslate"><code class="language-html">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</code></pre> + +<p>(Le première colonne est l'index)</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Définition initiale</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4', 'Array')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>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")}}</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array-objects', 'Array')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>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")}}</td> + </tr> + <tr> + <td>{{SpecName('ES7', '#sec-array-objects', 'Array')}}</td> + <td>{{Spec2('ES7')}}</td> + <td>Ajout de la méthode {{jsxref("Array.prototype.includes()")}}.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array-objects', 'Array')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("javascript.builtins.Array")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/JavaScript/Guide/Utiliser_les_objets#Indexer_les_propri.C3.A9t.C3.A9s_d'un_objet">Guide JavaScript : indexer les propriétés d'un objet</a></li> + <li><a href="/fr/docs/Web/JavaScript/Guide/Objets_élémentaires_JavaScript#Les_tableaux_.3A_objet_Array">Guide JavaScript : Les objets natifs : l'objet <code>Array</code></a></li> + <li><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Compréhensions_de_tableau">Les compréhensions de tableau</a></li> + <li><a href="https://github.com/plusdude/array-generics">Émulation pour les méthodes génériques et autres fonctionnalités ECMAScript 5 pour les tableaux</a> (en anglais)</li> + <li><a href="/fr/docs/Web/JavaScript/Tableaux_typés">Les tableaux typés</a></li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p>La méthode <code><strong>indexOf()</strong></code> 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.</p> + +<div class="note"> +<p><strong>Note :</strong> pour la méthode associée aux chaînes de caractères, voir la page {{jsxref("String.prototype.indexOf()")}}.</p> +</div> + +<div>{{EmbedInteractiveExample("pages/js/array-indexof.html")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><var>arr</var>.indexOf(<var>élémentRecherché</var>) +<var>arr</var>.indexOf(<var>élémentRecherché</var>, indiceDébut) +</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>élémentRecherché</code></dt> + <dd>L'élément qu'on cherche dans le tableau</dd> + <dt><code>indiceDébut</code> {{optional_inline}}</dt> + <dd>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.</dd> +</dl> + +<h3 id="Valeur_de_retour">Valeur de retour</h3> + +<p>Le premier index de l'élément dans le tableau ou -1 si la valeur n'est pas trouvée.</p> + +<h2 id="Description">Description</h2> + +<p><code>indexOf</code> compare <code>élémentRecherché</code> aux éléments contenus dans le tableau en utilisant une <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison#.C3.89galit.C3.A9_stricte_(.3D.3D.3D)">égalité stricte</a> (la même méthode utilisée par l'opérateur <code>===</code>).</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Utiliser_indexOf()">Utiliser <code>indexOf()</code></h3> + +<p>Dans l'exemple qui suit, on peut utiliser <code>indexOf</code> afin de trouver l'emplacement d'un élément dans un tableau.</p> + +<pre class="brush: js">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</pre> + +<h3 id="Trouver_toutes_les_occurences_d'un_élément">Trouver toutes les occurences d'un élément</h3> + +<p>Dans l'exemple qui suit, on utilise <code>indexOf()</code> 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.</p> + +<pre class="brush: js">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]</pre> + +<h3 id="Trouver_si_un_élément_existe_et_l'ajouter_dans_le_tableau_si_ce_n'est_pas_le_cas">Trouver si un élément existe et l'ajouter dans le tableau si ce n'est pas le cas</h3> + +<pre class="brush: js">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.</pre> + +<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2> + +<p><code>indexOf</code> 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 <code>indexOf</code> 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 :</p> + +<pre class="brush: js">// 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; + }; +}</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.14', 'Array.prototype.indexOf')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Définition initiale. Implémentée avec JavaScript 1.6.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.indexof', 'Array.prototype.indexOf')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.indexof', 'Array.prototype.indexOf')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div> +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> + +<p>{{Compat("javascript.builtins.Array.indexOf")}}</p> +</div> + +<h2 id="Notes_de_compatibilité">Notes de compatibilité</h2> + +<ul> + <li>À partir de Firefox 47 ({{geckoRelease(47)}}), cette méthode ne renverra plus <code>-0</code>. Ainsi, <code>[0].indexOf(0, -0)</code> renverra toujours <code>+0</code> (cf. {{bug(1242043)}}).</li> +</ul> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Array.prototype.lastIndexOf()")}}</li> + <li>{{jsxref("TypedArray.prototype.indexOf()")}}</li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p>La méthode <code><strong>Array.isArray()</strong></code> permet de déterminer si l'objet passé en argument est un objet {{jsxref("Array")}}, elle renvoie <code>true</code> si le paramètre passé à la fonction est de type <code>Array</code> et <code>false</code> dans le cas contraire.</p> + +<pre class="brush: js">Array.isArray([1, 2, 3]); // true +Array.isArray({toto: 123}); // false +Array.isArray("tototruc"); // false +Array.isArray(undefined); // false +</pre> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">Array.isArray(<var>value</var>)</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>value</code></dt> + <dd>La valeur dont on veut vérifier le type</dd> +</dl> + +<h3 id="Valeur_de_retour">Valeur de retour</h3> + +<p><code>true</code> si la valeur est un tableau (une instance de {{jsxref("Array")}}), <code>false</code> sinon.</p> + +<h2 id="Description">Description</h2> + +<p>Si l'objet indiqué en paramètre est un {{jsxref("Array")}}, la méthode renvoie <code>true</code>, sinon, elle renvoie <code>false</code>.</p> + +<p>Voir aussi : « <a href="http://web.mit.edu/jwalden/www/isArray.html">Determining with absolute accuracy whether or not a JavaScript object is an array</a> » (en anglais) pour avoir plus de détails. Si on passe un objet {{jsxref("TypedArray")}} en argument, ce sera toujours la valeur <code>false</code> qui sera renvoyée.</p> + +<h2 id="Exemples">Exemples</h2> + +<pre class="brush: js">// 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 }); +</pre> + +<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2> + +<p>Exécuter ce code avant tout les autres aboutira à la création de la méthode <code>Array.isArray()</code>si elle n'est pas nativement prise en charge par le navigateur.</p> + +<pre class="brush: js">if(!Array.isArray) { + Array.isArray = function(arg) { + return Object.prototype.toString.call(arg) === '[object Array]'; + }; +}</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.3.2', 'Array.isArray')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Définition initiale. Implémentée avec JavaScript 1.8.5.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.isarray', 'Array.isArray')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.isarray', 'Array.isArray')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div> +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> + +<p>{{Compat("javascript.builtins.Array.isArray")}}</p> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Array")}}</li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p>La méthode <code><strong>join()</strong></code> crée et renvoie une nouvelle chaîne de caractères en concaténant tous les éléments d'un tableau (ou d'<a href="/fr/docs/Web/JavaScript/Guide/Collections_indexées#Manipuler_des_objets_semblables_à_des_tableaux">un objet semblable à un tableau</a>). La concaténation utilise la virgule ou une autre chaîne, fournie en argument, comme séparateur.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-join.html")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><var>arr</var>.join() +<var>arr</var>.join(<var>séparateur</var>) +</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>séparateur</code> {{optional_inline}}</dt> + <dd>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 <code>","</code>.</dd> +</dl> + +<h3 id="Valeur_de_retour">Valeur de retour</h3> + +<p>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 (<code>arr.length</code>) vaut <code>0</code>, 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.</p> + +<h2 id="Description">Description</h2> + +<p>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 <code>undefined</code> ou <code>null</code>, il sera converti en la chaîne vide. Cette fonction est générique et peut donc être utilisée avec <a href="/fr/docs/Web/JavaScript/Guide/Collections_indexées#Manipuler_des_objets_semblables_à_des_tableaux">les objets semblables aux tableaux</a>.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Fusionner_un_tableau_de_quatre_façons_différentes">Fusionner un tableau de quatre façons différentes</h3> + +<p>L'exemple suivant crée un tableau, <code>a</code>, 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.</p> + +<pre class="brush: js">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"</pre> + +<h3 id="Fusionner_un_objet_semblable_à_un_tableau">Fusionner un objet semblable à un tableau</h3> + +<p>Dans l'exemple suivant, on effectue la fusion sur un objet semblable à un tableau (<code><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/arguments">arguments</a></code>) en appelant {{jsxref("Function.prototype.call")}} sur <code>Array.prototype.join</code>.</p> + +<pre class="brush: js">function f(a, b, c) { + var s = Array.prototype.join.call(arguments); + console.log(s); +} +f(1, 'a', true); // '1,a,true' +</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Définition initiale. Implémentée avec JavaScript 1.1.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.5', 'Array.prototype.join')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.join', 'Array.prototype.join')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.join', 'Array.prototype.join')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> + +<p>{{Compat("javascript.builtins.Array.join")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("String.prototype.split()")}}</li> + <li>{{jsxref("Array.prototype.toString()")}}</li> + <li>{{jsxref("TypedArray.prototype.join()")}}</li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p>La méthode <code><strong>keys()</strong></code> renvoie un nouvel objet <code><strong>Array Iterator</strong></code> qui contient les clefs pour chaque indice du tableau.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-keys.html")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><var>arr</var>.keys()</pre> + +<h3 id="Valeur_de_retour">Valeur de retour</h3> + +<p>Un nouvel objet itérateur pour {{jsxref("Array")}}.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Utilisation_simple">Utilisation simple</h3> + +<pre class="brush:js">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 } +</pre> + +<h3 id="Un_itérateur_de_clés_prend_en_compte_les_trous">Un itérateur de clés prend en compte les trous</h3> + +<pre class="brush: js">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]</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-array.prototype.keys', 'Array.prototype.keys')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Définition initiale.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.keys', 'Array.prototype.keys')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div> +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> + +<p>{{Compat("javascript.builtins.Array.keys")}}</p> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Array.prototype.entries()")}}</li> + <li>{{jsxref("Array.prototype.values()")}}</li> + <li><a href="/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration">Les protocoles d'itération</a></li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p>La méthode <code><strong>lastIndexOf()</strong></code> 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 <code>indexDébut</code>.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-lastindexof.html")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><var>arr</var>.lastIndexOf(<var>élémentRecherché</var>) +<var>arr</var>.lastIndexOf(<var>élémentRecherché</var>, <var>indexDébut</var>) +</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>élémentRecherché</code></dt> + <dd>L'élément à qu'on cherche dans le tableau.</dd> + <dt><code>indexDébut</code> {{optional_inline}}</dt> + <dd>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 <code>arr.length - 1</code>), 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.</dd> +</dl> + +<h3 id="Valeur_de_retour">Valeur de retour</h3> + +<p>Le dernier index auquel on trouve la valeur dans le tableau, -1 si elle n'est pas trouvée.</p> + +<h2 id="Description">Description</h2> + +<p><code>lastIndexOf</code> compare <code>élémentRecherché</code> aux éléments contenus dans le tableau en utilisant une <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison#.C3.89galit.C3.A9_stricte_(.3D.3D.3D)">égalité stricte</a> (l'égalité utilisée par l'opérateur ===).</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Utiliser_lastIndexOf">Utiliser <code>lastIndexOf</code></h3> + +<p>Dans l'exemple suivant, on utilise <code>lastIndexOf</code> afin de situer une valeur dans un tableau.</p> + +<pre class="brush: js">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</pre> + +<h3 id="Trouver_toutes_les_occurrences_dun_élément">Trouver toutes les occurrences d'un élément</h3> + +<p>L’exemple suivant utilise <code>lastIndexOf</code> pour trouver tous les index (<code>indices</code>) 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.</p> + +<pre class="brush: js">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]</pre> + +<p>Remarquez que nous avons dû traiter le cas de <code>idx === 0</code> séparément (<code>idx > 0</code>) parce que l’élément sera toujours trouvé, indépendamment du paramètre de <code>fromIndex</code>, si c’est le premier élément du tableau. C’est une différence avec la méthode {{jsxref("Array.prototype.indexOf", "indexOf")}}.</p> + + +<h2 id="Prothèse_démulation_polyfill">Prothèse d'émulation (<em>polyfill</em>)</h2> + +<p><code>lastIndexOf</code> 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 <code>lastIndexOf</code> 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.</p> + +<pre class="brush: js">// 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; + }; +}</pre> + +<p>On notera que cette implémentation vise une compatibilité absolue de <code>lastIndexOf</code> 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 <code>from</code> avec un code beaucoup moins compliqué.</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.15', 'Array.prototype.lastIndexOf')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Définition initiale. Implémentée avec JavaScript 1.6.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.lastindexof', 'Array.prototype.lastIndexOf')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.lastindexof', 'Array.prototype.lastIndexOf')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div> +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> + +<p>{{Compat("javascript.builtins.Array.lastIndexOf")}}</p> +</div> + +<h2 id="Notes_de_compatibilité">Notes de compatibilité</h2> + +<ul> + <li>À partir de Firefox 47 ({{geckoRelease(47)}}), cette méthode ne renverra plus <code>-0</code>. Ainsi, <code>[0].lastIndexOf(0, -0)</code> renverra toujours <code>+0</code> (cf. {{bug(1242043)}}).</li> +</ul> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Array.prototype.indexOf()")}}</li> + <li>{{jsxref("TypedArray.prototype.lastIndexOf()")}}</li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p>La propriété <code><strong>length</strong></code> (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.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-length.html")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<h2 id="Description">Description</h2> + +<p>La valeur de la propriété <code>length</code> est un entier de signe positif dont la valeur est inférieure à 2 à la puissance 32 (2<sup>32</sup>).</p> + +<pre class="brush: js notranslate">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 +</pre> + +<p>Vous pouvez modifier la propriété <code>length</code> d'un tableau à loisir pour le tronquer. Quand vous étendez un tableau en modifiant la valeur de sa propriété <code>length</code>, 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é <code>length</code> 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é <code>length</code> d'un tableau ne renseigne en rien sur le nombre de valeurs définies dans le tableau. Voir aussi <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array#Relation_entre_length_et_les_propri.C3.A9t.C3.A9s_num.C3.A9riques">la relation entre longueur et propriétés numériques</a>.</p> + +<pre class="brush: js notranslate">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 +</pre> + +<p>{{js_property_attributes(1,0,0)}}</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Renvoyer_la_longueur_dun_tableau">Renvoyer la longueur d'un tableau</h3> + +<pre class="brush: js notranslate">var items = ["chaise", "bureau", "table", "sac"]; +items.length; // 4 +</pre> + +<h3 id="Parcourir_un_tableau">Parcourir un tableau</h3> + +<p>Dans l'exemple suivant, on itère sur le tableau <code>nombres</code> en utilisant la propriété <code>length</code> afin de connaître son nombre d'élément. La valeur de chaque élément est ensuite multipliée par deux :</p> + +<pre class="brush:js notranslate">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]; +</pre> + +<h3 id="Tronquer_un_tableau">Tronquer un tableau</h3> + +<p>L'exemple suivant raccourcit le tableau <code>etatsUS</code> à 50 si sa longueur actuelle est supérieure à 50.</p> + +<pre class="brush:js notranslate">if (etatsUS.length > 50) { + etatsUS.length = 50; +}</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Définition initiale.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.5.2', 'Array.length')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-properties-of-array-instances-length', 'Array.length')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-properties-of-array-instances-length', 'Array.length')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div> +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> + +<p>{{Compat("javascript.builtins.Array.length")}}</p> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Array")}}</li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p>La méthode <code><strong>map()</strong></code> crée un nouveau tableau avec les résultats de l'appel d'une fonction fournie sur chaque élément du tableau appelant.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-map.html")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><var>var nouveauTableau = arr</var>.map(<var>callback</var> [, <var>thisArg</var>])</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>La fonction qui est utilisée pour créer un élément du nouveau tableau. Elle utilise trois arguments : + <dl> + <dt><code>valeurCourante</code></dt> + <dd>La valeur de l'élément du tableau à traiter.</dd> + <dt><code>index</code>{{optional_inline}}</dt> + <dd>L'index de l'élément qui est traité par la fonction.</dd> + <dt><code>tableau</code>{{optional_inline}}</dt> + <dd>Le tableau sur lequel on a appelé la méthode <code>map</code>.</dd> + </dl> + </dd> + <dt><code>thisArg</code> {{optional_inline}}</dt> + <dd>La valeur à utiliser pour <code>this</code> lors de l'exécution de <code>callback</code>. La valeur par défaut est l'objet global de l'environnement (<code>Window</code> pour un navigateur).</dd> +</dl> + +<h3 id="Valeur_de_retour">Valeur de retour</h3> + +<p>Un nouveau tableau composé des images de la fonction de rappel.</p> + +<h2 id="Description">Description</h2> + +<p>Lorsqu'on utilise <code>map</code>, la fonction <code>callback</code> 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 <code>callback</code> 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.</p> + +<p><code>callback</code> 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.</p> + +<div class="warning"> +<p><strong>Attention !</strong> <code>map()</code> construit un nouveau tableau. Si on utilise cette méthode sans utiliser le résultat, mieux vaudra utiliser <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/forEach">forEach</a></code> ou <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/for...of">for...of</a></code>. Pour mieux décider si <code>map()</code>est adéquat, regardez si vous utilisez la valeur de retour et/ou si vous renvoyez une valeur avec la fonction <code>callback</code> : si ce n'est pas le cas, il ne faut pas utiliser <code>map()</code>.</p> +</div> + +<p>Si le paramètre <code>thisArg</code> est utilisé, il sera utilisé en tant que <code>this</code> par la fonction <code>callback</code> lorsqu'elle sera appelée. S'il n'est pas utilisé, ce sera la valeur {{jsxref("undefined")}} qui sera utilisée pour définir <code>this</code>. La valeur <code>this</code> finalement prise en compte par la fonction <code>callback</code> est définie <a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_this">selon les règles usuelles qui déterminent la valeur <code>this</code> observée par une fonction</a>.</p> + +<p><code>map</code> ne modifie pas le tableau sur lequel elle est appelée (bien que la fonction <code>callback</code>, si elle est appelée, puisse modifier le tableau).</p> + +<p>La liste des éléments à traiter lors de l'opération <code>map</code> est définie avant le premier appel à <code>callback</code>. Les éléments qui sont ajoutés au tableau après que l'appel à <code>map</code> ait été initié ne seront pas traités par la fonction <code>callback</code>. Si des éléments ont été modifiés, la valeur utilisée par la fonction <code>callback</code> sera celle au moment où <code>map</code> est utilisée. Les éléments qui sont supprimés ne sont pas traités. De la même façon, si on applique <code>map</code> sur un tableau dont certains éléments sont indéfinis, le résultat possèdera également les mêmes éléments indéfinis.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Créer_un_tableau_des_racines_carrées_d'un_tableau_de_nombre">Créer un tableau des racines carrées d'un tableau de nombre</h3> + +<p>Dans l'exemple suivant, on crée un tableau composé des racines carrées des éléments d'un premier tableau :</p> + +<pre class="brush: js">var nombres = [1, 4, 9]; +var racines = nombres.map(Math.sqrt); +// racines vaut désormais [1, 2, 3] +// nombres vaut toujours [1, 4, 9] +</pre> + +<h3 id="Créer_un_tableau_de_nombres_avec_une_fonction_à_un_argument">Créer un tableau de nombres avec une fonction à un argument</h3> + +<p>Ici, on illustre le fonctionnement de <code>map</code> avec une fonction à un argument. Cet argument sera automatiquement remplacé par chaque élément du tableau au fur et à mesure que <code>map</code> parcourt le tableau :</p> + +<pre class="brush: js">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] +</pre> + +<h3 id="Utiliser_map_pour_changer_le_format_d'objets_dans_un_tableau">Utiliser <code>map</code> pour changer le format d'objets dans un tableau</h3> + +<p>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 :</p> + +<pre class="brush: js">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} +// ] +</pre> + +<h3 id="Utiliser_map_de_façon_générique">Utiliser <code>map</code> de façon générique</h3> + +<p>Dans cet exemple, on voit comment utiliser la fonction <code>map</code> sur une chaîne de caractères pour obtenir un tableau contenant les codes ASCII des valeurs encodées :</p> + +<pre class="brush: js">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] +</pre> + +<h3 id="Utiliser_map_avec_querySelectorAll">Utiliser <code>map</code> avec <code>querySelectorAll</code></h3> + +<p>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 à <code>querySelectorAll</code> :</p> + +<pre class="brush: js">var elems = document.querySelectorAll('select option:checked'); +var values = Array.prototype.map.call(elems, function(obj) { + return obj.value; +}); +</pre> + +<p>On aurait également pu utiliser la méthode {{jsxref("Array.from()")}} qui permet de produire un tableau à partir d'un objet itérable.</p> + +<h3 id="Un_résultat_inattendu">Un résultat inattendu</h3> + +<p><a href="https://www.wirfs-brock.com/allen/posts/166">Exemple inspiré par ce billet</a> (en anglais)</p> + +<p>Il est fréquent d'utiliser la fonction <code>callback</code> 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 :</p> + +<pre class="brush: js">// 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] +</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.19', 'Array.prototype.map')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Définition initiale. Implémentée avec JavaScript 1.6.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.map', 'Array.prototype.map')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.map', 'Array.prototype.map')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div> +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> + +<p>{{Compat("javascript.builtins.Array.map")}}</p> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Array.prototype.forEach()")}}</li> + <li>L'objet {{jsxref("Map")}}</li> + <li>{{jsxref("Array.from()")}}</li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p>La methode <code><strong>Array.of()</strong></code> permet de créer une nouvelle instance d'objet <code>Array</code> à partir d'un nombre variable d'arguments, quels que soient leur nombre ou leur type.</p> + +<p>La différence entre <code><strong>Array.of()</strong></code> et le constructeur <code><strong>Array</strong></code> se situe dans la gestion de d'arguments entiers : <strong><code>Array.of(7)</code></strong> crée un tableau avec un seul élément, 7, tandis que <strong><code>Array(7)</code></strong> produit un tableau avec 7 éléments vides (à ne pas confondre avec des éléments qui auraient explicitement la valeur <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/undefined">undefined</a></code>).</p> + +<pre class="brush: js">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] +</pre> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">Array.of(<em>element0[, element1[, ...[, elementN]]]</em>) +</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><em><code>element0</code>, <code>element1</code>, ..., <code>elementN</code></em></dt> + <dd>Les éléments avec lesquels on souhaite construire le nouveau tableau.</dd> +</dl> + +<h3 id="Valeur_de_retour">Valeur de retour</h3> + +<p>Une nouvelle instance de {{jsxref("Array")}}.</p> + +<h2 id="Description">Description</h2> + +<p>Cette fonction fait partie du standard ECMAScript 2015. Pour plus d'informations, voir les pages sur <a href="https://gist.github.com/rwaldron/1074126">la proposition pour <code>Array.of</code> et <code>Array.from</code></a> ainsi que la page sur le <a href="https://gist.github.com/rwaldron/3186576">fragment d'émulation pour <code>Array.of</code></a>.</p> + +<pre class="brush: js">Array.of(7); // [7] +Array.of(1, 2, 3); // [1, 2, 3] + +Array(7); // [ , , , , , , ] +Array(1, 2, 3); // [1, 2, 3] +</pre> + +<h2 id="Exemples">Exemples</h2> + +<pre class="brush: js">Array.of(1); // [1] +Array.of(1, 2, 3); // [1, 2, 3] +Array.of(undefined); // [undefined] +</pre> + +<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2> + +<p>Exécuter ce code avant tout autre code permettra de créer la méthode <strong><code>Array.of()</code></strong> si elle n'est pas prise en charge nativement.</p> + +<pre class="brush: js">if (!Array.of) { + Array.of = function() { + return Array.prototype.slice.call(arguments); + }; +}</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-array.of', 'Array.of')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Définition initiale.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.of', 'Array.of')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div> +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> + +<p>{{Compat("javascript.builtins.Array.of")}}</p> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Array", "Array")}}</li> + <li>{{jsxref("Array/from", "Array.from")}}</li> + <li>{{jsxref("TypedArray.of()")}}</li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p>La méthode <code><strong>pop()</strong></code> supprime le <strong>dernier</strong> élément d'un tableau et retourne cet élément. Cette méthode modifie la longueur du tableau.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-pop.html")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><var>arr</var>.pop()</pre> + +<h3 id="Valeur_de_retour">Valeur de retour</h3> + +<p>L'élément qui a été retiré du tableau. Si le tableau est vide, elle renvoie {{jsxref("undefined")}}.</p> + +<h2 id="Description">Description</h2> + +<p>La méthode <code>pop()</code> supprime le dernier élément d'un tableau et retourne cette valeur.</p> + +<p><code>pop()</code> 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é <code>length</code> reflétant la fin d'une série de propriétés consécutives numérotées peuvent se comporter bizarrement.</p> + +<p>Si vous appelez <code>pop()</code> sur un tableau vide, il renverra la valeur {{jsxref("undefined")}}.</p> + +<div class="blockIndicator note"> +<p><strong>Note :</strong> La méthode {{jsxref("Array.prototype.shift()")}} possède un comportement analogue mais retire le <em>premier</em> élément du tableau.</p> +</div> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Supprimer_le_dernier_élément_d'un_tableau">Supprimer le dernier élément d'un tableau</h3> + +<p>Le code suivant crée le tableau <code>mesPoissons</code> qui contient quatre éléments puis supprime le dernier élément.</p> + +<pre class="brush:js">var mesPoissons = ["angel", "clown", "mandarin", "sturgeon"]; + +var popped = mesPoissons.pop(); + +console.table(mesPoissons); // angel, clown, madarin +console.log(popped); // sturgeon</pre> + +<h3 id="Utiliser_apply()_ou_call()_sur_les_objets_semblables_aux_tableaux">Utiliser <code>apply()</code> ou <code>call()</code> sur les objets semblables aux tableaux</h3> + +<p>Le code suivant crée un objet <code>mesPoissons</code> semblable à un tableau, qui contient 4 propriétés indexées avec des nombres et une propriété <code>length</code>. On utilise la méthode {{jsxref("Function.call()")}} pour invoquer <code>pop()</code> sur cet objet :</p> + +<pre class="brush: js">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' +</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Définition initiale. Implémentée avec JavaScript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.6', 'Array.prototype.pop')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.pop', 'Array.prototype.pop')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.pop', 'Array.prototype.pop')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div> +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> + +<p>{{Compat("javascript.builtins.Array.pop")}}</p> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Array.prototype.push()")}}</li> + <li>{{jsxref("Array.prototype.shift()")}}</li> + <li>{{jsxref("Array.prototype.unshift()")}}</li> + <li>{{jsxref("Array.prototype.splice()")}}</li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p>La méthode <code><strong>push()</strong></code> ajoute un ou plusieurs éléments à la fin d'un tableau et retourne la nouvelle taille du tableau.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-push.html")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><var>arr</var>.push(<var>élément1</var>, ..., <var>élémentN</var>)</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>élément1, ...,élémentN</code></dt> + <dd>Les éléments à ajouter à la fin du tableau.</dd> +</dl> + +<h3 id="Valeur_de_retour">Valeur de retour</h3> + +<p>La nouvelle valeur de la propriété {{jsxref("Array.length", "length")}} de l'objet sur lequel la méthode a été appelée.</p> + +<h2 id="Description">Description</h2> + +<p>La méthode <code>push</code> permet d'ajouter des valeurs à un tableau.</p> + +<p><code>push</code> 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.</p> + +<p>La méthode <code>push</code> se base sur la propriété <code>length</code> pour déterminer à partir de quel index les valeurs données doivent être insérées. Si la propriété <code>length</code> ne peut pas être convertie en nombre, l'index utilisé est 0. Si la propriété <code>length</code> n'est pas définie, elle est alors créée.</p> + +<p>Bien que <code>push</code> 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 <code>arguments</code> car ils sont immuables.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Ajouter_des_éléments_à_un_tableau">Ajouter des éléments à un tableau</h3> + +<p>Le code suivant crée un tableau <code>sports</code> contenant à sa création deux éléments, auxquels sont ajoutés deux nouveaux éléments. La variable <code>total</code> contient la nouvelle taille du tableau.</p> + +<pre class="brush: js">var sports = ["plongée", "baseball"]; +var total = sports.push("football", "tennis"); + +console.log(sports); // ["plongée", "baseball", "football", "tennis"] +console.log(total); // 4 +</pre> + +<h3 id="Fusionner_deux_tableaux">Fusionner deux tableaux</h3> + +<p>Dans l'exemple qui suit, on utilise la méthode {{jsxref("Function.apply()")}} pour ajouter les différents éléments d'un second tableau</p> + +<pre class="brush: js">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']</pre> + +<div class="note"> +<p><strong>Note :</strong> 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.</p> +</div> + +<h3 id="Utiliser_un_objet_comme_on_utiliserait_un_tableau">Utiliser un objet comme on utiliserait un tableau</h3> + +<p>Comme nous l'avons vu auparavant, <code>push</code> est une méthode générique et nous pouvons donc utiliser <code>Array.prototype.push</code> 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 <code>call</code> sur <code>Array.prototype.push</code> :</p> + +<pre class="brush: js">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 +</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Définition initiale. Implémentée avec JavaScript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.7', 'Array.prototype.push')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.push', 'Array.prototype.push')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.push', 'Array.prototype.push')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div> +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> + +<p>{{Compat("javascript.builtins.Array.push")}}</p> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Array.prototype.pop()")}}</li> + <li>{{jsxref("Array.prototype.shift()")}}</li> + <li>{{jsxref("Array.prototype.unshift()")}}</li> + <li>{{jsxref("Array.prototype.concat()")}}</li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p>La méthode <code><strong>reduce()</strong></code> 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.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-reduce.html")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><var>arr</var>.reduce(<var>callback</var>) +<var>arr</var>.reduce(<var>callback</var>, valeurInitiale)</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>La fonction à exécuter sur chaque valeur de la liste (sauf le premier si aucune <code>valeurInitiale</code> n'est fournie), elle prend quatre arguments en entrée : + <dl> + <dt><code>accumulateur</code></dt> + <dd>La valeur précédemment retournée par le dernier appel du callback, ou <code>valeurInitiale</code>, si elle est fournie (voir ci-après) (c'est la valeur « accumulée » au fur et à mesure des appels</dd> + <dt><code>valeurCourante</code></dt> + <dd>La valeur de l'élément courant actuellement manipulé dans le tableau.</dd> + <dt><code>index</code>{{optional_inline}}</dt> + <dd>L'index de l'élément courant actuellement manipulé dans le tableau.</dd> + <dt><code>array</code>{{optional_inline}}</dt> + <dd>Le tableau sur lequel on a appelé la méthode <code>reduce()</code>.</dd> + </dl> + </dd> + <dt><code>valeurInitiale</code>{{optional_inline}}</dt> + <dd>Une valeur utilisée comme premier argument lors du premier appel de la fonction <code>callback</code>. 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 <code>reduce()</code> sur un tableau vide sans fournir de valeur initiale, on aura une erreur.</dd> +</dl> + +<h3 id="Valeur_de_retour">Valeur de retour</h3> + +<p>La valeur obtenue grâce à la fonction de réduction.</p> + +<h2 id="Description">Description</h2> + +<p><code>reduce()</code> exécute la fonction <code>callback</code> une fois pour chaque élément présent dans le tableau et ignore les éléments vides du tableau. La fonction <code>callback</code> utilise quatre arguments :</p> + +<ol> + <li>L'accumulateur (la valeur retournée par le précédent appel de la fonction <code>callback</code>), ou la valeur initiale s'il sagit du premier appel ;</li> + <li>la valeur de l'élément courant ;</li> + <li>l'index de l'élément courant ;</li> + <li>le tableau parcouru par la méthode.</li> +</ol> + +<p>La première fois que la fonction <code>callback</code> est appelée, <code>valeurInitiale</code> et <code>valeurCourante</code> peuvent correspondre à un ou deux éléments. Si <code>valeurInitiale</code> est fournie dans l'appel de <code>reduce()</code>, alors <code>accumulateur</code> sera égale à <code>valeurInitiale</code> et <code>valeurCourante</code> sera égale à la première valeur de la liste. Si <code>valeurInitiale</code> n'est pas fournie, alors <code>accumulateur</code> sera égale à la première valeur de la liste, et <code>valeurCourante</code> sera alors égale à la seconde.</p> + +<p>Autrement dit, si <code>valeurInitiale</code> n'est pas fournie, <code>reduce</code> 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 <code>valeurInitiale</code>.</p> + +<p>En considérant le code suivant :</p> + +<pre class="brush:js">[0, 1, 2, 3, 4].reduce(function(accumulateur, valeurCourante, index, array){ + return accumulateur + valeurCourante; +}); +</pre> + +<p>La fonction <code>callback</code> sera appelée quatre fois, avec les arguments et les valeurs de retour de chaque appel suivant :</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col"></th> + <th scope="col"><code>accumulateur</code></th> + <th scope="col"><code>valeurCourante</code></th> + <th scope="col"><code>index</code></th> + <th scope="col"><code>array</code></th> + <th scope="col">valeur retournée</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">premier appel</th> + <td><code>0</code></td> + <td><code>1</code></td> + <td><code>1</code></td> + <td><code>[0,1,2,3,4]</code></td> + <td><code>1</code></td> + </tr> + <tr> + <th scope="row">deuxième appel</th> + <td><code>1</code></td> + <td><code>2</code></td> + <td><code>2</code></td> + <td><code>[0,1,2,3,4]</code></td> + <td><code>3</code></td> + </tr> + <tr> + <th scope="row">troisième appel</th> + <td><code>3</code></td> + <td><code>3</code></td> + <td><code>3</code></td> + <td><code>[0,1,2,3,4]</code></td> + <td><code>6</code></td> + </tr> + <tr> + <th scope="row">quatrième appel</th> + <td><code>6</code></td> + <td><code>4</code></td> + <td><code>4</code></td> + <td><code>[0,1,2,3,4]</code></td> + <td><code>10</code></td> + </tr> + </tbody> +</table> + +<p>La valeur retournée par <code>reduce()</code> sera alors celle du dernier appel de la callback (ici <code>10</code>).</p> + +<p>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 :</p> + +<pre class="brush: js">[0, 1, 2, 3, 4].reduce( + (accumulateur, valeurCourante) => accumulateur + valeurCourante; +);</pre> + +<p>Si on fournit une valeur initiale comme second argument à l'appel de <code>reduce()</code>, le résultat sera alors le suivant :</p> + +<pre class="brush:js">[0, 1, 2, 3, 4].reduce(function(accumulateur, valeurCourante, index, array){ + return accumulateur + valeurCourante; +}, 10); +</pre> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col"></th> + <th scope="col"><code>accumulateur</code></th> + <th scope="col"><code>valeurCourante</code></th> + <th scope="col"><code>index</code></th> + <th scope="col"><code>array</code></th> + <th scope="col">valeur retournée</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">premier appel</th> + <td><code>10</code></td> + <td><code>0</code></td> + <td><code>0</code></td> + <td><code>[0,1,2,3,4]</code></td> + <td><code>10</code></td> + </tr> + <tr> + <th scope="row">deuxième appel</th> + <td><code>10</code></td> + <td><code>1</code></td> + <td><code>1</code></td> + <td><code>[0,1,2,3,4]</code></td> + <td><code>11</code></td> + </tr> + <tr> + <th scope="row">troisième appel</th> + <td><code>11</code></td> + <td><code>2</code></td> + <td><code>2</code></td> + <td><code>[0,1,2,3,4]</code></td> + <td><code>13</code></td> + </tr> + <tr> + <th scope="row">quatrième appel</th> + <td><code>13</code></td> + <td><code>3</code></td> + <td><code>3</code></td> + <td><code>[0,1,2,3,4]</code></td> + <td><code>16</code></td> + </tr> + <tr> + <th scope="row">cinquième appel</th> + <td><code>16</code></td> + <td><code>4</code></td> + <td><code>4</code></td> + <td><code>[0,1,2,3,4]</code></td> + <td><code>20</code></td> + </tr> + </tbody> +</table> + +<p>Ici, la valeur renvoyée par <code>reduce()</code> serait <code>20</code>.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Additionner_toutes_les_valeurs_dun_tableau">Additionner toutes les valeurs d'un tableau</h3> + +<pre class="brush:js">var total = [0, 1, 2, 3].reduce((a, b)=> a + b,0); +// total == 6 +</pre> + +<h3 id="Additionner_les_valeurs_dune_propriétés_pour_un_tableau_dobjets">Additionner les valeurs d'une propriétés pour un tableau d'objets</h3> + +<p>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 :</p> + +<pre class="brush: js">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 +</pre> + +<p>On peut également écrire une version plus concise avec les fonctions fléchées :</p> + +<pre class="brush: js">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</pre> + +<h3 id="Aplatir_une_liste_de_listes">Aplatir une liste de listes</h3> + +<pre class="brush:js">var applati = [[0, 1], [2, 3], [4, 5]].reduce(function(a, b) { + return a.concat(b); +}); +// applati vaut [0, 1, 2, 3, 4, 5] +</pre> + +<h3 id="Utiliser_le_paramètre_valeurInitiale">Utiliser le paramètre <code>valeurInitiale</code></h3> + +<pre class="brush: js">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"]</pre> + +<h3 id="Exécuter_une_suite_de_promesses_stockées_dans_un_tableau">Exécuter une suite de promesses stockées dans un tableau</h3> + +<pre class="brush: js">/** + * 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 + }); +</pre> + +<h3 id="Regrouper_des_objets_selon_une_propriété">Regrouper des objets selon une propriété</h3> + +<pre class="brush: js">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 }] +// } +</pre> + +<h3 id="Composition_de_fonctions">Composition de fonctions</h3> + +<pre class="brush: js">// 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 +</pre> + +<h3 id="Retirer_les_doublons_dun_tableau">Retirer les doublons d'un tableau</h3> + +<h4 id="Avec_ECMAScript_2015_ES6">Avec ECMAScript 2015 (ES6)</h4> + +<pre class="brush: js">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]</pre> + +<h4 id="Avec_reduce">Avec <code>reduce()</code></h4> + +<pre class="brush: js">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] +</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.21', 'Array.prototype.reduce()')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Définition initiale.<br> + Implémenté dans JavaScript 1.8</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.reduce', 'Array.prototype.reduce()')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.reduce', 'Array.prototype.reduce()')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div> +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> + +<p>{{Compat("javascript.builtins.Array.reduce")}}</p> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Array.prototype.reduceRight()")}}</li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p>La méthode <code><strong>reduceRight()</strong></code> 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.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-reduce-right.html")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<p>Voir également {{jsxref("Array.prototype.reduce()")}} pour une méthode qui réduit de gauche à droite.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><var>arr</var>.reduceRight(<var>callback</var>[, valeurInitiale])</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>La fonction à éxécuter sur chaque valeur de la liste. Elle utilise quatres arguments : + <dl> + <dt><code>accumulator</code></dt> + <dd>La valeur précédemment retournée par le dernier appel de la fonction <code>callback</code>, ou <code>valeurInitial</code> si elle est fournie. (Voir ci-après.)</dd> + <dt><code>valeurCourante</code></dt> + <dd>La valeur de l'élément courant dans le tableau.</dd> + <dt><code>index</code></dt> + <dd>L'index de l'élément du tableau actuellement manipulé.</dd> + <dt><code>array</code></dt> + <dd>Le tableau sur lequel <code>reduceRight()</code> est appelée.</dd> + </dl> + </dd> + <dt><code>valeurInitiale</code> {{optional_inline}}</dt> + <dd>C'est l'objet à utiliser comme accumulateur/premier argument lors du premier appel de la fonction <code>callback</code>. Si aucune valeur n'est fournie, c'est le dernier élément du tableau qui sera utilisé. Si on appelle <code>reduce()</code> ou <code>reduceRight()</code> sur un tableau vide sans fournir de valeur initiale, on aura une exception {{jsxref("TypeError")}}.</dd> +</dl> + +<h3 id="Valeur_de_retour">Valeur de retour</h3> + +<p>La valeur obtenue grâce à la fonction de réduction.</p> + +<h2 id="Description">Description</h2> + +<p><code>reduceRight</code> exécute la fonction <code>callback</code> une fois pour chaque élément présent dans le tableau, les éléments vides sont ignorés. La fonction <code>callback</code> utilise quatre arguments : la valeur initiale (ou la valeur retournée par le précédent appel de la fonction<code> callback</code>), la valeur de l'élément courant, l'index de l'élément courant, et le tableau qui est parcouru.</p> + +<p>L'usage de <code>reduceRight</code> avec définition d'un <code>callback</code> devrait ressembler à ceci :</p> + +<pre class="brush: js">array.reduceRight(function(accumulator, valeurCourante, index, array) { + // ... +});</pre> + +<p>La première fois que la fonction de callback est appelée, <code>accumulator</code> et <code>valeurCourante</code> peuvent correspondre à un ou deux éléments. Si <code>valeurInitiale</code> est fournie lors de l'appel à <code>reduceRight</code>, alors <code>accumulator</code> sera égale à <code>valeurInitiale</code> et <code>valeurCourante</code> sera égale à la dernière valeur de la liste. Si <code>valeurInitiale</code> n'est pas fournie, alors <code>accumulator</code> sera égale à la dernière valeur de la liste, et <code>valeurCourante</code> sera alors égale à l'avant-dernière valeur du tableau.</p> + +<p>Si on utilise la méthode <code>reduceRight</code> de la façon suivante :</p> + +<pre class="brush: js">[0, 1, 2, 3, 4].reduceRight(function(accumulator, valeurCourante, index, array) { + return accumulator + valeurCourante; +}); +</pre> + +<p>La fonction <code>callback</code> sera appelée quatre fois, avec les arguments et les valeurs de retour de chaque appel suivant :</p> + +<table> + <thead> + <tr> + <th scope="col"><code>callback</code></th> + <th scope="col"><code>accumulator</code></th> + <th scope="col"><code>valeurCourante</code></th> + <th scope="col"><code>index</code></th> + <th scope="col"><code>array</code></th> + <th scope="col">Valeur renvoyée</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">premier appel</th> + <td>4</td> + <td>3</td> + <td>3</td> + <td><code>[0,1,2,3,4]</code></td> + <td>7</td> + </tr> + <tr> + <th scope="row">second appel</th> + <td>7</td> + <td><code>2</code></td> + <td><code>2</code></td> + <td><code>[0,1,2,3,4]</code></td> + <td>9</td> + </tr> + <tr> + <th scope="row">troisième appel</th> + <td>9</td> + <td>1</td> + <td>1</td> + <td><code>[0,1,2,3,4]</code></td> + <td>10</td> + </tr> + <tr> + <th scope="row">quatrième appel</th> + <td>10</td> + <td>0</td> + <td>0</td> + <td><code>[0,1,2,3,4]</code></td> + <td><code>10</code></td> + </tr> + </tbody> +</table> + +<p>La valeur retournée par <code>reduceRight</code> sera alors celle du dernier appel de la fonction <code>callback</code> (<code>10</code>).</p> + +<p>Si vous fournissez une valeur initiale comme second argument à l'appel de <code>reduceRight</code>, le résultat sera alors le suivant :</p> + +<pre class="brush: js">[0, 1, 2, 3, 4].reduceRight(function(accumulator, valeurCourante, index, array) { + return accumulator + valeurCourante; +}, 10); +</pre> + +<table> + <thead> + <tr> + <th scope="col"></th> + <th scope="col"><code>accumulator</code></th> + <th scope="col"><code>valeurCourante</code></th> + <th scope="col"><code>index</code></th> + <th scope="col"><code>array</code></th> + <th scope="col">Valeur renvoyée</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">premier appel</th> + <td><code>10</code></td> + <td>4</td> + <td>4</td> + <td><code>[0,1,2,3,4]</code></td> + <td><code>14</code></td> + </tr> + <tr> + <th scope="row">second appel</th> + <td>14</td> + <td>3</td> + <td>3</td> + <td><code>[0,1,2,3,4]</code></td> + <td><code>17</code></td> + </tr> + <tr> + <th scope="row">troisième appel</th> + <td>17</td> + <td><code>2</code></td> + <td><code>2</code></td> + <td><code>[0,1,2,3,4]</code></td> + <td><code>19</code></td> + </tr> + <tr> + <th scope="row">quatrième appel</th> + <td>19</td> + <td>1</td> + <td>1</td> + <td><code>[0,1,2,3,4]</code></td> + <td>20</td> + </tr> + <tr> + <th scope="row">cinquième appel</th> + <td>20</td> + <td>0</td> + <td>0</td> + <td><code>[0,1,2,3,4]</code></td> + <td><code>20</code></td> + </tr> + </tbody> +</table> + +<p>La valeur renvoyée par <code>reduceRight</code> sera ici <code>20</code>.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Additionner_toutes_les_valeurs_d'une_liste">Additionner toutes les valeurs d'une liste</h3> + +<pre class="brush: js">var total = [0, 1, 2, 3].reduceRight(function(a, b) { + return a + b; +}); +// total == 6 +</pre> + +<h3 id="Aplatir_une_liste_de_listes">Aplatir une liste de listes</h3> + +<pre class="brush: js">var aplati = [[0, 1], [2, 3], [4, 5]].reduceRight(function(a, b) { + return a.concat(b); +}, []); +// aplati [4, 5, 2, 3, 0, 1] +</pre> + +<h3 id="Différence_entre_reduce_et_reduceRight">Différence entre <code>reduce</code> et <code>reduceRight</code></h3> + +<pre class="brush: js">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"</pre> + +<h3 id="Composition_de_fonctions_à_l'aide_de_reduce">Composition de fonctions à l'aide de <code>reduce</code></h3> + +<p>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.</p> + +<pre class="brush: js">/** + * + * 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 +</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.22', 'Array.prototype.reduceRight')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Définition initiale. Implémentée avec JavaScript 1.8.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.reduceright', 'Array.prototype.reduceRight')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.reduceright', 'Array.prototype.reduceRight')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div> +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> + +<p>{{Compat("javascript.builtins.Array.reduceRight")}}</p> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Array.prototype.reduce()")}}</li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p>La méthode <code><strong>reverse()</strong></code> transpose les éléments d'un tableau : le premier élément devient le dernier et le dernier devient le premier et ainsi de suite.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-reverse.html")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><var>arr</var>.reverse()</pre> + +<h3 id="Valeur_de_retour">Valeur de retour</h3> + +<p>Le tableau inversé.</p> + +<h2 id="Description">Description</h2> + +<p>La méthode <code>reverse()</code> 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.</p> + +<p>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é <code>length</code> qui soit cohérente avec leurs propriétés indexées sur des nombres ne seront pas traités par <code>reverse()</code>.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Inverser_l'ordre_des_éléments_d'un_tableau">Inverser l'ordre des éléments d'un tableau</h3> + +<p>L'exemple qui suit crée un tableau <code>monArray</code>, qui contient trois éléments, puis inverse celui-ci.</p> + +<pre class="brush: js">var monArray = ["un", "deux", "trois"]; +monArray.reverse(); + +console.log(monArray) // ["trois", "deux", "un"] +</pre> + +<h3 id="Inverser_l'ordre_des_éléments_d'un_objet_semblable_à_un_tableau">Inverser l'ordre des éléments d'un objet semblable à un tableau</h3> + +<p>Dans l'exemple suivant, on crée un objet semblable à un tableau <code>a</code> qui contient trois éléments et une propriété <code>length</code>. On appelle ensuite <code>reverse()</code> grâce à <code>call()</code> sur cet objet pour inverser ses éléments :</p> + +<pre class="brush: js">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} +</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Définition initiale. Implémentée avec JavaScript 1.1.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.8', 'Array.prototype.reverse')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.reverse', 'Array.prototype.reverse')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.reverse', 'Array.prototype.reverse')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div> +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> + +<p>{{Compat("javascript.builtins.Array.reverse")}}</p> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Array.prototype.join()")}}</li> + <li>{{jsxref("Array.prototype.sort()")}}</li> + <li>{{jsxref("TypedArray.prototype.reverse()")}}</li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p>La méthode <strong><code>shift()</code></strong> permet de retirer le <strong>premier</strong> élément d'un tableau et de renvoyer cet élément. Cette méthode modifie la longueur du tableau.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-shift.html")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><var>arr</var>.shift()</pre> + +<h3 id="Valeur_de_retour">Valeur de retour</h3> + +<p>L'élément retiré du tableau ou {{jsxref("undefined")}} si le tableau est vide.</p> + +<h2 id="Description">Description</h2> + +<p>La méthode <code>shift</code> 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é.</p> + +<p>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. </p> + +<p>Cette méthode n'est pas exploitable pour les objets dont la propriété <code>length</code> ne reflète pas la taille du contenu, ou pour lesquels la propriété <code>length</code> n'est pas définie.</p> + +<div class="blockIndicator note"> +<p><strong>Note :</strong> La méthode {{jsxref("Array.prototype.pop()")}} possède un comportement similaire mais retire le dernier élément du tableau (et non le premier).</p> +</div> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Supprimer_un_élément_d'un_tableau">Supprimer un élément d'un tableau</h3> + +<p>Le code suivant affiche le tableau <code>mesPoissons</code> avant et après avoir enlevé le premier élément. Il affiche aussi l'élément supprimé :</p> + +<pre class="brush:js">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" +</pre> + +<h3 id="Utiliser_shift()_dans_une_boucle_while">Utiliser <code>shift()</code> dans une boucle <code>while</code></h3> + +<p>La méthode <code>shift()</code> peut être utilisée dans une boucle <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/while">while</a></code>. 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.</p> + +<pre class="brush: js">var noms = ["André", "Édouard", "Paul", "Christophe", "Jean"]; +while ( (i = noms.shift()) !== undefined ) { + console.log(i); +} +// André, Édouard, Paul, Christophe, Jean +</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Définition initiale. Implémentée avec JavaScript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.9', 'Array.prototype.shift')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.shift', 'Array.prototype.shift')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.shift', 'Array.prototype.shift')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div> +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> + +<p>{{Compat("javascript.builtins.Array.shift")}}</p> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Array.prototype.push()")}}</li> + <li>{{jsxref("Array.prototype.pop()")}}</li> + <li>{{jsxref("Array.prototype.unshift()")}}</li> + <li>{{jsxref("Array.prototype.concat()")}}</li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p>La méthode <strong><code>slice()</code></strong> renvoie un objet tableau, contenant une copie superficielle (<em>shallow copy</em>) 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é.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-slice.html")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><var>arr</var>.slice() +<var>arr</var>.slice(<em>début</em>) +<var>arr</var>.slice(<em>début</em>, <em>fin</em>) +</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>début</code> {{optional_inline}}</dt> + <dd>Indice (à partir de zéro) depuis lequel commencer l'extraction.</dd> + <dd>S'il s'agit d'un indice négatif, <code>début</code> indique un décalage depuis la fin de la séquence. Par exemple, <code>slice(-2)</code> extrait les avant-dernier et dernier éléments dans la séquence.<br> + <br> + Si <code>début</code> est absent, <code>slice()</code> commencera depuis 0. Si <code>début</code> est supérieur à la taille du tableau, c'est un tableau vide qui sera renvoyé.</dd> +</dl> + +<dl> + <dt><code>fin</code> {{optional_inline}}</dt> + <dd>Indice (à partir de zéro) auquel arrêter l'extraction. <code>slice()</code> extrait jusqu'à cet indice, mais pas l'élément situé en <code>fin</code> lui-même.</dd> + <dd><code>slice(1,4)</code> extrait du deuxième au quatrième élément (les éléments d'indices 1, 2 et 3).</dd> + <dd>S'il s'agit d'un indice négatif, <code>fin</code> indique un décalage depuis la fin de la séquence. <code>slice(2,-1)</code> extrait du troisième à l'avant-dernier élément dans la séquence.</dd> + <dd>Si <code>fin</code> n'est pas fourni, <code>slice()</code> extraira jusqu'à la fin de la séquence (<code>arr.length</code>). Si <code>fin</code> est supérieur à la longueur de la séquence, <code>slice()</code> fera une extraction jusqu'à la fin de la séquence.</dd> +</dl> + +<h3 id="Valeur_de_retour">Valeur de retour</h3> + +<p>Un nouveau tableau contenant les éléments extraits.</p> + +<h2 id="Description">Description</h2> + +<p><code>slice()</code> ne modifie pas le tableau original, mais renvoie une nouvelle copie du tableau (<em>shallow copy</em> — 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 :</p> + +<ul> + <li>Pour les références à des objets (et non les objets eux-mêmes), <code>slice()</code> copie ces références dans le nouveau tableau. Tant l'original que le nouveau tableau font référence au même objet. Si un objet référencé est modifié, ces changements sont visibles tant pour le nouveau que pour l'ancien tableau.</li> + <li>Pour les chaines de caractères, les nombres et les booléens, <code>slice()</code> copie ces chaines de caractères, ces nombres et ces valeurs booléennes dans le nouveau tableau. Les modifications sur ces chaînes, nombres ou booléens dans l'un des tableaux n'affectent pas l'autre tableau (NB : lorsque l'on parle de chaine de caractères, de nombre ou de booléen ici, on parle exclusivement de leur <em>type primitif</em>, pas des <em>objets</em> {{jsxref("String")}}, {{jsxref("Number")}} ou {{jsxref("Boolean")}} — voir par exemple <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String#Les_différences_entre_les_objets_String_et_le_type_primitif_pour_les_chaînes_de_caractères">différences entre objet String et type primitif pour les chaines de caractères</a>).</li> +</ul> + +<p>Si un nouvel élément est ajouté à l'un ou l'autre tableau, le second n'est pas affecté.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Renvoyer_un_fragment_d'un_tableau_existant">Renvoyer un fragment d'un tableau existant</h3> + +<pre class="brush: js">var fruits = ["Banane", "Orange", "Citron", "Pomme", "Mangue"]; +var agrumes = fruits.slice(1, 3); + +// fruits vaut --> ["Banane", "Orange", "Citron", "Pomme", "Mangue"] +// agrumes vaut --> ["Orange", "Citron"]</pre> + +<h3 id="Utiliser_slice()">Utiliser <code>slice()</code></h3> + +<p>Dans l'exemple qui suit, <code>slice()</code> crée un nouveau tableau, <code>nouvelleVoiture</code>, à partir de <code>maVoiture</code>. Chacun d'entre eux contient une référence à l'objet <code>maHonda</code>. Lorsque la couleur de <code>maHonda</code> est changée en bordeaux, les deux tableaux reflètent ce changement.</p> + +<pre class="brush: js">// 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); +</pre> + +<p>Ce script affichera :</p> + +<pre class="brush: js">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 +</pre> + +<h2 id="Utilisation_avec_les_objets_similaires_aux_tableaux">Utilisation avec les objets similaires aux tableaux</h2> + +<p>La méthode <code>slice()</code> 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.</p> + +<pre class="brush: js">function list() { + return Array.prototype.slice.call(arguments, 0); +} + +var list1 = list(1, 2, 3); // [1, 2, 3] +</pre> + +<p>Il est possible de lier avec la fonction .<code>call</code> de {{jsxref("Function.prototype")}} et on peut effectuer la réduction avec <code>[].slice.call(arguments)</code> plutôt qu'avec <code>Array.prototype.slice.call</code>. Voici comment on peut simplifier avec {{jsxref("Function.prototype.bind", "bind")}} :</p> + +<pre class="brush: js">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] +</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Définition initiale. Implémentée avec JavaScript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.10', 'Array.prototype.slice')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.slice', 'Array.prototype.slice')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.slice', 'Array.prototype.slice')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div> +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> + +<p>{{Compat("javascript.builtins.Array.slice")}}</p> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Function.prototype.call()")}}</li> + <li>{{jsxref("Function.prototype.bind()")}}</li> + <li>{{jsxref("Array.prototype.splice()")}}</li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p>La méthode <strong><code>some()</code></strong> 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.</p> + +<div class="note"> +<p><strong>Note :</strong> Cette méthode renverra <code>false</code>, quelle que soit la condition, si elle est utilisée sur un tableau vide.</p> +</div> + +<div>{{EmbedInteractiveExample("pages/js/array-some.html")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><var>arr</var>.some(<var>callback</var>[, <var>objetThis</var>])</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>La fonction à tester pour chaque élément du tableau. Cette fonction utilise trois arguments : + <dl> + <dt><code>valeurCourante</code></dt> + <dd>L'élément du tableau à traiter par la fonction.</dd> + <dt><code>index</code> {{optional_inline}}</dt> + <dd>L'indice de l'élément qui est traité par la fonction.</dd> + <dt><code>array </code>{{optional_inline}}</dt> + <dd>Le tableau sur lequel on a appelé la méthode <code>some</code>.</dd> + </dl> + </dd> + <dt><code>objetThis</code> {{optional_inline}}</dt> + <dd>Paramètre optionnel. Il correspond à la valeur à utiliser pour <code>this</code> lors de l'exécution de la fonction <code>callback</code>.</dd> +</dl> + +<h3 id="Valeur_de_retour">Valeur de retour</h3> + +<p><code>true</code> si la fonction <code>callback</code> renvoie une valeur équivalente à <code>true</code> pour au moins un des éléments du tableau, sinon elle renvoie <code>false</code>.</p> + +<h2 id="Description">Description</h2> + +<p>La méthode <code>some()</code> exécute la fonction <code>callback</code> une seule fois pour chaque élément présent dans le tableau jusqu'à ce qu'elle en trouve un pour lequel <code>callback</code> renvoie une valeur équivalente à <code>true</code> dans un contexte booléen. Si un tel élément est trouvé, <code>some()</code> renvoie immédiatement <code>true</code>. Dans le cas contraire, <code>some</code> renvoie <code>false</code>. <code>callback</code> 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.</p> + +<p>La fonction <code>callback</code> est invoquée avec trois paramètres : la valeur de l'élément, l'indice de l'élément et l'objet <code>Array</code> parcouru.</p> + +<p>Si un paramètre <code>objetThis</code> est fourni à <code>some()</code>, il sera utilisé comme valeur de <code>this</code> pour chaque invocation du <code>callback</code>. Sinon, la valeur {{jsxref("undefined")}} sera passée pour utilisation comme valeur <code>this</code>. La valeur <code>this</code> finalement utilisée par <code>callback</code> est déterminée en fonction <a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_this">des règles habituelles pour déterminer <code>this</code> pour une fonction</a>.</p> + +<p>La méthode <code>some()</code> ne modifie pas le tableau sur lequel elle est appelée.</p> + +<p>La liste des éléments traités par <code>some()</code> est définie avant la première invocation du <code>callback</code>. Les éléments qui sont ajoutés au tableau après le début de l'appel à <code>some</code> ne seront pas visités par <code>callback</code>. Si un élément existant non encore visité est modifié par <code>callback</code>, sa valeur passée à <code>callback</code> sera sa valeur au moment où <code>some</code> visite l'indice de cet élément ; les éléments supprimés ne seront pas visités.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Tester_la_valeur_des_éléments_d'un_tableau">Tester la valeur des éléments d'un tableau</h3> + +<p>L'exemple suivant teste si certains éléments d'un tableau sont plus grands que 10.</p> + +<pre class="brush: js">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 +</pre> + +<h3 id="Tester_la_valeur_des_éléments_avec_les_fonctions_fléchées">Tester la valeur des éléments avec les fonctions fléchées</h3> + +<p><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es">Les fonctions fléchées </a>permettent d'utiliser une syntaxe plus concise pour réaliser la même opération que l'exemple précédent.</p> + +<pre class="brush: js">[2, 5, 8, 1, 4].some(elem => elem > 10); // false +[12, 5, 8, 1, 4].some(elem => elem > 10); // true</pre> + +<div class="note"> +<p><strong>Note :</strong> Si on veut vérifier qu'un élément est dans un tableau, on pourra utiliser la méthode {{jsxref("Array.prototype.includes()")}}.</p> +</div> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.17', 'Array.prototype.some')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Définition initiale. Implémentée avec JavaScript 1.6.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.some', 'Array.prototype.some')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.some', 'Array.prototype.some')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div> +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> + +<p>{{Compat("javascript.builtins.Array.some")}}</p> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Array.prototype.find()")}}</li> + <li>{{jsxref("Array.prototype.forEach()")}}</li> + <li>{{jsxref("Array.prototype.every()")}}</li> + <li>{{jsxref("Array.prototype.includes()")}}</li> + <li>{{jsxref("TypedArray.prototype.some()")}}</li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p>La méthode <strong><code>sort()</code></strong> 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.</p> + +<p>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.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-sort.html")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><var>arr</var>.sort() +<var>arr</var>.sort(fonctionComparaison)</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>fonctionComparaison</code> {{optional_inline}}</dt> + <dd>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 <a href="/fr/docs/Web/JavaScript/Guide/Valeurs,_variables,_et_litt%C3%A9raux#Unicode">Unicode</a> 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.</dd> +</dl> + +<h3 id="Valeur_de_retour">Valeur de retour</h3> + +<p>Le tableau trié (le tri est effectué sur le tableau courant qui est modifié, aucune copie n'est réalisée).</p> + +<h2 id="Description">Description</h2> + +<p>Si le paramètre <code>fonctionComparaison</code> n'est pas fourni, les éléments qui ne valent pas <code>undefined</code> 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 <code>undefined</code> sont placés à la fin du tableau.</p> + +<div class="blockIndicator note"> +<p><strong>Note :</strong> En UTF-16, les caractères Unicode situés après <code>\uFFFF</code> sont encodés avec deux unités de code <em>surrogates</em> sur l'intervalle <code>\uD800</code>-<code>\uDFFF</code>. 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 <em>surrogate</em> <code>\uD655 \uDE55</code> sera trié avant le caractère <code>\uFF3A</code>.</p> +</div> + +<p>Si le paramètre <code>fonctionComparaison</code> est fourni, les éléments du tableau (qui ne valent pas <code>undefined</code>) sont triés selon la valeur de retour de la fonction de comparaison. Si <code>a</code> et <code>b</code> sont deux éléments à comparer, alors :</p> + +<ul> + <li>Si <code>fonctionComparaison(a, b)</code> est inférieur à 0, on trie <code>a</code> avec un indice inférieur à <code>b</code> (<code>a</code> sera classé avant <code>b</code>)</li> + <li>Si <code>fonctionComparaison(a, b)</code> renvoie 0, on laisse <code>a</code> et <code>b</code> inchangés l'un par rapport à l'autre, mais triés par rapport à tous les autres éléments. Note : la norme ECMAScript ne garantit pas ce comportement, par conséquent tous les navigateurs (par exemple les versions de Mozilla antérieures à 2003) ne respectent pas ceci.</li> + <li>Si <code>fonctionComparaison(a, b)</code> est supérieur à 0, on trie <code>b</code> avec un indice inférieur à <code>a</code>.</li> + <li><code>fonctionComparaison(a, b)</code> doit toujours renvoyer le même résultat à partir de la même paire d'arguments. Si la fonction renvoie des résultats incohérents, alors l’ordre dans lequel sont triés les éléments n’est pas défini.</li> +</ul> + +<p>Une fonction de comparaison aura donc généralement la forme suivante :</p> + +<pre class="brush: js">function compare(a, b) { + if (<em>a est inférieur à b selon les critères de tri</em>) + return -1; + if (<em>a est supérieur à b selon les critères de tri</em>) + return 1; + // a doit être égal à b + return 0; +} +</pre> + +<p>Pour comparer des nombres plutôt que des chaînes, la fonction de comparaison peut simplement soustraire <code>b</code> à <code>a</code> (cela fonctionnera si le tableau ne contient pas {{jsxref("NaN")}} ou {{jsxref("Infinity")}}) :</p> + +<pre class="brush: js">function compareNombres(a, b) { + return a - b; +} +</pre> + +<p>L'usage des {{jsxref("Opérateurs/L_opérateur_function", "expressions de fonctions","",11)}} s'avère très pratique avec la méthode <code>sort()</code> :</p> + +<pre class="brush: js">var nombres = [4, 2, 5, 1, 3]; +nombres.sort(function(a, b) { + return a - b; +}); +console.log(nombres); +// [1, 2, 3, 4, 5] +</pre> + +<p>ECMAScript 2015 permet d'utiliser <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es">les fonctions fléchées</a> et ainsi d'obtenir une syntaxe plus concise :</p> + +<pre class="brush: js">let nombres = [4, 2, 5, 1, 3]; +nombres.sort((a, b) => a - b); +console.log(nombres);</pre> + +<p>Les objets peuvent être triés d'après les valeurs d'une de leurs propriétés.</p> + +<pre class="brush: js">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; +});</pre> + +<h3 id="Différences_dimplémentation">Différences d'implémentation</h3> + +<p>Certaines implémentations de JavaScript utilisent un tri stable : l'ordre partiel de <code>a</code> et <code>b</code> ne change pas si <code>a</code> et <code>b</code> sont égaux. Si l'indice de <code>a</code> était inférieur à celui de <code>b</code> avant le tri, il le sera toujours après, quels que soient les mouvements de <code>a</code> et <code>b</code> dus au tri.</p> + +<p>Le tri est stable dans <a href="/fr/docs/SpiderMonkey">SpiderMonkey</a> et tous les navigateurs basés sur Mozilla à partir de <a href="/fr/docs/Gecko">Gecko</a> 1.9 (voir le {{ Bug(224128) }}).</p> + +<p>Le comportement de la méthode <code>sort()</code> a changé entre JavaScript 1.1 et JavaScript 1.2.</p> + +<p>En JavaScript 1.1, sur certaines plateformes, la méthode <code>sort</code> ne fonctionnait pas. Le tri fonctionne sur toutes les plateformes à partir de JavaScript 1.2.</p> + +<p>En JavaScript 1.2, cette méthode ne convertit plus les éléments non définis (<code>undefined</code>) en <code>null</code> ; elle les place en fin de tableau. Par exemple, supposons que vous ayez ce script :</p> + +<pre class="brush: js">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); +</pre> + +<p>En JavaScript 1.1, cette fonction affichait :</p> + +<pre class="eval">araignée, null, null, null, null, zèbre +araignée, null, null, null, null, zèbre +</pre> + +<p>En JavaScript 1.2, elle affichera :</p> + +<pre class="eval">araignée, undefined, undefined, undefined, undefined, zèbre +araignée, zèbre, undefined, undefined, undefined, undefined +</pre> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Création_affichage_et_tri_dun_tableau">Création, affichage et tri d'un tableau</h3> + +<p>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.</p> + +<pre class="brush: js">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"); +</pre> + +<p>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.</p> + +<pre class="eval">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 +</pre> + +<h3 id="Trier_des_caractères_non-ASCII">Trier des caractères non-ASCII</h3> + +<p>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.</p> + +<pre class="brush: js">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é' ]</pre> + +<h3 id="Trier_avec_map">Trier avec map</h3> + +<p>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 (<em>map</em>). 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.</p> + +<pre class="brush: js">// 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]; +}); +</pre> + +<div class="blockIndicator note"> +<p><strong>Note : </strong>Une bibliothèque <em>open source</em> utilise cette approche : <code><a href="https://null.house/open-source/mapsort">mapsort</a></code>.</p> +</div> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Définition initiale.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.11', 'Array.prototype.sort')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.sort', 'Array.prototype.sort')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.sort', 'Array.prototype.sort')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("javascript.builtins.Array.sort")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Array.prototype.reverse()")}}</li> + <li>{{jsxref("String.prototype.localeCompare()")}}</li> + <li><a href="https://v8.dev/blog/array-sort">À propos de la stabilité du tri pour le moteur V8</a></li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p>La méthode <strong><code>splice()</code></strong> modifie le contenu d'un tableau en retirant des éléments et/ou en ajoutant de nouveaux éléments <a href="https://en.wikipedia.org/wiki/In-place_algorithm">à même le tableau</a>.On peut ainsi vider ou remplacer une partie d'un tableau.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-splice.html")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><var>var tabElementsSupprimes = array</var>.splice(<var>début</var>, nbASupprimer[, <var>élem1</var>[, élem2[, ...]]]) +</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>début</code></dt> + <dd>L'indice à partir duquel commencer à changer le tableau (l'indice du premier élement étant <code>0</code>).</dd> + <dd>Si sa valeur est supérieure à la longueur du tableau <code><var>array</var>.length</code>, <code>début</code> est ramené à la longueur du tableau <code><var>array</var>.length</code>.</dd> + <dd>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 <code><var>array</var>.length + <var>début</var></code>. Si <code><var>array</var>.length + <var>début</var></code> est inférieur à <code>0</code>, le changement commencera à l'index <code>0</code>.</dd> +</dl> + +<dl> + <dt><code>nbASupprimer</code></dt> + <dd>Un entier indiquant le nombre d'anciens éléments à remplacer.<br> + Si ce paramètre est absent ou si sa valeur est supérieure ou égale à <code>array.length - début</code>, alors les éléments entre <code>début</code> et la fin du tableau seront supprimés.</dd> + <dd>Si <code>nbASupprimer</code> vaut 0, aucun élément ne sera supprimé. Dans ce cas, il est nécessaire de spécifier au moins un nouvel élément.</dd> +</dl> + +<dl> + <dt><code>élemN</code></dt> + <dd>Les éléments à ajouter au tableau à partir de <code>début</code>. Si vous ne spécifiez pas de nouvel élément, les anciens éléments seront simplement supprimés du tableau.</dd> +</dl> + +<h3 id="Valeur_de_retour">Valeur de retour</h3> + +<p>Un tableau contenant les éléments supprimés. Si un seul élément est supprimé, un tableau contenant un unique élément est retourné.</p> + +<h2 id="Description">Description</h2> + +<p>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.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Utiliser_splice">Utiliser <code>splice</code></h3> + +<p>Le script suivant illustre l'utilisation de <code>splice</code> :</p> + +<pre class="brush: js">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"] +</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.splice', 'Array.prototype.splice')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.splice', 'Array.prototype.splice')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.12', 'Array.prototype.splice')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Définition initiale. Implémentée avec JavaScript 1.2.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div> +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> + +<p>{{Compat("javascript.builtins.Array.splice")}}</p> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Array.prototype.push", "push")}} / {{jsxref("Array.prototype.pop", "pop")}} pour ajouter/supprimer des éléments en fin de tableau</li> + <li>{{jsxref("Array.prototype.unshift", "unshift")}} / {{jsxref("Array.prototype.shift", "shift")}} pour ajouter/supprimer des éléments en début de tableau</li> + <li>{{jsxref("Array.prototype.concat", "concat")}} qui renvoie un nouveau tableau résultat de la concaténation d'un tableau avec un autre tableau ou d'autres valeurs</li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p>La méthode <code><strong>toLocaleString()</strong></code> 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 <code>toLocaleString</code> 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).</p> + +<div>{{EmbedInteractiveExample("pages/js/array-tolocalestring.html")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><var>arr</var>.toLocaleString(); +<var>arr</var>.toLocaleString(<var>locales</var>); +<var>arr</var>.toLocaleString(<var>locales</var>, <var>options</var>); +</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>locales</code> {{optional_inline}}</dt> + <dd>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 <code>locales</code>. Pour plus de détails quant à la forme et l'interprétation de l'argument <code>locales</code>, on consultera la page {{jsxref("Intl")}}.</dd> + <dt><code>options</code> {{optional_inline}}</dt> + <dd>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()")}}.</dd> +</dl> + +<h3 id="Valeur_de_retour">Valeur de retour</h3> + +<p>Une chaîne de caractères qui représente les éléments du tableau.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Utiliser_les_arguments_locales_et_options">Utiliser les arguments <code>locales</code> et <code>options</code></h3> + +<p>Les éléments du tableau sont converties en chaînes de caractères via leurs méthodes <code>toLocaleString()</code>.</p> + +<ul> + <li><code>Object</code> : {{jsxref("Object.prototype.toLocaleString()")}}</li> + <li><code>Number</code> : {{jsxref("Number.prototype.toLocaleString()")}}</li> + <li><code>Date</code> : {{jsxref("Date.prototype.toLocaleString()")}}</li> +</ul> + +<p>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 <code>prix</code> :</p> + +<pre class="brush: js">var prix = ["￥7", 500, 8123, 12]; +prix.toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' }); + +// "￥7,￥500,￥8,123,￥12" +</pre> + +<p>Pour plus d'exemples, on peut se référer aux pages {{jsxref("Intl")}}, {{jsxref("NumberFormat")}} et {{jsxref("DateTimeFormat")}}.</p> + +<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2> + +<pre class="brush: js">// 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; + } + }); +} +</pre> + +<p>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 <code>Array.prototype</code> car elles ne peuvent pas être rendues non-énumérables.</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.tolocalestring', 'Array.prototype.toLocaleString')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Définition initiale dans ECMAScript 3.</td> + </tr> + <tr> + <td>{{SpecName('ES Int Draft', '#sup-array.prototype.tolocalestring', 'Array.prototype.toLocaleString')}}</td> + <td>{{Spec2('ES Int Draft')}}</td> + <td>Cette définition remplace la définition fournit dans ECMA-262.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div> +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> + +<p>{{Compat("javascript.builtins.Array.toLocaleString")}}</p> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Array.prototype.toString()")}}</li> + <li>{{jsxref("Intl")}}</li> + <li>{{jsxref("Object.prototype.toLocaleString()")}}</li> + <li>{{jsxref("Number.prototype.toLocaleString()")}}</li> + <li>{{jsxref("Date.prototype.toLocaleString()")}}</li> +</ul> 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 +--- +<div>{{JSRef}}{{Non-standard_header}}</div> + +<p>La méthode <strong><code>toSource()</code></strong> renvoie une chaine de caractères représentant le code source du tableau.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><var>arr</var>.toSource()</pre> + +<h3 id="Valeur_de_retour">Valeur de retour</h3> + +<p>Une chaîne de caractères qui représente le code source du tableau.</p> + +<h2 id="Description">Description</h2> + +<p>La méthode <code>toSource()</code> renvoie les valeurs suivantes :</p> + +<ul> + <li>Pour l'objet {{jsxref("Array")}} natif, <code>toSource()</code> renvoie la chaîne de caractères suivante indiquant que le code source n'est pas disponible : + + <pre class="brush: js">function Array() { + [native code] +} +</pre> + </li> + <li>Pour les instances d'{{jsxref("Array")}}, <code>toSource()</code> renvoie une chaîne représentant le code source.</li> +</ul> + +<p>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 <code>toSource()</code> lors du débogage pour examiner le contenu d'un tableau.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Examiner_le_code_source_d'un_tableau">Examiner le code source d'un tableau</h3> + +<p>Pour examiner le code source d'un tableau :</p> + +<pre class="brush: js">var alpha = new Array("a", "b", "c"); +alpha.toSource(); +// renvoie ["a", "b", "c"] +</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<p>Ne fait partie d'aucun standard. Implémenté dans JavaScript 1.3.</p> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> + +<p>{{Compat("javascript.builtins.Array.toSource")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Object.prototype.toSource()")}}</li> + <li>{{jsxref("Array.prototype.toString()")}}</li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p>La méthode <strong><code>toString()</code></strong> renvoie une chaine de caractères représentant le tableau spécifié et ses éléments.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-tostring.html")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><var>arr</var>.toString()</pre> + +<h3 id="Valeur_de_retour">Valeur de retour</h3> + +<p>Une chaîne de caractères qui représente les éléments du tableau.</p> + +<h2 id="Description">Description</h2> + +<p>L'objet {{jsxref("Array")}} redéfinit la méthode <code>toString</code> d'{{jsxref("Object")}}. Pour les objets <code>Array</code>, la méthode <code>toString()</code> concatène les éléments du tableau et renvoie une chaîne contenant chacun des éléments, séparés par des virgules.</p> + +<p>JavaScript appelle la méthode <code>toString()</code> 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.</p> + +<h3 id="Sémantique_d'ECMAScript_5">Sémantique d'ECMAScript 5</h3> + +<p>À partir de JavaScript 1.8.5 (Firefox 4), et en cohérence avec la 5<sup>e</sup> édition d'ECMAScript, la méthode <code>toString()</code> 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.</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Définition initiale. Implémentée avec JavaScript 1.1.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.2', 'Array.prototype.toString')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.tostring', 'Array.prototype.toString')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.tostring', 'Array.prototype.toString')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div> +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> + +<p>{{Compat("javascript.builtins.Array.toString")}}</p> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Object.prototype.toSource()")}}</li> + <li>{{jsxref("Array.prototype.join()")}}</li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p>La méthode <code><strong>unshift()</strong></code> ajoute un ou plusieurs éléments au début d'un tableau et renvoie la nouvelle longueur du tableau.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-unshift.html")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><var>arr</var>.unshift([<var>élém1</var>[, ...[, <var>élémN</var>]]])</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>élém<em>N</em> </code></dt> + <dd>Les éléments que l'on souhaite ajouter en début de tableau.</dd> +</dl> + +<h3 id="Valeur_de_retour">Valeur de retour</h3> + +<p>La nouvelle valeur de la propriété {{jsxref("Array.length", "length")}} du tableau sur lequel a été appelée la méthode.</p> + +<h2 id="Description">Description</h2> + +<p>La méthode <code>unshift()</code> insère les valeurs renseignées au début d'un objet ressemblant à un tableau.</p> + +<p><code>unshift()</code> 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é <code>length</code> 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.</p> + +<p>Attention, lorsqu'on utilise <code>unshift()</code> 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 <code>unshift()</code> <em>n</em> fois avec 1 arguments ou en appelant <code>unshift()</code> avec <em>n</em> arguments.</p> + +<pre class="brush: js">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]</pre> + +<h2 id="Exemples">Exemples</h2> + +<pre class="brush:js">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] +</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Définition initiale. Implémentée avec JavaScript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.13', 'Array.prototype.unshift')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.unshift', 'Array.prototype.unshift')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.unshift', 'Array.prototype.unshift')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div> +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> + +<p>{{Compat("javascript.builtins.Array.unshift")}}</p> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Array.prototype.push()")}}</li> + <li>{{jsxref("Array.prototype.pop()")}}</li> + <li>{{jsxref("Array.prototype.shift()")}}</li> + <li>{{jsxref("Array.prototype.concat()")}}</li> +</ul> 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 +--- +<div>{{JSRef}}</div> + +<p>La méthode <strong><code>values()</code></strong> renvoie un nouvel objet <strong><code>Array Iterator</code></strong> qui contient les valeurs pour chaque indice du tableau. Cette méthode est l'implémentation par défaut de <code>Array.prototype[Symbol.Iterator]</code>.</p> + +<p>{{EmbedInteractiveExample("pages/js/array-values.html")}}</p> + +<pre class="brush: js">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 +</pre> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><var>array</var>.values()</pre> + +<h3 id="Valeur_de_retour">Valeur de retour</h3> + +<p>Un nouvel objet itérateur sur {{jsxref("Array")}}.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Itérer_avec_une_boucle_for...of">Itérer avec une boucle <code>for...of</code></h3> + +<pre class="brush: js">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); +} +</pre> + +<h3 id="Itérer_avec_next()">Itérer avec <code>next()</code></h3> + +<pre class="brush: js">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 +</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-array.prototype.values', 'Array.prototype.values')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Définition initiale.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.values', 'Array.prototype.values')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div> +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> + +<p>{{Compat("javascript.builtins.Array.values")}}</p> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Array.prototype.keys()")}}</li> + <li>{{jsxref("Array.prototype.entries()")}}</li> + <li>{{jsxref("Array.prototype.forEach()")}}</li> + <li>{{jsxref("Array.prototype.every()")}}</li> + <li>{{jsxref("Array.prototype.some()")}}</li> +</ul> |