diff options
| author | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2021-09-04 00:46:12 +0900 |
|---|---|---|
| committer | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2021-09-04 00:46:12 +0900 |
| commit | fe6f6abf2b7c497bf1f97f73a82dde7cf48eb79f (patch) | |
| tree | 51b7edfc370236684a203f4e69ae67bb7d24b549 /files/fr/web/javascript/reference/global_objects/array/from | |
| parent | 04ea4edc83cc12142ed151bbea2c65cffc8e76f6 (diff) | |
| parent | eeb07fe338cdc90092841d717919f46f9d9e3ff9 (diff) | |
| download | translated-content-fe6f6abf2b7c497bf1f97f73a82dde7cf48eb79f.tar.gz translated-content-fe6f6abf2b7c497bf1f97f73a82dde7cf48eb79f.tar.bz2 translated-content-fe6f6abf2b7c497bf1f97f73a82dde7cf48eb79f.zip | |
Merge branch 'main' into 20210818-Glossary/Type
Diffstat (limited to 'files/fr/web/javascript/reference/global_objects/array/from')
| -rw-r--r-- | files/fr/web/javascript/reference/global_objects/array/from/index.html | 135 | ||||
| -rw-r--r-- | files/fr/web/javascript/reference/global_objects/array/from/index.md | 112 |
2 files changed, 112 insertions, 135 deletions
diff --git a/files/fr/web/javascript/reference/global_objects/array/from/index.html b/files/fr/web/javascript/reference/global_objects/array/from/index.html deleted file mode 100644 index de22e8feea..0000000000 --- a/files/fr/web/javascript/reference/global_objects/array/from/index.html +++ /dev/null @@ -1,135 +0,0 @@ ---- -title: Array.from() -slug: Web/JavaScript/Reference/Global_Objects/Array/from -tags: - - Array - - ECMAScript 2015 - - JavaScript - - Méthode - - Reference - - polyfill -translation_of: Web/JavaScript/Reference/Global_Objects/Array/from -original_slug: Web/JavaScript/Reference/Objets_globaux/Array/from ---- -<div>{{JSRef}}</div> - -<p>La méthode <code><strong>Array.from()</strong></code> permet de créer une nouvelle instance d'<code>Array</code> (une copie superficielle) à partir d'un objet itérable ou semblable à un tableau.</p> - -<div>{{EmbedInteractiveExample("pages/js/array-from.html")}}</div> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="syntaxbox">Array.from(arrayLike [, fonctionMap[, thisArg]])</pre> - -<h3 id="Paramètres">Paramètres</h3> - -<dl> - <dt><code>arrayLike</code></dt> - <dd>Un objet semblable à un tableau ou bien un objet itérable dont on souhaite créer un tableau, instance d'<code>Array</code>.</dd> - <dt><code>fonctionMap</code> {{optional_inline}}</dt> - <dd>Argument optionnel, une fonction à appliquer à chacun des éléments du tableau.</dd> - <dt><code>thisArg</code> {{optional_inline}}</dt> - <dd>Argument optionnel. La valeur à utiliser pour <code>this</code> lors de l'exécution de la fonction <code>fonctionMap</code>.</dd> -</dl> - -<h3 id="Valeur_de_retour">Valeur de retour</h3> - -<p>Une nouvelle instance de {{jsxref("Array")}}.</p> - -<h2 id="Description">Description</h2> - -<p><code>Array.from()</code> permet de créer des instances d'<code>Array</code> à partir :</p> - -<ul> - <li>d'objets semblables à des tableaux (qui disposent d'une propriété <code>length</code> et d'éléments indexés) ou</li> - <li><a href="/fr/docs/Web/JavaScript/Guide/iterable">d'objets itérables</a> (des objets dont on peut avoir les éléments comme {{jsxref("Map")}} et {{jsxref("Set")}}).</li> -</ul> - -<p><code>Array.from()</code> possède un paramètre optionnel <code>fonctionMap</code>, qui permet d'exécuter une fonction {{jsxref("Array.prototype.map", "map")}} sur chacun des éléments du tableau (ou de l'instance de la classe fille) qui est créé. Autrement dit<code> Array.from(obj, mapFn, thisArg)</code> correspond exactement à <code>Array.from(obj).map(mapFn, thisArg)</code>, sauf qu'il n'y a pas de tableau intermédiaire de créé. Cet aspect est notamment important pour certaines classes filles, comme les <a href="/fr/docs/JavaScript/Tableaux_typ%C3%A9s">tableaux typés</a> (en effet, un tableau intermédiaire aurait eu ses valeurs tronquées pour qu'elles soient du type approprié).</p> - -<p>La propriété <code>length</code> de la méthode <code>from()</code> est 1.</p> - -<p>Avec ES6, la syntaxe de classe permet d'avoir des sous-classes pour les objets natifs comme pour les objets définis par l'utilisateur. Ainsi, les méthodes statiques de classe comme <code>Array.from()</code> sont héritées par les sous-classes d'<code>Array</code> et créent de nouvelles instances de la sous-classe d'<code>Array</code>.</p> - -<h2 id="Exemples">Exemples</h2> - -<pre class="brush: js">// créer une instance d'Array à partir de l'objet arguments qui est semblable à un tableau -function f() { - return Array.from(arguments); -} - -f(1, 2, 3); -// [1, 2, 3] - - -// Ça fonctionne avec tous les objets itérables... -// Set -const s = new Set(["toto", "truc", "truc", "bidule"]); -Array.from(s); -// ["toto", "truc", "bidule"] - - -// Map -const m = new Map([[1, 2], [2, 4], [4, 8]]); -Array.from(m); -// [[1, 2], [2, 4], [4, 8]] - -const mapper = new Map([["1", "a"], ["2", "b"]]); -Array.from(mapper.values()); -// ["a", "b"] - -Array.from(mapper.keys()); -// ["1", "2"] - -// String -Array.from("toto"); -// ["t", "o", "t", "o"] - - -// En utilisant une fonction fléchée pour remplacer map -// et manipuler des éléments -Array.from([1, 2, 3], x => x + x); -// [2, 4, 6] - - -// Pour générer une séquence de nombres -Array.from({length: 5}, (v, k) => k); -// [0, 1, 2, 3, 4] - -</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ES2015', '#sec-array.from', 'Array.from')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Définition initiale.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-array.from', 'Array.from')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("javascript.builtins.Array.from")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("Array")}}</li> - <li>{{jsxref("Array.prototype.map()")}}</li> - <li>{{jsxref("TypedArray.from()")}}</li> -</ul> diff --git a/files/fr/web/javascript/reference/global_objects/array/from/index.md b/files/fr/web/javascript/reference/global_objects/array/from/index.md new file mode 100644 index 0000000000..cf80abb37e --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/array/from/index.md @@ -0,0 +1,112 @@ +--- +title: Array.from() +slug: Web/JavaScript/Reference/Global_Objects/Array/from +tags: + - Array + - ECMAScript 2015 + - JavaScript + - Méthode + - Reference + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/from +original_slug: Web/JavaScript/Reference/Objets_globaux/Array/from +--- +{{JSRef}} + +La méthode **`Array.from()`** permet de créer une nouvelle instance d'`Array` (une copie superficielle) à partir d'un objet itérable ou semblable à un tableau. + +{{EmbedInteractiveExample("pages/js/array-from.html")}} + +## Syntaxe + + Array.from(arrayLike [, fonctionMap[, thisArg]]) + +### Paramètres + +- `arrayLike` + - : Un objet semblable à un tableau ou bien un objet itérable dont on souhaite créer un tableau, instance d'`Array`. +- `fonctionMap` {{optional_inline}} + - : Argument optionnel, une fonction à appliquer à chacun des éléments du tableau. +- `thisArg` {{optional_inline}} + - : Argument optionnel. La valeur à utiliser pour `this` lors de l'exécution de la fonction `fonctionMap`. + +### Valeur de retour + +Une nouvelle instance de {{jsxref("Array")}}. + +## Description + +`Array.from()` permet de créer des instances d'`Array` à partir : + +- 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")}}). + +`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é). + +La propriété `length` de la méthode `from()` est 1. + +Avec ES6, la syntaxe de classe permet d'avoir des sous-classes pour les objets natifs comme pour les objets définis par l'utilisateur. Ainsi, les méthodes statiques de classe comme `Array.from()` sont héritées par les sous-classes d'`Array` et créent de nouvelles instances de la sous-classe d'`Array`. + +## Exemples + +```js +// créer une instance d'Array à partir de l'objet arguments qui est semblable à un tableau +function f() { + return Array.from(arguments); +} + +f(1, 2, 3); +// [1, 2, 3] + + +// Ça fonctionne avec tous les objets itérables... +// Set +const s = new Set(["toto", "truc", "truc", "bidule"]); +Array.from(s); +// ["toto", "truc", "bidule"] + + +// Map +const m = new Map([[1, 2], [2, 4], [4, 8]]); +Array.from(m); +// [[1, 2], [2, 4], [4, 8]] + +const mapper = new Map([["1", "a"], ["2", "b"]]); +Array.from(mapper.values()); +// ["a", "b"] + +Array.from(mapper.keys()); +// ["1", "2"] + +// String +Array.from("toto"); +// ["t", "o", "t", "o"] + + +// En utilisant une fonction fléchée pour remplacer map +// et manipuler des éléments +Array.from([1, 2, 3], x => x + x); +// [2, 4, 6] + + +// Pour générer une séquence de nombres +Array.from({length: 5}, (v, k) => k); +// [0, 1, 2, 3, 4] +``` + +## 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()")}} |
