diff options
author | julieng <julien.gattelier@gmail.com> | 2021-08-03 08:03:23 +0200 |
---|---|---|
committer | SphinxKnight <SphinxKnight@users.noreply.github.com> | 2021-09-03 08:08:25 +0200 |
commit | bf8e099b9c8b3c60d60b3712b4fc97b052c39887 (patch) | |
tree | c101746d082c9581c94f5937519c7d0e2f4af8cb /files/fr/web/javascript/reference/global_objects/array | |
parent | 844f5103992238c0c23203286dad16a466e89c97 (diff) | |
download | translated-content-bf8e099b9c8b3c60d60b3712b4fc97b052c39887.tar.gz translated-content-bf8e099b9c8b3c60d60b3712b4fc97b052c39887.tar.bz2 translated-content-bf8e099b9c8b3c60d60b3712b4fc97b052c39887.zip |
convert content to md
Diffstat (limited to 'files/fr/web/javascript/reference/global_objects/array')
41 files changed, 2692 insertions, 3439 deletions
diff --git a/files/fr/web/javascript/reference/global_objects/array/@@iterator/index.md b/files/fr/web/javascript/reference/global_objects/array/@@iterator/index.md index 44665dcba8..c2ae826291 100644 --- a/files/fr/web/javascript/reference/global_objects/array/@@iterator/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/@@iterator/index.md @@ -12,23 +12,24 @@ tags: translation_of: Web/JavaScript/Reference/Global_Objects/Array/@@iterator original_slug: Web/JavaScript/Reference/Objets_globaux/Array/@@iterator --- -<div>{{JSRef}}</div> +{{JSRef}} -<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> +La valeur initiale de la propriété **`@@iterator`** correspond à la valeur initiale fournie par l'itérateur {{jsxref("Array.prototype.values()", "values")}}. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><var>arr</var>[Symbol.iterator]()</pre> + arr[Symbol.iterator]() -<h3 id="Valeur_de_retour">Valeur de retour</h3> +### Valeur de retour -<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> +La première valeur fournie par {{jsxref("Array.prototype.values()","values()")}}. Si on utilise `arr[Symbol.iterator]` (sans les parenthèses) le navigateur renverra par défaut la fonction {{jsxref("Array.prototype.values()", "values()")}}. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Parcourir_un_tableau_avec_une_boucle_for...of">Parcourir un tableau avec une boucle <code>for...of</code></h3> +### Parcourir un tableau avec une boucle `for...of` -<pre class="brush: js">var arr = ['w', 'y', 'k', 'o', 'p']; +```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 @@ -36,54 +37,36 @@ var eArr = arr[Symbol.iterator](); for (let letter of eArr) { console.log(letter); } -</pre> +``` -<h3 id="Parcourir_un_tableau_avec_next">Parcourir un tableau avec <code>next</code></h3> +### Parcourir un tableau avec `next` -<pre class="brush: js">var arr = ['w', 'y', 'k', 'o', 'p']; +```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> - -<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> +``` + +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- | +| {{SpecName('ES2015', '#sec-array.prototype-@@iterator', 'Array.prototype[@@iterator]()')}} | {{Spec2('ES2015')}} | Définition initiale. | +| {{SpecName('ESDraft', '#sec-array.prototype-@@iterator', 'Array.prototype[@@iterator]()')}} | {{Spec2('ESDraft')}} | | + +## Compatibilité des navigateurs + +{{Compat("javascript.builtins.Array.@@iterator")}} + +## Voir aussi + +- {{jsxref("Array.prototype.keys()")}} +- {{jsxref("Array.prototype.entries()")}} +- {{jsxref("Array.prototype.forEach()")}} +- {{jsxref("Array.prototype.every()")}} +- {{jsxref("Array.prototype.some()")}} +- {{jsxref("Array.prototype.values()")}} diff --git a/files/fr/web/javascript/reference/global_objects/array/@@species/index.md b/files/fr/web/javascript/reference/global_objects/array/@@species/index.md index 8275c5757d..1a4970e0f7 100644 --- a/files/fr/web/javascript/reference/global_objects/array/@@species/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/@@species/index.md @@ -10,66 +10,52 @@ tags: translation_of: Web/JavaScript/Reference/Global_Objects/Array/@@species original_slug: Web/JavaScript/Reference/Objets_globaux/Array/@@species --- -<div>{{JSRef}}</div> +{{JSRef}} -<p>La propriété d'accesseur <code><strong>Array[@@species]</strong></code> renvoie le constructeur <code>Array</code>.</p> +La propriété d'accesseur **`Array[@@species]`** renvoie le constructeur `Array`. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">Array[Symbol.species] -</pre> + Array[Symbol.species] -<h3 id="Valeur_de_retour">Valeur de retour</h3> +### Valeur de retour -<p>Le constructeur {{jsxref("Array")}}.</p> +Le constructeur {{jsxref("Array")}}. -<h2 id="Description">Description</h2> +## Description -<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> +L'accesseur `species` renvoie le constructeur par défaut pour les objets `Array`. Les constructeurs des sous-classes peuvent le surcharger afin de modifier l'affectation du constructeur. -<h2 id="Exemples">Exemples</h2> +## Exemples -<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> +La propriété renvoie le constructeur par défaut, dans le cas des objets `Array`, c'est le constructeur `Array` : -<pre class="brush: js">Array[Symbol.species]; // function Array()</pre> +```js +Array[Symbol.species]; // function Array() +``` -<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> +Pour un objet dérivé, la valeur de `species` pour une classe `MonArray` sera le constructeur de cette classe. Vous pouvez surcharger ce comportement afin de renvoyer le constructeur `Array` : -<pre class="brush: js">class MonArray extends Array { +```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> - -<p>{{Compat("javascript.builtins.Array.@@species")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("Array")}}</li> - <li>{{jsxref("Symbol.species")}}</li> -</ul> +} +``` + +## Spécifications + +| Spécification | État | Commentaires | +| -------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | +| {{SpecName('ES6', '#sec-get-array-@@species', 'get Array [ @@species ]')}} | {{Spec2('ES6')}} | Définition initiale. | +| {{SpecName('ESDraft', '#sec-get-array-@@species', 'get Array [ @@species ]')}} | {{Spec2('ESDraft')}} | | + +## Compatibilité des navigateurs + +{{Compat("javascript.builtins.Array.@@species")}} + +## Voir aussi + +- {{jsxref("Array")}} +- {{jsxref("Symbol.species")}} diff --git a/files/fr/web/javascript/reference/global_objects/array/@@unscopables/index.md b/files/fr/web/javascript/reference/global_objects/array/@@unscopables/index.md index c0f9883779..0b5f7a4aee 100644 --- a/files/fr/web/javascript/reference/global_objects/array/@@unscopables/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/@@unscopables/index.md @@ -10,27 +10,28 @@ tags: translation_of: Web/JavaScript/Reference/Global_Objects/Array/@@unscopables original_slug: Web/JavaScript/Reference/Objets_globaux/Array/@@unscopables --- -<div>{{JSRef}}</div> +{{JSRef}} -<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> +La propriété symbol **`@@unscopable`** contient les noms des propriétés qui ne faisait pas partie du standard ECMAScript avant ES2015 (ES6). Ces propriétés sont exclues lors de liaisons effectuée via l'instruction [`with`](/fr/docs/Web/JavaScript/Reference/Instructions/with). -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><var>arr</var>[Symbol.unscopables]</pre> + arr[Symbol.unscopables] -<h2 id="Description">Description</h2> +## Description -<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> +Les propriétés natives d'un objet `Array` qui sont exclues lorsqu'on utilise `with` sont `copyWithin`, `entries`, `fill`, `find`, `findIndex`, `includes`, `keys` et `values`. -<p>Voir la page sur le symbole {{jsxref("Symbol.unscopables")}} pour manipuler <code>unscopables</code> sur des objets personnalisés.</p> +Voir la page sur le symbole {{jsxref("Symbol.unscopables")}} pour manipuler `unscopables` sur des objets personnalisés. -<p>{{js_property_attributes(0,0,1)}}</p> +{{js_property_attributes(0,0,1)}} -<h2 id="Exemples">Exemples</h2> +## Exemples -<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> +Le code qui suit fonctionne bien pour ES5 et les versions antérieures. En revanche, pour ECMAScript 2015 (ES6) et les versions ultérieures où la méthode {{jsxref("Array.prototype.keys()")}} existe, lorsqu'on utilise un environnement créé avec `with`, `"keys"` serait désormais la méthode et non la variable. C'est là que le symbole natif `@@unscopables` `Array.prototype[@@unscopables]` intervient et empêche d'explorer ces méthodes avec `with`. -<pre class="brush: js">var keys = []; +```js +var keys = []; with(Array.prototype) { keys.push("something"); @@ -38,36 +39,20 @@ with(Array.prototype) { 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> - -<p>{{Compat("javascript.builtins.Array.@@unscopables")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("Symbol.unscopables")}}</li> -</ul> +// "includes", "keys", "values"] +``` + +## Spécifications + +| Spécification | État | Commentaires | +| -------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | +| {{SpecName('ES2015', '#sec-array.prototype-@@unscopables', 'Array.prototype[@@unscopables]')}} | {{Spec2('ES2015')}} | Définition initiale. | +| {{SpecName('ESDraft', '#sec-array.prototype-@@unscopables', 'Array.prototype[@@unscopables]')}} | {{Spec2('ESDraft')}} | | + +## Compatibilité des navigateurs + +{{Compat("javascript.builtins.Array.@@unscopables")}} + +## Voir aussi + +- {{jsxref("Symbol.unscopables")}} diff --git a/files/fr/web/javascript/reference/global_objects/array/array/index.md b/files/fr/web/javascript/reference/global_objects/array/array/index.md index c00ef0c0b3..c1958d3879 100644 --- a/files/fr/web/javascript/reference/global_objects/array/array/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/array/index.md @@ -9,77 +9,69 @@ tags: translation_of: Web/JavaScript/Reference/Global_Objects/Array/Array original_slug: Web/JavaScript/Reference/Objets_globaux/Array/Array --- -<div>{{JSRef}}</div> +{{JSRef}} -<p>Le constructeur <strong><code>Array()</code></strong> permet de créer des objets {{jsxref("Array")}}.</p> +Le constructeur **`Array()`** permet de créer des objets {{jsxref("Array")}}. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox notranslate">[<var>element0</var>, <var>element1</var>, ..., <var>elementN</var>] + [element0, element1, ..., elementN] -new Array(<var>element0</var>, <var>element1</var>[, ...[, <var>elementN</var>]]) -new Array(<var>longueurTableau</var>)</pre> + new Array(element0, element1[, ...[, elementN]]) + new Array(longueurTableau) -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><code>elementN</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^32-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> +- `elementN` + - : Un tableau JavaScript est initialisé avec les éléments indiqués à moins qu'un seul argument ne soit passé (cf. `longueurTableau` ci-après). On notera que ce cas au limite ne s'applique qu'avec le constructeur `Array`. Si on utilise la forme littérale (avec les crochets), on peut initialiser un tableau avec un seul élément. +- `longueurTableau` + - : Si le seul argument passé au constructeur `Array` est un entier entre 0 et 2^32-1 (inclus), le constructeur renverra un tableau dont la propriété `length` vaut ce nombre. **Note :** le tableau contiendra des éléments vides (à ne pas confondre avec des éléments qui vaudraient `undefined`). Si l'argument est un autre nombre, une exception {{jsxref("RangeError")}} sera levée. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Utilisation_de_la_notation_littérale">Utilisation de la notation littérale</h3> +### Utilisation de la notation littérale -<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> +Les tableaux peuvent être créés avec une notation [littérale](/fr/docs/Web/JavaScript/Reference/Grammaire_lexicale#Litt%C3%A9raux_de_tableaux) : -<pre class="brush: js notranslate">let fruits = ['Pomme', 'Banane']; +```js +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> +### Utilisation du constructeur avec un seul paramètre -<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> +On peut créer des tableaux grâce au constructeur avec un seul paramètre numérique. On crée alors un tableau dont la propriété `length` vaut le nombre passé en argument et dont les éléments sont vides. -<pre class="brush: js notranslate">let fruits = new Array(2); +```js +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> +### Utilisation du constructeur avec plusieurs paramètres -<p>Si on utilise plus d'un argument, un nouveau tableau ({{jsxref("Array")}}) sera construit avec les éléments passés en arguments.</p> +Si on utilise plus d'un argument, un nouveau tableau ({{jsxref("Array")}}) sera construit avec les éléments passés en arguments. -<pre class="brush: js notranslate">let fruits = new Array('Pomme', 'Banane'); +```js +let fruits = new Array('Pomme', 'Banane'); console.log(fruits.length); // 2 console.log(fruits[0]); // "Pomme" -</pre> +``` -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<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> +| Spécification | +| -------------------------------------------------------------------------------------------- | +| {{SpecName('ESDraft', '#sec-array-constructor', 'Array constructor')}} | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("javascript.builtins.Array.Array")}}</p> +{{Compat("javascript.builtins.Array.Array")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>La classe {{jsxref("Array")}}</li> -</ul> +- La classe {{jsxref("Array")}} diff --git a/files/fr/web/javascript/reference/global_objects/array/concat/index.md b/files/fr/web/javascript/reference/global_objects/array/concat/index.md index e39788b6a0..3a68c4f55e 100644 --- a/files/fr/web/javascript/reference/global_objects/array/concat/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/concat/index.md @@ -10,63 +10,59 @@ tags: translation_of: Web/JavaScript/Reference/Global_Objects/Array/concat original_slug: Web/JavaScript/Reference/Objets_globaux/Array/concat --- -<div>{{JSRef}}</div> +{{JSRef}} -<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> +La méthode **`concat()`** est utilisée afin de fusionner un ou plusieurs tableaux en les concaténant. Cette méthode ne modifie pas les tableaux existants, elle renvoie un nouveau tableau qui est le résultat de l'opération. -<div>{{EmbedInteractiveExample("pages/js/array-concat.html")}}</div> +{{EmbedInteractiveExample("pages/js/array-concat.html")}} -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">let <var>nouveau_tableau</var> = <var>ancien_tableau</var>.concat(<var>valeur1</var>[, <var>valeur2</var>[, ...[, <var>valeurN</var>]]])</pre> + let nouveau_tableau = ancien_tableau.concat(valeur1[, valeur2[, ...[, valeurN]]]) -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<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> +- `valeurN`{{optional_inline}} + - : Des tableaux et/ou des valeurs à concaténer dans le nouveau tableau. Si tous les arguments `valeurN` valent `undefined`, `concat` renverra une copie superficielle du tableau sur lequel elle est appelée. Voir ci-après pour plus de détails. -<h3 id="Valeur_de_retour">Valeur de retour</h3> +### Valeur de retour -<p>Une nouvelle instance de {{jsxref("Array")}}.</p> +Une nouvelle instance de {{jsxref("Array")}}. -<h2 id="Description">Description</h2> +## Description -<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> +La méthode `concat` permet de créer un nouveau tableau constitué des éléments de l'objet `this` sur lequel elle a été appelée, suivis dans l'ordre par, pour chaque paramètre, les éléments de ce paramètre (s'il s'agit d'un tableau) ou le paramètre lui-même (s'il ne s'agit pas d'un tableau). La concaténation ne « déplie » pas les tableaux imbriqués. -<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> +La méthode `concat` ne modifie pas `this` ni aucun des tableaux passés en paramètres, mais renvoie une copie qui contient des copies des mêmes éléments combinées que ceux des tableaux originaux. Les éléments des tableaux originaux sont copiés dans le nouveau tableau comme suit : -<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> +- Pour les références à des objets (et non les objets eux-mêmes) : `concat` 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. -<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> +- 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")}}) : `concat` copie les valeurs des chaînes et des nombres dans le nouveau tableau. (voir [Les types de données en JavaScript](/fr/docs/Web/JavaScript/Structures_de_donn%C3%A9es#Les_types_de_donn%C3%A9es)). -<h2 id="Exemples">Exemples</h2> +> **Note :** La concaténation n'impactera pas les tableaux originaux. Par la suite, toute opération sur le nouveau tableau n'aura aucun effet sur les tableaux d'origine, et vice versa. -<h3 id="Concaténer_deux_tableaux">Concaténer deux tableaux</h3> +## Exemples -<p>Le code qui suit concatène deux tableaux :</p> +### Concaténer deux tableaux -<pre class="brush: js">let alpha = ["a", "b", "c"]; +Le code qui suit concatène deux tableaux : + +```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> +### Concaténer trois tableaux -<p>Le code qui suit concatène trois tableaux :</p> +Le code qui suit concatène trois tableaux : -<pre class="brush: js">let num1 = [1, 2, 3]; +```js +let num1 = [1, 2, 3]; let num2 = [4, 5, 6]; let num3 = [7, 8, 9]; @@ -74,25 +70,27 @@ 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> +### Concaténer des valeurs avec un tableau -<p>Le code qui suit ajoute trois valeurs à un tableau :</p> +Le code qui suit ajoute trois valeurs à un tableau : -<pre class="brush: js">let alpha = ['a', 'b', 'c']; +```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> +### Concaténer des tableaux imbriqués -<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> +Dans le code qui suit, on concatène deux tableaux qui ont plusieurs dimensions et on illustre la conservation des références : -<pre class="brush: js">let num1 = [[1]]; +```js +let num1 = [[1]]; let num2 = [2, [3]]; let nums = num1.concat(num2); @@ -104,52 +102,26 @@ console.log(nums); 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> - -<p>{{Compat("javascript.builtins.Array.concat")}}</p> - -<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> +// affichera [[1, 4], 2, [3]] +``` + +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- | +| {{SpecName('ES3')}} | {{Spec2('ES3')}} | Définition initiale. Implémentée avec JavaScript 1.2. | +| {{SpecName('ES5.1', '#sec-15.4.4.4', 'Array.prototype.concat')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-array.prototype.concat', 'Array.prototype.concat')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-array.prototype.concat', 'Array.prototype.concat')}} | {{Spec2('ESDraft')}} | | + +## Compatibilité des navigateurs + +{{Compat("javascript.builtins.Array.concat")}} + +## Voir aussi + +- {{jsxref("Array.push", "push")}} / {{jsxref("Array.pop", "pop")}} qui permettent d'ajouter/retirer des éléments à partir de la fin du tableau +- {{jsxref("Array.unshift", "unshift")}} / {{jsxref("Array.shift", "shift")}} qui permettent d'ajouter/retirer des éléments à partir du début du tableau +- {{jsxref("Array.splice", "splice")}} qui permet d'ajouter/retirer des éléments à un endroit donné du tableau +- {{jsxref("String.prototype.concat()")}} +- {{jsxref("Symbol.isConcatSpreadable")}} (permet de contrôler la façon dont un tableau est ramené à une valeur) diff --git a/files/fr/web/javascript/reference/global_objects/array/copywithin/index.md b/files/fr/web/javascript/reference/global_objects/array/copywithin/index.md index befc06152e..e28200ab55 100644 --- a/files/fr/web/javascript/reference/global_objects/array/copywithin/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/copywithin/index.md @@ -12,49 +12,47 @@ tags: translation_of: Web/JavaScript/Reference/Global_Objects/Array/copyWithin original_slug: Web/JavaScript/Reference/Objets_globaux/Array/copyWithin --- -<div>{{JSRef}}</div> +{{JSRef}} -<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> +La méthode **`copyWithin()`** effectue une copie superficielle (_shallow copy_) d'une partie d'un tableau sur ce même tableau et le renvoie, sans modifier sa taille. -<div>{{EmbedInteractiveExample("pages/js/array-copywithin.html")}}</div> +{{EmbedInteractiveExample("pages/js/array-copywithin.html")}} -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">arr.copyWithin(cible) -arr.copyWithin(cible, début) -arr.copyWithin(cible, début, fin) -</pre> + arr.copyWithin(cible) + arr.copyWithin(cible, début) + arr.copyWithin(cible, début, fin) -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<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> +- `cible` - <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. 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. Si <code>end</code> est omis, <code>copyWithin</code> copiera jusqu'à la fin du tableau (par défaut <code>arr.length</code>).</dd> -</dl> + - : Indice à partir duquel la séquence sera copiée. Si la valeur est négative, `cible `sera compté à partir de la fin du tableau. -<h3 id="Valeur_de_retour">Valeur de retour</h3> + Si `cible `est supérieur ou égal à `arr.length`, rien ne sera copié. Si `cible` est positionné apès `début`, la séquence copiée sera réduite pour correspondre à `arr.length`. -<p>Le tableau modifié par la méthode.</p> +- `début` {{optional_inline}} + - : Indice de début de la séquence a copier. Si la valeur est négative, `début` sera compté à partir de la fin du tableau. Si `début` est omis, `copyWithin` copiera à partir du début du tableau (par défaut 0). +- `fin` {{optional_inline}} + - : Indice de fin de la séquence a copier. `copyWithin` copie jusqu'à `fin` (non-inclusif). Si la valeur est négative, `end` sera compté à partir de la fin du tableau. Si `end` est omis, `copyWithin` copiera jusqu'à la fin du tableau (par défaut `arr.length`). -<h2 id="Description">Description</h2> +### Valeur de retour -<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> +Le tableau modifié par la méthode. -<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> +## Description -<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> +La fonction `copyWithin()` fonctionne de la même façon que `memmove` en C/C++. C'est une méthode très performante pour décaler les données d'un {{jsxref("Array")}} ou d'un {{jsxref("TypedArray")}} (dans ce cas, on pourra utiliser {{jsxref("TypedArray/copyWithin", "TypedArray.copyWithin()")}}). La séquence est copiée et collée en une opération. La séquence collée aura les valeurs copiées même si les zones de copiage et de collage se chevauchent. -<h2 id="Exemples">Exemples</h2> +La fonction `copyWithin()` est intentionnellement générique, il n'est pas nécessaire que `this` soit un objet {{jsxref("Array", "Array")}}. -<pre class="brush: js">[1, 2, 3, 4, 5].copyWithin(-2); +De plus, `copyWithin()` est une méthode qui modifie l'objet courant. Elle ne modifie pas la longueur de `this`, mais change son contenu et créé de nouvelles propriétés si nécessaire. + +## Exemples + +```js +[1, 2, 3, 4, 5].copyWithin(-2); // [1, 2, 3, 1, 2] [1, 2, 3, 4, 5].copyWithin(0, 3); @@ -78,13 +76,14 @@ i32a.copyWithin(0, 2); // 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> +## Prothèse d'émulation (_polyfill_) -<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> +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 : -<pre class="brush: js">if (!Array.prototype.copyWithin) { +```js +if (!Array.prototype.copyWithin) { Object.defineProperty(Array.prototype, 'copyWithin', { value: function(target, start/*, end*/) { // Steps 1-2. @@ -95,27 +94,27 @@ i32a.copyWithin(0, 2); var O = Object(this); // Steps 3-5. - var len = O.length >>> 0; + var len = O.length >>> 0; // Steps 6-8. - var relativeTarget = target >> 0; + var relativeTarget = target >> 0; - var to = relativeTarget < 0 ? + var to = relativeTarget < 0 ? Math.max(len + relativeTarget, 0) : Math.min(relativeTarget, len); // Steps 9-11. - var relativeStart = start >> 0; + var relativeStart = start >> 0; - var from = relativeStart < 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 relativeEnd = end === undefined ? len : end >> 0; - var final = relativeEnd < 0 ? + var final = relativeEnd < 0 ? Math.max(len + relativeEnd, 0) : Math.min(relativeEnd, len); @@ -125,14 +124,14 @@ i32a.copyWithin(0, 2); // Steps 16-17. var direction = 1; - if (from < to && to < (from + count)) { + if (from < to && to < (from + count)) { direction = -1; from += count - 1; to += count - 1; } // Step 18. - while (count > 0) { + while (count > 0) { if (from in O) { O[to] = O[from]; } else { @@ -150,43 +149,21 @@ i32a.copyWithin(0, 2); 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> - -<p>{{Compat("javascript.builtins.Array.copyWithin")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("Array", "Array")}}</li> -</ul> +} +``` + +## Spécifications + +| Spécification | État | Commentaires | +| -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | +| {{SpecName('ES2015', '#sec-array.prototype.copywithin', 'Array.prototype.copyWithin')}} | {{Spec2('ES2015')}} | Définition initiale. | +| {{SpecName('ES2016', '#sec-array.prototype.copywithin', 'Array.prototype.copyWithin')}} | {{Spec2('ES2016')}} | | +| {{SpecName('ESDraft', '#sec-array.prototype.copywithin', 'Array.prototype.copyWithin')}} | {{Spec2('ESDraft')}} | | + +## Compatibilité des navigateurs + +{{Compat("javascript.builtins.Array.copyWithin")}} + +## Voir aussi + +- {{jsxref("Array", "Array")}} diff --git a/files/fr/web/javascript/reference/global_objects/array/entries/index.md b/files/fr/web/javascript/reference/global_objects/array/entries/index.md index 5ab8acec51..9bfa9f7ca7 100644 --- a/files/fr/web/javascript/reference/global_objects/array/entries/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/entries/index.md @@ -11,38 +11,40 @@ tags: translation_of: Web/JavaScript/Reference/Global_Objects/Array/entries original_slug: Web/JavaScript/Reference/Objets_globaux/Array/entries --- -<div>{{JSRef}}</div> +{{JSRef}} -<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> +La méthode **`entries()`** renvoie un nouvel objet de type **`Array Iterator`** qui contient le couple clef/valeur pour chaque éléments du tableau. -<div>{{EmbedInteractiveExample("pages/js/array-entries.html")}}</div> +{{EmbedInteractiveExample("pages/js/array-entries.html")}} -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><var>arr</var>.entries()</pre> + arr.entries() -<h3 id="Valeur_de_retour">Valeur de retour</h3> +### Valeur de retour -<p>Un nouvel objet qui est un itérateur pour {{jsxref("Array")}}.</p> +Un nouvel objet qui est un itérateur pour {{jsxref("Array")}}. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Parcourir_un_tableau_avec_ses_index_et_éléments">Parcourir un tableau avec ses index et éléments</h3> +### Parcourir un tableau avec ses index et éléments -<pre class="brush:js">const arr = ["a", "b", "c"]; +```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> +### Boucle `for...of` -<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> +On peut avoir le même résultat en utilisant une boucle [for...of](/fr/docs/Web/JavaScript/Reference/Instructions/for...of) : -<pre class="brush: js">var arr = ['a', 'b', 'c']; +```js +var arr = ['a', 'b', 'c']; var eArr = arr.entries(); for (let e of eArr) { @@ -51,42 +53,25 @@ for (let e of eArr) { // [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> - -<p>{{Compat("javascript.builtins.Array.entries")}}</p> - -<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> +``` + +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- | +| {{SpecName('ES2015', '#sec-array.prototype.entries', 'Array.prototype.entries')}} | {{Spec2('ES2015')}} | Définition initiale. | +| {{SpecName('ESDraft', '#sec-array.prototype.entries', 'Array.prototype.entries')}} | {{Spec2('ESDraft')}} | | + +## Compatibilité des navigateurs + +{{Compat("javascript.builtins.Array.entries")}} + +## Voir aussi + +- {{jsxref("Array.prototype.keys()")}} +- {{jsxref("Array.prototype.values()")}} +- {{jsxref("Array.prototype.forEach()")}} +- {{jsxref("Array.prototype.every()")}} +- {{jsxref("Array.prototype.some()")}} +- [`for...of`](/fr/docs/Web/JavaScript/Reference/Instructions/for...of) +- [Les protocoles d'itération](/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration) diff --git a/files/fr/web/javascript/reference/global_objects/array/every/index.md b/files/fr/web/javascript/reference/global_objects/array/every/index.md index 65dfaf3c44..030fb9e115 100644 --- a/files/fr/web/javascript/reference/global_objects/array/every/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/every/index.md @@ -12,84 +12,83 @@ tags: translation_of: Web/JavaScript/Reference/Global_Objects/Array/every original_slug: Web/JavaScript/Reference/Objets_globaux/Array/every --- -<div>{{JSRef}}</div> +{{JSRef}} -<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> +La méthode **`every()`** permet de tester si tous les éléments d'un tableau vérifient une condition donnée par une fonction en argument. Cette méthode renvoie un booléen pour le résultat du test. -<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> +> **Note :** Cette méthode renvoie `true` pour n'importe quelle condition utilisée sur un tableau vide. -<div>{{EmbedInteractiveExample("pages/js/array-every.html")}}</div> +{{EmbedInteractiveExample("pages/js/array-every.html")}} -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><var>arr</var>.every(<var>callback</var>[, <var>thisArg</var>])</pre> + arr.every(callback[, thisArg]) -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<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> +- `callback` -<h3 id="Valeur_de_retour">Valeur de retour</h3> + - : La fonction sur laquelle on souhaite tester chaque élément du tableau. Elle prend en compte trois arguments : -<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> + - `currentValue` + - : La valeur de l'élément à traiter. + - `index`{{Optional_inline}} + - : L'indice de l'élément du tableau à tester. + - `array`{{Optional_inline}} + - : Le tableau sur lequel on a appelé la méthode `every`. -<h2 id="Description">Description</h2> +- `thisArg`{{Optional_inline}} + - : Paramètre optionnel. La valeur à utiliser pour `this` lors de l'exécution de la fonction. -<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> +### Valeur de retour -<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> +`true` si la fonction de rappel obtient une valeur équivalente à vrai (_truthy_) pour chaque élément du tableau et `false` sinon. -<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> +## Description -<p><code>every</code> ne modifie pas le tableau sur lequel elle a été appelée.</p> +La méthode `every` exécute la fonction `callback` fournie sur chacun des éléments contenus dans le tableau jusqu'à ce qu'un élément pour lequel la fonction `callback` renvoie une valeur fausse (_falsy value_) soit trouvé. Si un tel élément est trouvé, la méthode `every` renvoie directement `false`. Sinon, si la fonction `callback` a renvoyé une valeur vraie pour tous les éléments, la méthode `every` renverra `true`. La fonction `callback` n'est appelée que pour les indices du tableau pour lesquels il existe des valeurs affectées. Elle n'est pas appelée pour les indices supprimés ou ceux qui n'ont jamais reçu de valeur. -<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> +`callback` est appelée avec trois arguments : la valeur de l'élément en cours de traitement, l'indice de l'élément dans le tableau et le tableau qui est parcouru. -<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> +Si un paramètre `thisArg` est fourni à la méthode `every`, ce sera la valeur `this` de la fonction `callback`. Si ce paramètre n'est pas fourni, la valeur `undefined` sera utilisée comme valeur pour `this`. La valeur `this` « définitivement » utilisée par la fonction `callback` est déterminée selon [les règles usuelles de détermination de `this`](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_this). -<h2 id="Exemples">Exemples</h2> +`every` ne modifie pas le tableau sur lequel elle a été appelée. -<h3 id="Tester_la_valeur_des_éléments_d'un_tableau">Tester la valeur des éléments d'un tableau</h3> +Les éléments traités par la méthode `every` sont définis lors du premier appel à `callback`. Les éléments ajoutés au tableau après que l'appel à `every` ait commencé ne seront pas traités par la fonction `callback`. Si des éléments du tableau sont modifiés, la valeur passée à la fonction `callback` sera celle qu'ils ont au moment où `every` les traitera. Les éléments qui sont supprimés ne sont pas traités par la fonction `every`. -<p>Dans l'exemple suivant, on teste si tous les éléments du tableau sont supérieurs à 10.</p> +`every` agit de la même façon que le quantificateur mathématiques « pour tous », notamment pour le cas au limite d'un tableau vide pour lequel elle renvoie `true` (on dit qu'il est trivialement vrai que tous les éléments d'un [ensemble vide](https://fr.wikipedia.org/wiki/Ensemble_vide#Difficult.C3.A9s_de_la_notion_d.27ensemble_vide) respectent n'importe quelle condition). -<pre class="brush: js">function estAssezGrand(element, index, array) { - return element >= 10; +## Exemples + +### Tester la valeur des éléments d'un tableau + +Dans l'exemple suivant, on teste si tous les éléments du tableau sont supérieurs à 10. + +```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> +### Utiliser les fonctions fléchées avec `every` -<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> +{{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. -<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> +```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 +``` -<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2> +## Prothèse d'émulation (_polyfill_) -<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> +`every` fut ajouté avec la cinquième édition du standard ECMA-262. Pour cette raison, il n'est pas nécessairement présent dans les différentes implémentations de ce standard. Afin de faire fonctionner du code dans un environnement qui ne possède pas cette fonctionnalité, on pourra utiliser le fragment de code suivant au début des scripts. Cet algorithme correspond exactement à celui défini dans la cinquième édition du standard ECMA-262. On prend l'hypothèse que `Object` et `TypeError` ont leurs valeurs originales (n'ont pas été modifiés) et que `callbackfn.call` correspond bien à la valeur originale de {{jsxref("Function.prototype.call")}} -<pre class="brush: js">if (!Array.prototype.every) { +```js +if (!Array.prototype.every) { Array.prototype.every = function(callbackfn, thisArg) { 'use strict'; var T, k; @@ -105,7 +104,7 @@ original_slug: Web/JavaScript/Reference/Objets_globaux/Array/every // 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; + var len = O.length >>> 0; // 4. Si IsCallable(callbackfn) est faux, on lève une exception // TypeError. @@ -114,15 +113,15 @@ original_slug: Web/JavaScript/Reference/Objets_globaux/Array/every } // 5. Si thisArg a été fourni : soit T cette valeur thisArg, undefined sinon. - if (arguments.length > 1) { + 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) { + // 7. On répète tant que k < len + while (k < len) { var kValue; @@ -153,44 +152,23 @@ original_slug: Web/JavaScript/Reference/Objets_globaux/Array/every 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> - -<p>{{Compat("javascript.builtins.Array.every")}}</p> - -<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> +``` + +## Spécifications + +| Spécification | État | Commentaires | +| -------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | +| {{SpecName('ES5.1', '#sec-15.4.4.16', 'Array.prototype.every')}} | {{Spec2('ES5.1')}} | Définition initiale. Implémentée avec JavaScript 1.6. | +| {{SpecName('ES6', '#sec-array.prototype.every', 'Array.prototype.every')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-array.prototype.every', 'Array.prototype.every')}} | {{Spec2('ESDraft')}} | | + +## Compatibilité des navigateurs + +{{Compat("javascript.builtins.Array.every")}} + +## Voir aussi + +- {{jsxref("Array.prototype.forEach()")}} +- {{jsxref("Array.prototype.some()")}} +- {{jsxref("Array.prototype.find()")}} +- {{jsxref("TypedArray.prototype.every()")}} diff --git a/files/fr/web/javascript/reference/global_objects/array/fill/index.md b/files/fr/web/javascript/reference/global_objects/array/fill/index.md index dc4d155415..7b9928f46d 100644 --- a/files/fr/web/javascript/reference/global_objects/array/fill/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/fill/index.md @@ -12,49 +12,47 @@ tags: translation_of: Web/JavaScript/Reference/Global_Objects/Array/fill original_slug: Web/JavaScript/Reference/Objets_globaux/Array/fill --- -<div>{{JSRef}}</div> +{{JSRef}} -<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> +La méthode **`fill()`** remplit tous les éléments d'un tableau entre deux index avec une valeur statique. La valeur de l'index de fin n'est pas incluse. Cette méthode renvoie le tableau modifié. -<div>{{EmbedInteractiveExample("pages/js/array-fill.html")}}</div> +{{EmbedInteractiveExample("pages/js/array-fill.html")}} -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<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> + arr.fill(valeur) + arr.fill(valeur, début) + arr.fill(valeur, début, fin) -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<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> +- `valeur` + - : Valeur avec laquelle remplir le tableau. +- `début` {{optional_inline}} + - : Index de début, la valeur par défaut est 0. +- `fin` {{optional_inline}} + - : Index de fin, la valeur par défaut est `this.length`. -<h3 id="Valeur_de_retour">Valeur de retour</h3> +### Valeur de retour -<p>Le tableau modifié par la méthode.</p> +Le tableau modifié par la méthode. -<h2 id="Description">Description</h2> +## Description -<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> +Les éléments pour lesquels on utilisera la valeur sont ceux contenus dans l'intervalle de positions \[`début`, `fin`]. -<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> +La méthode `fill()` prend jusqu'à trois arguments : `valeur`, `début` et `fin`. Les arguments `début` et `fin` sont optionnels. Leurs valeurs par défaut sont respectivement `0` et la taille `length` de l'objet `this`. -<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> +Si `début` est négatif, il sera traité comme `length+début` où `length` est la taille du tableau. Si `fin` est négatif, il est traité comme `length+fin`. -<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> +La fonction `fill()` est intentionnellement générique, il n'est pas nécessaire que sa valeur `this` soit un objet `Array`. -<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> +La méthode `fill()` est une méthode de modification, elle changera l'objet `this` lui-même, et renverra l'objet modifié. Elle ne crée pas de copie. Lorsque cette méthode reçoit un objet comme valeur, elle copiera l'objet passé et remplira le tableau avec une référence vers cette copie. -<h2 id="Exemples">Exemples</h2> +## Exemples -<pre class="brush: js">[1, 2, 3].fill(4); // [4, 4, 4] +```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] @@ -67,11 +65,12 @@ Array(3).fill(4); // [4, 4, 4] // 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> +## Prothèse d'émulation (_polyfill_) -<pre class="brush: js">if (!Array.prototype.fill) { +```js +if (!Array.prototype.fill) { Object.defineProperty(Array.prototype, 'fill', { value: function(value) { @@ -83,29 +82,29 @@ arr[0].yop = "yop"; // [{yop: "yop"}, {yop: "yop"}, {yop: "yop"}] var O = Object(this); // Steps 3-5. - var len = O.length >>> 0; + var len = O.length >>> 0; // Steps 6-7. var start = arguments[1]; - var relativeStart = start >> 0; + var relativeStart = start >> 0; // Step 8. - var k = relativeStart < 0 ? + 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; + len : end >> 0; // Step 11. - var final = relativeEnd < 0 ? + var final = relativeEnd < 0 ? Math.max(len + relativeEnd, 0) : Math.min(relativeEnd, len); // Step 12. - while (k < final) { + while (k < final) { O[k] = value; k++; } @@ -114,37 +113,21 @@ arr[0].yop = "yop"; // [{yop: "yop"}, {yop: "yop"}, {yop: "yop"}] 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> - -<p>{{Compat("javascript.builtins.Array.fill")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("Array")}}</li> - <li>{{jsxref("TypedArray.prototype.fill()")}}</li> -</ul> +} +``` + +## Spécifications + +| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | +| {{SpecName('ES2015', '#sec-array.prototype.fill', 'Array.prototype.fill')}} | {{Spec2('ES2015')}} | Définition initiale. | +| {{SpecName('ESDraft', '#sec-array.prototype.fill', 'Array.prototype.fill')}} | {{Spec2('ESDraft')}} | | + +## Compatibilité des navigateurs + +{{Compat("javascript.builtins.Array.fill")}} + +## Voir aussi + +- {{jsxref("Array")}} +- {{jsxref("TypedArray.prototype.fill()")}} diff --git a/files/fr/web/javascript/reference/global_objects/array/filter/index.md b/files/fr/web/javascript/reference/global_objects/array/filter/index.md index 1894ac6f4c..d6f1b51909 100644 --- a/files/fr/web/javascript/reference/global_objects/array/filter/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/filter/index.md @@ -12,76 +12,75 @@ tags: translation_of: Web/JavaScript/Reference/Global_Objects/Array/filter original_slug: Web/JavaScript/Reference/Objets_globaux/Array/filter --- -<div>{{JSRef}}</div> +{{JSRef}} -<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> +La méthode **`filter()`** crée et retourne un nouveau tableau contenant tous les éléments du tableau d'origine qui remplissent une condition déterminée par la fonction `callback`. -<div>{{EmbedInteractiveExample("pages/js/array-filter.html")}}</div> +{{EmbedInteractiveExample("pages/js/array-filter.html")}} -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><var>arr</var>.filter(<var>callback)</var>; // callback(elementCourant[, index[, tableauEntier]]) -var nouveauTableau = arr.filter(callback, <var>thisArg</var>); -</pre> + arr.filter(callback); // callback(elementCourant[, index[, tableauEntier]]) + var nouveauTableau = arr.filter(callback, thisArg); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<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> +- `callback` -<h3 id="Valeur_de_retour">Valeur de retour</h3> + - : La fonction de test (ou _prédicat_) à appliquer à chaque élément du tableau. Cette fonction est appelée avec les arguments suivants : -<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> + - `elementCourant` + - : L'élément à traiter + - `index` + - : Son indice. + - `array` + - : Le tableau complet -<h2 id="Description">Description</h2> + Cette fonction renvoie `true` — ou une valeur équivalente — si l'élément doit être conservé pour le tableau résultat et `false` dans le cas contraire. -<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> +- `thisArg` {{optional_inline}} + - : Objet à utiliser en tant que `this` quand la fonction `callback` est exécutée. -<p>La fonction <code>callback</code> est appelée avec trois arguments :</p> +### Valeur de retour -<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> +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>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> +## Description -<p>Noter que <code>filter()</code> ne modifie pas le tableau d'origine.</p> +`filter()` appelle la fonction `callback` fournie pour chacun des éléments d'un tableau, et construit un nouveau tableau contenant tous les éléments pour lesquels l'appel de `callback` retourne `true` ou une valeur équivalente à `true` dans un contexte booléen. La fonction `callback` n'est utilisée que pour les éléments du tableau ayant une valeur assignée — les index supprimés ou pour lesquels il n'y a jamais eu de valeur ne sont pas pris en compte. Les éléments du tableau qui ne passent pas le test effectué par la fonction `callback` sont ignorés, ils ne sont pas inclus dans le nouveau tableau. -<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> +La fonction `callback` est appelée avec trois arguments : -<h2 id="Exemples">Exemples</h2> +1. la valeur de l'élément courant, +2. l'index de l'élément courant, +3. l'objet `Array` parcouru. -<h3 id="Filtrer_les_petites_valeurs">Filtrer les petites valeurs</h3> +Si le paramètre `thisArg` est fourni, il sera utilisé comme valeur `this` lors de l'appel de la fonction `callback`. S'il n'est pas fourni, la valeur `undefined` sera utilisée à la place. La valeur de `this` qui est finalement utilisée par la fonction `callback` est déterminée selon [les règles usuelles pour déterminer la valeur `this` au sein d'une fonction](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_this). -<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> +Noter que `filter()` ne modifie pas le tableau d'origine. -<pre class="brush: js">function suffisammentGrand(element) { - return element >= 10; +La liste des éléments parcourus par `filter()` est définie avant la première invocation de la fonction `callback`. Les éléments qui sont ajoutés à la liste après le début de l'appel de `filter()` (grâce à la fonction `callback` par exemple) ne seront pas concernés par le filtre. Si des éléments de la liste sont modifiés ou supprimés au cours du traitement, la valeur fournie à la fonction `callback` sera la valeur de ces éléments au moment où `filter()` les traite — les éléments supprimés ne seront pas traités par la fonction. + +## Exemples + +### Filtrer les petites valeurs + +L'exemple suivant utilise `filter` pour créer une nouvelle liste où tous les éléments dont la valeur est inférieure à 10 ont été retirés. + +```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> +### Filtrer des éléments JSON invalides et les trier en fonction d'un identifiant avec `filter()` -<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> +Dans l'exemple qui suit, on utilise `filter()` pour créer un objet JSON qui contient des éléments dont l'`id` est un entier. -<pre class="brush: js">var arr = [ +```js +var arr = [ { id: 15 }, { id: -1 }, { id: 0 }, @@ -97,7 +96,7 @@ var elementsInvalides = 0; function filtrerParID(obj) { // Si c'est un nombre - if (obj.id !== undefined && typeof(obj.id) === 'number' && !isNaN(obj.id)) { + if (obj.id !== undefined && typeof(obj.id) === 'number' && !isNaN(obj.id)) { return true; } else { elementsInvalides++; @@ -112,13 +111,15 @@ console.log('Tableau filtré\n', arrByID); // [{ 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> +// Nombre d'éléments invalides 4 +``` -<h3 id="Recherche_dans_un_tableau">Recherche dans un tableau</h3> +### Recherche dans un tableau -<p>Dans l'exemple qui suit, on utilise <code>filter()</code> pour filtrer le contenu d'un tableau selon un critère donné.</p> +Dans l'exemple qui suit, on utilise `filter()` pour filtrer le contenu d'un tableau selon un critère donné. -<pre class="brush: js">var fruits = ['pomme', 'banane', 'raisin', 'mangue']; +```js +var fruits = ['pomme', 'banane', 'raisin', 'mangue']; function filtreTexte(arr, requete) { return arr.filter(function (el) { @@ -128,32 +129,35 @@ function filtreTexte(arr, requete) { 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> +### Implémentation avec la syntaxe ECMAScript 2015 (ES6) -<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> +L'exemple suivant utilise [les fonctions fléchées](/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fléchées), et le mot clé [`const` ](/fr/docs/Web/JavaScript/Reference/Instructions/const)disponible en ES6. -<pre class="brush: js">const fruits = ['pomme', 'banane', 'raisin', 'mangue']; +```js +const fruits = ['pomme', 'banane', 'raisin', 'mangue']; -const filtreTexte = (arr, requete) => { - return arr.filter(el => el.toLowerCase().indexOf(requete.toLowerCase()) !== -1); +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> +console.log(filtreTexte(fruits, 'm')); // ['pomme', 'mangue']; +``` -<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2> +## Prothèse d'émulation (_polyfill_) -<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> +`Array.prototype.filter()` a été ajoutée avec la cinquième édition du standard ECMA-262 — ainsi elle pourrait ne pas être présente dans toutes les implémentations du standard. Ce problème peut être contourné en ajoutant le code suivant au début des scripts et permettra d'utiliser `filter` au sein d'implémentations qui n'en bénéficient pas nativement. Cet algorithme est strictement celui spécifié par la cinquième édition d'ECMA-262, en considérant que `callbackfn.call` est évaluée avec la valeur d'origine de {{jsxref("Function.prototype.call")}} et que {{jsxref("Array.prototype.push")}} a sa valeur d'origine. -<pre class="brush: js">if (!Array.prototype.filter){ +```js +if (!Array.prototype.filter){ Array.prototype.filter = function(func, thisArg) { 'use strict'; - if ( ! ((typeof func === 'Function' || typeof func === 'function') && this) ) + if ( ! ((typeof func === 'Function' || typeof func === 'function') && this) ) throw new TypeError(); - var len = this.length >>> 0, + var len = this.length >>> 0, res = new Array(len), // preallocate array t = this, c = 0, i = -1; if (thisArg === undefined){ @@ -180,44 +184,24 @@ console.log(filtreTexte(fruits, 'm')); // ['pomme', 'mangue'];</pre> 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> - -<p>{{Compat("javascript.builtins.Array.filter")}}</p> - -<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> +} +``` + +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- | +| {{SpecName('ES5.1', '#sec-15.4.4.20', 'Array.prototype.filter')}} | {{Spec2('ES5.1')}} | Définition initiale. Implémentée avec JavaScript 1.6. | +| {{SpecName('ES2015', '#sec-array.prototype.filter', 'Array.prototype.filter')}} | {{Spec2('ES2015')}} | | +| {{SpecName('ESDraft', '#sec-array.prototype.filter', 'Array.prototype.filter')}} | {{Spec2('ESDraft')}} | | + +## Compatibilité des navigateurs + +{{Compat("javascript.builtins.Array.filter")}} + +## Voir aussi + +- {{jsxref("Array.prototype.forEach()")}} +- {{jsxref("Array.prototype.every()")}} +- {{jsxref("Array.prototype.some()")}} +- {{jsxref("Array.prototype.reduce()")}} diff --git a/files/fr/web/javascript/reference/global_objects/array/find/index.md b/files/fr/web/javascript/reference/global_objects/array/find/index.md index 19ef805ebd..c66c0ac9db 100644 --- a/files/fr/web/javascript/reference/global_objects/array/find/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/find/index.md @@ -12,59 +12,56 @@ tags: translation_of: Web/JavaScript/Reference/Global_Objects/Array/find original_slug: Web/JavaScript/Reference/Objets_globaux/Array/find --- -<div>{{JSRef}}</div> +{{JSRef}} -<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> +La méthode **`find()`** renvoie la **valeur** du **premier élément trouvé** dans le tableau qui respecte la condition donnée par la fonction de test passée en argument. Sinon, la valeur {{jsxref("undefined")}} est renvoyée. -<div>{{EmbedInteractiveExample("pages/js/array-find.html")}}</div> +{{EmbedInteractiveExample("pages/js/array-find.html")}} +Voir aussi la méthode {{jsxref("Array.findIndex", "findIndex()")}} qui renvoie l'**index** de l'élément trouvé et non sa valeur. Si on souhaite repérer la position d'un élément donné dans le tableau, on pourra utiliser {{jsxref("Array.prototype.indexOf()")}}. Si on souhaite déterminer si un tableau contient un élément donné, on pourra utiliser la méthode {{jsxref("Array.prototype.includes()")}}. +## Syntaxe -<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> + arr.find(callback(element[, index[, tableau]])[, thisArg]) -<h2 id="Syntaxe">Syntaxe</h2> +### Paramètres -<pre class="syntaxbox"><var>arr</var>.find(<var>callback</var>(element[, index[, tableau]])[, <var>thisArg</var>])</pre> +- `callback` -<h3 id="Paramètres">Paramètres</h3> + - : Fonction à exécuter sur chaque valeur du tableau, elle prend 3 arguments : -<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> + - `element` + - : L'élément actuellement traité dans le tableau. + - `index`{{optional_inline}} + - : L'index de l'élément actuellement traité dans le tableau + - `array`{{optional_inline}} + - : Le tableau pour lequel la méthode `find` a été appelée. -<h3 id="Valeur_de_retour">Valeur de retour</h3> +- `thisArg` {{optional_inline}} + - : Ce paramètre est optionnel. Objet à utiliser en tant que `this` lorsque la fonction `callback` est exécutée. -<p>La valeur du premier élément du tableau qui réussit le test, sinon {{jsxref("undefined")}}.</p> +### Valeur de retour -<h2 id="Description">Description</h2> +La valeur du premier élément du tableau qui réussit le test, sinon {{jsxref("undefined")}}. -<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> +## Description -<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> +La méthode `find` exécute la fonction `callback` une fois pour chaque élément présent dans le tableau jusqu'à ce qu'elle retourne une valeur vraie (qui peut être convertie en `true`). Si un élément est trouvé, `find` retourne immédiatement la valeur de l'élément. Autrement, `find` retourne `undefined`. La méthode `callback` est seulement appelée pour les index du tableau pour lesquels on dispose d'une valeur. Elle n'est pas appelée pour les index supprimés ou pour ceux qui n'ont pas de valeur. -<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> +La méthode `callback` est appelée avec trois arguments : la valeur de l'élément, l'index de l'élément, et l'objet correspondant au tableau traversé. -<p><code>find</code> ne modifie pas le tableau à partir duquel elle est appelée.</p> +Si le paramètre `thisArg` est fourni à `find`, il sera utilisé comme le `this` pour chaque exécution de la fonction `callback`. S'il n'est pas fourni, alors {{jsxref("undefined")}} sera utilisé. -<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> +`find` ne modifie pas le tableau à partir duquel elle est appelée. -<h2 id="Exemples">Exemples</h2> +L'intervalle des éléments inspectés par `find` est défini avant la première exécution de `callback`. Les éléments ajoutés au tableau après l'appel à `find` ne seront pas inspectés par la fonction `callback`. Si un élément existant est modifié avant le passage du `callback`, alors la valeur traitée par le `callback` sera celle présente lors du passage de `find` sur son index. Les éléments supprimés ne seront pas traités. -<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> +## Exemples -<pre class="brush: js">const inventaire = [ +### Trouver un objet dans un tableau grâce à une de ses propriétés + +```js +const inventaire = [ {nom: 'pommes', quantité: 2}, {nom: 'bananes', quantité: 0}, {nom: 'cerises', quantité: 5} @@ -75,68 +72,55 @@ function estCerises(fruit) { } console.log(inventaire.find(estCerises)); -// { nom: 'cerises', quantité: 5}</pre> +// { nom: 'cerises', quantité: 5} +``` -<h4 id="Utiliser_les_fonctions_fléchées_ES6ES2015">Utiliser les fonctions fléchées ES6/ES2015</h4> +#### Utiliser les fonctions fléchées ES6/ES2015 -<pre class="brush: js">const inventaire = [ +```js +const inventaire = [ {nom: 'pommes', quantité: 2}, {nom: 'bananes', quantité: 0}, {nom: 'cerises', quantité: 5} ]; -const resultat = inventaire.find( fruit => fruit.nom === 'cerises'); +const resultat = inventaire.find( fruit => fruit.nom === 'cerises'); console.log(resultat); -// { nom: 'cerises', quantité: 5}</pre> +// { nom: 'cerises', quantité: 5} +``` -<h3 id="Trouver_un_nombre_premier_dans_un_tableau">Trouver un nombre premier dans un tableau</h3> +### Trouver un nombre premier dans un tableau -<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> +Dans l'exemple suivant, on cherche un nombre premier parmi les éléments d'un tableau (ou retourne `undefined` s'il n'y en a pas ). -<pre class="brush: js">function estPremier(element, index, array) { +```js +function estPremier(element, index, array) { let début = 2; - while (début <= Math.sqrt(element)) { - if (element % début ++ < 1) return false; + while (début <= Math.sqrt(element)) { + if (element % début ++ < 1) return false; } - return (element > 1); + 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> - -<p>{{Compat("javascript.builtins.Array.find")}}</p> - -<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> +``` + +## Spécifications + +| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------------------------------- | ---------------------------- | ------------------- | +| {{SpecName('ES2015', '#sec-array.prototype.find', 'Array.prototype.find')}} | {{Spec2('ES2015')}} | Définition initiale | +| {{SpecName('ESDraft', '#sec-array.prototype.find', 'Array.prototype.find')}} | {{Spec2('ESDraft')}} | | + +## Compatibilité des navigateurs + +{{Compat("javascript.builtins.Array.find")}} + +## Voir aussi + +- {{jsxref("Array.prototype.findIndex()")}} – trouver et renvoyer un index +- {{jsxref("Array.prototype.includes()")}} – tester si une valeur existe dans le tableau +- {{jsxref("Array.prototype.filter()")}} – trouver tous les éléments correspondants +- {{jsxref("Array.prototype.every()")}} – tester l'ensemble des éléments d'un tableau +- {{jsxref("Array.prototype.some()")}} – tester si au moins un élément du tableau respecte un critère diff --git a/files/fr/web/javascript/reference/global_objects/array/findindex/index.md b/files/fr/web/javascript/reference/global_objects/array/findindex/index.md index 9564b24021..5a4a20328c 100644 --- a/files/fr/web/javascript/reference/global_objects/array/findindex/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/findindex/index.md @@ -12,88 +12,89 @@ tags: translation_of: Web/JavaScript/Reference/Global_Objects/Array/findIndex original_slug: Web/JavaScript/Reference/Objets_globaux/Array/findIndex --- -<div>{{JSRef}}</div> +{{JSRef}} -<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> +La méthode **`findIndex()`** renvoie l'**indice** du **premier élément** du tableau qui satisfait une condition donnée par une fonction. Si la fonction renvoie faux pour tous les éléments du tableau, le résultat vaut -1. -<div>{{EmbedInteractiveExample("pages/js/array-findindex.html")}}</div> +{{EmbedInteractiveExample("pages/js/array-findindex.html")}} +Voir également la méthode {{jsxref("Array.find", "find()")}} qui renvoie la **valeur** (et non l'indice) d'un des éléments trouvés. +## Syntaxe -<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> + arr.findIndex(callback(element[, index[, tableau]])[, thisArg]) -<h2 id="Syntaxe">Syntaxe</h2> +### Paramètres -<pre class="syntaxbox"><var>arr</var>.findIndex(<var>callback</var>(element[, index[, tableau]])[, <var>thisArg</var>])</pre> +- `callback` -<h3 id="Paramètres">Paramètres</h3> + - : Une fonction à exécuter sur chaque valeur du tableau jusqu'à ce que celle-ci renvoie `true`. Cette fonction prend trois arguments : -<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> + - `élément` + - : L'élément du tableau qui doit être traité. + - `indice`{{optional_inline}} + - : L'indice de l'élément du tableau en cours de traitement. + - `tableau`{{optional_inline}} + - : Le tableau sur lequel a été appelé `findIndex`. -<h3 id="Valeur_de_retour">Valeur de retour</h3> +- `argumentThis`{{optional_inline}} + - : L'objet à utiliser comme contexte `this` lorsque le `callback` est exécuté. -<p>Un indice d'un élément du tableau qui réussit le test décrit, -1 sinon.</p> +### Valeur de retour -<h2 id="Description">Description</h2> +Un indice d'un élément du tableau qui réussit le test décrit, -1 sinon. -<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> +## Description -<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> +La méthode `findIndex` exécute la fonction `callback` une fois pour chaque élément présent dans le tableau (le tableau est parcouru entre les indices `0` et `length-1` compris) jusqu'à ce que `callback` renvoie une valeur vraie. -<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> +S'il existe un tel élément, `findIndex` renverra immédiatement l'indice de l'élément concerné. Sinon, `findIndex` renverra -1. À la différence des autres méthodes liées aux tableaux comme `some()`, `callback` est également appelée pour les indices du tableau pour lesquels aucun élément n'est défini. -<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> +`callback` possède trois arguments : la valeur de l'élément, l'indice de l'élément et l'objet Array qui est parcouru -<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> +Si l'argument `argumentThis` est fourni à la méthode `findIndex`, il sera utilisé comme « contexte » [`this`](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_this) pour chaque appel de `callback`. S'il n'est pas fourni, {{jsxref("undefined")}} sera utilisé. -<h2 id="Exemples">Exemples</h2> +`findIndex` ne modifie pas le tableau sur laquelle elle est appelée. Les éléments qui seront traités par `findIndex` sont « récoltés » avant le premier appel de `callback`. Tout élément qui sera ajouté au tableau après l'appel de `findIndex` ne sera pas utilisé avec `callback`. Si un élément existant, pas encore visité, est modifié par `callback`, la valeur qui sera passé au `callback` pour cet élément modifié sera celle que `findIndex` utilise lorsqu'elle utilise l'indice de l'élément en question. Les éléments supprimés sont bien parcourus. -<h3 id="Trouver_l'indice_d'un_nombre_premier_dans_un_tableau">Trouver l'indice d'un nombre premier dans un tableau</h3> +## Exemples -<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> +### Trouver l'indice d'un nombre premier dans un tableau -<pre class="brush: js">function estPremier(élément, index, array) { +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). + +```js +function estPremier(élément, index, array) { var début = 2; - while (début <= Math.sqrt(élément)) { - if (élément % début < 1) { + while (début <= Math.sqrt(élément)) { + if (élément % début < 1) { return false; } else { début++; } } - return élément > 1; + 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> +console.log([4, 6, 7, 12].findIndex(estPremier)); // 2 +``` -<h3 id="Trouver_un_indice_avec_une_fonction_fléchée">Trouver un indice avec une fonction fléchée</h3> +### Trouver un indice avec une fonction fléchée -<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> +Dans cet exemple, on utilise [une fonction fléchée](/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fléchées) pour trouver l'indice d'un élément : -<pre class="brush: js">const fruits = ["pomme", "banane", "melon", "fraise", "raisin"]; +```js +const fruits = ["pomme", "banane", "melon", "fraise", "raisin"]; -const indice = fruits.findIndex(fruit => fruit === "fraise"); +const indice = fruits.findIndex(fruit => fruit === "fraise"); console.log(indice); // 3 -console.log(fruits[indice]); // fraise </pre> +console.log(fruits[indice]); // fraise +``` -<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2> +## Prothèse d'émulation (_polyfill_) -<pre class="brush: js">// https://tc39.github.io/ecma262/#sec-array.prototype.findindex +```js +// https://tc39.github.io/ecma262/#sec-array.prototype.findindex if (!Array.prototype.findIndex) { Object.defineProperty(Array.prototype, 'findIndex', { value: function(predicate) { @@ -105,7 +106,7 @@ if (!Array.prototype.findIndex) { var o = Object(this); // 2. Let len be ? ToLength(? Get(O, "length")). - var len = o.length >>> 0; + var len = o.length >>> 0; // 3. If IsCallable(predicate) is false, throw a TypeError exception. if (typeof predicate !== 'function') { @@ -118,8 +119,8 @@ if (!Array.prototype.findIndex) { // 5. Let k be 0. var k = 0; - // 6. Repeat, while k < len - while (k < len) { + // 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 »)). @@ -138,39 +139,23 @@ if (!Array.prototype.findIndex) { 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> - -<p>{{Compat("javascript.builtins.Array.findIndex")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("Array.prototype.find()")}}</li> - <li>{{jsxref("Array.prototype.indexOf()")}}</li> -</ul> +} +``` + +S'il est vraiment nécessaire de prendre en charge les moteurs JavaScript qui ne prennent pas en charge {{jsxref("Object.defineProperty()")}}, mieux vaut ne pas ajouter de prothèse aux méthodes d'`Array.prototype` car on ne peut pas les rendre non-énumérables. + +## Spécifications + +| Spécification | État | Commentaires | +| -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | +| {{SpecName('ES2015', '#sec-array.prototype.findindex', 'Array.prototype.findIndex')}} | {{Spec2('ES2015')}} | Définition initiale. | +| {{SpecName('ESDraft', '#sec-array.prototype.findIndex', 'Array.prototype.findIndex')}} | {{Spec2('ESDraft')}} | | + +## Compatibilité des navigateurs + +{{Compat("javascript.builtins.Array.findIndex")}} + +## Voir aussi + +- {{jsxref("Array.prototype.find()")}} +- {{jsxref("Array.prototype.indexOf()")}} diff --git a/files/fr/web/javascript/reference/global_objects/array/flat/index.md b/files/fr/web/javascript/reference/global_objects/array/flat/index.md index 160e1c350b..e9ee2df63b 100644 --- a/files/fr/web/javascript/reference/global_objects/array/flat/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/flat/index.md @@ -10,30 +10,29 @@ tags: translation_of: Web/JavaScript/Reference/Global_Objects/Array/flat original_slug: Web/JavaScript/Reference/Objets_globaux/Array/flat --- -<div>{{JSRef}}</div> +{{JSRef}} -<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> +La méthode **`flat()`** permet de créer un nouveau tableau contenant les éléments des sous-tableaux du tableau passé en argument, qui sont concaténés récursivement pour atteindre une profondeur donnée. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><var>var nouveauTableau = monTableau</var>.flat([<var>profondeur</var>]);</pre> + var nouveauTableau = monTableau.flat([profondeur]); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<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> +- `profondeur` {{optional_inline}} + - : Le niveau de profondeur en termes d'imbrication de tableau. Autrement dit, jusqu'à quel niveau d'imbrication un tableau imbriqué doit il être aplati. La valeur par défaut est 1. -<h3 id="Valeur_de_retour">Valeur de retour</h3> +### Valeur de retour -<p>Un nouveau tableau qui contient la concaténation des éléments des sous-tableaux du tableau passé en argument.</p> +Un nouveau tableau qui contient la concaténation des éléments des sous-tableaux du tableau passé en argument. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Aplatir_des_tableaux_imbriqués">Aplatir des tableaux imbriqués</h3> +### Aplatir des tableaux imbriqués -<pre class="brush: js">var arr1 = [1, 2, [3, 4]]; +```js +var arr1 = [1, 2, [3, 4]]; arr1.flat(); // [1, 2, 3, 4] @@ -44,49 +43,54 @@ arr2.flat(); 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> +### Aplatir et combler les trous -<p>La méthode <code>flat()</code> permet également de retirer les « trous » d'un tableau :</p> +La méthode `flat()` permet également de retirer les « trous » d'un tableau : -<pre class="brush: js">var arr4 = [1, 2, , 4, 5]; +```js +var arr4 = [1, 2, , 4, 5]; arr4.flat(); -// [1, 2, 4, 5]</pre> +// [1, 2, 4, 5] +``` -<h2 id="Équivalent">Équivalent</h2> +## Équivalent -<h3 id="reduce_et_concat"><code>reduce</code> et <code>concat</code></h3> +### `reduce` et `concat` -<pre class="brush: js">var arr = [1, 2, [3, 4]]; +```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), []); +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> +const flat = arr => [].concat(...arr); +``` -<h3 id="reduce_concat_isArray_récursivité"><code>reduce</code> + <code>concat</code> + <code>isArray</code> + récursivité</h3> +### `reduce` + `concat` + `isArray` + récursivité -<pre class="brush: js">var arr = [1, 2, [3, 4, [5, 6]]]; +```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), []); + 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> +### Utiliser une pile -<pre class="brush: js">var arr = [1, 2, [3, 4]]; +```js +var arr = [1, 2, [3, 4]]; // Version non récursive utilisant une pile function flatStack(input) { @@ -110,34 +114,21 @@ function flatStack(input) { 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> - -<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> +``` + +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------------------------- | -------- | -------------------- | +| [ECMAScript 2019](https://www.ecma-international.org/ecma-262/10.0/index.html#sec-array.prototype.flat) | Finalisé | Proposition initiale | + +## Compatibilité des navigateurs + +{{Compat("javascript.builtins.Array.flat")}} + +## Voir aussi + +- {{jsxref("Array.prototype.flatMap()")}} +- {{jsxref("Array.prototype.map()")}} +- {{jsxref("Array.prototype.reduce()")}} +- {{jsxref("Array.prototype.concat()")}} diff --git a/files/fr/web/javascript/reference/global_objects/array/flatmap/index.md b/files/fr/web/javascript/reference/global_objects/array/flatmap/index.md index 4117829f18..1c95114d1d 100644 --- a/files/fr/web/javascript/reference/global_objects/array/flatmap/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/flatmap/index.md @@ -10,111 +10,100 @@ tags: translation_of: Web/JavaScript/Reference/Global_Objects/Array/flatMap original_slug: Web/JavaScript/Reference/Objets_globaux/Array/flatMap --- -<div>{{JSRef}}</div> +{{JSRef}} -<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> +La méthode **`flatMap()`** permet d'appliquer une fonction à chaque élément du tableau puis d'aplatir le résultat en un tableau. Cela correspond à l'enchaînement de {{jsxref("Array.prototype.map()")}} suivi de {{jsxref("Array.prototype.flat()")}} de profondeur 1. `flatMap` est plus efficace que la combinaison de ces deux opérations, souvent réalisées conjointement. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<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> + var new_array = arr.flatMap(function callback(currentValue[, index[, array]]) { + // return element for new_array + }[, thisArg]) -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><code>callback</code></dt> - <dd>La fonction qui produit un élément du nouveau tableau et qui prend trois arguments : - <dl> - <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> +- `callback` -<h3 id="Valeur_de_retour">Valeur de retour</h3> + - : La fonction qui produit un élément du nouveau tableau et qui prend trois arguments : -<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> + - `currentValue` + - : La valeur du tableau qui est traitée. + - `index`{{optional_inline}} + - : L'indice de l'élément du tableau qui est traitée. + - `array`{{optional_inline}} + - : Le tableau sur lequel `flatMap` a été appelée. -<h2 id="Description">Description</h2> +- `thisArg`{{optional_inline}} + - : La valeur à utiliser comme contexte `this` lors de l'exécution de `callback`. -<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> +### Valeur de retour -<h2 id="Exemples">Exemples</h2> +Un nouveau tableau composé d'éléments résultants de la fonction de rappel (_callback_) et aplati d'un niveau de profondeur. -<h3 id="map_et_flatMap"><code>map()</code> et <code>flatMap()</code></h3> +## Description -<pre class="brush: js">var arr1 = [1, 2, 3, 4]; +Pour la fonction de rappel, voir {{jsxref("Array.prototype.map()")}}. La méthode `flatMap()` est identique à un appel de {{jsxref("Array.prototype.map()")}} suivi d'un appel de {{jsxref("Array.prototype.flat()")}} avec la profondeur 1. -arr1.map(x => [x * 2]); +## Exemples + +### `map()` et `flatMap()` + +```js +var arr1 = [1, 2, 3, 4]; + +arr1.map(x => [x * 2]); // [[2], [4], [6], [8]] -arr1.flatMap(x => [x * 2]); +arr1.flatMap(x => [x * 2]); // [2, 4, 6, 8] // seul un niveau est aplati -arr1.flatMap(x => [[x * 2]]); +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> +On peut utiliser un autre exemple où on génère une liste de mots à partir d'une liste de phrases : -<pre class="brush: js">let tableau1 = ["Coucou comment", "", "ça va ?"]; +```js +let tableau1 = ["Coucou comment", "", "ça va ?"]; -tableau1.map(x => x.split(" ")); +tableau1.map(x => x.split(" ")); // [["Coucou", "comment"], [""], ["ça", "va", "?"]] -tableau1.flatMap(x => x.split(" ")); +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> +On notera que la longueur de la liste obtenue avec `flatMap` est différente de la longueur de la liste originale. -<pre>//=> [1, 2, 3, 4, 5, 6, 7, 8, 9]</pre> + //=> [1, 2, 3, 4, 5, 6, 7, 8, 9] -<h2 id="Équivalent">Équivalent</h2> +## Équivalent -<h3 id="reduce_et_concat"><code>reduce()</code> et <code>concat()</code></h3> +### `reduce()` et `concat()` -<pre class="brush: js">var arr = [1, 2, 3, 4]; +```js +var arr = [1, 2, 3, 4]; -arr.flatMap(x => [x, x * 2]); +arr.flatMap(x => [x, x * 2]); // est équivalent à -arr.reduce((acc, x) => acc.concat([x, x * 2]), []); -// [1, 2, 2, 4, 3, 6, 4, 8]</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> - -<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> +arr.reduce((acc, x) => acc.concat([x, x * 2]), []); +// [1, 2, 2, 4, 3, 6, 4, 8] +``` + +## Spécifications + +| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------------------------------------- | -------- | -------------------- | +| [ECMAScript 2019](https://www.ecma-international.org/ecma-262/10.0/index.html#sec-array.prototype.flatmap) | Finalisé | Proposition initiale | + +## Compatibilité des navigateurs + +{{Compat("javascript.builtins.Array.flatMap")}} + +## Voir aussi + +- {{jsxref("Array.prototype.flat()")}} +- {{jsxref("Array.prototype.map()")}} +- {{jsxref("Array.prototype.reduce()")}} +- {{jsxref("Array.prototype.concat()")}} diff --git a/files/fr/web/javascript/reference/global_objects/array/foreach/index.md b/files/fr/web/javascript/reference/global_objects/array/foreach/index.md index 1b10baec33..13b7cf4a13 100644 --- a/files/fr/web/javascript/reference/global_objects/array/foreach/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/foreach/index.md @@ -12,107 +12,102 @@ tags: translation_of: Web/JavaScript/Reference/Global_Objects/Array/forEach original_slug: Web/JavaScript/Reference/Objets_globaux/Array/forEach --- -<div>{{JSRef}}</div> +{{JSRef}} -<p>La méthode <code><strong>forEach()</strong></code> permet d'exécuter une fonction donnée sur chaque élément du tableau.</p> +La méthode **`forEach()`** permet d'exécuter une fonction donnée sur chaque élément du tableau. -<div>{{EmbedInteractiveExample("pages/js/array-foreach.html")}}</div> +{{EmbedInteractiveExample("pages/js/array-foreach.html")}} -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><var>arr</var>.forEach(<var>callback</var>); -arr.forEach(callback, <var>thisArg</var>);</pre> + arr.forEach(callback); + arr.forEach(callback, thisArg); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<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> +- `callback` -<h3 id="Valeur_de_retour">Valeur de retour</h3> + - : La fonction à utiliser pour chaque élément du tableau. Elle prend en compte trois arguments : -<p>{{jsxref("undefined")}}.</p> + - `valeurCourante` + - : La valeur de l'élément du tableau en cours de traitement. + - `index` {{optional_inline}} + - : L'indice de l'élément du tableau en cours de traitement. + - `array` {{optional_inline}} + - : Le tableau sur lequel la méthode `forEach` est appliquée. -<h2 id="Description">Description</h2> +- `thisArg` {{optional_inline}} + - : Paramètre optionnel. La valeur à utiliser pour `this` lors de l'exécution de `callback`. -<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> +### Valeur de retour -<p><code>callback</code> est appelé avec trois arguments :</p> +{{jsxref("undefined")}}. -<ul> - <li>la valeur de l'élément</li> - <li>l'index de l'élément</li> - <li>le tableau utilisé</li> -</ul> +## Description -<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> +`forEach()` exécute la fonction `callback` une fois pour chaque élément du tableau, dans l'ordre croissant des indices. Cette fonction n'est pas appelée pour les indices pour lesquels les éléments ont été supprimés ou qui n'ont pas été définis. Attention, en revanche elle est appelée pour les éléments qui sont présents et qui valent {{jsxref("undefined")}}. -<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> +`callback` est appelé avec trois arguments : -<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> +- la valeur de l'élément +- l'index de l'élément +- le tableau utilisé -<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> +Si un paramètre `thisArg` est fourni à la méthode `forEach`, il sera utilisé en tant que valeur `this` pour chaque appel de `callback`. Sinon, ce sera la valeur `undefined` qui sera utilisée comme valeur `this`. La valeur `this` finalement prise en compte par la fonction `callback` est déterminée selon [les règles usuelles pour déterminer la valeur de `this` utilisée dans une fonction](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_this). -<div class="note"><p><strong>Note :</strong> 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> +L'ensemble des éléments traités par `forEach` est défini avant le premier appel à `callback`. Les éléments ajoutés au tableau après que l'appel à `forEach` ait commencé ne seront pas visités par `callback`. Si des éléments déjà présents dans le tableau sont modifiés, leur valeur telle qu'elle est passée au `callback` sera la valeur au moment du passage du `forEach` ; les éléments supprimés ne sont pas parcourus. Voir [l'exemple ci-après](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/forEach#Attention_aux_modifications_en_cours). -<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> +`forEach()` exécute la fonction `callback` une fois pour chaque élément. À la différence de {{jsxref("Array.prototype.map()", "map()")}} ou de {{jsxref("Array.prototype.reduce()", "reduce()")}} il renvoie toujours la valeur {{jsxref("undefined")}} et ne peut donc pas être « enchaîné ». Généralement, l'effet voulu est de déclencher des effets de bord en fin de chaîne. -<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> +`forEach()` ne modifie pas le tableau sur lequel elle est appelée, en revanche, la fonction de retour (_callback_) utilisée peut modifier le tableau. -<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> +> **Note :** Il n'existe aucun moyen d'arrêter une boucle `forEach` en dehors de lever une exception. Si vous avez besoin d'arrêter la boucle, étudiez plutôt : +> +> - Une boucle [`for`](/fr/docs/Web/JavaScript/Reference/Instructions/for) classique +> - Une boucle [`for...in`](/fr/docs/Web/JavaScript/Reference/Instructions/for...in) ou [`for...of`](/fr/docs/Web/JavaScript/Reference/Instructions/for...of) +> - {{jsxref("Array.prototype.every()")}} +> - {{jsxref("Array.prototype.some()")}} +> - {{jsxref("Array.prototype.find()")}} +> - {{jsxref("Array.prototype.findIndex()")}} +> +> Les autres méthodes associées aux tableaux ({{jsxref("Array.prototype.every()")}}, {{jsxref("Array.prototype.some()")}}, {{jsxref("Array.prototype.find()")}}, {{jsxref("Array.prototype.findIndex()")}}) utilisent une fonction de texte qui permet de renvoyer une valeur équivalente à `true` si besoin de poursuivre la boucle. -<h2 id="Exemples">Exemples</h2> +`forEach` exécute la fonction `callback` une fois pour chaque élément ; contrairement à `every` et `some`, cette méthode renvoie toujours `undefined` et ne peut pas être enchaînée. -<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> +## Exemples -<p>Voici un fragment de code simple qui utilise une boucle <code>for</code></p> +### Équivalence entre une boucle `for` et une boucle `forEach` -<pre class="brush: js">var items = ["item1", "item2", "item3"]; +Voici un fragment de code simple qui utilise une boucle `for` + +```js +var items = ["item1", "item2", "item3"]; var copie = []; -for (var i = 0; i < items.length; i++) { +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> +Et voici un fragment de code équivalent qui utilise `forEach` : -<pre class="brush: js">var items = ["item1", "item2", "item3"] +```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> +### Afficher le contenu d'un tableau -<div class="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> +> **Note :** Pour afficher le contenu d'un tableau, on pourra utiliser [`console.table()`](/fr/docs/Web/API/Console/table) qui met en forme les éléments du tableau. L'exemple suivant est laissé à titre d'illustration pour `forEach()`. -<p>Le code suivant affiche une ligne pour chaque élément du tableau :</p> +Le code suivant affiche une ligne pour chaque élément du tableau : -<pre class="brush:js">function logArrayElements(element, index, array) { +```js +function logArrayElements(element, index, array) { console.log("a[" + index + "] = " + element); } [2, 5, , 9].forEach(logArrayElements); @@ -120,14 +115,14 @@ items.forEach(function(item){ // 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> +### Utiliser l'argument pour `this` -<p>Dans l'exemple qui suit, on met à jour les propriétés d'un objet à partir des éléments d'un tableau :</p> +Dans l'exemple qui suit, on met à jour les propriétés d'un objet à partir des éléments d'un tableau : -<pre class="brush: js">function Compteur() { +```js +function Compteur() { this.somme = 0; this.compte = 0; } @@ -144,27 +139,24 @@ 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> +> **Note :** Le paramètre pour `this` est passé à la méthode `forEach()`, à chaque appel du callback, celui-ci sera utilisé comme valeur pour `this`. -<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> +> **Note :** Si la fonction passée en argument est [une fonction fléchée](/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fléchées), il n'est pas nécessaire d'ajouter le paramètre `this` car les fonctions fléchées utilisent le [`this`](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_this) fourni par le contexte lexical. -<h3 id="Stopper_une_boucle">Stopper une boucle</h3> +### Stopper une boucle -<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> +Le code qui suit utilise la méthode {{jsxref("Array.prototype.every")}} pour afficher le contenu d'un tableau et s'arrêter lorsqu'il atteint une valeur supérieure à `SEUIL_MAX`. -<pre class="brush: js">var SEUIL_MAX = 12; +```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) { + if (element >= SEUIL_MAX) { return false; } @@ -179,7 +171,7 @@ console.log('res:', res); res = v.some(function(element, index, array) { console.log('élément:', element); - if (element >= SEUIL_MAX) { + if (element >= SEUIL_MAX) { return true; } @@ -190,13 +182,15 @@ console.log('res:', res); // élément : 5 // élément : 2 // élément : 16 -// res: true</pre> +// res: true +``` -<h3 id="Une_fonction_de_copie_d'objet">Une fonction de copie d'objet</h3> +### Une fonction de copie d'objet -<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> +Le code qui suit permet de créer une copie d'un objet donné. Il existe différentes façons pour créer une copie d'un objet. L'exemple suivant illustre une de ces façons afin d'expliquer le fonctionnement d'`Array.prototype.forEach` et d'utiliser les fonctions ECMAScript 5 `Object.*`. -<pre class="brush: js">function copie(obj) { +```js +function copie(obj) { var copie = Object.create(Object.getPrototypeOf(obj)); var propNames = Object.getOwnPropertyNames(obj); @@ -209,13 +203,15 @@ console.log('res:', res); } var obj1 = { a: 1, b: 2 }; -var obj2 = copie(obj1); // obj2 ressemble désormais à obj1</pre> +var obj2 = copie(obj1); // obj2 ressemble désormais à obj1 +``` -<h3 id="Attention_aux_modifications_en_cours">Attention aux modifications en cours</h3> +### Attention aux modifications en cours -<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> +Dans l'exemple qui suit, on utilise un tableau qui contient quatre élément : `"un"`, `"deux"`, `"trois"`, `"quatre"`. Lorsque le parcours du tableau arrive à l'élément `"deux"`, on décale le tableau d'un cran vers les premiers éléments. Aussi, l'élément `"quatre"` est décalé à la place de `"trois"` et `"trois"` est déplacé à la place de `"deux"`. Pour cette raison, lorsque `forEach` poursuit son parcours, elle saute la valeur "trois". Autrement dit, `forEach` n'utilise pas une copie du tableau au moment où elle est appelée, elle manipule le tableau directement. On voit aussi dans cet exemple que les éléments non initialisés ne sont pas traités par la fonction de rappel. -<pre class="brush: js">var mots = ["un", "deux", "trois",, "quatre"]; +```js +var mots = ["un", "deux", "trois",, "quatre"]; mots.forEach(function(mot) { console.log(mot); if (mot === "deux") { @@ -224,48 +220,28 @@ mots.forEach(function(mot) { }); // 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> - -<p>{{Compat("javascript.builtins.Array.forEach")}}</p> - -<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> +// quatre +``` + +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- | +| {{SpecName('ES5.1', '#sec-15.4.4.18', 'Array.prototype.forEach')}} | {{Spec2('ES5.1')}} | Définition initiale. Implémentée avec JavaScript 1.6. | +| {{SpecName('ES6', '#sec-array.prototype.foreach', 'Array.prototype.forEach')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-array.prototype.foreach', 'Array.prototype.forEach')}} | {{Spec2('ESDraft')}} | | + +## Compatibilité des navigateurs + +{{Compat("javascript.builtins.Array.forEach")}} + +## Voir aussi + +- {{jsxref("Array.prototype.filter()")}} +- {{jsxref("Array.prototype.find()")}} +- {{jsxref("Array.prototype.findIndex()")}} +- {{jsxref("Array.prototype.map()")}} +- {{jsxref("Array.prototype.every()")}} +- {{jsxref("Array.prototype.some()")}} +- {{jsxref("Map.prototype.forEach()")}} +- {{jsxref("Set.prototype.forEach()")}} diff --git a/files/fr/web/javascript/reference/global_objects/array/from/index.md b/files/fr/web/javascript/reference/global_objects/array/from/index.md index de22e8feea..cf80abb37e 100644 --- a/files/fr/web/javascript/reference/global_objects/array/from/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/from/index.md @@ -11,49 +11,46 @@ tags: translation_of: Web/JavaScript/Reference/Global_Objects/Array/from original_slug: Web/JavaScript/Reference/Objets_globaux/Array/from --- -<div>{{JSRef}}</div> +{{JSRef}} -<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> +La méthode **`Array.from()`** permet de créer une nouvelle instance d'`Array` (une copie superficielle) à partir d'un objet itérable ou semblable à un tableau. -<div>{{EmbedInteractiveExample("pages/js/array-from.html")}}</div> +{{EmbedInteractiveExample("pages/js/array-from.html")}} -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">Array.from(arrayLike [, fonctionMap[, thisArg]])</pre> + Array.from(arrayLike [, fonctionMap[, thisArg]]) -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<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> +- `arrayLike` + - : Un objet semblable à un tableau ou bien un objet itérable dont on souhaite créer un tableau, instance d'`Array`. +- `fonctionMap` {{optional_inline}} + - : Argument optionnel, une fonction à appliquer à chacun des éléments du tableau. +- `thisArg` {{optional_inline}} + - : Argument optionnel. La valeur à utiliser pour `this` lors de l'exécution de la fonction `fonctionMap`. -<h3 id="Valeur_de_retour">Valeur de retour</h3> +### Valeur de retour -<p>Une nouvelle instance de {{jsxref("Array")}}.</p> +Une nouvelle instance de {{jsxref("Array")}}. -<h2 id="Description">Description</h2> +## Description -<p><code>Array.from()</code> permet de créer des instances d'<code>Array</code> à partir :</p> +`Array.from()` permet de créer des instances d'`Array` à partir : -<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> +- d'objets semblables à des tableaux (qui disposent d'une propriété `length` et d'éléments indexés) ou +- [d'objets itérables](/fr/docs/Web/JavaScript/Guide/iterable) (des objets dont on peut avoir les éléments comme {{jsxref("Map")}} et {{jsxref("Set")}}). -<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> +`Array.from()` possède un paramètre optionnel `fonctionMap`, qui permet d'exécuter une fonction {{jsxref("Array.prototype.map", "map")}} sur chacun des éléments du tableau (ou de l'instance de la classe fille) qui est créé. Autrement dit` Array.from(obj, mapFn, thisArg)` correspond exactement à `Array.from(obj).map(mapFn, thisArg)`, sauf qu'il n'y a pas de tableau intermédiaire de créé. Cet aspect est notamment important pour certaines classes filles, comme les [tableaux typés](/fr/docs/JavaScript/Tableaux_typ%C3%A9s) (en effet, un tableau intermédiaire aurait eu ses valeurs tronquées pour qu'elles soient du type approprié). -<p>La propriété <code>length</code> de la méthode <code>from()</code> est 1.</p> +La propriété `length` de la méthode `from()` est 1. -<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> +Avec ES6, la syntaxe de classe permet d'avoir des sous-classes pour les objets natifs comme pour les objets définis par l'utilisateur. Ainsi, les méthodes statiques de classe comme `Array.from()` sont héritées par les sous-classes d'`Array` et créent de nouvelles instances de la sous-classe d'`Array`. -<h2 id="Exemples">Exemples</h2> +## Exemples -<pre class="brush: js">// créer une instance d'Array à partir de l'objet arguments qui est semblable à un tableau +```js +// créer une instance d'Array à partir de l'objet arguments qui est semblable à un tableau function f() { return Array.from(arguments); } @@ -88,48 +85,28 @@ Array.from("toto"); // En utilisant une fonction fléchée pour remplacer map // et manipuler des éléments -Array.from([1, 2, 3], x => x + x); +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); +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> - -<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> +## Spécifications + +| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------- | ---------------------------- | -------------------- | +| {{SpecName('ES2015', '#sec-array.from', 'Array.from')}} | {{Spec2('ES2015')}} | Définition initiale. | +| {{SpecName('ESDraft', '#sec-array.from', 'Array.from')}} | {{Spec2('ESDraft')}} | | + +## Compatibilité des navigateurs + +{{Compat("javascript.builtins.Array.from")}} + +## Voir aussi + +- {{jsxref("Array")}} +- {{jsxref("Array.prototype.map()")}} +- {{jsxref("TypedArray.from()")}} diff --git a/files/fr/web/javascript/reference/global_objects/array/includes/index.md b/files/fr/web/javascript/reference/global_objects/array/includes/index.md index e63134919f..16ebf55be4 100644 --- a/files/fr/web/javascript/reference/global_objects/array/includes/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/includes/index.md @@ -11,44 +11,36 @@ tags: translation_of: Web/JavaScript/Reference/Global_Objects/Array/includes original_slug: Web/JavaScript/Reference/Objets_globaux/Array/includes --- -<div>{{JSRef}}</div> +{{JSRef}} -<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> +La méthode **`includes()`** permet de déterminer si un tableau contient une valeur et renvoie `true` si c'est le cas, `false` sinon. -<div>{{EmbedInteractiveExample("pages/js/array-includes.html")}}</div> +{{EmbedInteractiveExample("pages/js/array-includes.html")}} +> **Note :** Cette méthode utilise l'algorithme de comparaison _[SameValueZero](/fr/docs/Web/JavaScript/Les_différents_tests_d_égalité#Un_modèle_pour_mieux_comprendre)_ qui fonctionne comme l'égalité stricte, à la différence que `NaN` est ici égal à lui même. +## Syntaxe -<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> + array.includes(élémentRecherché) + array.includes(élémentRecherché, indiceDépart) -<h2 id="Syntaxe">Syntaxe</h2> +### Paramètres -<pre class="syntaxbox">array.includes(élémentRecherché) -array.includes(élémentRecherché, indiceDépart) -</pre> +- `élémentRecherché` + - : La valeur qu'on souhaite trouver dans le tableau (lorsqu'on manipule des caractères et des chaînes, la comparaison est sensible à la casse). +- `indiceDépart` {{optional_inline}} + - : La position du tableau à partir de laquelle commencer à chercher `élémentRecherché`. Si on utilise une valeur négative, la recherche commencera à partir de la fin du tableau (autrement dit à l'indice `array.length - indiceDépart`). La valeur par défaut est 0. -<h3 id="Paramètres">Paramètres</h3> +### Valeur de retour -<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> +Un {{jsxref("Boolean","booléen","",1)}} qui vaut `true` si `élémentRecherché` est trouvé dans le tableau (à partir de l'`indiceDépart` si celui-ci est indiqué). Les valeurs -0, +0 et 0 sont considérées comme équivalentes mais `false` n'est pas considéré comme équivalent à 0. -<h3 id="Valeur_de_retour">Valeur de retour</h3> +> **Note :** Pour être tout à fait précis, `includes()` utilise l'algorithme _[SameValueZero](/fr/docs/Web/JavaScript/Les_différents_tests_d_égalité#Un_modèle_pour_mieux_comprendre)_ afin de déterminer si un élément donné est trouvé. -<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> +## Exemples -<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 +```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 @@ -56,23 +48,25 @@ array.includes(élémentRecherché, indiceDépart) ['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> +### `indiceDépart` supérieur ou égal à la longueur du tableau -<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> +SI `indiceDépart` est supérieur ou égal à la longueur du tableau, la méthode retourne `false`. Le tableau n'est pas parcouru. -<pre class="brush: js">var arr = ['a', 'b', 'c']; +```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> +### `indiceDépart` strictement négatif -<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> +Si `indiceDépart` est strictement négatif, l'indice de départ effectif est la somme entre la taille du tableau et `indiceDépart`. Si cette somme est toujours négative, le tableau est intégralement parcouru. -<pre class="brush: js">// Le tableau a une taille de 3 +```js +// Le tableau a une taille de 3 // indiceDépart vaut -2 // L'indice de départ effectif vaut is 3 + (-2) = 1 @@ -81,54 +75,36 @@ 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> +### Utilisation d'`includes()` comme méthode générique -<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> +`includes()` est une méhtode générique : l'objet sur lequel elle est appelée ne doit pas nécessairement être un tableau. On peut l'utiliser sur des objets semblables à des tableaux (ex. [`arguments`](/fr/docs/Web/JavaScript/Reference/Fonctions/arguments) ou des chaînes de caractères) : -<pre class="brush: js">function argumentsContientA(){ +```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> - -<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> +``` + +## Spécifications + +| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | +| {{SpecName('ES7', '#sec-array.prototype.includes', 'Array.prototype.includes')}} | {{Spec2('ES7')}} | Définition initiale. | +| {{SpecName('ESDraft', '#sec-array.prototype.includes', 'Array.prototype.includes')}} | {{Spec2('ESDraft')}} | | + +## Compatibilité des navigateurs + +{{Compat("javascript.builtins.Array.includes")}} + +## Voir aussi + +- {{jsxref("TypedArray.prototype.includes()")}} +- {{jsxref("String.prototype.includes()")}} +- {{jsxref("Array.prototype.indexOf()")}} +- {{jsxref("Array.prototype.find()")}} +- {{jsxref("Array.prototype.findIndex()")}} diff --git a/files/fr/web/javascript/reference/global_objects/array/index.md b/files/fr/web/javascript/reference/global_objects/array/index.md index 3604ce3910..ad6c63e298 100644 --- a/files/fr/web/javascript/reference/global_objects/array/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/index.md @@ -8,79 +8,89 @@ tags: translation_of: Web/JavaScript/Reference/Global_Objects/Array original_slug: Web/JavaScript/Reference/Objets_globaux/Array --- -<div>{{JSRef}}</div> +{{JSRef}} -<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> +L'objet global **`Array`** est utilisé pour créer des tableaux. Les tableaux sont des objets de haut-niveau (en termes de complexité homme-machine) semblables à des listes. -<p><strong>Créer un tableau</strong></p> +**Créer un tableau** -<pre class="brush: js">var fruits = ['Apple', 'Banana']; +```js +var fruits = ['Apple', 'Banana']; console.log(fruits.length); // 2 -</pre> +``` -<p><strong>Accéder (via son index) à un élément du tableau</strong></p> +**Accéder (via son index) à un élément du tableau** -<pre class="brush: js">var first = fruits[0]; +```js +var first = fruits[0]; // Apple var last = fruits[fruits.length - 1]; // Banana -</pre> +``` -<p><strong>Boucler sur un tableau</strong></p> +**Boucler sur un tableau** -<pre class="brush: js">fruits.forEach(function(item, index, array) { +```js +fruits.forEach(function(item, index, array) { console.log(item, index); }); // Apple 0 // Banana 1 -</pre> +``` -<p><strong>Ajouter à la fin du tableau</strong></p> +**Ajouter à la fin du tableau** -<pre class="brush: js">var newLength = fruits.push('Orange'); +```js +var newLength = fruits.push('Orange'); // ["Apple", "Banana", "Orange"] -</pre> +``` -<p><strong>Supprimer le dernier élément du tableau</strong></p> +**Supprimer le dernier élément du tableau** -<pre class="brush: js">var last = fruits.pop(); // supprime Orange (à la fin) +```js +var last = fruits.pop(); // supprime Orange (à la fin) // ["Apple", "Banana"]; -</pre> +``` -<p><strong>Supprimer le premier élément du tableau</strong></p> +**Supprimer le premier élément du tableau** -<pre class="brush: js">var first = fruits.shift(); // supprime Apple (au début) +```js +var first = fruits.shift(); // supprime Apple (au début) // ["Banana"]; -</pre> +``` -<p><strong>Ajouter au début du tableau</strong></p> +**Ajouter au début du tableau** -<pre class="brush: js">var newLength = fruits.unshift('Strawberry') // ajoute au début +```js +var newLength = fruits.unshift('Strawberry') // ajoute au début // ["Strawberry", "Banana"]; -</pre> +``` -<p><strong>Trouver l'index d'un élément dans le tableau</strong></p> +**Trouver l'index d'un élément dans le tableau** -<pre class="brush: js">fruits.push('Mango'); +```js +fruits.push('Mango'); // ["Strawberry", "Banana", "Mango"] var pos = fruits.indexOf('Banana'); // 1 -</pre> +``` -<p><strong>Supprimer un élément par son index</strong></p> +**Supprimer un élément par son index** -<pre class="brush: js">var removedItem = fruits.splice(pos, 1); // supprime 1 élément à la position pos +```js +var removedItem = fruits.splice(pos, 1); // supprime 1 élément à la position pos // ["Strawberry", "Mango"] -</pre> +``` -<p><strong>Supprimer des éléments à partir d'un index</strong></p> +**Supprimer des éléments à partir d'un index** -<pre class="brush: js">var vegetables = ['Cabbage', 'Turnip', 'Radish', 'Carrot']; +```js +var vegetables = ['Cabbage', 'Turnip', 'Radish', 'Carrot']; console.log(vegetables); // ["Cabbage", "Turnip", "Radish", "Carrot"] @@ -95,111 +105,130 @@ console.log(vegetables); console.log(removedItems); // ["Turnip", "Radish"] (splice retourne la liste des éléments supprimés) -</pre> +``` -<p><strong>Copier un tableau</strong></p> +**Copier un tableau** -<pre class="brush: js">var shallowCopy = fruits.slice(); // crée un nouveau tableau qui contient les éléments de fruits +```js +var shallowCopy = fruits.slice(); // crée un nouveau tableau qui contient les éléments de fruits // ["Strawberry", "Mango"] -</pre> +``` -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<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> + [element0, element1, ..., elementN] + new Array(element0, element1[, ...[, elementN]]) + new Array(arrayLength) -<h3 id="Paramètres">Paramètres</h3> -<dl> - <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^32-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> +### Paramètres -<h2 id="Description">Description</h2> +- `element0, element1, ..., elementN` + - : Un tableau est initialisé avec les éléments donnés, sauf dans le cas où un seul argument est passé au constructeur `Array` et que cet argument est un nombre. (Voir ci-après.) Notez que ce cas spécial s'applique aux tableaux créés avec le constructeur `Array`, et non aux tableaux créés avec la syntaxe crochets. +- `arrayLength` + - : Si le seul argument passé au constructeur `Array` est un entier entre 0 et 2^32-1 (inclus), un nouveau tableau sera créé avec ce nombre d'éléments (note : le tableau sera créé avec `arrayLength` emplacements vides, et non avec de véritables valeurs `undefined`). Si l'argument est un nombre en dehors de la plage autorisée, une exception {{jsxref("RangeError")}} est levée. -<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> +## Description -<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> +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>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> +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. -<h3 id="Accéder_aux_éléments_dun_tableau">Accéder aux éléments d'un tableau</h3> +Les tableaux ne peuvent pas utiliser de chaîne de caractères comme indice (comme dans un [tableau associatif](https://fr.wikipedia.org/wiki/Tableau_associatif)) mais des entiers. Utiliser ou accéder à des index non entiers, en utilisant la [notation avec crochets](https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide/Utiliser_les_objets#Les_objets_et_les_propri%C3%A9t%C3%A9s) (ou [avec point](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_de_membres)) ne va pas définir ou récupérer un élément sur le tableau lui-même, mais une variable associée à la [collection de propriétés d'objet](https://developer.mozilla.org/fr/docs/Web/JavaScript/Structures_de_donn%C3%A9es#Propri%C3%A9t%C3%A9s) de ce tableau. Les propriétés du tableau et la liste de ses éléments sont séparées, et les [opérations de parcours et de modification](https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide/Collections_index%C3%A9es#M%C3%A9thodes_des_tableaux) ne s'appliquent pas à ces propriétés. -<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> +### Accéder aux éléments d'un tableau -<pre class="brush: js notranslate">var arr = ["le premier élément", "le deuxième élément", "le dernier élément"]; +Les tableaux sont indexés à partir de zéro: le premier élément d'un tableau a pour indice `0`, et la position du dernier élément est donnée par {{jsxref("Array.length", "length")}} moins 1. Si on utilise un indice en dehors de cet intervalle, le résultat sera {{jsxref("undefined")}} (sous réserve qu'aucune propriété n'ait été ajoutée au préalable avec cet indice). + +```js +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> +console.log(arr[arr.length - 1]);// affiche "le dernier élément" +``` -<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> +Les éléments d'un tableau sont des propriétés d'objets de la même manière que `toString` est une propriété. Cependant, essayer d'accéder à un élément du tableau comme suit renverra une erreur car le nom de la propriété utilisé est invalide : -<pre class="brush: js notranslate">console.log(arr.0); // erreur de syntaxe</pre> +```js +console.log(arr.0); // erreur de syntaxe +``` -<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> +Ce comportement est tout à fait normal. En effet, il n'est pas possible d'accéder aux propriétés dont le nom commence par un chiffre avec cette notation (le point). Il est nécessaire d'utiliser la syntaxe avec les crochets pour accéder à ces propriétés. Ainsi, si pour un objet quelconque, on avait une propriété nommée '`3d`', on ne pourra y faire référence qu'en utilisant les crochets. Exemple : -<pre class="brush: js notranslate">var années = [1950, 1960, 1970, 1980, 1990, 2000, 2010]; +```js +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> +console.log(années[0]); // fonctionne correctement +``` -<pre class="brush: js notranslate">renderer.3d.setTexture(model, "personnage.png"); // erreur de syntaxe -renderer["3d"].setTexture(model, "personnage.png");// fonctionne correctement </pre> +```js +renderer.3d.setTexture(model, "personnage.png"); // erreur de syntaxe +renderer["3d"].setTexture(model, "personnage.png");// fonctionne correctement +``` -<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> +Dans cet exemple, on utilise des doubles quotes autour de `3d`. On peut aussi utiliser les doubles quotes pour accéder aux éléments d'un tableau (ex. : `années["2"]` au lieu de `années[2]`), mais ce n'est pas obligatoire. Dans l'instruction `années[2]`, le nombre sera converti en une chaîne de caractères par le moteur JavaScript. Pour cette raison, si on utilise les noms de propriété "2" et "02", on fera référence à deux propriétés différentes, et le fragment de code suivant renvoie donc `true`: -<pre class="brush: js notranslate">console.log(années["2"] != années["02"]); </pre> +```js +console.log(années["2"] != années["02"]); +``` -<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> +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 : -<pre class="brush: js notranslate">var promise = { +```js +var promise = { 'var' : 'text', 'array': [1, 2, 3, 4] }; -console.log(promise['var']);</pre> +console.log(promise['var']); +``` -<div class="note"> -<p><strong>Note :</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> +> **Note :** 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. -<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> +### Relation entre `length` et les propriétés numériques -<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> +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")}}. -<pre class="brush: js notranslate">var fruits = []; +```js +var fruits = []; fruits.push("banane", "pomme", "pêche"); -console.log(fruits.length); // 3</pre> +console.log(fruits.length); // 3 +``` -<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> +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")}} : -<pre class="brush: js notranslate">fruits[5] = "mangue"; +```js +fruits[5] = "mangue"; console.log(fruits[5]); // "mangue" console.log(Object.keys(fruits)); // ['0', '1', '2', '5'] -console.log(fruits.length); // 6 </pre> +console.log(fruits.length); // 6 +``` -<p>On peut également modifier la propriété directement (cela n'ajoutera pas de nouveaux éléments) :</p> +On peut également modifier la propriété directement (cela n'ajoutera pas de nouveaux éléments) : -<pre class="brush: js notranslate">fruits.length = 10; +```js +fruits.length = 10; console.log(Object.keys(fruits)); // ['0', '1', '2', '5'] -console.log(fruits.length); // 10</pre> +console.log(fruits.length); // 10 +``` -<p>En revanche, si on diminue la valeur de {{jsxref("Array.length", "length")}}, cela supprimera des éléments :</p> +En revanche, si on diminue la valeur de {{jsxref("Array.length", "length")}}, cela supprimera des éléments : -<pre class="brush: js notranslate">fruits.length = 2; +```js +fruits.length = 2; console.log(Object.keys(fruits)); // ['0', '1'] -console.log(fruits.length); // 2</pre> +console.log(fruits.length); // 2 +``` -<p>Pour plus d'informations sur le comportement de cette propriété, voir la page {{jsxref("Array.length")}}.</p> +Pour plus d'informations sur le comportement de cette propriété, voir la page {{jsxref("Array.length")}}. -<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> +### Création d'un tableau utilisant le résultat d'une correspondance -<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> +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 : -<pre class="brush: js notranslate">// Matche un "d" suivit par un ou plusieurs "b" et suivit d'un "d" +```js +// 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 @@ -207,137 +236,150 @@ 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> +// [ 0:"dbBd", 1:"bB", 2:"d", index:1, input:"cdbBdbsbz", length:3 ] +``` -<p>Les propriétés et les éléments retournés depuis cette correspondance sont les suivants :</p> +Les propriétés et les éléments retournés depuis cette correspondance sont les suivants : <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> + <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> +## Propriétés -<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> +- {{jsxref("Array.prototype.length")}} + - : La propriété de longueur pour le constructeur `Array`, elle vaut 1. +- {{jsxref("Array.@@species", "get Array[@@species]")}} + - : La fonction de construction utilisée pour créer les objets dérivés. +- {{jsxref("Array.prototype")}} + - : Cette propriété permet d'ajouter des propriétés à tous les tableaux. -<h2 id="Méthodes">Méthodes</h2> +## Méthodes -<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> +- {{jsxref("Array.from()")}} + - : Cette méthode permet de créer une nouvelle instance d'`Array` à partir d'un objet semblable à un tableau ou d'un itérable. +- {{jsxref("Array.isArray()")}} + - : Cette méthode renvoie `true` si la variable est un tableau, `false` sinon. +- {{jsxref("Array.of()")}} + - : Cette méthode permet de créer une nouvelle instance d'`Array` à partir d'un nombre variable d'arguments (peu importe la quantité ou le type des arguments utilisés). -<h2 id="Instances_dArray">Instances d'<code>Array</code></h2> +## Instances d'`Array` -<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> +Toutes les instances d'`Array` héritent de {{jsxref("Array.prototype")}}. Le prototype du constructeur `Array` peut être modifié afin d'affecter l'ensemble des instances grâce à l'héritage. -<h3 id="Les_propriétés">Les propriétés</h3> +### Les propriétés -<div>{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/prototype', 'Propriétés')}}</div> +{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/prototype', 'Propriétés')}} -<h3 id="Les_méthodes">Les méthodes</h3> +### Les méthodes -<h4 id="Les_mutateurs">Les mutateurs</h4> +#### Les mutateurs -<div>{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/prototype', 'Mutateurs')}}</div> +{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/prototype', 'Mutateurs')}} -<h4 id="Les_accesseurs">Les accesseurs</h4> +#### Les accesseurs -<div>{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/prototype', 'Accesseurs')}}</div> +{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/prototype', 'Accesseurs')}} -<h4 id="Les_méthodes_ditération">Les méthodes d'itération</h4> +#### Les méthodes d'itération -<div>{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/prototype', 'Méthodes_itératives')}}</div> +{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/prototype', 'Méthodes_itératives')}} -<h2 id="Les_méthodes_génériques_de_manipulation_de_tableaux">Les méthodes génériques de manipulation de tableaux</h2> +## Les méthodes génériques de manipulation de tableaux -<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> +> **Attention :** Ces méthodes génériques ne sont pas standard. Elles sont dépréciées et seront retirées dans un avenir proche. Celles-ci ne peuvent être utilisées sur tous les navigateurs. Toutefois, il existe [un _shim_ disponible sur GitHub](https://github.com/plusdude/array-generics). -<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> +Parfois, on peut vouloir appliquer des méthodes pour les tableaux sur des chaînes ou d'autres objets semblables aux tableaux (ex. : l'objet {{jsxref("Fonctions/arguments", "arguments", "", 1)}}). Une chaîne sera donc traitée comme un tableau de caractères. Ainsi, si on souhaite vérifier que chaque caractère d'une chaîne `str` est bien une lettre comprise entre 'a' et 'z', on pourra utiliser : -<pre class="brush: js notranslate">function estUneLettre(caractère) { - return caractère >= 'a' && caractère <= 'z'; +```js +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> +Cette notation étant plutôt verbeuse, une notation raccourcie a été introduite avec JavaScript 1.6 : -<pre class="brush: js notranslate">if (Array.every(str,estUneLettre)) { +```js +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> +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>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> +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) : -<pre class="brush: js notranslate">if (Array.from(str).every(estUneLettre)) { +```js +if (Array.from(str).every(estUneLettre)) { console.log("La chaîne '" + str + "' contient uniquement des lettres !"); -}</pre> +} +``` -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Créer_un_tableau">Créer un tableau</h3> +### Créer un tableau -<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> +Dans l'exemple suivant, on crée un tableau `tableauMsg`, d'une longueur nulle. Ensuite, on lui affecte des valeurs pour `tableauMsg[0]` et `tableauMsg[99]`, ce qui aura pour effet de modifier la propriété `length` (qui vaudra alors 100). -<pre class="brush: js notranslate">var tableauMsg = []; +```js +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> +### Créer un tableau à deux dimensions -<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> +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. -<pre class="brush: js notranslate">var plateau = [ +```js +var plateau = [ ['T','C','F','R','K','F','C','T'], ['P','P','P','P','P','P','P','P'], [' ',' ',' ',' ',' ',' ',' ',' '], @@ -353,44 +395,45 @@ console.log(plateau.join('\n') + '\n\n'); 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">values = []; -for (var x = 0; x < 10; x++){ +``` + +Voici le résultat affiché : + + T,C,F,R,K,F,C,T + P,P,P,P,P,P,P,P + , , , , , , , + , , , , , , , + , , , , , , , + , , , , , , , + p,p,p,p,p,p,p,p + t,c,f,k,r,f,c,t + + T,C,F,R,K,F,C,T + P,P,P,P,P,P,P,P + , , , , , , , + , , , , , , , + , , , ,p, , , + , , , , , , , + p,p,p,p, ,p,p,p + t,c,f,k,r,f,c,t + +### Utiliser un tableau pour tabuler un ensemble de valeurs + +```js +values = []; +for (var x = 0; x < 10; x++){ values.push([ 2 ** x, 2 * x ** 2 ]) }; console.table(values) -</pre> +``` -<p>Résulte en</p> +Résulte en -<pre class="brush: plain">0 1 0 +```plain +0 1 0 1 2 2 2 4 8 3 8 18 @@ -400,57 +443,28 @@ console.table(values) 7 128 98 8 256 128 9 512 162 -</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> +``` + +(Le première colonne est l'index) + +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------ | ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale | +| {{SpecName('ES5.1', '#sec-15.4', 'Array')}} | {{Spec2('ES5.1')}} | Ajout de nouvelles méthodes : {{jsxref("Array.isArray")}}, {{jsxref("Array.prototype.indexOf", "indexOf")}}, {{jsxref("Array.prototype.lastIndexOf", "lastIndexOf")}}, {{jsxref("Array.prototype.every", "every")}}, {{jsxref("Array.prototype.some", "some")}}, {{jsxref("Array.prototype.forEach", "forEach")}}, {{jsxref("Array.prototype.map", "map")}}, {{jsxref("Array.prototype.filter", "filter")}}, {{jsxref("Array.prototype.reduce", "reduce")}}, {{jsxref("Array.prototype.reduceRight", "reduceRight")}} | +| {{SpecName('ES6', '#sec-array-objects', 'Array')}} | {{Spec2('ES6')}} | Ajout de nouvelles méthodes : {{jsxref("Array.from")}}, {{jsxref("Array.of")}}, {{jsxref("Array.prototype.find", "find")}}, {{jsxref("Array.prototype.findIndex", "findIndex")}}, {{jsxref("Array.prototype.fill", "fill")}}, {{jsxref("Array.prototype.copyWithin", "copyWithin")}} | +| {{SpecName('ES7', '#sec-array-objects', 'Array')}} | {{Spec2('ES7')}} | Ajout de la méthode {{jsxref("Array.prototype.includes()")}}. | +| {{SpecName('ESDraft', '#sec-array-objects', 'Array')}} | {{Spec2('ESDraft')}} | | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("javascript.builtins.Array")}}</p> +{{Compat("javascript.builtins.Array")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<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> +- [Guide JavaScript : indexer les propriétés d'un objet](/fr/docs/Web/JavaScript/Guide/Utiliser_les_objets#Indexer_les_propri.C3.A9t.C3.A9s_d'un_objet) +- [Guide JavaScript : Les objets natifs : l'objet `Array`](/fr/docs/Web/JavaScript/Guide/Objets_élémentaires_JavaScript#Les_tableaux_.3A_objet_Array) +- [Les compréhensions de tableau](/fr/docs/Web/JavaScript/Reference/Opérateurs/Compréhensions_de_tableau) +- [Émulation pour les méthodes génériques et autres fonctionnalités ECMAScript 5 pour les tableaux](https://github.com/plusdude/array-generics) (en anglais) +- [Les tableaux typés](/fr/docs/Web/JavaScript/Tableaux_typés) diff --git a/files/fr/web/javascript/reference/global_objects/array/indexof/index.md b/files/fr/web/javascript/reference/global_objects/array/indexof/index.md index cdd545abc9..14d8d2e1f4 100644 --- a/files/fr/web/javascript/reference/global_objects/array/indexof/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/indexof/index.md @@ -11,57 +11,55 @@ tags: translation_of: Web/JavaScript/Reference/Global_Objects/Array/indexOf original_slug: Web/JavaScript/Reference/Objets_globaux/Array/indexOf --- -<div>{{JSRef}}</div> +{{JSRef}} -<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> +La méthode **`indexOf()`** renvoie le premier indice pour lequel on trouve un élément donné dans un tableau. Si l'élément cherché n'est pas présent dans le tableau, la méthode renverra -1. -<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> +> **Note :** pour la méthode associée aux chaînes de caractères, voir la page {{jsxref("String.prototype.indexOf()")}}. -<div>{{EmbedInteractiveExample("pages/js/array-indexof.html")}}</div> +{{EmbedInteractiveExample("pages/js/array-indexof.html")}} -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><var>arr</var>.indexOf(<var>élémentRecherché</var>) -<var>arr</var>.indexOf(<var>élémentRecherché</var>, indiceDébut) -</pre> + arr.indexOf(élémentRecherché) + arr.indexOf(élémentRecherché, indiceDébut) -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<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> +- `élémentRecherché` + - : L'élément qu'on cherche dans le tableau +- `indiceDébut` {{optional_inline}} + - : L'index à partir duquel commencer la recherche. La valeur par défaut est 0 (le tableau sera parcouru dans sa totalité). Si l'index est plus grand ou égal à la longueur du tableau, la méthode renverra -1. Si l'index est négatif, la recherche commencera d'autant d'éléments, à partir de la fin du tableau. À noter que même si l'index est négatif, la recherche s'effectue toujours du début jusqu'à la fin du tableau. Si l'index fourni est inférieur à 0, le tableau sera entièrement parcouru. -<h3 id="Valeur_de_retour">Valeur de retour</h3> +### Valeur de retour -<p>Le premier index de l'élément dans le tableau ou -1 si la valeur n'est pas trouvée.</p> +Le premier index de l'élément dans le tableau ou -1 si la valeur n'est pas trouvée. -<h2 id="Description">Description</h2> +## Description -<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> +`indexOf` compare `élémentRecherché` aux éléments contenus dans le tableau en utilisant une [égalité stricte](</fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison#.C3.89galit.C3.A9_stricte_(.3D.3D.3D)>) (la même méthode utilisée par l'opérateur `===`). -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Utiliser_indexOf()">Utiliser <code>indexOf()</code></h3> +### Utiliser `indexOf()` -<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> +Dans l'exemple qui suit, on peut utiliser `indexOf` afin de trouver l'emplacement d'un élément dans un tableau. -<pre class="brush: js">var tableau = [2, 9, 9]; +```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> +tableau.indexOf(2, -3); // 0 +``` -<h3 id="Trouver_toutes_les_occurences_d'un_élément">Trouver toutes les occurences d'un élément</h3> +### Trouver toutes les occurences d'un élément -<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> +Dans l'exemple qui suit, on utilise `indexOf()` afin de trouver tous les indices d'un élément dans un tableau. On peut utiliser la méthode {{jsxref("Array.prototype.push", "push")}} afin d'ajouter ces indices dans un autre tableau. -<pre class="brush: js">var indices = []; +```js +var indices = []; var tableau = ['a', 'b', 'a', 'c', 'a', 'd']; var élément = 'a'; var idx = tableau.indexOf(élément); @@ -70,15 +68,17 @@ while (idx != -1) { idx = tableau.indexOf(élément, idx + 1); } console.log(indices); -// [0, 2, 4]</pre> +// [0, 2, 4] +``` -<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> +### Trouver si un élément existe et l'ajouter dans le tableau si ce n'est pas le cas -<pre class="brush: js">function mettreAJourLegumes(tabLégumes, légume) { +```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) { + } else if (tabLégumes.indexOf(légume) > -1) { console.log(légume + ' existe déjà dans le tableau.'); } } @@ -88,13 +88,15 @@ 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> +// épinard existe déjà dans le tableau. +``` -<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2> +## Prothèse d'émulation (_polyfill_) -<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> +`indexOf` fut ajouté avec la cinquième édition du standard ECMA-262 ; il peut donc ne pas être présent dans tous les navigateurs web. Vous pouvez contourner ce problème en insérant le code suivant au début de vos scripts. Il permet d'utiliser `indexOf` dans les environnements qui ne le supportent pas nativement. L'algorithme est le même que celui spécifié dans ECMAScript 5 si on a bien {{jsxref("TypeError", "TypeError")}} et {{jsxref("Math.abs")}} qui ont leurs valeurs originales : -<pre class="brush: js">// Production steps of ECMA-262, Edition 5, 15.4.4.14 +```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) { @@ -113,7 +115,7 @@ if (!Array.prototype.indexOf) { // méthode interne Get de O avec l'argument // "length". // 3. Soit len le résultat de ToUint32(lenValue). - var len = O.length >>> 0; + var len = O.length >>> 0; // 4. Si len vaut 0, on renvoie -1. if (len === 0) { @@ -129,18 +131,18 @@ if (!Array.prototype.indexOf) { n = 0; } - // 6. Si n >= len, on renvoie -1. - if (n >= len) { + // 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). + // 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); + k = Math.max(n >= 0 ? n : len - Math.abs(n), 0); - // 9. On répète tant que k < len - while (k < len) { + // 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 @@ -155,55 +157,33 @@ if (!Array.prototype.indexOf) { // l'algorithme d'égalité stricte entre // searchElement et elementK. // iii. Si same vaut true, on renvoie k. - if (k in O && O[k] === searchElement) { + 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> - -<p>{{Compat("javascript.builtins.Array.indexOf")}}</p> - -<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> +} +``` + +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- | +| {{SpecName('ES5.1', '#sec-15.4.4.14', 'Array.prototype.indexOf')}} | {{Spec2('ES5.1')}} | Définition initiale. Implémentée avec JavaScript 1.6. | +| {{SpecName('ES6', '#sec-array.prototype.indexof', 'Array.prototype.indexOf')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-array.prototype.indexof', 'Array.prototype.indexOf')}} | {{Spec2('ESDraft')}} | | + +## Compatibilité des navigateurs + +{{Compat("javascript.builtins.Array.indexOf")}} + +## Notes de compatibilité + +- À partir de Firefox 47 ({{geckoRelease(47)}}), cette méthode ne renverra plus `-0`. Ainsi, `[0].indexOf(0, -0)` renverra toujours `+0` (cf. {{bug(1242043)}}). + +## Voir aussi + +- {{jsxref("Array.prototype.lastIndexOf()")}} +- {{jsxref("TypedArray.prototype.indexOf()")}} diff --git a/files/fr/web/javascript/reference/global_objects/array/isarray/index.md b/files/fr/web/javascript/reference/global_objects/array/isarray/index.md index f57266afff..c4b10b3082 100644 --- a/files/fr/web/javascript/reference/global_objects/array/isarray/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/isarray/index.md @@ -11,40 +11,40 @@ tags: translation_of: Web/JavaScript/Reference/Global_Objects/Array/isArray original_slug: Web/JavaScript/Reference/Objets_globaux/Array/isArray --- -<div>{{JSRef}}</div> +{{JSRef}} -<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> +La méthode **`Array.isArray()`** permet de déterminer si l'objet passé en argument est un objet {{jsxref("Array")}}, elle renvoie `true` si le paramètre passé à la fonction est de type `Array` et `false` dans le cas contraire. -<pre class="brush: js">Array.isArray([1, 2, 3]); // true +```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> +## Syntaxe -<pre class="syntaxbox">Array.isArray(<var>value</var>)</pre> + Array.isArray(value) -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><code>value</code></dt> - <dd>La valeur dont on veut vérifier le type</dd> -</dl> +- `value` + - : La valeur dont on veut vérifier le type -<h3 id="Valeur_de_retour">Valeur de retour</h3> +### Valeur de retour -<p><code>true</code> si la valeur est un tableau (une instance de {{jsxref("Array")}}), <code>false</code> sinon.</p> +`true` si la valeur est un tableau (une instance de {{jsxref("Array")}}), `false` sinon. -<h2 id="Description">Description</h2> +## Description -<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> +Si l'objet indiqué en paramètre est un {{jsxref("Array")}}, la méthode renvoie `true`, sinon, elle renvoie `false`. -<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> +Voir aussi : « [Determining with absolute accuracy whether or not a JavaScript object is an array](http://web.mit.edu/jwalden/www/isArray.html) » (en anglais) pour avoir plus de détails. Si on passe un objet {{jsxref("TypedArray")}} en argument, ce sera toujours la valeur `false` qui sera renvoyée. -<h2 id="Exemples">Exemples</h2> +## Exemples -<pre class="brush: js">// Tous les appels suivant renvoient true +```js +// Tous les appels suivant renvoient true Array.isArray([]); Array.isArray([1]); Array.isArray(new Array()); @@ -64,51 +64,32 @@ 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> +## Prothèse d'émulation (_polyfill_) -<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> +Exécuter ce code avant tout les autres aboutira à la création de la méthode `Array.isArray()`si elle n'est pas nativement prise en charge par le navigateur. -<pre class="brush: js">if(!Array.isArray) { +```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> - -<p>{{Compat("javascript.builtins.Array.isArray")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("Array")}}</li> -</ul> +} +``` + +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------ | ---------------------------- | ------------------------------------------------------- | +| {{SpecName('ES5.1', '#sec-15.4.3.2', 'Array.isArray')}} | {{Spec2('ES5.1')}} | Définition initiale. Implémentée avec JavaScript 1.8.5. | +| {{SpecName('ES6', '#sec-array.isarray', 'Array.isArray')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-array.isarray', 'Array.isArray')}} | {{Spec2('ESDraft')}} | | + +## Compatibilité des navigateurs + +{{Compat("javascript.builtins.Array.isArray")}} + +## Voir aussi + +- {{jsxref("Array")}} diff --git a/files/fr/web/javascript/reference/global_objects/array/join/index.md b/files/fr/web/javascript/reference/global_objects/array/join/index.md index cdb8f6b0f6..860e358953 100644 --- a/files/fr/web/javascript/reference/global_objects/array/join/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/join/index.md @@ -10,98 +10,71 @@ tags: translation_of: Web/JavaScript/Reference/Global_Objects/Array/join original_slug: Web/JavaScript/Reference/Objets_globaux/Array/join --- -<div>{{JSRef}}</div> +{{JSRef}} -<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> +La méthode **`join()`** crée et renvoie une nouvelle chaîne de caractères en concaténant tous les éléments d'un tableau (ou d'[un objet semblable à un tableau](/fr/docs/Web/JavaScript/Guide/Collections_indexées#Manipuler_des_objets_semblables_à_des_tableaux)). La concaténation utilise la virgule ou une autre chaîne, fournie en argument, comme séparateur. -<div>{{EmbedInteractiveExample("pages/js/array-join.html")}}</div> +{{EmbedInteractiveExample("pages/js/array-join.html")}} -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><var>arr</var>.join() -<var>arr</var>.join(<var>séparateur</var>) -</pre> + arr.join() + arr.join(séparateur) -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<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> +- `séparateur` {{optional_inline}} + - : Ce paramètre optionnel indique une chaine de caractères pour séparer chaque élément du tableau. Le séparateur est converti en une chaine de caractères si nécessaire. Si ce paramètre n'est pas utilisé, les éléments du tableau seront séparés par une virgule (,). Si ce paramètre est la chaîne vide, les éléments seront accolés les uns aux autres sans espace entre. La valeur par défaut de ce paramètre est `","`. -<h3 id="Valeur_de_retour">Valeur de retour</h3> +### Valeur de retour -<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> +Une chaîne de caractères composée de tous les éléments du tableau joints les uns aux autres. Si la longueur du tableau (`arr.length`) vaut `0`, c'est la chaîne vide qui est renvoyée. Si le tableau ne contient qu'un élément, sa version texte sera renvoyée sans être suivie du séparateur. -<h2 id="Description">Description</h2> +## Description -<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> +Les différents éléments du tableau sont convertis en une chaîne de caractères puis fusionnés en une seule chaîne. Si un élément vaut `undefined` ou `null`, il sera converti en la chaîne vide. Cette fonction est générique et peut donc être utilisée avec [les objets semblables aux tableaux](/fr/docs/Web/JavaScript/Guide/Collections_indexées#Manipuler_des_objets_semblables_à_des_tableaux). -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Fusionner_un_tableau_de_quatre_façons_différentes">Fusionner un tableau de quatre façons différentes</h3> +### Fusionner un tableau de quatre façons différentes -<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> +L'exemple suivant crée un tableau, `a`, avec trois éléments, puis joint le tableau à trois reprises : en utilisant le séparateur par défaut, une virgule et un espace, puis un plus, puis avec la chaîne vide. -<pre class="brush: js">var a = new Array("Vent","Pluie","Feu"); +```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> +a.join(""); // "VentPluieFeu" +``` -<h3 id="Fusionner_un_objet_semblable_à_un_tableau">Fusionner un objet semblable à un tableau</h3> +### Fusionner un objet semblable à un tableau -<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> +Dans l'exemple suivant, on effectue la fusion sur un objet semblable à un tableau ([`arguments`](/fr/docs/Web/JavaScript/Reference/Fonctions/arguments)) en appelant {{jsxref("Function.prototype.call")}} sur `Array.prototype.join`. -<pre class="brush: js">function f(a, b, c) { +```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> - -<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> +``` + +## Spécifications + +| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | +| {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.1. | +| {{SpecName('ES5.1', '#sec-15.4.4.5', 'Array.prototype.join')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-array.prototype.join', 'Array.prototype.join')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-array.prototype.join', 'Array.prototype.join')}} | {{Spec2('ESDraft')}} | | + +## Compatibilité des navigateurs + +{{Compat("javascript.builtins.Array.join")}} + +## Voir aussi + +- {{jsxref("String.prototype.split()")}} +- {{jsxref("Array.prototype.toString()")}} +- {{jsxref("TypedArray.prototype.join()")}} diff --git a/files/fr/web/javascript/reference/global_objects/array/keys/index.md b/files/fr/web/javascript/reference/global_objects/array/keys/index.md index 88e747da9c..51483bec61 100644 --- a/files/fr/web/javascript/reference/global_objects/array/keys/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/keys/index.md @@ -12,71 +12,57 @@ tags: translation_of: Web/JavaScript/Reference/Global_Objects/Array/keys original_slug: Web/JavaScript/Reference/Objets_globaux/Array/keys --- -<div>{{JSRef}}</div> +{{JSRef}} -<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> +La méthode **`keys()`** renvoie un nouvel objet **`Array Iterator`** qui contient les clefs pour chaque indice du tableau. -<div>{{EmbedInteractiveExample("pages/js/array-keys.html")}}</div> +{{EmbedInteractiveExample("pages/js/array-keys.html")}} -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><var>arr</var>.keys()</pre> + arr.keys() -<h3 id="Valeur_de_retour">Valeur de retour</h3> +### Valeur de retour -<p>Un nouvel objet itérateur pour {{jsxref("Array")}}.</p> +Un nouvel objet itérateur pour {{jsxref("Array")}}. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Utilisation_simple">Utilisation simple</h3> +### Utilisation simple -<pre class="brush:js">var arr = ["a","b","c"]; +```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> +### Un itérateur de clés prend en compte les trous -<pre class="brush: js">var arr = ["a", , "c"]; +```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> - -<p>{{Compat("javascript.builtins.Array.keys")}}</p> - -<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> +console.log(clésDenses); // [0, 1, 2] +``` + +## Spécifications + +| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | +| {{SpecName('ES2015', '#sec-array.prototype.keys', 'Array.prototype.keys')}} | {{Spec2('ES2015')}} | Définition initiale. | +| {{SpecName('ESDraft', '#sec-array.prototype.keys', 'Array.prototype.keys')}} | {{Spec2('ESDraft')}} | | + +## Compatibilité des navigateurs + +{{Compat("javascript.builtins.Array.keys")}} + +## Voir aussi + +- {{jsxref("Array.prototype.entries()")}} +- {{jsxref("Array.prototype.values()")}} +- [Les protocoles d'itération](/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration) diff --git a/files/fr/web/javascript/reference/global_objects/array/lastindexof/index.md b/files/fr/web/javascript/reference/global_objects/array/lastindexof/index.md index eb2c70d644..abd24ae929 100644 --- a/files/fr/web/javascript/reference/global_objects/array/lastindexof/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/lastindexof/index.md @@ -12,73 +12,74 @@ tags: translation_of: Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf original_slug: Web/JavaScript/Reference/Objets_globaux/Array/lastIndexOf --- -<div>{{JSRef}}</div> +{{JSRef}} -<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> +La méthode **`lastIndexOf()`** permet de renvoyer le dernier indice pour lequel une valeur donnée est présente dans un tableau. Si la valeur recherchée n'est pas présente, le résultat sera -1. Lors de la recherche, le tableau est parcouru dans le sens des index décroissants, à partir de l'index `indexDébut`. -<div>{{EmbedInteractiveExample("pages/js/array-lastindexof.html")}}</div> +{{EmbedInteractiveExample("pages/js/array-lastindexof.html")}} -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><var>arr</var>.lastIndexOf(<var>élémentRecherché</var>) -<var>arr</var>.lastIndexOf(<var>élémentRecherché</var>, <var>indexDébut</var>) -</pre> + arr.lastIndexOf(élémentRecherché) + arr.lastIndexOf(élémentRecherché, indexDébut) -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<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> +- `élémentRecherché` + - : L'élément à qu'on cherche dans le tableau. +- `indexDébut` {{optional_inline}} + - : L'index à partir duquel commencer la recherche dans le tableau (la recherche s'effectuant à l'envers). Si le paramètre est absent, sa valeur par défaut sera la longueur du tableau moins 1 (c'est-à-dire `arr.length - 1`), le tableau sera alors parcouru dans sa totalité. Si l'index est plus grand ou égal à la longueur du tableau, le tableau sera parcouru en entier. Si l'index est négatif, la recherche commencera d'autant d'éléments à partir de la fin du tableau. À noter que, même si l'index est négatif, la recherche s'effectuera toujours de la fin jusqu'au début du tableau. Si l'index calculé est inférieur à 0, la méthode renverra -1 et le tableau ne sera pas parcouru. -<h3 id="Valeur_de_retour">Valeur de retour</h3> +### Valeur de retour -<p>Le dernier index auquel on trouve la valeur dans le tableau, -1 si elle n'est pas trouvée.</p> +Le dernier index auquel on trouve la valeur dans le tableau, -1 si elle n'est pas trouvée. -<h2 id="Description">Description</h2> +## Description -<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> +`lastIndexOf` compare `élémentRecherché` aux éléments contenus dans le tableau en utilisant une [égalité stricte](</fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison#.C3.89galit.C3.A9_stricte_(.3D.3D.3D)>) (l'égalité utilisée par l'opérateur ===). -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Utiliser_lastIndexOf">Utiliser <code>lastIndexOf</code></h3> +### Utiliser `lastIndexOf` -<p>Dans l'exemple suivant, on utilise <code>lastIndexOf</code> afin de situer une valeur dans un tableau.</p> +Dans l'exemple suivant, on utilise `lastIndexOf` afin de situer une valeur dans un tableau. -<pre class="brush: js">var tableau = [2, 5, 9, 2]; +```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> +tableau.lastIndexOf(2, -1); // 3 +``` -<h3 id="Trouver_toutes_les_occurrences_dun_élément">Trouver toutes les occurrences d'un élément</h3> +### Trouver toutes les occurrences d'un élément -<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> +L’exemple suivant utilise `lastIndexOf` pour trouver tous les index (`indices`) d’un élément dans un tableau donné, en utilisant {{jsxref("Array.prototype.push", "push")}} pour les ajouter dans un autre tableau quand ils sont trouvés. -<pre class="brush: js">var indices = []; +```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); + idx = (idx > 0 ? tableau.lastIndexOf(élément, idx - 1) : -1); } console.log(indices); -// [4, 2, 0]</pre> +// [4, 2, 0] +``` -<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> +Remarquez que nous avons dû traiter le cas de `idx === 0` séparément (`idx > 0`) parce que l’élément sera toujours trouvé, indépendamment du paramètre de `fromIndex`, si c’est le premier élément du tableau. C’est une différence avec la méthode {{jsxref("Array.prototype.indexOf", "indexOf")}}. +## Prothèse d'émulation (_polyfill_) -<h2 id="Prothèse_démulation_polyfill">Prothèse d'émulation (<em>polyfill</em>)</h2> +`lastIndexOf` a été ajouté avec la cinquième édition du standard ECMA-262 ; il peut donc ne pas être présent dans tous les navigateurs web. Vous pouvez contourner ce problème en insérant le code suivant au début de vos scripts. Il vous permettra d'utiliser `lastIndexOf` avec les navigateurs qui ne le supportent pas nativement. L'algorithme qui suit est le même que celui spécifié par ECMAScript 5 si {{jsxref("Object", "Object")}}, {{jsxref("TypeError", "TypeError")}}, {{jsxref("Number", "Number")}}, {{jsxref("Math.floor")}}, {{jsxref("Math.abs")}}, et {{jsxref("Math.min")}} n'ont pas été modifiés et conservent leurs valeurs originales. -<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 +```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*/) { @@ -90,73 +91,51 @@ if (!Array.prototype.lastIndexOf) { var n, k, t = Object(this), - len = t.length >>> 0; + len = t.length >>> 0; if (len === 0) { return -1; } n = len - 1; - if (arguments.length > 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)); + 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) { + 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> - -<p>{{Compat("javascript.builtins.Array.lastIndexOf")}}</p> - -<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> +} +``` + +On notera que cette implémentation vise une compatibilité absolue de `lastIndexOf` dans Firefox et le moteur JavaScript SpiderMonkey, incluant plusieurs cas très particuliers. Si vous comptez l'utiliser dans une application, vous devriez pouvoir calculer `from` avec un code beaucoup moins compliqué. + +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- | +| {{SpecName('ES5.1', '#sec-15.4.4.15', 'Array.prototype.lastIndexOf')}} | {{Spec2('ES5.1')}} | Définition initiale. Implémentée avec JavaScript 1.6. | +| {{SpecName('ES6', '#sec-array.prototype.lastindexof', 'Array.prototype.lastIndexOf')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-array.prototype.lastindexof', 'Array.prototype.lastIndexOf')}} | {{Spec2('ESDraft')}} | | + +## Compatibilité des navigateurs + +{{Compat("javascript.builtins.Array.lastIndexOf")}} + +## Notes de compatibilité + +- À partir de Firefox 47 ({{geckoRelease(47)}}), cette méthode ne renverra plus `-0`. Ainsi, `[0].lastIndexOf(0, -0)` renverra toujours `+0` (cf. {{bug(1242043)}}). + +## Voir aussi + +- {{jsxref("Array.prototype.indexOf()")}} +- {{jsxref("TypedArray.prototype.lastIndexOf()")}} diff --git a/files/fr/web/javascript/reference/global_objects/array/length/index.md b/files/fr/web/javascript/reference/global_objects/array/length/index.md index 4e05fe8940..caa912f99a 100644 --- a/files/fr/web/javascript/reference/global_objects/array/length/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/length/index.md @@ -9,19 +9,18 @@ tags: translation_of: Web/JavaScript/Reference/Global_Objects/Array/length original_slug: Web/JavaScript/Reference/Objets_globaux/Array/length --- -<div>{{JSRef}}</div> +{{JSRef}} -<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> +La propriété **`length`** (longueur) est un entier non-signé de 32 bits qui indique le nombre d'éléments présents dans le tableau. Elle est toujours supérieure au plus grand indice du tableau. -<div>{{EmbedInteractiveExample("pages/js/array-length.html")}}</div> +{{EmbedInteractiveExample("pages/js/array-length.html")}} +## Description +La valeur de la propriété `length` est un entier de signe positif dont la valeur est inférieure à 2 à la puissance 32 (2^32). -<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^32).</p> - -<pre class="brush: js notranslate">var tableauA = new Array(4294967296); // 2 à la puissance 32 = 4294967296 +```js +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 @@ -30,91 +29,71 @@ 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> +Vous pouvez modifier la propriété `length` d'un tableau à loisir pour le tronquer. Quand vous étendez un tableau en modifiant la valeur de sa propriété `length`, le nombre d'éléments réellement présents dans ce tableau n'augmente pas : par exemple, si vous affectez la valeur 3 à la propriété `length` d'un tableau alors qu'elle vaut 2, le tableau contiendra toujours seulement 2 éléments. La troisième « case » ne sera pas itérable. De ce fait, la propriété `length` d'un tableau ne renseigne en rien sur le nombre de valeurs définies dans le tableau. Voir aussi [la relation entre longueur et propriétés numériques](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array#Relation_entre_length_et_les_propri.C3.A9t.C3.A9s_num.C3.A9riques). -<pre class="brush: js notranslate">const arr = [1, 2, 3]; +```js +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>] +// [1, 2, <3 éléments vides>] -arr.forEach(element => console.log(element)); +arr.forEach(element => console.log(element)); // 1 // 2 -</pre> +``` -<p>{{js_property_attributes(1,0,0)}}</p> +{{js_property_attributes(1,0,0)}} -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Renvoyer_la_longueur_dun_tableau">Renvoyer la longueur d'un tableau</h3> +### Renvoyer la longueur d'un tableau -<pre class="brush: js notranslate">var items = ["chaise", "bureau", "table", "sac"]; +```js +var items = ["chaise", "bureau", "table", "sac"]; items.length; // 4 -</pre> +``` -<h3 id="Parcourir_un_tableau">Parcourir un tableau</h3> +### Parcourir un tableau -<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> +Dans l'exemple suivant, on itère sur le tableau `nombres` en utilisant la propriété `length` afin de connaître son nombre d'élément. La valeur de chaque élément est ensuite multipliée par deux : -<pre class="brush:js notranslate">var nombres = [1,2,3,4,5]; +```js +var nombres = [1,2,3,4,5]; -for (var i = 0; i < nombres.length; i++) { +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> +### Tronquer un tableau -<p>L'exemple suivant raccourcit le tableau <code>etatsUS</code> à 50 si sa longueur actuelle est supérieure à 50.</p> +L'exemple suivant raccourcit le tableau `etatsUS` à 50 si sa longueur actuelle est supérieure à 50. -<pre class="brush:js notranslate">if (etatsUS.length > 50) { +```js +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> - -<p>{{Compat("javascript.builtins.Array.length")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("Array")}}</li> -</ul> +} +``` + +## Specifications + +| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | +| {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. | +| {{SpecName('ES5.1', '#sec-15.4.5.2', 'Array.length')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-properties-of-array-instances-length', 'Array.length')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-properties-of-array-instances-length', 'Array.length')}} | {{Spec2('ESDraft')}} | | + +## Compatibilité des navigateurs + +{{Compat("javascript.builtins.Array.length")}} + +## Voir aussi + +- {{jsxref("Array")}} diff --git a/files/fr/web/javascript/reference/global_objects/array/map/index.md b/files/fr/web/javascript/reference/global_objects/array/map/index.md index 48a9be07f5..b5a56e9db7 100644 --- a/files/fr/web/javascript/reference/global_objects/array/map/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/map/index.md @@ -12,84 +12,83 @@ tags: translation_of: Web/JavaScript/Reference/Global_Objects/Array/map original_slug: Web/JavaScript/Reference/Objets_globaux/Array/map --- -<div>{{JSRef}}</div> +{{JSRef}} -<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> +La méthode **`map()`** crée un nouveau tableau avec les résultats de l'appel d'une fonction fournie sur chaque élément du tableau appelant. -<div>{{EmbedInteractiveExample("pages/js/array-map.html")}}</div> +{{EmbedInteractiveExample("pages/js/array-map.html")}} -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><var>var nouveauTableau = arr</var>.map(<var>callback</var> [, <var>thisArg</var>])</pre> + var nouveauTableau = arr.map(callback [, thisArg]) -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<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> +- `callback` -<h3 id="Valeur_de_retour">Valeur de retour</h3> + - : La fonction qui est utilisée pour créer un élément du nouveau tableau. Elle utilise trois arguments : -<p>Un nouveau tableau composé des images de la fonction de rappel.</p> + - `valeurCourante` + - : La valeur de l'élément du tableau à traiter. + - `index`{{optional_inline}} + - : L'index de l'élément qui est traité par la fonction. + - `tableau`{{optional_inline}} + - : Le tableau sur lequel on a appelé la méthode `map`. -<h2 id="Description">Description</h2> +- `thisArg` {{optional_inline}} + - : La valeur à utiliser pour `this` lors de l'exécution de `callback`. La valeur par défaut est l'objet global de l'environnement (`Window` pour un navigateur). -<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> +### Valeur de retour -<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> +Un nouveau tableau composé des images de la fonction de rappel. -<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> +## Description -<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> +Lorsqu'on utilise `map`, la fonction `callback` fournie en argument est exécutée une fois pour chacun des éléments du tableau, dans l'ordre du tableau. Chaque résultat de l'opération sur un élément sera un élément du nouveau tableau. La fonction `callback` est appelée uniquement pour les indices du tableau pour lesquels il y a des valeurs affectées (y compris si cette valeur est {{jsxref("undefined")}}). Si les valeurs ont été supprimées ou qu'elles n'ont jamais été initialisées, la fonction ne sera pas appelée. -<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> +`callback` est appelée avec trois arguments : la valeur de l'élément du tableau, l'index de cet élément et l'objet {{jsxref("Array")}} qui est parcouru. -<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> +> **Attention :** `map()` construit un nouveau tableau. Si on utilise cette méthode sans utiliser le résultat, mieux vaudra utiliser [`forEach`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/forEach) ou [`for...of`](/fr/docs/Web/JavaScript/Reference/Instructions/for...of). Pour mieux décider si `map()`est adéquat, regardez si vous utilisez la valeur de retour et/ou si vous renvoyez une valeur avec la fonction `callback` : si ce n'est pas le cas, il ne faut pas utiliser `map()`. -<h2 id="Exemples">Exemples</h2> +Si le paramètre `thisArg` est utilisé, il sera utilisé en tant que `this` par la fonction `callback` lorsqu'elle sera appelée. S'il n'est pas utilisé, ce sera la valeur {{jsxref("undefined")}} qui sera utilisée pour définir `this`. La valeur `this` finalement prise en compte par la fonction `callback` est définie [selon les règles usuelles qui déterminent la valeur `this` observée par une fonction](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_this). -<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> +`map` ne modifie pas le tableau sur lequel elle est appelée (bien que la fonction `callback`, si elle est appelée, puisse modifier le tableau). -<p>Dans l'exemple suivant, on crée un tableau composé des racines carrées des éléments d'un premier tableau :</p> +La liste des éléments à traiter lors de l'opération `map` est définie avant le premier appel à `callback`. Les éléments qui sont ajoutés au tableau après que l'appel à `map` ait été initié ne seront pas traités par la fonction `callback`. Si des éléments ont été modifiés, la valeur utilisée par la fonction `callback` sera celle au moment où `map` est utilisée. Les éléments qui sont supprimés ne sont pas traités. De la même façon, si on applique `map` sur un tableau dont certains éléments sont indéfinis, le résultat possèdera également les mêmes éléments indéfinis. -<pre class="brush: js">var nombres = [1, 4, 9]; +## Exemples + +### Créer un tableau des racines carrées d'un tableau de nombre + +Dans l'exemple suivant, on crée un tableau composé des racines carrées des éléments d'un premier tableau : + +```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> +### Créer un tableau de nombres avec une fonction à un argument -<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> +Ici, on illustre le fonctionnement de `map` avec une fonction à un argument. Cet argument sera automatiquement remplacé par chaque élément du tableau au fur et à mesure que `map` parcourt le tableau : -<pre class="brush: js">var nombres = [1, 4, 9]; +```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> +### Utiliser `map` pour changer le format d'objets dans un tableau -<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> +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 : -<pre class="brush: js">var tableauOrig = [{clé:1, valeur:10}, {clé:2, valeur:20}, {clé:3, valeur: 30}]; -var tableauFormaté = tableauOrig.map(obj => { +```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; @@ -100,36 +99,39 @@ var tableauFormaté = tableauOrig.map(obj => { // {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> +### Utiliser `map` de façon générique -<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> +Dans cet exemple, on voit comment utiliser la fonction `map` sur une chaîne de caractères pour obtenir un tableau contenant les codes ASCII des valeurs encodées : -<pre class="brush: js">var map = Array.prototype.map; +```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> +### Utiliser `map` avec `querySelectorAll` -<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> +Dans cet exemple, on illustre comment utiliser la méthode map de façon générique, sur un tableau d'objets collectés grâce à `querySelectorAll` : -<pre class="brush: js">var elems = document.querySelectorAll('select option:checked'); +```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> +On aurait également pu utiliser la méthode {{jsxref("Array.from()")}} qui permet de produire un tableau à partir d'un objet itérable. -<h3 id="Un_résultat_inattendu">Un résultat inattendu</h3> +### Un résultat inattendu -<p><a href="https://www.wirfs-brock.com/allen/posts/166">Exemple inspiré par ce billet</a> (en anglais)</p> +[Exemple inspiré par ce billet](https://www.wirfs-brock.com/allen/posts/166) (en anglais) -<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> +Il est fréquent d'utiliser la fonction `callback` avec un seul argument (l'élément en cours). Certaines fonctions natives sont également souvent appelées avec un unique argument même si elles peuvent prendre en compte plusieurs arguments. En combinant ces deux « habitudes », on peut obtenir certains résultats inattendus : -<pre class="brush: js">// Si on utilise : +```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] @@ -161,50 +163,29 @@ function returnInt(element) { // Formulation équivalente plus concise avec // une fonction fléchée -['1', '2', '3'].map( str => parseInt(str)); +['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> - -<p>{{Compat("javascript.builtins.Array.map")}}</p> - -<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> +``` + +## Spécifications + +| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | +| {{SpecName('ES5.1', '#sec-15.4.4.19', 'Array.prototype.map')}} | {{Spec2('ES5.1')}} | Définition initiale. Implémentée avec JavaScript 1.6. | +| {{SpecName('ES6', '#sec-array.prototype.map', 'Array.prototype.map')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-array.prototype.map', 'Array.prototype.map')}} | {{Spec2('ESDraft')}} | | + +## Compatibilité des navigateurs + +{{Compat("javascript.builtins.Array.map")}} + +## Voir aussi + +- {{jsxref("Array.prototype.forEach()")}} +- L'objet {{jsxref("Map")}} +- {{jsxref("Array.from()")}} diff --git a/files/fr/web/javascript/reference/global_objects/array/of/index.md b/files/fr/web/javascript/reference/global_objects/array/of/index.md index 68508d936f..cbc2b0c156 100644 --- a/files/fr/web/javascript/reference/global_objects/array/of/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/of/index.md @@ -10,93 +10,78 @@ tags: translation_of: Web/JavaScript/Reference/Global_Objects/Array/of original_slug: Web/JavaScript/Reference/Objets_globaux/Array/of --- -<div>{{JSRef}}</div> +{{JSRef}} -<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> +La methode **`Array.of()`** permet de créer une nouvelle instance d'objet `Array` à partir d'un nombre variable d'arguments, quels que soient leur nombre ou leur type. -<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> +La différence entre **`Array.of()`** et le constructeur **`Array`** se situe dans la gestion de d'arguments entiers : **`Array.of(7)`** crée un tableau avec un seul élément, 7, tandis que **`Array(7)`** produit un tableau avec 7 éléments vides (à ne pas confondre avec des éléments qui auraient explicitement la valeur [`undefined`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/undefined)). -<pre class="brush: js">Array.of(7); // [7] +```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> +## Syntaxe -<pre class="syntaxbox">Array.of(<em>element0[, element1[, ...[, elementN]]]</em>) -</pre> + Array.of(element0[, element1[, ...[, elementN]]]) -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<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> +- _`element0`, `element1`, ..., `elementN`_ + - : Les éléments avec lesquels on souhaite construire le nouveau tableau. -<h3 id="Valeur_de_retour">Valeur de retour</h3> +### Valeur de retour -<p>Une nouvelle instance de {{jsxref("Array")}}.</p> +Une nouvelle instance de {{jsxref("Array")}}. -<h2 id="Description">Description</h2> +## Description -<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> +Cette fonction fait partie du standard ECMAScript 2015. Pour plus d'informations, voir les pages sur [la proposition pour `Array.of` et `Array.from`](https://gist.github.com/rwaldron/1074126) ainsi que la page sur le [fragment d'émulation pour `Array.of`](https://gist.github.com/rwaldron/3186576). -<pre class="brush: js">Array.of(7); // [7] +```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> +## Exemples -<pre class="brush: js">Array.of(1); // [1] +```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> +## Prothèse d'émulation (_polyfill_) -<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> +Exécuter ce code avant tout autre code permettra de créer la méthode **`Array.of()`** si elle n'est pas prise en charge nativement. -<pre class="brush: js">if (!Array.of) { +```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> - -<p>{{Compat("javascript.builtins.Array.of")}}</p> - -<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> +} +``` + +## Spécifications + +| Spécification | État | Commentaires | +| -------------------------------------------------------------------- | ---------------------------- | -------------------- | +| {{SpecName('ES2015', '#sec-array.of', 'Array.of')}} | {{Spec2('ES2015')}} | Définition initiale. | +| {{SpecName('ESDraft', '#sec-array.of', 'Array.of')}} | {{Spec2('ESDraft')}} | | + +## Compatibilité des navigateurs + +{{Compat("javascript.builtins.Array.of")}} + +## Voir aussi + +- {{jsxref("Array", "Array")}} +- {{jsxref("Array/from", "Array.from")}} +- {{jsxref("TypedArray.of()")}} diff --git a/files/fr/web/javascript/reference/global_objects/array/pop/index.md b/files/fr/web/javascript/reference/global_objects/array/pop/index.md index 6a5345dd88..7b9862f6fb 100644 --- a/files/fr/web/javascript/reference/global_objects/array/pop/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/pop/index.md @@ -10,97 +10,73 @@ tags: translation_of: Web/JavaScript/Reference/Global_Objects/Array/pop original_slug: Web/JavaScript/Reference/Objets_globaux/Array/pop --- -<div>{{JSRef}}</div> +{{JSRef}} -<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> +La méthode **`pop()`** supprime le **dernier** élément d'un tableau et retourne cet élément. Cette méthode modifie la longueur du tableau. -<div>{{EmbedInteractiveExample("pages/js/array-pop.html")}}</div> +{{EmbedInteractiveExample("pages/js/array-pop.html")}} -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><var>arr</var>.pop()</pre> + arr.pop() -<h3 id="Valeur_de_retour">Valeur de retour</h3> +### Valeur de retour -<p>L'élément qui a été retiré du tableau. Si le tableau est vide, elle renvoie {{jsxref("undefined")}}.</p> +L'élément qui a été retiré du tableau. Si le tableau est vide, elle renvoie {{jsxref("undefined")}}. -<h2 id="Description">Description</h2> +## Description -<p>La méthode <code>pop()</code> supprime le dernier élément d'un tableau et retourne cette valeur.</p> +La méthode `pop()` supprime le dernier élément d'un tableau et retourne cette valeur. -<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> +`pop()` est volontairement générique ; cette méthode peut être {{jsxref("Function.call", "appelée")}} ou {{jsxref("Function.apply", "appliquée")}} pour des objets ressemblant à des tableaux. Les objets qui ne contiennent pas une propriété `length` reflétant la fin d'une série de propriétés consécutives numérotées peuvent se comporter bizarrement. -<p>Si vous appelez <code>pop()</code> sur un tableau vide, il renverra la valeur {{jsxref("undefined")}}.</p> +Si vous appelez `pop()` sur un tableau vide, il renverra la valeur {{jsxref("undefined")}}. -<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> +> **Note :** La méthode {{jsxref("Array.prototype.shift()")}} possède un comportement analogue mais retire le _premier_ élément du tableau. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Supprimer_le_dernier_élément_d'un_tableau">Supprimer le dernier élément d'un tableau</h3> +### Supprimer le dernier élément d'un tableau -<p>Le code suivant crée le tableau <code>mesPoissons</code> qui contient quatre éléments puis supprime le dernier élément.</p> +Le code suivant crée le tableau `mesPoissons` qui contient quatre éléments puis supprime le dernier élément. -<pre class="brush:js">var mesPoissons = ["angel", "clown", "mandarin", "sturgeon"]; +```js +var mesPoissons = ["angel", "clown", "mandarin", "sturgeon"]; var popped = mesPoissons.pop(); console.table(mesPoissons); // angel, clown, madarin -console.log(popped); // sturgeon</pre> +console.log(popped); // sturgeon +``` -<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> +### Utiliser `apply()` ou `call()` sur les objets semblables aux tableaux -<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> +Le code suivant crée un objet `mesPoissons` semblable à un tableau, qui contient 4 propriétés indexées avec des nombres et une propriété `length`. On utilise la méthode {{jsxref("Function.call()")}} pour invoquer `pop()` sur cet objet : -<pre class="brush: js">var mesPoissons = {0: 'angel', 1: 'clown', 2: 'mandarin', 3: 'sturgeon', length: 4}; +```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> - -<p>{{Compat("javascript.builtins.Array.pop")}}</p> - -<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> +``` + +## Spécifications + +| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | +| {{SpecName('ES3')}} | {{Spec2('ES3')}} | Définition initiale. Implémentée avec JavaScript 1.2. | +| {{SpecName('ES5.1', '#sec-15.4.4.6', 'Array.prototype.pop')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-array.prototype.pop', 'Array.prototype.pop')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-array.prototype.pop', 'Array.prototype.pop')}} | {{Spec2('ESDraft')}} | | + +## Compatibilité des navigateurs + +{{Compat("javascript.builtins.Array.pop")}} + +## Voir aussi + +- {{jsxref("Array.prototype.push()")}} +- {{jsxref("Array.prototype.shift()")}} +- {{jsxref("Array.prototype.unshift()")}} +- {{jsxref("Array.prototype.splice()")}} diff --git a/files/fr/web/javascript/reference/global_objects/array/push/index.md b/files/fr/web/javascript/reference/global_objects/array/push/index.md index c7f18ce86b..0472582660 100644 --- a/files/fr/web/javascript/reference/global_objects/array/push/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/push/index.md @@ -10,72 +10,72 @@ tags: translation_of: Web/JavaScript/Reference/Global_Objects/Array/push original_slug: Web/JavaScript/Reference/Objets_globaux/Array/push --- -<div>{{JSRef}}</div> +{{JSRef}} -<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> +La méthode **`push()`** ajoute un ou plusieurs éléments à la fin d'un tableau et retourne la nouvelle taille du tableau. -<div>{{EmbedInteractiveExample("pages/js/array-push.html")}}</div> +{{EmbedInteractiveExample("pages/js/array-push.html")}} -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><var>arr</var>.push(<var>élément1</var>, ..., <var>élémentN</var>)</pre> + arr.push(élément1, ..., élémentN) -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><code>élément1, ...,élémentN</code></dt> - <dd>Les éléments à ajouter à la fin du tableau.</dd> -</dl> +- `élément1, ...,élémentN` + - : Les éléments à ajouter à la fin du tableau. -<h3 id="Valeur_de_retour">Valeur de retour</h3> +### Valeur de retour -<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> +La nouvelle valeur de la propriété {{jsxref("Array.length", "length")}} de l'objet sur lequel la méthode a été appelée. -<h2 id="Description">Description</h2> +## Description -<p>La méthode <code>push</code> permet d'ajouter des valeurs à un tableau.</p> +La méthode `push` permet d'ajouter des valeurs à un tableau. -<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> +`push` est une méthode générique. Cette méthode peut ainsi être utilisée avec les méthodes {{jsxref("Function.call()")}} ou {{jsxref("Function.apply()")}} sur des objets similaires aux tableaux. -<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> +La méthode `push` se base sur la propriété `length` pour déterminer à partir de quel index les valeurs données doivent être insérées. Si la propriété `length` ne peut pas être convertie en nombre, l'index utilisé est 0. Si la propriété `length` n'est pas définie, elle est alors créée. -<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> +Bien que `push` soit une méthode générique, elle ne peut pas être utilisée sur les chaînes de caractères ou sur l'objet `arguments` car ils sont immuables. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Ajouter_des_éléments_à_un_tableau">Ajouter des éléments à un tableau</h3> +### Ajouter des éléments à un tableau -<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> +Le code suivant crée un tableau `sports` contenant à sa création deux éléments, auxquels sont ajoutés deux nouveaux éléments. La variable `total` contient la nouvelle taille du tableau. -<pre class="brush: js">var sports = ["plongée", "baseball"]; +```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> +### Fusionner deux tableaux -<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> +Dans l'exemple qui suit, on utilise la méthode {{jsxref("Function.apply()")}} pour ajouter les différents éléments d'un second tableau -<pre class="brush: js">var legumes = ['navet', 'pomme de terre']; +```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> +console.log(legumes); // ['navet', 'pomme de terre', 'céleri', 'radis'] +``` -<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> +> **Note :** Attention à ne pas utiliser cette méthode lorsque les tableaux sont très grands car une fonction n'accepte qu'un nombre limité d'arguments. Voir {{jsxref("Function.apply","apply()")}} pour plus d'informations sur ces limites. -<h3 id="Utiliser_un_objet_comme_on_utiliserait_un_tableau">Utiliser un objet comme on utiliserait un tableau</h3> +### Utiliser un objet comme on utiliserait un tableau -<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> +Comme nous l'avons vu auparavant, `push` est une méthode générique et nous pouvons donc utiliser `Array.prototype.push` sur les objets. On notera qu'il n'est pas nécessaire de stocker un ensemble d'objets. En fait, on enregistre l'ensemble dans l'objet et on utilise `call` sur `Array.prototype.push` : -<pre class="brush: js">var obj = { +```js +var obj = { length: 0, ajoutElem: function ajoutElem (elem) { @@ -91,49 +91,24 @@ 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> - -<p>{{Compat("javascript.builtins.Array.push")}}</p> - -<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> +``` + +## Spécifications + +| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | +| {{SpecName('ES3')}} | {{Spec2('ES3')}} | Définition initiale. Implémentée avec JavaScript 1.2. | +| {{SpecName('ES5.1', '#sec-15.4.4.7', 'Array.prototype.push')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-array.prototype.push', 'Array.prototype.push')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-array.prototype.push', 'Array.prototype.push')}} | {{Spec2('ESDraft')}} | | + +## Compatibilité des navigateurs + +{{Compat("javascript.builtins.Array.push")}} + +## Voir aussi + +- {{jsxref("Array.prototype.pop()")}} +- {{jsxref("Array.prototype.shift()")}} +- {{jsxref("Array.prototype.unshift()")}} +- {{jsxref("Array.prototype.concat()")}} diff --git a/files/fr/web/javascript/reference/global_objects/array/reduce/index.md b/files/fr/web/javascript/reference/global_objects/array/reduce/index.md index 6ec6af3488..183efdeb71 100644 --- a/files/fr/web/javascript/reference/global_objects/array/reduce/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/reduce/index.md @@ -11,225 +11,231 @@ tags: translation_of: Web/JavaScript/Reference/Global_Objects/Array/Reduce original_slug: Web/JavaScript/Reference/Objets_globaux/Array/reduce --- -<div>{{JSRef}}</div> +{{JSRef}} -<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> +La méthode **`reduce()`** applique une fonction qui est un « accumulateur » et qui traite chaque valeur d'une liste (de la gauche vers la droite) afin de la réduire à une seule valeur. -<div>{{EmbedInteractiveExample("pages/js/array-reduce.html")}}</div> +{{EmbedInteractiveExample("pages/js/array-reduce.html")}} -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><var>arr</var>.reduce(<var>callback</var>) -<var>arr</var>.reduce(<var>callback</var>, valeurInitiale)</pre> + arr.reduce(callback) + arr.reduce(callback, valeurInitiale) -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<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> +- `callback` -<h3 id="Valeur_de_retour">Valeur de retour</h3> + - : La fonction à exécuter sur chaque valeur de la liste (sauf le premier si aucune `valeurInitiale` n'est fournie), elle prend quatre arguments en entrée : -<p>La valeur obtenue grâce à la fonction de réduction.</p> + - `accumulateur` + - : La valeur précédemment retournée par le dernier appel du callback, ou `valeurInitiale`, si elle est fournie (voir ci-après) (c'est la valeur « accumulée » au fur et à mesure des appels + - `valeurCourante` + - : La valeur de l'élément courant actuellement manipulé dans le tableau. + - `index`{{optional_inline}} + - : L'index de l'élément courant actuellement manipulé dans le tableau. + - `array`{{optional_inline}} + - : Le tableau sur lequel on a appelé la méthode `reduce()`. -<h2 id="Description">Description</h2> +- `valeurInitiale`{{optional_inline}} + - : Une valeur utilisée comme premier argument lors du premier appel de la fonction `callback`. Si aucune valeur initiale n'est fournie, le premier élément du tableau est utilisé (et la boucle de traitement ne le parcourera pas). Si on appelle `reduce()` sur un tableau vide sans fournir de valeur initiale, on aura une erreur. -<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> +### Valeur de retour -<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> +La valeur obtenue grâce à la fonction de réduction. -<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> +## Description -<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> +`reduce()` exécute la fonction `callback` une fois pour chaque élément présent dans le tableau et ignore les éléments vides du tableau. La fonction `callback` utilise quatre arguments : -<p>En considérant le code suivant :</p> +1. L'accumulateur (la valeur retournée par le précédent appel de la fonction `callback`), ou la valeur initiale s'il sagit du premier appel ; +2. la valeur de l'élément courant ; +3. l'index de l'élément courant ; +4. le tableau parcouru par la méthode. -<pre class="brush:js">[0, 1, 2, 3, 4].reduce(function(accumulateur, valeurCourante, index, array){ +La première fois que la fonction `callback` est appelée, `valeurInitiale` et `valeurCourante` peuvent correspondre à un ou deux éléments. Si `valeurInitiale` est fournie dans l'appel de `reduce()`, alors `accumulateur` sera égale à `valeurInitiale` et `valeurCourante` sera égale à la première valeur de la liste. Si `valeurInitiale` n'est pas fournie, alors `accumulateur` sera égale à la première valeur de la liste, et `valeurCourante` sera alors égale à la seconde. + +Autrement dit, si `valeurInitiale` n'est pas fournie, `reduce` exécutera la fonction de rappel à partir de l'indice 1 et la première valeur du tableau (d'indice 0) sera utilisée pour `valeurInitiale`. + +En considérant le code suivant : + +```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> +La fonction `callback` sera appelée quatre fois, avec les arguments et les valeurs de retour de chaque appel suivant : <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> + <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> +La valeur retournée par `reduce()` sera alors celle du dernier appel de la callback (ici `10`). -<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> +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 : -<pre class="brush: js">[0, 1, 2, 3, 4].reduce( - (accumulateur, valeurCourante) => accumulateur + valeurCourante; -);</pre> +```js +[0, 1, 2, 3, 4].reduce( + (accumulateur, valeurCourante) => accumulateur + valeurCourante; +); +``` -<p>Si on fournit une valeur initiale comme second argument à l'appel de <code>reduce()</code>, le résultat sera alors le suivant :</p> +Si on fournit une valeur initiale comme second argument à l'appel de `reduce()`, le résultat sera alors le suivant : -<pre class="brush:js">[0, 1, 2, 3, 4].reduce(function(accumulateur, valeurCourante, index, array){ +```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> + <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> +Ici, la valeur renvoyée par `reduce()` serait `20`. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Additionner_toutes_les_valeurs_dun_tableau">Additionner toutes les valeurs d'un tableau</h3> +### Additionner toutes les valeurs d'un tableau -<pre class="brush:js">var total = [0, 1, 2, 3].reduce((a, b)=> a + b,0); +```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> +### Additionner les valeurs d'une propriétés pour un tableau d'objets -<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> +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 : -<pre class="brush: js">var valeurInitiale = 0; +```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> +On peut également écrire une version plus concise avec les fonctions fléchées : -<pre class="brush: js">var valeurInitiale = 0; +```js +var valeurInitiale = 0; var somme = [{x: 1}, {x:2}, {x:3}].reduce( - (accumulateur, valeurCourante) => accumulateur + valeurCourante.x + (accumulateur, valeurCourante) => accumulateur + valeurCourante.x , valeurInitiale ); -console.log(somme); // affiche 6 dans la console</pre> +console.log(somme); // affiche 6 dans la console +``` -<h3 id="Aplatir_une_liste_de_listes">Aplatir une liste de listes</h3> +### Aplatir une liste de listes -<pre class="brush:js">var applati = [[0, 1], [2, 3], [4, 5]].reduce(function(a, b) { +```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> +### Utiliser le paramètre `valeurInitiale` -<pre class="brush: js">var amis = [ +```js +var amis = [ { "nom": "Quentin", "livres": ["City Hall", "Harry Potter"]}, { "nom": "Alice", "livres": ["L'Avare", "Les Fleurs du Mal"]} ] @@ -239,56 +245,59 @@ var tousLivres = amis.reduce(function(prev, curr) { }, ["Perceval"]); // tousLivres = ["Perceval", "City Hall", "Harry Potter", -// "L'Avare", "Les Fleurs du Mal"]</pre> +// "L'Avare", "Les Fleurs du Mal"] +``` -<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> +### Exécuter une suite de promesses stockées dans un tableau -<pre class="brush: js">/** +```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 arr.reduce((promiseChain, currentPromise) => { + return promiseChain.then((chainedResult) => { return currentPromise(chainedResult) - .then((res) => res) + .then((res) => res) }) }, Promise.resolve()); } // promise function 1 function p1() { - return new Promise((resolve, reject) => { + return new Promise((resolve, reject) => { resolve(5); }); } // promise function 2 function p2(a) { - return new Promise((resolve, reject) => { + return new Promise((resolve, reject) => { resolve(a * 2); }); } // promise function 3 function p3(a) { - return new Promise((resolve, reject) => { + return new Promise((resolve, reject) => { resolve(a * 3); }); } const promiseArr = [p1, p2, p3]; runPromiseInSequense(promiseArr) - .then((res) => { + .then((res) => { console.log(res); // 30 }); -</pre> +``` -<h3 id="Regrouper_des_objets_selon_une_propriété">Regrouper des objets selon une propriété</h3> +### Regrouper des objets selon une propriété -<pre class="brush: js">var personnes = [ +```js +var personnes = [ { nom: "Alice", age: 21 }, { nom: "Bob", age: 20 }, { nom: "Charlie", age: 20 } @@ -314,18 +323,19 @@ var personnesParAge = groupBy(personnes, "age"); // ], // 21: [{ nom: "Alice", age: 21 }] // } -</pre> +``` -<h3 id="Composition_de_fonctions">Composition de fonctions</h3> +### Composition de fonctions -<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; +```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), +const pipe = (...functions) => input => functions.reduce( + (acc, fn) => fn(acc), input ); @@ -340,19 +350,22 @@ 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> +### Retirer les doublons d'un tableau -<h4 id="Avec_ECMAScript_2015_ES6">Avec ECMAScript 2015 (ES6)</h4> +#### Avec ECMAScript 2015 (ES6) -<pre class="brush: js">let tableauAvecDoublons = [1, 2, 3, 1, 4, 5, 4, 6]; +```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> +console.table(tableauSansDoublon); // [1, 2, 3, 4, 5, 6] +``` -<h4 id="Avec_reduce">Avec <code>reduce()</code></h4> +#### Avec `reduce()` -<pre class="brush: js">var tableauAvecDoublons = [1, 2, 3, 1, 4, 5, 4, 6]; +```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); @@ -361,42 +374,20 @@ var tableauSansDoublon = tableauAvecDoublon.reduce(function (acc, valCourante) { }, []); console.log(tableauSansDoublon); // [1, 2, 3, 4, 5, 6] -</pre> +``` -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<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> +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------------------------------ | ---------------------------- | --------------------------------------------------- | +| {{SpecName('ES5.1', '#sec-15.4.4.21', 'Array.prototype.reduce()')}} | {{Spec2('ES5.1')}} | Définition initiale. Implémenté dans JavaScript 1.8 | +| {{SpecName('ES6', '#sec-array.prototype.reduce', 'Array.prototype.reduce()')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-array.prototype.reduce', 'Array.prototype.reduce()')}} | {{Spec2('ESDraft')}} | | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("javascript.builtins.Array.reduce")}}</p> +{{Compat("javascript.builtins.Array.reduce")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{jsxref("Array.prototype.reduceRight()")}}</li> -</ul> +- {{jsxref("Array.prototype.reduceRight()")}} diff --git a/files/fr/web/javascript/reference/global_objects/array/reduceright/index.md b/files/fr/web/javascript/reference/global_objects/array/reduceright/index.md index 63222a2191..dbb7001bf8 100644 --- a/files/fr/web/javascript/reference/global_objects/array/reduceright/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/reduceright/index.md @@ -11,199 +11,202 @@ tags: translation_of: Web/JavaScript/Reference/Global_Objects/Array/ReduceRight original_slug: Web/JavaScript/Reference/Objets_globaux/Array/reduceRight --- -<div>{{JSRef}}</div> +{{JSRef}} -<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> +La méthode **`reduceRight()`** applique une fonction sur un accumulateur et chaque valeur d'un tableau (de la droite vers la gauche) de sorte à réduire le tableau en une seule valeur. -<div>{{EmbedInteractiveExample("pages/js/array-reduce-right.html")}}</div> +{{EmbedInteractiveExample("pages/js/array-reduce-right.html")}} +Voir également {{jsxref("Array.prototype.reduce()")}} pour une méthode qui réduit de gauche à droite. +## Syntaxe -<p>Voir également {{jsxref("Array.prototype.reduce()")}} pour une méthode qui réduit de gauche à droite.</p> + arr.reduceRight(callback[, valeurInitiale]) -<h2 id="Syntaxe">Syntaxe</h2> +### Paramètres -<pre class="syntaxbox"><var>arr</var>.reduceRight(<var>callback</var>[, valeurInitiale])</pre> +- `callback` -<h3 id="Paramètres">Paramètres</h3> + - : La fonction à éxécuter sur chaque valeur de la liste. Elle utilise quatres arguments : -<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> + - `accumulator` + - : La valeur précédemment retournée par le dernier appel de la fonction `callback`, ou `valeurInitial` si elle est fournie. (Voir ci-après.) + - `valeurCourante` + - : La valeur de l'élément courant dans le tableau. + - `index` + - : L'index de l'élément du tableau actuellement manipulé. + - `array` + - : Le tableau sur lequel `reduceRight()` est appelée. -<h3 id="Valeur_de_retour">Valeur de retour</h3> +- `valeurInitiale` {{optional_inline}} + - : C'est l'objet à utiliser comme accumulateur/premier argument lors du premier appel de la fonction `callback`. Si aucune valeur n'est fournie, c'est le dernier élément du tableau qui sera utilisé. Si on appelle `reduce()` ou `reduceRight()` sur un tableau vide sans fournir de valeur initiale, on aura une exception {{jsxref("TypeError")}}. -<p>La valeur obtenue grâce à la fonction de réduction.</p> +### Valeur de retour -<h2 id="Description">Description</h2> +La valeur obtenue grâce à la fonction de réduction. -<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> +## Description -<p>L'usage de <code>reduceRight</code> avec définition d'un <code>callback</code> devrait ressembler à ceci :</p> +`reduceRight` exécute la fonction `callback` une fois pour chaque élément présent dans le tableau, les éléments vides sont ignorés. La fonction `callback` utilise quatre arguments : la valeur initiale (ou la valeur retournée par le précédent appel de la fonction` callback`), la valeur de l'élément courant, l'index de l'élément courant, et le tableau qui est parcouru. -<pre class="brush: js">array.reduceRight(function(accumulator, valeurCourante, index, array) { +L'usage de `reduceRight` avec définition d'un `callback` devrait ressembler à ceci : + +```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> +La première fois que la fonction de callback est appelée, `accumulator` et `valeurCourante` peuvent correspondre à un ou deux éléments. Si `valeurInitiale` est fournie lors de l'appel à `reduceRight`, alors `accumulator` sera égale à `valeurInitiale` et `valeurCourante` sera égale à la dernière valeur de la liste. Si `valeurInitiale` n'est pas fournie, alors `accumulator` sera égale à la dernière valeur de la liste, et `valeurCourante` sera alors égale à l'avant-dernière valeur du tableau. -<p>Si on utilise la méthode <code>reduceRight</code> de la façon suivante :</p> +Si on utilise la méthode `reduceRight` de la façon suivante : -<pre class="brush: js">[0, 1, 2, 3, 4].reduceRight(function(accumulator, valeurCourante, index, array) { +```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> +La fonction `callback` sera appelée quatre fois, avec les arguments et les valeurs de retour de chaque appel suivant : <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> + <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> +La valeur retournée par `reduceRight` sera alors celle du dernier appel de la fonction `callback` (`10`). -<p>Si vous fournissez une valeur initiale comme second argument à l'appel de <code>reduceRight</code>, le résultat sera alors le suivant :</p> +Si vous fournissez une valeur initiale comme second argument à l'appel de `reduceRight`, le résultat sera alors le suivant : -<pre class="brush: js">[0, 1, 2, 3, 4].reduceRight(function(accumulator, valeurCourante, index, array) { +```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> + <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> +La valeur renvoyée par `reduceRight` sera ici `20`. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Additionner_toutes_les_valeurs_d'une_liste">Additionner toutes les valeurs d'une liste</h3> +### Additionner toutes les valeurs d'une liste -<pre class="brush: js">var total = [0, 1, 2, 3].reduceRight(function(a, b) { +```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> +### Aplatir une liste de listes -<pre class="brush: js">var aplati = [[0, 1], [2, 3], [4, 5]].reduceRight(function(a, b) { +```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> +### Différence entre `reduce` et `reduceRight` -<pre class="brush: js">var a = ['1', '2', '3', '4','5'] +```js +var a = ['1', '2', '3', '4','5'] var gauche = a.reduce(function(prev, cur) { return prev + cur; }); @@ -213,67 +216,48 @@ var droite = a.reduceRight(function(prev, cur) { }); console.log(gauche); // "12345" -console.log(droite); // "54321"</pre> +console.log(droite); // "54321" +``` -<h3 id="Composition_de_fonctions_à_l'aide_de_reduce">Composition de fonctions à l'aide de <code>reduce</code></h3> +### Composition de fonctions à l'aide de `reduce` -<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> +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. -<pre class="brush: js">/** +```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) +const compose = (...args) => (value) => args.reduceRight((acc, fn) => fn(acc), value) // On incrémente un nombre passé en argument -const inc = (n) => n + 1 +const inc = (n) => n + 1 // On double la valeur passée en argument -const double = (n) => n * 2 +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> +``` + +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- | +| {{SpecName('ES5.1', '#sec-15.4.4.22', 'Array.prototype.reduceRight')}} | {{Spec2('ES5.1')}} | Définition initiale. Implémentée avec JavaScript 1.8. | +| {{SpecName('ES6', '#sec-array.prototype.reduceright', 'Array.prototype.reduceRight')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-array.prototype.reduceright', 'Array.prototype.reduceRight')}} | {{Spec2('ESDraft')}} | | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("javascript.builtins.Array.reduceRight")}}</p> +{{Compat("javascript.builtins.Array.reduceRight")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{jsxref("Array.prototype.reduce()")}}</li> -</ul> +- {{jsxref("Array.prototype.reduce()")}} diff --git a/files/fr/web/javascript/reference/global_objects/array/reverse/index.md b/files/fr/web/javascript/reference/global_objects/array/reverse/index.md index cfd6d0029a..034a9a73e9 100644 --- a/files/fr/web/javascript/reference/global_objects/array/reverse/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/reverse/index.md @@ -10,91 +10,68 @@ tags: translation_of: Web/JavaScript/Reference/Global_Objects/Array/reverse original_slug: Web/JavaScript/Reference/Objets_globaux/Array/reverse --- -<div>{{JSRef}}</div> +{{JSRef}} -<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> +La méthode **`reverse()`** transpose les éléments d'un tableau : le premier élément devient le dernier et le dernier devient le premier et ainsi de suite. -<div>{{EmbedInteractiveExample("pages/js/array-reverse.html")}}</div> +{{EmbedInteractiveExample("pages/js/array-reverse.html")}} -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><var>arr</var>.reverse()</pre> + arr.reverse() -<h3 id="Valeur_de_retour">Valeur de retour</h3> +### Valeur de retour -<p>Le tableau inversé.</p> +Le tableau inversé. -<h2 id="Description">Description</h2> +## Description -<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> +La méthode `reverse()` permet d'inverser l'ordre des éléments du tableau. La méthode modifie le tableau courant et renvoie une référence à ce tableau. -<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> +Cette méthode est intentionnellement générique et peut être appelée (via {{jsxref("Function.call()")}}) ou appliquée (via {{jsxref("Function.apply()")}}) sur des objets semblables à des tableaux. Les objets qui ne contiennent pas de propriété `length` qui soit cohérente avec leurs propriétés indexées sur des nombres ne seront pas traités par `reverse()`. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Inverser_l'ordre_des_éléments_d'un_tableau">Inverser l'ordre des éléments d'un tableau</h3> +### Inverser l'ordre des éléments d'un tableau -<p>L'exemple qui suit crée un tableau <code>monArray</code>, qui contient trois éléments, puis inverse celui-ci.</p> +L'exemple qui suit crée un tableau `monArray`, qui contient trois éléments, puis inverse celui-ci. -<pre class="brush: js">var monArray = ["un", "deux", "trois"]; +```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> +### Inverser l'ordre des éléments d'un objet semblable à un tableau -<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> +Dans l'exemple suivant, on crée un objet semblable à un tableau `a` qui contient trois éléments et une propriété `length`. On appelle ensuite `reverse()` grâce à `call()` sur cet objet pour inverser ses éléments : -<pre class="brush: js">const a = {0: 1, 1: 2, 2: 3, length: 3}; +```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> - -<p>{{Compat("javascript.builtins.Array.reverse")}}</p> - -<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> +``` + +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- | +| {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.1. | +| {{SpecName('ES5.1', '#sec-15.4.4.8', 'Array.prototype.reverse')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-array.prototype.reverse', 'Array.prototype.reverse')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-array.prototype.reverse', 'Array.prototype.reverse')}} | {{Spec2('ESDraft')}} | | + +## Compatibilité des navigateurs + +{{Compat("javascript.builtins.Array.reverse")}} + +## Voir aussi + +- {{jsxref("Array.prototype.join()")}} +- {{jsxref("Array.prototype.sort()")}} +- {{jsxref("TypedArray.prototype.reverse()")}} diff --git a/files/fr/web/javascript/reference/global_objects/array/shift/index.md b/files/fr/web/javascript/reference/global_objects/array/shift/index.md index aa853937b2..f34d0d73da 100644 --- a/files/fr/web/javascript/reference/global_objects/array/shift/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/shift/index.md @@ -10,39 +10,38 @@ tags: translation_of: Web/JavaScript/Reference/Global_Objects/Array/shift original_slug: Web/JavaScript/Reference/Objets_globaux/Array/shift --- -<div>{{JSRef}}</div> +{{JSRef}} -<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> +La méthode **`shift()`** permet de retirer le **premier** élément d'un tableau et de renvoyer cet élément. Cette méthode modifie la longueur du tableau. -<div>{{EmbedInteractiveExample("pages/js/array-shift.html")}}</div> +{{EmbedInteractiveExample("pages/js/array-shift.html")}} -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><var>arr</var>.shift()</pre> + arr.shift() -<h3 id="Valeur_de_retour">Valeur de retour</h3> +### Valeur de retour -<p>L'élément retiré du tableau ou {{jsxref("undefined")}} si le tableau est vide.</p> +L'élément retiré du tableau ou {{jsxref("undefined")}} si le tableau est vide. -<h2 id="Description">Description</h2> +## Description -<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> +La méthode `shift` retire l'élément situé à l'index zéro et décrémente l'index des éléments suivant avant de retourner l'élément supprimé. Si la propriété {{jsxref("Array.length", "length")}} vaut 0, {{jsxref("undefined")}} est retourné. -<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> +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>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> +Cette méthode n'est pas exploitable pour les objets dont la propriété `length` ne reflète pas la taille du contenu, ou pour lesquels la propriété `length` n'est pas définie. -<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> +> **Note :** La méthode {{jsxref("Array.prototype.pop()")}} possède un comportement similaire mais retire le dernier élément du tableau (et non le premier). -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Supprimer_un_élément_d'un_tableau">Supprimer un élément d'un tableau</h3> +### Supprimer un élément d'un tableau -<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> +Le code suivant affiche le tableau `mesPoissons` avant et après avoir enlevé le premier élément. Il affiche aussi l'élément supprimé : -<pre class="brush:js">var mesPoissons = ["ange", "clown", "mandarin", "chirurgien"]; +```js +var mesPoissons = ["ange", "clown", "mandarin", "chirurgien"]; console.log("mesPoissons avant : " + JSON.stringify(mesPoissons)); // mesPoissons avant : ["ange","clown","mandarin","chirurgien"] @@ -54,60 +53,36 @@ console.log("mesPoissons après :", mesPoissons); 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> +### Utiliser `shift()` dans une boucle `while` -<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> +La méthode `shift()` peut être utilisée dans une boucle [`while`](/fr/docs/Web/JavaScript/Reference/Instructions/while). Dans l'exemple suivant, chaque itération de la boucle retire un élément du tableau et l'affiche dans la console, jusqu'à ce que ce dernier soit vide. -<pre class="brush: js">var noms = ["André", "Édouard", "Paul", "Christophe", "Jean"]; +```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> - -<p>{{Compat("javascript.builtins.Array.shift")}}</p> - -<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> +``` + +## Spécifications + +| Spécification | État | Commentaires | +| -------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | +| {{SpecName('ES3')}} | {{Spec2('ES3')}} | Définition initiale. Implémentée avec JavaScript 1.2. | +| {{SpecName('ES5.1', '#sec-15.4.4.9', 'Array.prototype.shift')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-array.prototype.shift', 'Array.prototype.shift')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-array.prototype.shift', 'Array.prototype.shift')}} | {{Spec2('ESDraft')}} | | + +## Compatibilité des navigateurs + +{{Compat("javascript.builtins.Array.shift")}} + +## Voir aussi + +- {{jsxref("Array.prototype.push()")}} +- {{jsxref("Array.prototype.pop()")}} +- {{jsxref("Array.prototype.unshift()")}} +- {{jsxref("Array.prototype.concat()")}} diff --git a/files/fr/web/javascript/reference/global_objects/array/slice/index.md b/files/fr/web/javascript/reference/global_objects/array/slice/index.md index 988565123b..35f56b4c80 100644 --- a/files/fr/web/javascript/reference/global_objects/array/slice/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/slice/index.md @@ -10,60 +10,60 @@ tags: translation_of: Web/JavaScript/Reference/Global_Objects/Array/slice original_slug: Web/JavaScript/Reference/Objets_globaux/Array/slice --- -<div>{{JSRef}}</div> +{{JSRef}} -<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> +La méthode **`slice()`** renvoie un objet tableau, contenant une copie superficielle (_shallow copy_) d'une portion du tableau d'origine, la portion est définie par un indice de début et un indice de fin (exclus). Le tableau original ne sera pas modifié. -<div>{{EmbedInteractiveExample("pages/js/array-slice.html")}}</div> +{{EmbedInteractiveExample("pages/js/array-slice.html")}} -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<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> + arr.slice() + arr.slice(début) + arr.slice(début, fin) -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><code>début</code> {{optional_inline}}</dt> - <dd>Indice (à partir de zéro) depuis lequel commencer l'extraction. 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> - <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. <code>slice(1,4)</code> extrait du deuxième au quatrième élément (les éléments d'indices 1, 2 et 3). S'il s'agit d'un indice négatif, <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. 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> +- `début` {{optional_inline}} -<h3 id="Valeur_de_retour">Valeur de retour</h3> + - : Indice (à partir de zéro) depuis lequel commencer l'extraction. S'il s'agit d'un indice négatif, `début` indique un décalage depuis la fin de la séquence. Par exemple, `slice(-2)` extrait les avant-dernier et dernier éléments dans la séquence. -<p>Un nouveau tableau contenant les éléments extraits.</p> + Si `début` est absent, `slice()` commencera depuis 0. Si `début` est supérieur à la taille du tableau, c'est un tableau vide qui sera renvoyé. -<h2 id="Description">Description</h2> +- `fin` {{optional_inline}} + - : Indice (à partir de zéro) auquel arrêter l'extraction. `slice()` extrait jusqu'à cet indice, mais pas l'élément situé en `fin` lui-même. `slice(1,4)` extrait du deuxième au quatrième élément (les éléments d'indices 1, 2 et 3). S'il s'agit d'un indice négatif, `fin` indique un décalage depuis la fin de la séquence. `slice(2,-1)` extrait du troisième à l'avant-dernier élément dans la séquence. Si `fin` n'est pas fourni, `slice()` extraira jusqu'à la fin de la séquence (`arr.length`). Si `fin` est supérieur à la longueur de la séquence, `slice()` fera une extraction jusqu'à la fin de la séquence. -<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> +### Valeur de retour -<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> +Un nouveau tableau contenant les éléments extraits. -<p>Si un nouvel élément est ajouté à l'un ou l'autre tableau, le second n'est pas affecté.</p> +## Description -<h2 id="Exemples">Exemples</h2> +`slice()` ne modifie pas le tableau original, mais renvoie une nouvelle copie du tableau (_shallow copy_ — copie superficielle) dont les éléments sont des copies des éléments extraits du tableau original. Les éléments du tableau original sont copiés dans le nouveau tableau de la manière suivante : -<h3 id="Renvoyer_un_fragment_d'un_tableau_existant">Renvoyer un fragment d'un tableau existant</h3> +- Pour les références à des objets (et non les objets eux-mêmes), `slice()` 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. +- Pour les chaines de caractères, les nombres et les booléens, `slice()` 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 _type primitif_, pas des _objets_ {{jsxref("String")}}, {{jsxref("Number")}} ou {{jsxref("Boolean")}} — voir par exemple [différences entre objet String et type primitif pour les chaines de caractères](/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)). -<pre class="brush: js">var fruits = ["Banane", "Orange", "Citron", "Pomme", "Mangue"]; +Si un nouvel élément est ajouté à l'un ou l'autre tableau, le second n'est pas affecté. + +## Exemples + +### Renvoyer un fragment d'un tableau existant + +```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> +// fruits vaut --> ["Banane", "Orange", "Citron", "Pomme", "Mangue"] +// agrumes vaut --> ["Orange", "Citron"] +``` -<h3 id="Utiliser_slice()">Utiliser <code>slice()</code></h3> +### Utiliser `slice()` -<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> +Dans l'exemple qui suit, `slice()` crée un nouveau tableau, `nouvelleVoiture`, à partir de `maVoiture`. Chacun d'entre eux contient une référence à l'objet `maHonda`. Lorsque la couleur de `maHonda` est changée en bordeaux, les deux tableaux reflètent ce changement. -<pre class="brush: js">// Avec slice, crée nouvelleVoiture depuis maVoiture +```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); @@ -82,11 +82,12 @@ 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> +Ce script affichera : -<pre class="brush: js">maVoiture = [{couleur:"rouge", roues:4, moteur:{cylindres:4, capacité:2.2}}, 2, +```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 @@ -94,22 +95,24 @@ 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> +## Utilisation avec les objets similaires aux tableaux -<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> +La méthode `slice()` peut aussi être appelée pour convertir des objets/collections similaires à des tableaux, en un nouveau tableau. L'objet {{jsxref("Fonctions/arguments", "arguments")}} d'une fonction est un exemple d'objet similaire à un tableau. -<pre class="brush: js">function list() { +```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> +Il est possible de lier avec la fonction .`call` de {{jsxref("Function.prototype")}} et on peut effectuer la réduction avec `[].slice.call(arguments)` plutôt qu'avec `Array.prototype.slice.call`. Voici comment on peut simplifier avec {{jsxref("Function.prototype.bind", "bind")}} : -<pre class="brush: js">var unboundSlice = Array.prototype.slice; +```js +var unboundSlice = Array.prototype.slice; var slice = Function.prototype.call.bind(unboundSlice); function list() { @@ -117,50 +120,23 @@ function list() { } 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> - -<p>{{Compat("javascript.builtins.Array.slice")}}</p> - -<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> +``` + +## Spécifications + +| Spécification | État | Commentaires | +| -------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | +| {{SpecName('ES3')}} | {{Spec2('ES3')}} | Définition initiale. Implémentée avec JavaScript 1.2. | +| {{SpecName('ES5.1', '#sec-15.4.4.10', 'Array.prototype.slice')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-array.prototype.slice', 'Array.prototype.slice')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-array.prototype.slice', 'Array.prototype.slice')}} | {{Spec2('ESDraft')}} | | + +## Compatibilité des navigateurs + +{{Compat("javascript.builtins.Array.slice")}} + +## Voir aussi + +- {{jsxref("Function.prototype.call()")}} +- {{jsxref("Function.prototype.bind()")}} +- {{jsxref("Array.prototype.splice()")}} diff --git a/files/fr/web/javascript/reference/global_objects/array/some/index.md b/files/fr/web/javascript/reference/global_objects/array/some/index.md index b9a15a2855..e24fc4cf20 100644 --- a/files/fr/web/javascript/reference/global_objects/array/some/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/some/index.md @@ -12,117 +12,93 @@ tags: translation_of: Web/JavaScript/Reference/Global_Objects/Array/some original_slug: Web/JavaScript/Reference/Objets_globaux/Array/some --- -<div>{{JSRef}}</div> +{{JSRef}} -<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> +La méthode **`some()`** teste si au moins un élément du tableau passe le test implémenté par la fonction fournie. Elle renvoie un booléen indiquant le résultat du test. -<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> +> **Note :** Cette méthode renverra `false`, quelle que soit la condition, si elle est utilisée sur un tableau vide. -<div>{{EmbedInteractiveExample("pages/js/array-some.html")}}</div> +{{EmbedInteractiveExample("pages/js/array-some.html")}} -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><var>arr</var>.some(<var>callback</var>[, <var>objetThis</var>])</pre> + arr.some(callback[, objetThis]) -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<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> +- `callback` -<h3 id="Valeur_de_retour">Valeur de retour</h3> + - : La fonction à tester pour chaque élément du tableau. Cette fonction utilise trois arguments : -<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> + - `valeurCourante` + - : L'élément du tableau à traiter par la fonction. + - `index` {{optional_inline}} + - : L'indice de l'élément qui est traité par la fonction. + - `array `{{optional_inline}} + - : Le tableau sur lequel on a appelé la méthode `some`. -<h2 id="Description">Description</h2> +- `objetThis` {{optional_inline}} + - : Paramètre optionnel. Il correspond à la valeur à utiliser pour `this` lors de l'exécution de la fonction `callback`. -<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> +### Valeur de retour -<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> +`true` si la fonction `callback` renvoie une valeur équivalente à `true` pour au moins un des éléments du tableau, sinon elle renvoie `false`. -<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> +## Description -<p>La méthode <code>some()</code> ne modifie pas le tableau sur lequel elle est appelée.</p> +La méthode `some()` exécute la fonction `callback` une seule fois pour chaque élément présent dans le tableau jusqu'à ce qu'elle en trouve un pour lequel `callback` renvoie une valeur équivalente à `true` dans un contexte booléen. Si un tel élément est trouvé, `some()` renvoie immédiatement `true`. Dans le cas contraire, `some` renvoie `false`. `callback` n'est invoquée que pour les indices du tableau auxquels des valeurs sont assignées ; elle n'est pas invoquée pour les indices qui ont été supprimés ou auxquels aucune valeur n'a jamais été assignée. -<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> +La fonction `callback` est invoquée avec trois paramètres : la valeur de l'élément, l'indice de l'élément et l'objet `Array` parcouru. -<h2 id="Exemples">Exemples</h2> +Si un paramètre `objetThis` est fourni à `some()`, il sera utilisé comme valeur de `this` pour chaque invocation du `callback`. Sinon, la valeur {{jsxref("undefined")}} sera passée pour utilisation comme valeur `this`. La valeur `this` finalement utilisée par `callback` est déterminée en fonction [des règles habituelles pour déterminer `this` pour une fonction](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_this). -<h3 id="Tester_la_valeur_des_éléments_d'un_tableau">Tester la valeur des éléments d'un tableau</h3> +La méthode `some()` ne modifie pas le tableau sur lequel elle est appelée. -<p>L'exemple suivant teste si certains éléments d'un tableau sont plus grands que 10.</p> +La liste des éléments traités par `some()` est définie avant la première invocation du `callback`. Les éléments qui sont ajoutés au tableau après le début de l'appel à `some` ne seront pas visités par `callback`. Si un élément existant non encore visité est modifié par `callback`, sa valeur passée à `callback` sera sa valeur au moment où `some` visite l'indice de cet élément ; les éléments supprimés ne seront pas visités. -<pre class="brush: js">function estAssezGrand(element, indice, array) { - return (element >= 10); +## Exemples + +### Tester la valeur des éléments d'un tableau + +L'exemple suivant teste si certains éléments d'un tableau sont plus grands que 10. + +```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> - -<p>{{Compat("javascript.builtins.Array.some")}}</p> - -<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> +``` + +### Tester la valeur des éléments avec les fonctions fléchées + +[Les fonctions fléchées ](/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es)permettent d'utiliser une syntaxe plus concise pour réaliser la même opération que l'exemple précédent. + +```js +[2, 5, 8, 1, 4].some(elem => elem > 10); // false +[12, 5, 8, 1, 4].some(elem => elem > 10); // true +``` + +> **Note :** Si on veut vérifier qu'un élément est dans un tableau, on pourra utiliser la méthode {{jsxref("Array.prototype.includes()")}}. + +## Spécifications + +| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | +| {{SpecName('ES5.1', '#sec-15.4.4.17', 'Array.prototype.some')}} | {{Spec2('ES5.1')}} | Définition initiale. Implémentée avec JavaScript 1.6. | +| {{SpecName('ES6', '#sec-array.prototype.some', 'Array.prototype.some')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-array.prototype.some', 'Array.prototype.some')}} | {{Spec2('ESDraft')}} | | + +## Compatibilité des navigateurs + +{{Compat("javascript.builtins.Array.some")}} + +## Voir aussi + +- {{jsxref("Array.prototype.find()")}} +- {{jsxref("Array.prototype.forEach()")}} +- {{jsxref("Array.prototype.every()")}} +- {{jsxref("Array.prototype.includes()")}} +- {{jsxref("TypedArray.prototype.some()")}} diff --git a/files/fr/web/javascript/reference/global_objects/array/sort/index.md b/files/fr/web/javascript/reference/global_objects/array/sort/index.md index 84ce52113f..75fe8a8ce3 100644 --- a/files/fr/web/javascript/reference/global_objects/array/sort/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/sort/index.md @@ -10,85 +10,85 @@ tags: translation_of: Web/JavaScript/Reference/Global_Objects/Array/sort original_slug: Web/JavaScript/Reference/Objets_globaux/Array/sort --- -<div>{{JSRef}}</div> +{{JSRef}} -<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> +La méthode **`sort()`** trie les éléments d'un tableau, dans ce même tableau, et renvoie le tableau. Par défaut, le tri s'effectue sur les éléments du tableau convertis en chaînes de caractères et triées selon les valeurs des unités de code UTF-16 des caractères. -<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> +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. -<div>{{EmbedInteractiveExample("pages/js/array-sort.html")}}</div> +{{EmbedInteractiveExample("pages/js/array-sort.html")}} -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><var>arr</var>.sort() -<var>arr</var>.sort(fonctionComparaison)</pre> + arr.sort() + arr.sort(fonctionComparaison) -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<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> +- `fonctionComparaison` {{optional_inline}} + - : Ce paramètre optionnel permet de spécifier une fonction définissant l'ordre de tri. Si absente, le tableau est trié selon la valeur de point de code [Unicode](/fr/docs/Web/JavaScript/Guide/Valeurs,_variables,_et_litt%C3%A9raux#Unicode) de chaque caractère, d'après la conversion en chaine de caractères de chaque élément. Cette fonction prendra deux arguments : le premier élément à comparer et le deuxième élément à comparer. -<h3 id="Valeur_de_retour">Valeur de retour</h3> +### Valeur de retour -<p>Le tableau trié (le tri est effectué sur le tableau courant qui est modifié, aucune copie n'est réalisée).</p> +Le tableau trié (le tri est effectué sur le tableau courant qui est modifié, aucune copie n'est réalisée). -<h2 id="Description">Description</h2> +## Description -<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> +Si le paramètre `fonctionComparaison` n'est pas fourni, les éléments qui ne valent pas `undefined` sont triés en les convertissant en chaines de caractères et en comparant ces chaines selon l'ordre des points de code Unicode. Par exemple, "banane" sera trié avant "cerise", mais "Cerise" arrivera avant "banane" à cause de la majuscule (les majuscules arrivent avant dans la liste). Dans un tri numérique, 9 sera trié avant 80, mais comme ces nombres sont convertis en chaînes de caractères, "80" arrive avant "9" selon l'ordre des unités de code UTF-16. Les éléments valant `undefined` sont placés à la fin du tableau. -<div class="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> +> **Note :** En UTF-16, les caractères Unicode situés après `\uFFFF` sont encodés avec deux unités de code _surrogates_ sur l'intervalle `\uD800`-`\uDFFF`. Pour comparer les chaînes de caractères entre elles, ce sont les unités de code séparées qui sont prises en compte. Ainsi, le caractère formé par la paire _surrogate_ `\uD655 \uDE55` sera trié avant le caractère `\uFF3A`. -<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> +Si le paramètre `fonctionComparaison` est fourni, les éléments du tableau (qui ne valent pas `undefined`) sont triés selon la valeur de retour de la fonction de comparaison. Si `a` et `b` sont deux éléments à comparer, alors : -<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> +- Si `fonctionComparaison(a, b)` est inférieur à 0, on trie `a` avec un indice inférieur à `b` (`a` sera classé avant `b`) +- Si `fonctionComparaison(a, b)` renvoie 0, on laisse `a` et `b` inchangés l'un par rapport à l'autre, mais triés par rapport à tous les autres éléments. Note : la norme ECMAScript ne garantit pas ce comportement, par conséquent tous les navigateurs (par exemple les versions de Mozilla antérieures à 2003) ne respectent pas ceci. +- Si `fonctionComparaison(a, b)` est supérieur à 0, on trie `b` avec un indice inférieur à `a`. +- `fonctionComparaison(a, b)` doit toujours renvoyer le même résultat à partir de la même paire d'arguments. Si la fonction renvoie des résultats incohérents, alors l’ordre dans lequel sont triés les éléments n’est pas défini. -<p>Une fonction de comparaison aura donc généralement la forme suivante :</p> +Une fonction de comparaison aura donc généralement la forme suivante : -<pre class="brush: js">function compare(a, b) { - if (<em>a est inférieur à b selon les critères de tri</em>) +```js +function compare(a, b) { + if (a est inférieur à b selon les critères de tri) return -1; - if (<em>a est supérieur à b selon les critères de tri</em>) + if (a est supérieur à b selon les critères de tri) 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> +Pour comparer des nombres plutôt que des chaînes, la fonction de comparaison peut simplement soustraire `b` à `a` (cela fonctionnera si le tableau ne contient pas {{jsxref("NaN")}} ou {{jsxref("Infinity")}}) : -<pre class="brush: js">function compareNombres(a, b) { +```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> +L'usage des {{jsxref("Opérateurs/L_opérateur_function", "expressions de fonctions","",11)}} s'avère très pratique avec la méthode `sort()` : -<pre class="brush: js">var nombres = [4, 2, 5, 1, 3]; +```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> +ECMAScript 2015 permet d'utiliser [les fonctions fléchées](/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es) et ainsi d'obtenir une syntaxe plus concise : -<pre class="brush: js">let nombres = [4, 2, 5, 1, 3]; -nombres.sort((a, b) => a - b); -console.log(nombres);</pre> +```js +let nombres = [4, 2, 5, 1, 3]; +nombres.sort((a, b) => a - b); +console.log(nombres); +``` -<p>Les objets peuvent être triés d'après les valeurs d'une de leurs propriétés.</p> +Les objets peuvent être triés d'après les valeurs d'une de leurs propriétés. -<pre class="brush: js">var items = [ +```js +var items = [ { name: "Edward", value: 21 }, { name: "Sharpe", value: 37 }, { name: "And", value: 45 }, @@ -98,28 +98,30 @@ console.log(nombres);</pre> ]; items.sort(function (a, b) { return a.value - b.value; -});</pre> +}); +``` -<h3 id="Différences_dimplémentation">Différences d'implémentation</h3> +### Différences d'implémentation -<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> +Certaines implémentations de JavaScript utilisent un tri stable : l'ordre partiel de `a` et `b` ne change pas si `a` et `b` sont égaux. Si l'indice de `a` était inférieur à celui de `b` avant le tri, il le sera toujours après, quels que soient les mouvements de `a` et `b` dus au tri. -<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> +Le tri est stable dans [SpiderMonkey](/fr/docs/SpiderMonkey) et tous les navigateurs basés sur Mozilla à partir de [Gecko](/fr/docs/Gecko) 1.9 (voir le {{ Bug(224128) }}). -<p>Le comportement de la méthode <code>sort()</code> a changé entre JavaScript 1.1 et JavaScript 1.2.</p> +Le comportement de la méthode `sort()` a changé entre JavaScript 1.1 et JavaScript 1.2. -<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> +En JavaScript 1.1, sur certaines plateformes, la méthode `sort` ne fonctionnait pas. Le tri fonctionne sur toutes les plateformes à partir de JavaScript 1.2. -<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> +En JavaScript 1.2, cette méthode ne convertit plus les éléments non définis (`undefined`) en `null` ; elle les place en fin de tableau. Par exemple, supposons que vous ayez ce script : -<pre class="brush: js">var a = []; +```js +var a = []; a[0] = "araignée"; a[5] = "zèbre"; function writeArray(x) { - for (i = 0; i < x.length; i++) { + for (i = 0; i < x.length; i++) { console.log(x[i]); - if (i < x.length-1) + if (i < x.length-1) console.log(", "); } } @@ -128,27 +130,26 @@ writeArray(a); a.sort(); console.log("\n"); writeArray(a); -</pre> +``` -<p>En JavaScript 1.1, cette fonction affichait :</p> +En JavaScript 1.1, cette fonction affichait : -<pre class="eval">araignée, null, null, null, null, zèbre -araignée, null, null, null, null, zèbre -</pre> + araignée, null, null, null, null, zèbre + araignée, null, null, null, null, zèbre -<p>En JavaScript 1.2, elle affichera :</p> +En JavaScript 1.2, elle affichera : -<pre class="eval">araignée, undefined, undefined, undefined, undefined, zèbre -araignée, zèbre, undefined, undefined, undefined, undefined -</pre> + araignée, undefined, undefined, undefined, undefined, zèbre + araignée, zèbre, undefined, undefined, undefined, undefined -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Création_affichage_et_tri_dun_tableau">Création, affichage et tri d'un tableau</h3> +### Création, affichage et tri d'un tableau -<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> +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. -<pre class="brush: js">var stringArray = ["Bosse", "Bleue", "Béluga"]; +```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]; @@ -171,42 +172,44 @@ console.log("Triées avec compareNombres : " + numericStringArray.sort(compareN 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> +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. -<pre class="eval">Chaînes : Bosse,Bleue,Béluga -Triées : Bleue,Bosse,Béluga + 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 + 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 + 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> + 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 -<h3 id="Trier_des_caractères_non-ASCII">Trier des caractères non-ASCII</h3> +### Trier des caractères non-ASCII -<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> +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. -<pre class="brush: js">var items = ["réservé", "premier", "cliché", "communiqué", "café" ,"adieu"]; +```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> +// items is [ 'adieu', 'café', 'cliché', 'communiqué', 'premier', 'réservé' ] +``` -<h3 id="Trier_avec_map">Trier avec map</h3> +### Trier avec map -<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> +La fonction de comparaison peut être amenée à être appelée plusieurs fois pour un même élément du tableau. Selon la fonction utilisée, cela peut entraîner des problèmes de performances. Plus le tableau est grand et plus la fonction de comparaison est complexe, plus il sera judicieux d'envisager des opérations de fonctions appliquées au tableau (_map_). L'idée est la suivante : on extrait les valeurs du tableau original, en appliquant des opérations dans un tableau temporaire, puis on trie ce tableau temporaire. Enfin, on recompose le tableau final avec les éléments du premier tableau et l'ordre obtenu. -<pre class="brush: js">// le tableau à trier +```js +// le tableau à trier var liste = ['Delta', 'alpha', 'CHARLIE', 'bravo']; // Création d'objet temporaire qui contient les positions @@ -217,10 +220,10 @@ var mapped = liste.map(function(e, i) { // on trie l'objet temporaire avec les valeurs réduites mapped.sort(function(a, b) { - if (a.value > b.value) { + if (a.value > b.value) { return 1; } - if (a.value < b.value) { + if (a.value < b.value) { return -1; } return 0; @@ -230,54 +233,25 @@ mapped.sort(function(a, b) { var result = mapped.map(function(e){ return liste[e.index]; }); -</pre> - -<div class="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> - -<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> +``` + +> **Note :** Une bibliothèque _open source_ utilise cette approche : [`mapsort`](https://null.house/open-source/mapsort). + +## Spécifications + +| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | +| {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. | +| {{SpecName('ES5.1', '#sec-15.4.4.11', 'Array.prototype.sort')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-array.prototype.sort', 'Array.prototype.sort')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-array.prototype.sort', 'Array.prototype.sort')}} | {{Spec2('ESDraft')}} | | + +## Compatibilité des navigateurs + +{{Compat("javascript.builtins.Array.sort")}} + +## Voir aussi + +- {{jsxref("Array.prototype.reverse()")}} +- {{jsxref("String.prototype.localeCompare()")}} +- [À propos de la stabilité du tri pour le moteur V8](https://v8.dev/blog/array-sort) diff --git a/files/fr/web/javascript/reference/global_objects/array/splice/index.md b/files/fr/web/javascript/reference/global_objects/array/splice/index.md index a4fc4f2ad5..8ce0f4aaf2 100644 --- a/files/fr/web/javascript/reference/global_objects/array/splice/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/splice/index.md @@ -10,44 +10,42 @@ tags: translation_of: Web/JavaScript/Reference/Global_Objects/Array/splice original_slug: Web/JavaScript/Reference/Objets_globaux/Array/splice --- -<div>{{JSRef}}</div> +{{JSRef}} -<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> +La méthode **`splice()`** modifie le contenu d'un tableau en retirant des éléments et/ou en ajoutant de nouveaux éléments [à même le tableau](https://en.wikipedia.org/wiki/In-place_algorithm).On peut ainsi vider ou remplacer une partie d'un tableau. -<div>{{EmbedInteractiveExample("pages/js/array-splice.html")}}</div> +{{EmbedInteractiveExample("pages/js/array-splice.html")}} -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><var>var tabElementsSupprimes = array</var>.splice(<var>début</var>, nbASupprimer[, <var>élem1</var>[, élem2[, ...]]]) -</pre> + var tabElementsSupprimes = array.splice(début, nbASupprimer[, élem1[, élem2[, ...]]]) -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<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>). 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>. 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> - <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. 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> - <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> +- `début` + - : L'indice à partir duquel commencer à changer le tableau (l'indice du premier élement étant `0`). Si sa valeur est supérieure à la longueur du tableau `array.length`, `début` est ramené à la longueur du tableau `array.length`. S'il est négatif, le changement commencera d'autant d'éléments à partir de la fin du tableau, c'est à dire à partir de l'index `array.length + début`. Si `array.length + début` est inférieur à `0`, le changement commencera à l'index `0`. +- `nbASupprimer` + - : Un entier indiquant le nombre d'anciens éléments à remplacer. + Si ce paramètre est absent ou si sa valeur est supérieure ou égale à `array.length - début`, alors les éléments entre `début` et la fin du tableau seront supprimés. Si `nbASupprimer` vaut 0, aucun élément ne sera supprimé. Dans ce cas, il est nécessaire de spécifier au moins un nouvel élément. +- `élemN` + - : Les éléments à ajouter au tableau à partir de `début`. Si vous ne spécifiez pas de nouvel élément, les anciens éléments seront simplement supprimés du tableau. -<h3 id="Valeur_de_retour">Valeur de retour</h3> +### Valeur de retour -<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> +Un tableau contenant les éléments supprimés. Si un seul élément est supprimé, un tableau contenant un unique élément est retourné. -<h2 id="Description">Description</h2> +## Description -<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> +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. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Utiliser_splice">Utiliser <code>splice</code></h3> +### Utiliser `splice` -<p>Le script suivant illustre l'utilisation de <code>splice</code> :</p> +Le script suivant illustre l'utilisation de `splice` : -<pre class="brush: js">var mesPoissons = ["scalaire", "clown", "mandarin", "chirurgien"]; +```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"); @@ -85,48 +83,23 @@ 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> - -<p>{{Compat("javascript.builtins.Array.splice")}}</p> - -<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> +``` + +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- | +| {{SpecName('ESDraft', '#sec-array.prototype.splice', 'Array.prototype.splice')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES6', '#sec-array.prototype.splice', 'Array.prototype.splice')}} | {{Spec2('ES6')}} | | +| {{SpecName('ES5.1', '#sec-15.4.4.12', 'Array.prototype.splice')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES3')}} | {{Spec2('ES3')}} | Définition initiale. Implémentée avec JavaScript 1.2. | + +## Compatibilité des navigateurs + +{{Compat("javascript.builtins.Array.splice")}} + +## Voir aussi + +- {{jsxref("Array.prototype.push", "push")}} / {{jsxref("Array.prototype.pop", "pop")}} pour ajouter/supprimer des éléments en fin de tableau +- {{jsxref("Array.prototype.unshift", "unshift")}} / {{jsxref("Array.prototype.shift", "shift")}} pour ajouter/supprimer des éléments en début de tableau +- {{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 diff --git a/files/fr/web/javascript/reference/global_objects/array/tolocalestring/index.md b/files/fr/web/javascript/reference/global_objects/array/tolocalestring/index.md index 8e790d06f6..22c82a4be5 100644 --- a/files/fr/web/javascript/reference/global_objects/array/tolocalestring/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/tolocalestring/index.md @@ -13,57 +13,54 @@ tags: translation_of: Web/JavaScript/Reference/Global_Objects/Array/toLocaleString original_slug: Web/JavaScript/Reference/Objets_globaux/Array/toLocaleString --- -<div>{{JSRef}}</div> +{{JSRef}} -<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> +La méthode **`toLocaleString()`** renvoie une chaîne de caractères qui représente les éléments du tableau. Les éléments sont convertis en chaînes de caractères grâce à leurs méthodes `toLocaleString` et chacune de ces chaînes est séparée des autres avec un séparateur propre à la locale courante (par exemple une virgule ou un point). -<div>{{EmbedInteractiveExample("pages/js/array-tolocalestring.html")}}</div> +{{EmbedInteractiveExample("pages/js/array-tolocalestring.html")}} -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<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> + arr.toLocaleString(); + arr.toLocaleString(locales); + arr.toLocaleString(locales, options); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<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> +- `locales` {{optional_inline}} + - : Une chaine de caractères avec un identifiant de langue BCP 47, ou un tableau de ce type de chaine de caractères. Pour le format général et l'interprétation de l'argument `locales`. Pour plus de détails quant à la forme et l'interprétation de l'argument `locales`, on consultera la page {{jsxref("Intl")}}. +- `options` {{optional_inline}} + - : Un objet qui contient des propriétés de configuration. Pour les nombres, consulter {{jsxref("Number.prototype.toLocaleString()")}}, pour les dates, consulter {{jsxref("Date.prototype.toLocaleString()")}}. -<h3 id="Valeur_de_retour">Valeur de retour</h3> +### Valeur de retour -<p>Une chaîne de caractères qui représente les éléments du tableau.</p> +Une chaîne de caractères qui représente les éléments du tableau. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Utiliser_les_arguments_locales_et_options">Utiliser les arguments <code>locales</code> et <code>options</code></h3> +### Utiliser les arguments `locales` et `options` -<p>Les éléments du tableau sont converties en chaînes de caractères via leurs méthodes <code>toLocaleString()</code>.</p> +Les éléments du tableau sont converties en chaînes de caractères via leurs méthodes `toLocaleString()`. -<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> +- `Object` : {{jsxref("Object.prototype.toLocaleString()")}} +- `Number` : {{jsxref("Number.prototype.toLocaleString()")}} +- `Date` : {{jsxref("Date.prototype.toLocaleString()")}} -<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> +Ici, on voit qu'on affiche le symbole de la devise de la locale pour chacun des éléments (nombres ou chaînes de caractères) du tableau `prix` : -<pre class="brush: js">var prix = ["¥7", 500, 8123, 12]; +```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> +Pour plus d'exemples, on peut se référer aux pages {{jsxref("Intl")}}, {{jsxref("NumberFormat")}} et {{jsxref("DateTimeFormat")}}. -<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2> +## Prothèse d'émulation (_polyfill_) -<pre class="brush: js">// https://tc39.github.io/ecma402/#sup-array.prototype.tolocalestring +```js +// https://tc39.github.io/ecma402/#sup-array.prototype.tolocalestring if (!Array.prototype.toLocaleString) { Object.defineProperty(Array.prototype, 'toLocaleString', { value: function(locales, options) { @@ -75,7 +72,7 @@ if (!Array.prototype.toLocaleString) { var a = Object(this); // 2. Let len be ? ToLength(? Get(A, "length")). - var len = a.length >>> 0; + var len = a.length >>> 0; // 3. Let separator be the String value for the // list-separator String appropriate for the @@ -108,8 +105,8 @@ if (!Array.prototype.toLocaleString) { // 8. Let k be 1. var k = 1; - // 9. Repeat, while k < len - while (k < len) { + // 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; @@ -144,42 +141,25 @@ if (!Array.prototype.toLocaleString) { } }); } -</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> - -<p>{{Compat("javascript.builtins.Array.toLocaleString")}}</p> - -<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> +``` + +S'il faut absolument prendre en charge les moteurs JavaScript qui ne supportent pas {{jsxref("Object.defineProperty()")}}, mieux vaut ne pas ajouter de prothèse pour les méthodes `Array.prototype` car elles ne peuvent pas être rendues non-énumérables. + +## Spécifications + +| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------------------------------------------------- | +| {{SpecName('ESDraft', '#sec-array.prototype.tolocalestring', 'Array.prototype.toLocaleString')}} | {{Spec2('ESDraft')}} | Définition initiale dans ECMAScript 3. | +| {{SpecName('ES Int Draft', '#sup-array.prototype.tolocalestring', 'Array.prototype.toLocaleString')}} | {{Spec2('ES Int Draft')}} | Cette définition remplace la définition fournit dans ECMA-262. | + +## Compatibilité des navigateurs + +{{Compat("javascript.builtins.Array.toLocaleString")}} + +## Voir aussi + +- {{jsxref("Array.prototype.toString()")}} +- {{jsxref("Intl")}} +- {{jsxref("Object.prototype.toLocaleString()")}} +- {{jsxref("Number.prototype.toLocaleString()")}} +- {{jsxref("Date.prototype.toLocaleString()")}} diff --git a/files/fr/web/javascript/reference/global_objects/array/tosource/index.md b/files/fr/web/javascript/reference/global_objects/array/tosource/index.md index d4c832779b..def1a9901d 100644 --- a/files/fr/web/javascript/reference/global_objects/array/tosource/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/tosource/index.md @@ -11,57 +11,55 @@ tags: translation_of: Web/JavaScript/Reference/Global_Objects/Array/toSource original_slug: Web/JavaScript/Reference/Objets_globaux/Array/toSource --- -<div>{{JSRef}}{{Non-standard_header}}</div> +{{JSRef}}{{Non-standard_header}} -<p>La méthode <strong><code>toSource()</code></strong> renvoie une chaine de caractères représentant le code source du tableau.</p> +La méthode **`toSource()`** renvoie une chaine de caractères représentant le code source du tableau. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><var>arr</var>.toSource()</pre> + arr.toSource() -<h3 id="Valeur_de_retour">Valeur de retour</h3> +### Valeur de retour -<p>Une chaîne de caractères qui représente le code source du tableau.</p> +Une chaîne de caractères qui représente le code source du tableau. -<h2 id="Description">Description</h2> +## Description -<p>La méthode <code>toSource()</code> renvoie les valeurs suivantes :</p> +La méthode `toSource()` renvoie les valeurs suivantes : -<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 : +- Pour l'objet {{jsxref("Array")}} natif, `toSource()` 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> + ```js + function Array() { + [native code] + } + ``` -<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> +- Pour les instances d'{{jsxref("Array")}}, `toSource()` renvoie une chaîne représentant le code source. -<h2 id="Exemples">Exemples</h2> +Cette méthode est habituellement appelée en interne par le moteur JavaScript et n'est pas utilisée explicitement dans du code. Il est cependant possible d'appeler `toSource()` lors du débogage pour examiner le contenu d'un tableau. -<h3 id="Examiner_le_code_source_d'un_tableau">Examiner le code source d'un tableau</h3> +## Exemples -<p>Pour examiner le code source d'un tableau :</p> +### Examiner le code source d'un tableau -<pre class="brush: js">var alpha = new Array("a", "b", "c"); +Pour examiner le code source d'un tableau : + +```js +var alpha = new Array("a", "b", "c"); alpha.toSource(); // renvoie ["a", "b", "c"] -</pre> +``` -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<p>Ne fait partie d'aucun standard. Implémenté dans JavaScript 1.3.</p> +Ne fait partie d'aucun standard. Implémenté dans JavaScript 1.3. -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("javascript.builtins.Array.toSource")}}</p> +{{Compat("javascript.builtins.Array.toSource")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{jsxref("Object.prototype.toSource()")}}</li> - <li>{{jsxref("Array.prototype.toString()")}}</li> -</ul> +- {{jsxref("Object.prototype.toSource()")}} +- {{jsxref("Array.prototype.toString()")}} diff --git a/files/fr/web/javascript/reference/global_objects/array/tostring/index.md b/files/fr/web/javascript/reference/global_objects/array/tostring/index.md index 2c9944f5dd..a14b6b7b8d 100644 --- a/files/fr/web/javascript/reference/global_objects/array/tostring/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/tostring/index.md @@ -10,69 +10,44 @@ tags: translation_of: Web/JavaScript/Reference/Global_Objects/Array/toString original_slug: Web/JavaScript/Reference/Objets_globaux/Array/toString --- -<div>{{JSRef}}</div> +{{JSRef}} -<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> +La méthode **`toString()`** renvoie une chaine de caractères représentant le tableau spécifié et ses éléments. -<div>{{EmbedInteractiveExample("pages/js/array-tostring.html")}}</div> +{{EmbedInteractiveExample("pages/js/array-tostring.html")}} -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><var>arr</var>.toString()</pre> + arr.toString() -<h3 id="Valeur_de_retour">Valeur de retour</h3> +### Valeur de retour -<p>Une chaîne de caractères qui représente les éléments du tableau.</p> +Une chaîne de caractères qui représente les éléments du tableau. -<h2 id="Description">Description</h2> +## Description -<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> +L'objet {{jsxref("Array")}} redéfinit la méthode `toString` d'{{jsxref("Object")}}. Pour les objets `Array`, la méthode `toString()` concatène les éléments du tableau et renvoie une chaîne contenant chacun des éléments, séparés par des virgules. -<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> +JavaScript appelle la méthode `toString()` automatiquement lorsqu'un tableau doit être représenté par une valeur texte ou lorsqu'on fait référence à un tableau dans une concaténation de chaines de caractères. -<h3 id="Sémantique_d'ECMAScript_5">Sémantique d'ECMAScript 5</h3> +### Sémantique d'ECMAScript 5 -<p>À partir de JavaScript 1.8.5 (Firefox 4), et en cohérence avec la 5e é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> +À partir de JavaScript 1.8.5 (Firefox 4), et en cohérence avec la 5e édition d'ECMAScript, la méthode `toString()` est générique et peut être utilisé avec n'importe quel objet. {{jsxref("Object.prototype.toString()")}} sera appelée, et la valeur résultante sera renvoyée. -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<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> +| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | +| {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.1. | +| {{SpecName('ES5.1', '#sec-15.4.4.2', 'Array.prototype.toString')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-array.prototype.tostring', 'Array.prototype.toString')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-array.prototype.tostring', 'Array.prototype.toString')}} | {{Spec2('ESDraft')}} | | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("javascript.builtins.Array.toString")}}</p> +{{Compat("javascript.builtins.Array.toString")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{jsxref("Object.prototype.toSource()")}}</li> - <li>{{jsxref("Array.prototype.join()")}}</li> -</ul> +- {{jsxref("Object.prototype.toSource()")}} +- {{jsxref("Array.prototype.join()")}} diff --git a/files/fr/web/javascript/reference/global_objects/array/unshift/index.md b/files/fr/web/javascript/reference/global_objects/array/unshift/index.md index 77ba3d8eeb..9dc04db950 100644 --- a/files/fr/web/javascript/reference/global_objects/array/unshift/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/unshift/index.md @@ -10,36 +10,35 @@ tags: translation_of: Web/JavaScript/Reference/Global_Objects/Array/unshift original_slug: Web/JavaScript/Reference/Objets_globaux/Array/unshift --- -<div>{{JSRef}}</div> +{{JSRef}} -<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> +La méthode **`unshift()`** ajoute un ou plusieurs éléments au début d'un tableau et renvoie la nouvelle longueur du tableau. -<div>{{EmbedInteractiveExample("pages/js/array-unshift.html")}}</div> +{{EmbedInteractiveExample("pages/js/array-unshift.html")}} -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><var>arr</var>.unshift([<var>élém1</var>[, ...[, <var>élémN</var>]]])</pre> + arr.unshift([élém1[, ...[, élémN]]]) -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<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> +- `élémN` + - : Les éléments que l'on souhaite ajouter en début de tableau. -<h3 id="Valeur_de_retour">Valeur de retour</h3> +### Valeur de retour -<p>La nouvelle valeur de la propriété {{jsxref("Array.length", "length")}} du tableau sur lequel a été appelée la méthode.</p> +La nouvelle valeur de la propriété {{jsxref("Array.length", "length")}} du tableau sur lequel a été appelée la méthode. -<h2 id="Description">Description</h2> +## Description -<p>La méthode <code>unshift()</code> insère les valeurs renseignées au début d'un objet ressemblant à un tableau.</p> +La méthode `unshift()` insère les valeurs renseignées au début d'un objet ressemblant à un tableau. -<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> +`unshift()` est volontairement générique ; cette méthode peut être {{jsxref("Function.call", "appelée","",1)}} ou {{jsxref("Function.apply", "appliquée","",1)}} sur des objets ressemblant à des tableaux. Les objets qui ne contiennent pas une propriété `length` reflètant la fin d'une série de propriétés indexées numériquement pourront ne pas avoir un comportement cohérent avec cette méthode. -<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> +Attention, lorsqu'on utilise `unshift()` avec plusieurs arguments, ceux-ci sont insérés au début du tableau dans l'ordre selon lequel ils sont passés en arguments. Aussi, on n'obtiendra pas le même résultat en appelant `unshift()` _n_ fois avec 1 arguments ou en appelant `unshift()` avec _n_ arguments. -<pre class="brush: js">let arr = [4, 5, 6]; +```js +let arr = [4, 5, 6]; arr.unshift(1, 2, 3); console.table(arr); @@ -52,11 +51,13 @@ arr2.unshift(2); arr2.unshift(3); console.table(arr2); -// [3, 2, 1, 4, 5, 6]</pre> +// [3, 2, 1, 4, 5, 6] +``` -<h2 id="Exemples">Exemples</h2> +## Exemples -<pre class="brush:js">var arr = [1, 2]; +```js +var arr = [1, 2]; arr.unshift(0); // renvoie 3, la nouvelle longueur du tableau // arr est [0, 1, 2] @@ -69,49 +70,24 @@ arr.unshift( [-3] ); // 6 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> - -<p>{{Compat("javascript.builtins.Array.unshift")}}</p> - -<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> +``` + +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- | +| {{SpecName('ES3')}} | {{Spec2('ES3')}} | Définition initiale. Implémentée avec JavaScript 1.2. | +| {{SpecName('ES5.1', '#sec-15.4.4.13', 'Array.prototype.unshift')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-array.prototype.unshift', 'Array.prototype.unshift')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-array.prototype.unshift', 'Array.prototype.unshift')}} | {{Spec2('ESDraft')}} | | + +## Compatibilité des navigateurs + +{{Compat("javascript.builtins.Array.unshift")}} + +## Voir aussi + +- {{jsxref("Array.prototype.push()")}} +- {{jsxref("Array.prototype.pop()")}} +- {{jsxref("Array.prototype.shift()")}} +- {{jsxref("Array.prototype.concat()")}} diff --git a/files/fr/web/javascript/reference/global_objects/array/values/index.md b/files/fr/web/javascript/reference/global_objects/array/values/index.md index 881e840bd4..d7f591029d 100644 --- a/files/fr/web/javascript/reference/global_objects/array/values/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/values/index.md @@ -12,13 +12,14 @@ tags: translation_of: Web/JavaScript/Reference/Global_Objects/Array/values original_slug: Web/JavaScript/Reference/Objets_globaux/Array/values --- -<div>{{JSRef}}</div> +{{JSRef}} -<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> +La méthode **`values()`** renvoie un nouvel objet **`Array Iterator`** qui contient les valeurs pour chaque indice du tableau. Cette méthode est l'implémentation par défaut de `Array.prototype[Symbol.Iterator]`. -<p>{{EmbedInteractiveExample("pages/js/array-values.html")}}</p> +{{EmbedInteractiveExample("pages/js/array-values.html")}} -<pre class="brush: js">var a = ['t', 'i', 't', 'o', 'u']; +```js +var a = ['t', 'i', 't', 'o', 'u']; var iterateur = a.values(); console.log(iterateur.next().value); // t @@ -26,72 +27,57 @@ 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> +## Syntaxe -<pre class="syntaxbox"><var>array</var>.values()</pre> + array.values() -<h3 id="Valeur_de_retour">Valeur de retour</h3> +### Valeur de retour -<p>Un nouvel objet itérateur sur {{jsxref("Array")}}.</p> +Un nouvel objet itérateur sur {{jsxref("Array")}}. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Itérer_avec_une_boucle_for...of">Itérer avec une boucle <code>for...of</code></h3> +### Itérer avec une boucle `for...of` -<pre class="brush: js">var arr = ['w', 'y', 'k', 'o', 'p']; +```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> +### Itérer avec `next()` -<pre class="brush: js">var arr = ['w', 'y', 'k', 'o', 'p']; +```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> - -<p>{{Compat("javascript.builtins.Array.values")}}</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> -</ul> +``` + +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- | +| {{SpecName('ES2015', '#sec-array.prototype.values', 'Array.prototype.values')}} | {{Spec2('ES2015')}} | Définition initiale. | +| {{SpecName('ESDraft', '#sec-array.prototype.values', 'Array.prototype.values')}} | {{Spec2('ESDraft')}} | | + +## Compatibilité des navigateurs + +{{Compat("javascript.builtins.Array.values")}} + +## Voir aussi + +- {{jsxref("Array.prototype.keys()")}} +- {{jsxref("Array.prototype.entries()")}} +- {{jsxref("Array.prototype.forEach()")}} +- {{jsxref("Array.prototype.every()")}} +- {{jsxref("Array.prototype.some()")}} |