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/index.md | |
| 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/index.md')
| -rw-r--r-- | files/fr/web/javascript/reference/global_objects/array/index.md | 510 |
1 files changed, 262 insertions, 248 deletions
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) |
