diff options
Diffstat (limited to 'files/fr/web/javascript')
6 files changed, 492 insertions, 323 deletions
diff --git a/files/fr/web/javascript/guide/indexed_collections/index.md b/files/fr/web/javascript/guide/indexed_collections/index.md index 8e1f789563..d50654f3a9 100644 --- a/files/fr/web/javascript/guide/indexed_collections/index.md +++ b/files/fr/web/javascript/guide/indexed_collections/index.md @@ -8,75 +8,77 @@ tags: translation_of: Web/JavaScript/Guide/Indexed_collections original_slug: Web/JavaScript/Guide/Collections_indexées --- -{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Expressions_régulières", "Web/JavaScript/Guide/Collections_avec_clés")}} +{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Regular_Expressions", "Web/JavaScript/Guide/Keyed_Collections")}} -Ce chapitre présente les collections de données qui sont ordonnées par un indice. Cela inclue les tableaux et les objets semblables à des tableaux que sont les objets {{jsxref("Array")}} et les objets {{jsxref("TypedArray")}}. +Ce chapitre présente les collections de données qui sont ordonnées par un indice. Cela inclue les tableaux et les objets semblables à des tableaux que sont les objets [`Array`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array) et les objets [`TypedArray`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray). ## Le type `Array` -Un _tableau_ (_array_ en anglais) est un ensemble ordonné de valeurs auxquelles on peut faire référence avec un nom et un indice. Par exemple, si on a un tableau `emp` qui contient les noms d'employés indexés par leurs numéros d'employé, on pourrait utiliser `emp[1]` pour accéder à l'employé n°1, `emp[2]` pour accéder au deuxième et ainsi de suite. +Un *tableau* (<i lang="en">array</i> en anglais) est un ensemble ordonné de valeurs auxquelles on peut faire référence avec un nom et un indice. Par exemple, si on a un tableau `emp` qui contient les noms d'employés indexés par leurs numéros d'employé, on pourrait utiliser `emp[0]` pour accéder à l'employé 0, `emp[1]` pour accéder au suivant et ainsi de suite. JavaScript ne possède pas de type particulier pour représenter un tableau de données. En revanche, il est possible d'utiliser l'objet natif `Array` ainsi que ses méthodes pour manipuler des tableaux. L'objet `Array` possède plusieurs méthodes qui permettent de manipuler les tableaux pour les fusionner, les inverser, les trier, etc. Il possède une propriété de longueur ainsi que d'autres propriétés qui peuvent être utilisées avec les expressions rationnelles. ### Créer un tableau -Les instructions qui suivent sont équivalentes et permettent de créer le même tableau : +Les instructions qui suivent sont équivalentes et permettent de créer le même tableau : ```js -var arr = new Array(élément0, élément1, ..., élémentN); -var arr = Array(élément0, élément1, ..., élémentN); -var arr = [élément0, élément1, ..., élémentN]; +let arr = new Array(élément0, élément1, ..., élémentN); +let arr = Array(élément0, élément1, ..., élémentN); +let arr = [élément0, élément1, ..., élémentN]; ``` `élément0, élément1, ..., élémentN` est une liste de valeurs qui formeront les éléments du tableau. Lorsque ces valeurs sont définies, le tableau initialisera la valeur des éléments correspondants. La propriété `length` du tableau permet de connaître le nombre d'arguments du tableau. -Parmi les instructions précédentes, une utilise des crochets, on appelle ceci un « littéral de tableau » ou un « initialisateur de tableau ». Cette notation est plus courte que les autres et est souvent préférée pour sa lisibilité. Pour plus d'informations sur cette notation, voir la page sur [les littéraux de tableaux](/fr/docs/Web/JavaScript/Guide/Types_et_grammaire) pour plus détails. +Parmi les instructions précédentes, une utilise des crochets, on appelle ceci un « littéral de tableau » ou un « initialisateur de tableau ». Cette notation est plus courte que les autres et est souvent préférée pour sa lisibilité. Pour plus d'informations sur cette notation, voir la page sur [les littéraux de tableaux](/fr/docs/Web/JavaScript/Guide/Grammar_and_types) pour plus détails. -Afin de créer un tableau de longueur non nulle mais sans aucun élément initialisé, on peut utiliser l'une des deux instructions suivantes : +Afin de créer un tableau de longueur non nulle mais sans aucun élément initialisé, on peut utiliser l'une des deux instructions suivantes : ```js -var arr = new Array(longueurTableau); -var arr = Array(longueurTableau); +let arr = new Array(longueurTableau); -// Cela aura le même effet que : -var arr = []; +// sera équivalent à : +let arr = Array(longueurTableau); + +// et aura le même effet que : +let arr = []; arr.length = longueurTableau; ``` -> **Note :** Dans le code ci-dessus `longueurTableau` doit être un nombre. Si ce n'est pas le cas, un tableau d'un seul élément (ayant la valeur fournie) sera créé. `arr.length` renverra `longueurTableau`, mais le tableau ne contiendra que des éléments « vides » non définis. Si on utilise une boucle {{jsxref("Instructions/for...in")}} sur ce tableau, on ne trouvera aucun élément. +> **Note :** Dans le code ci-dessus `longueurTableau` doit être un nombre. Si ce n'est pas le cas, un tableau d'un seul élément (ayant la valeur fournie) sera créé. `arr.length` renverra `longueurTableau`, mais le tableau ne contiendra que des éléments « vides » non définis. Si on utilise une boucle [`for…in`](/fr/docs/Web/JavaScript/Reference/Statements/for...in) sur ce tableau, on ne trouvera aucun élément. -On a vu comment créer un tableau, il est aussi possible d'affecter des tableaux à des propriétés d'objets (que ce soit lors de leur création ou pour les modifier) : +On a vu comment créer un tableau, il est aussi possible d'affecter des tableaux à des propriétés d'objets (que ce soit lors de leur création ou pour les modifier) : ```js -var obj = {}; +let obj = {}; // ... obj.prop = [élément0, élément1, ..., élémentN]; // OU -var obj = {prop: [élément0, élément1, ...., élémentN]} +let obj = {prop: [élément0, élément1, ...., élémentN]} ``` Si on souhaite initialiser un tableau avec un seul élément et que cet élément est un nombre, il est nécessaire d'utiliser la notation littérale. En effet, si un nombre est passé à la fonction `Array()` pour construire le tableau, celui-ci sera interprété comme une longueur et non comme la valeur d'un élément. ```js -var arr1 = [42]; // Le tableau créé contient bien un élément qui vaut 42 -var arr2 = Array(42); // Crée un tableau sans élément +let arr1 = [42]; // Le tableau créé contient bien un élément qui vaut 42 +let arr2 = Array(42); // Crée un tableau sans élément // mais dont arr.length vaut 42 // Le code ci-dessus est équivalent à -var arr = []; -arr.length = 42 ; +let arr = []; +arr.length = 42; ``` -Si N est un nombre décimal dont la partie fractionnaire n'est pas nulle, tout appel à `Array(N)` renverra une exception `RangeError`. Par exemple : +Si N est un nombre décimal dont la partie fractionnaire n'est pas nulle, tout appel à `Array(N)` renverra une exception `RangeError`. Par exemple : ```js -var arr = Array(9.3); // RangeError: Invalid array length +let arr = Array(9.3); // RangeError: Invalid array length ``` Si on souhaite créer un tableau d'un seul élément et ce quel que soit le type de données, il sera préférable d'utiliser les littéraux de tableaux. Sinon, on peut créer un tableau vide puis lui ajouter un seul élément. -Avec ES2015 (anciennement ECMAScript 6), on peut utiliser la méthode {{jsxref("Array.of")}} afin de créer un tableau composé d'un seul élément : +Avec ES2015 (anciennement ECMAScript 6), on peut utiliser la méthode [`Array.of`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/of) afin de créer un tableau composé d'un seul élément : ```js let monTableau = Array.of("Joconde"); // monTableau contient uniquement "Joconde" @@ -84,63 +86,63 @@ let monTableau = Array.of("Joconde"); // monTableau contient uniquement "Joconde ### Remplir un tableau -Il est possible de remplir un tableau en affectant des valeurs à ses éléments. Par exemple : +Il est possible de remplir un tableau en affectant des valeurs à ses éléments. Par exemple : ```js -var emp = []; +let emp = []; emp[0] = "Casey Jones"; emp[1] = "Phil Lesh"; emp[2] = "August West"; ``` -> **Note :** Si on utilise une valeur non entière pour désigner un élément du tableau, cela créera une propriété sur l'objet plutôt qu'un élément du tableau : +> **Note :** Si on utilise une valeur non entière pour désigner un élément du tableau, cela créera une propriété sur l'objet plutôt qu'un élément du tableau : > > ```js -> var arr = []; +> let arr = []; > arr[3.4] = "Oranges"; > console.log(arr.length); // 0 > console.log(arr.hasOwnProperty(3.4)); // true > ``` -Il est aussi possible de remplir un tableau directement lors de sa création : +Il est aussi possible de remplir un tableau directement lors de sa création : ```js -var monTableau = new Array("Coucou", maVar, 3.14159); -var monTableau = ["Mangue", "Pomme", "Orange"] +let monTableau = new Array("Coucou", maVar, 3.14159); +let monTableau = ["Mangue", "Pomme", "Orange"] ``` ### Faire référence aux éléments d'un tableau -Il est possible de faire référence aux éléments d'un tableau en utilisant un nombre ordinal lié à l'élément. Ainsi, si on définit le tableau suivant : +Il est possible de faire référence aux éléments d'un tableau en utilisant un nombre ordinal lié à l'élément. Ainsi, si on définit le tableau suivant : ```js -var monTableau = ["Air", "Eau", "Feu"]; +let monTableau = ["Air", "Eau", "Feu"]; ``` On pourra accéder au premier élément du tableau en utilisant `monTableau[0]`, on accèdera au deuxième élément avec `monTableau[1]`. Les indices des éléments sont comptés à partir de 0. -> **Note :** Les crochets peuvent également être utilisés pour faire référence aux propriétés du tableau (les tableaux sont des objets JavaScript à part entière). On pourra donc avoir : +> **Note :** Les crochets peuvent également être utilisés pour faire référence aux propriétés du tableau (les tableaux sont des objets JavaScript à part entière). On pourra donc avoir : > > ```js -> var arr = ["un", "deux", "trois"]; +> let arr = ["un", "deux", "trois"]; > arr[2]; // "trois" - on accède à un élément du tableau > arr["length"]; // 3 - on accède à une propriété du tableau > ``` ### Comprendre la propriété `length` -En termes d'implémentation, les tableaux JavaScript stockent leurs éléments comme des propriétés normales, l'indice étant utilisé comme nom pour désigner la valeur de la propriété. La propriété `length` est elle un peu spéciale : elle renvoie toujours la valeur du plus grand indice du tableau plus 1. Dans l'exemple suivant, "Biduche" est placé à l'indice 30, `chats.length` renvoie donc 30 + 1). On rappelle que les indices des tableaux JavaScript commencent à partir de 0 et pas à partir de 1. Cela signifie que la valeur de la propriété `length` sera plus grande, de 1, par rapport à l'indice le plus élevé : +En termes d'implémentation, les tableaux JavaScript stockent leurs éléments comme des propriétés normales, l'indice étant utilisé comme nom pour désigner la valeur de la propriété. La propriété `length` est elle un peu spéciale : elle renvoie toujours la valeur du plus grand indice du tableau plus 1. Dans l'exemple suivant, "Biduche" est placé à l'indice 30, `chats.length` renvoie donc 30 + 1). On rappelle que les indices des tableaux JavaScript commencent à partir de 0 et pas à partir de 1. Cela signifie que la valeur de la propriété `length` sera plus grande, de 1, par rapport à l'indice le plus élevé : ```js -var chats = []; +let chats = []; chats[30] = ['Biduche']; console.log(chats.length); // 31 ``` -Il est aussi possible d'affecter une valeur à la propriété `length`. Si la valeur fournie est inférieure au nombre d'éléments stockés, cela tronquera la tableau. Si la valeur est 0, cela videra le tableau : +Il est aussi possible d'affecter une valeur à la propriété `length`. Si la valeur fournie est inférieure au nombre d'éléments stockés, cela tronquera le tableau. Si la valeur est 0, cela videra le tableau : ```js -var chats = ['Marie', 'Toulouse', 'Berlioz']; +let chats = ['Marie', 'Toulouse', 'Berlioz']; console.log(chats.length); // 3 chats.length = 2; @@ -155,48 +157,48 @@ console.log(chats); // [ <3 empty slots> ] ### Parcourir un tableau -Un tableau est une structure de données qui se prête particulièrement aux boucles, on pourra utiliser ces dernières pour parcourir les éléments du tableau de façon itérative. Voici un exemple de parcours simple : +Un tableau est une structure de données qui se prête particulièrement aux boucles, on pourra utiliser ces dernières pour parcourir les éléments du tableau de façon itérative. Voici un exemple de parcours simple : ```js -var couleurs = ['rouge', 'vert', 'bleu']; -for (var i = 0; i < couleurs.length; i++) { +let couleurs = ['rouge', 'vert', 'bleu']; +for (let i = 0; i < couleurs.length; i++) { console.log(couleurs[i]); } ``` -Si on sait qu'aucun des éléments ne vaut `false` dans un contexte booléen (par exemple, si le tableau contient des nœuds du [DOM](/fr/docs/Web/API/Référence_du_DOM_Gecko)), on peut utiliser une formulation encore plus concise : +Si on sait qu'aucun des éléments ne vaut `false` dans un contexte booléen (par exemple, si le tableau contient des nœuds du [DOM](/fr/docs/Web/API/Document_Object_Model)), on peut utiliser une formulation encore plus concise : ```js -var divs = document.getElementsByTagName('div'); -for (var i = 0, div; div = divs[i]; i++) { +let divs = document.getElementsByTagName('div'); +for (let i = 0, div; div = divs[i]; i++) { /* On effectue un traitement sur les div */ } ``` Cette syntaxe permet d'éviter d'avoir à vérifier la longueur du tableau et de gérer l'affectation de la variable `div` pour chaque élément du tableau. -La méthode {{jsxref("Array.forEach", "forEach()")}} fournit une autre méthode pour parcourir un tableau : +La méthode [`forEach()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach) fournit une autre méthode pour parcourir un tableau : ```js -var couleurs = ['rouge', 'vert', 'bleu']; +let couleurs = ['rouge', 'vert', 'bleu']; couleurs.forEach(function(couleur) { console.log(couleur); }); ``` -Avec les fonctions fléchées (apparues avec ES6 / ECMAScript 2015), on peut obtenir un code plus concis : +Avec les fonctions fléchées (apparues avec ES6 / ECMAScript 2015), on peut obtenir un code plus concis : ```js -var couleurs = ['rouge', 'vert', 'bleu']; +let couleurs = ['rouge', 'vert', 'bleu']; couleurs.forEach(couleur => console.log(couleur)); ``` La fonction passée comme argument à `forEach()` est exécutée une fois pour chacun des éléments du tableau (l'élément du tableau sera passé comme argument de cette fonction). Les éléments qui n'ont pas de valeur affectée ne sont pas parcourus lors d'une boucle `forEach`. -On notera que les éléments ne sont pas parcourus lorsqu'ils n'ont pas eu de valeur d'affectée. Cependant, si on a affecté la valeur {{jsxref("undefined")}} de façon explicite à un élément, il sera pris en compte lors de la boucle : +On notera que les éléments ne sont pas parcourus lorsqu'ils n'ont pas eu de valeur affectée. Cependant, si on a affecté la valeur [`undefined`](/fr/docs/Web/JavaScript/Reference/Global_Objects/undefined) de façon explicite à un élément, il sera pris en compte lors de la boucle : ```js -var tableau = ['premier', 'deuxième', , 'quatrième']; +let tableau = ['premier', 'deuxième', , 'quatrième']; // affiche ['premier', 'deuxième', 'quatrième']; tableau.forEach(function(élément) { @@ -205,7 +207,7 @@ tableau.forEach(function(élément) { if(tableau[2] === undefined) { console.log('tableau[2] vaut undefined'); } // true -var tableau = ['premier', 'deuxième', undefined, 'quatrième']; +let tableau = ['premier', 'deuxième', undefined, 'quatrième']; // renvoie ['premier', 'deuxième', undefined, 'quatrième']; tableau.forEach(function(élément) { @@ -213,96 +215,96 @@ tableau.forEach(function(élément) { }) ``` -Étant donné que les éléments des tableaux sont stockés comme des propriétés classiques, il n'est pas conseillé d'utiliser des boucles {{jsxref("Instructions/for...in")}} pour parcourir les tableaux car cela listerait également les propriétés énumérables (en plus des éléments). +Étant donné que les éléments des tableaux sont stockés comme des propriétés classiques, il n'est pas conseillé d'utiliser des boucles [`for…in`](/fr/docs/Web/JavaScript/Reference/Statements/for...in) pour parcourir les tableaux car cela listerait également les propriétés énumérables (en plus des éléments). ### Méthodes des tableaux -L'objet `Array` possède les méthodes suivantes : +L'objet `Array` possède les méthodes suivantes : -- {{jsxref("Array.concat", "concat()")}} permet de fusionner deux ou plusieurs tableaux et de renvoyer le résultat dans un nouveau tableau : +- [`concat()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/concat) permet de fusionner deux ou plusieurs tableaux et de renvoyer le résultat dans un nouveau tableau : ```js - var monTableau = new Array("1", "2", "3"); + let monTableau = new Array("1", "2", "3"); monTableau = monTableau.concat("a", "b", "c"); // monTableau is now ["1", "2", "3", "a", "b", "c"] ``` -- {{jsxref("Array.join", "join(délimiteur = ',')")}} permet de fusionner les éléments du tableau en une chaîne de caractères : +- [`join(délimiteur = ',')`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/join) permet de fusionner les éléments du tableau en une chaîne de caractères : ```js - var monTableau = new Array("Air", "Eau", "Feu"); - var list = monTableau.join(" - "); // list sera "Air - Eau - Feu" + let monTableau = new Array("Air", "Eau", "Feu"); + let list = monTableau.join(" - "); // list sera "Air - Eau - Feu" ``` -- {{jsxref("Array.push", "push()")}} permet d'ajouter un ou plusieurs éléments à la fin d'un tableau et renvoie la longueur du tableau : +- [`push()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/push) permet d'ajouter un ou plusieurs éléments à la fin d'un tableau et renvoie la longueur du tableau : ```js - var monTableau = new Array("1", "2"); + let monTableau = new Array("1", "2"); monTableau.push("3"); // monTableau vaut désormais ["1", "2", "3"] ``` -- {{jsxref("Array.pop", "pop()")}} permet de retirer le dernier élément (le plus à droite) du tableau et renvoie cet élément : +- [`pop()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/pop) permet de retirer le dernier élément (le plus à droite) du tableau et renvoie cet élément : ```js - var monTableau = new Array("1", "2", "3"); - var dernier = monTableau.pop(); // monTableau vaut désormais ["1", "2"], dernier = "3" + let monTableau = new Array("1", "2", "3"); + let dernier = monTableau.pop(); // monTableau vaut désormais ["1", "2"], dernier = "3" ``` -- {{jsxref("Array.shift", "shift()")}} retire le premier élément d'un tableau (le plus à gauche) et renvoie cet élément : +- [`shift()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/shift) retire le premier élément d'un tableau (le plus à gauche) et renvoie cet élément : ```js - var monTableau = new Array("1", "2", "3"); - var premier = monTableau.shift(); // monTableau vaut désormais ["2", "3"], premier vaut "1" + let monTableau = new Array("1", "2", "3"); + let premier = monTableau.shift(); // monTableau vaut désormais ["2", "3"], premier vaut "1" ``` -- {{jsxref("Array.unshift", "unshift()")}} ajoute un ou plusieurs éléments au début du tableau et renvoie la longueur du tableau ainsi modifié : +- [`unshift()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift) ajoute un ou plusieurs éléments au début du tableau et renvoie la longueur du tableau ainsi modifié : ```js - var monTableau = new Array("1", "2", "3"); + let monTableau = new Array("1", "2", "3"); monTableau.unshift("4", "5"); // monTableau devient ["4", "5", "1", "2", "3"] ``` -- {{jsxref("Array.slice", "slice(indice_début, indice_fin)")}} extrait une portion d'un tableau et renvoie un nouveau tableau avec ce fragment : +- [`slice(indice_début, indice_fin)`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/slice) extrait une portion d'un tableau et renvoie un nouveau tableau avec ce fragment : ```js - var monTableau = new Array ("a", "b", "c", "d", "e"); + let monTableau = new Array ("a", "b", "c", "d", "e"); monTableau = monTableau.slice(1, 4); // extrait les éléments entre l'indice 1 et jusqu'à // celui d'indice 3 (4-1), elle renvoie // [ "b", "c", "d"] ``` -- {{jsxref("Array.splice", "splice(indice, nbASupprimer, ajouterElement1, ajouterElement2, ...)")}} retire des éléments du tableau et (éventuellement) les remplace : +- [`splice(indice, nbASupprimer, ajouterElement1, ajouterElement2, ...)`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/splice) retire des éléments du tableau et (éventuellement) les remplace : ```js - var monTableau = new Array ("1", "2", "3", "4", "5"); + let monTableau = new Array ("1", "2", "3", "4", "5"); monTableau.splice(1, 3, "a", "b", "c", "d"); // monTableau vaut désormais ["1", "a", "b", "c", "d", "5"] // Le code remplace à partir de l'indice 1 (où il y avait la valeur "2"), supprime trois éléments puis // insère les arguments fournis à la suite. ``` -- {{jsxref("Array.reverse", "reverse()")}} transpose les éléments du tableau à même ce tableau : le premier élément devient le dernier, le dernier devient le premier et ainsi de suite : +- [`reverse()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse) transpose les éléments du tableau à même ce tableau : le premier élément devient le dernier, le dernier devient le premier et ainsi de suite : ```js - var monTableau = new Array ("1", "2", "3"); + let monTableau = new Array ("1", "2", "3"); monTableau.reverse(); // monTableau vaut maintenant [ "3", "2", "1" ] ``` -- {{jsxref("Array.sort", "sort()")}} trie les éléments d'un tableau à même ce tableau : +- [`sort()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) trie les éléments d'un tableau à même ce tableau : ```js - var monTableau = new Array("Air", "Feu", "Eau"); + let monTableau = new Array("Air", "Feu", "Eau"); monTableau.sort(); // trie le tableau [ "Air", "Eau", "Feu" ] ``` - `sort()` peut également utiliser une fonction de rappel (_callback_) qui détermine comment les éléments sont comparés. La fonction compare deux arguments et renvoie une valeur selon les règles suivantes : + `sort()` peut également utiliser une fonction de rappel (<i lang="en">callback</i>) qui détermine comment les éléments sont comparés. La fonction compare deux arguments et renvoie une valeur selon les règles suivantes : - Si `a` est inférieur à `b` selon l'ordre, renvoie -1 (ou un autre nombre négatif) - Si `a` est supérieur à `b` selon l'ordre, renvoie 1 (ou un autre nombre positif) - Si `a` et `b` sont considérés égaux, renvoie 0. - Par exemple, on peut utilise la fonction suivante pour trier par rapport à la dernière lettre du mot : + Par exemple, on peut utilise la fonction suivante pour trier par rapport à la dernière lettre du mot : ```js - var sortFn = function(a, b){ + let sortFn = function(a, b){ if (a[a.length - 1] < b[b.length - 1]) return -1; if (a[a.length - 1] > b[b.length - 1]) return 1; if (a[a.length - 1] == b[b.length - 1]) return 0; @@ -310,101 +312,101 @@ L'objet `Array` possède les méthodes suivantes : monTableau.sort(sortFn); // le tableau devient = ["Air","Feu","Eau"] ``` -Du code permettant d'émuler ces fonctions est disponible sur chacune des pages (_polyfill_). Le support natif de ces fonctionnalités dans les différents navigateurs peut être trouvé [ici](http://www.robertnyman.com/javascript/)[.](http://www.robertnyman.com/javascript/) + Du code permettant d'émuler ces fonctions est disponible sur chacune des pages (_polyfill_). Le support natif de ces fonctionnalités dans les différents navigateurs peut être trouvé [ici](http://www.robertnyman.com/javascript/). -- {{jsxref("Array.indexOf", "indexOf(élémentRecherché[, indiceDépart])")}} recherche la valeur `élémentRecherché` dans le tableau et renvoie l'indice du premier élément qui correspond : +- [`indexOf(élémentRecherché[, indiceDépart])`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf) recherche la valeur `élémentRecherché` dans le tableau et renvoie l'indice du premier élément qui correspond : ```js - var a = ['a', 'b', 'a', 'b', 'a']; + let a = ['a', 'b', 'a', 'b', 'a']; console.log(a.indexOf('b')); // Affiche 1 // On recherche après la première correspondance : console.log(a.indexOf('b', 2)); // Affiche 3 console.log(a.indexOf('z')); // Affiche -1 car 'z' n'a pas été trouvé ``` -- {{jsxref("Array.lastIndexOf", "lastIndexOf(élémentRecherché[, fromIndex])")}} fonctionne comme `indexOf`, mais recherche à partir de la fin du tableau : +- [`lastIndexOf(élémentRecherché[, fromIndex])`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf) fonctionne comme `indexOf`, mais recherche à partir de la fin du tableau : ```js - var a = ['a', 'b', 'c', 'd', 'a', 'b']; + let a = ['a', 'b', 'c', 'd', 'a', 'b']; console.log(a.lastIndexOf('b')); // Affiche 5 // On continue la recherche après la première correspondance en fin de tableau console.log(a.lastIndexOf('b', 4)); // Affiche 1 console.log(a.lastIndexOf('z')); // Affiche -1 ``` -- {{jsxref("Array.forEach", "forEach(callback[, objetThis])")}} exécute la fonction `callback` sur chaque élément du tableau. +- [`forEach(callback[, objetThis])`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach) exécute la fonction `callback` sur chaque élément du tableau. ```js - var a = ['a', 'b', 'c']; + let a = ['a', 'b', 'c']; a.forEach(console.log); // Affichera la valeur de chaque élément dans la console ``` -- {{jsxref("Array.map", "map(callback[, objetThis])")}} renvoie un nouveau tableau dont les éléments sont les images des éléments du tableau courant par la fonction `callback` : +- [`map(callback[, objetThis])`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/map) renvoie un nouveau tableau dont les éléments sont les images des éléments du tableau courant par la fonction `callback` : ```js - var a1 = ['a', 'b', 'c']; - var a2 = a1.map(function(item) { return item.toUpperCase(); }); + let a1 = ['a', 'b', 'c']; + let a2 = a1.map(function(item) { return item.toUpperCase(); }); console.log(a2); // affichera A,B,C dans la console ``` -- {{jsxref("Array.filter", "filter(callback[, objetThis])")}} renvoie un nouveau tableau qui contient les éléments du tableau courant pour lesquels `callback` a renvoyé `true`. +- [`filter(callback[, objetThis])`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) renvoie un nouveau tableau qui contient les éléments du tableau courant pour lesquels `callback` a renvoyé `true`. ```js - var a1 = ['a', 10, 'b', 20, 'c', 30]; - var a2 = a1.filter(function(item) { return typeof item == 'number'; }); + let a1 = ['a', 10, 'b', 20, 'c', 30]; + let a2 = a1.filter(function(item) { return typeof item == 'number'; }); console.log(a2); // Affichera 10,20,30 dans la console ``` -- {{jsxref("Array.every", "every(callback[, objetThis])")}} renvoie `true` si `callback` renvoie `true` pour chaque élément du tableau. +- [`every(callback[, objetThis])`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/every) renvoie `true` si `callback` renvoie `true` pour chaque élément du tableau. ```js function isNumber(value){ return typeof value === 'number'; } - var a1 = [1, 2, 3]; + let a1 = [1, 2, 3]; console.log(a1.every(isNumber)); // affiche true - var a2 = [1, '2', 3]; + let a2 = [1, '2', 3]; console.log(a2.every(isNumber)); // affiche false ``` -- {{jsxref("Array.some", "some(callback[, objetThis])")}} renvoie `true` si `callback` renvoie `true` pour au moins un élément du tableau. +- [`some(callback[, objetThis])`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/some) renvoie `true` si `callback` renvoie `true` pour au moins un élément du tableau. ```js function isNumber(value){ return typeof value === 'number'; } - var a1 = [1, 2, 3]; + let a1 = [1, 2, 3]; console.log(a1.some(isNumber)); // Affiche true - var a2 = [1, '2', 3]; + let a2 = [1, '2', 3]; console.log(a2.some(isNumber)); // Affiche true - var a3 = ['1', '2', '3']; + let a3 = ['1', '2', '3']; console.log(a3.some(isNumber)); // Affiche false ``` -Les méthodes présentées ci-avant qui prennent une fonction de rappel (_callback_) en argument sont appelées méthodes itératives car elles parcourent le tableau de façon itérative. Chacune de ces méthodes peut prendre en compte un deuxième argument (optionnel) qui sera l'objet `this` pris en compte par le _callback_. Si ce deuxième argument n'est pas fourni, `this` vaudra la valeur de l'objet global. + Les méthodes présentées ci-avant qui prennent une fonction de rappel (<i lang="en">callback</i>) en argument sont appelées méthodes itératives, car elles parcourent le tableau de façon itérative. Chacune de ces méthodes peut prendre en compte un deuxième argument (optionnel) qui sera l'objet `this` pris en compte par le <i lang="en">callback</i>. Si ce deuxième argument n'est pas fourni, `this` vaudra la valeur de l'objet global. -La fonction de rappel est appelée avec trois arguments : le premier étant la valeur de l'élément courant, le deuxième est l'indice de cet élément et le troisième représente le tableau lui-même. Les fonctions JavaScript ignorent les arguments supplémentaires qui ne sont pas déclarés explicitement dans la liste des paramètres, on peut donc utiliser une fonction prenant un seul argument comme fonction de rappel. + La fonction de rappel est appelée avec trois arguments : le premier étant la valeur de l'élément courant, le deuxième est l'indice de cet élément et le troisième représente le tableau lui-même. Les fonctions JavaScript ignorent les arguments supplémentaires qui ne sont pas déclarés explicitement dans la liste des paramètres, on peut donc utiliser une fonction prenant un seul argument comme fonction de rappel. -- {{jsxref("Array.reduce", "reduce(callback[, valeurInitiale])")}} applique `callback(premièreValeur, secondeValeur)` au fur et à mesure sur le tableau pour le réduire en une seule valeur, c'est cette valeur qui est renvoyée par la fonction : +- [`reduce(callback[, valeurInitiale])`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce) applique `callback(premièreValeur, secondeValeur)` au fur et à mesure sur le tableau pour le réduire en une seule valeur, c'est cette valeur qui est renvoyée par la fonction : ```js - var a = [10, 20, 30]; - var total = a.reduce(function(premier, deuxième) { return premier + deuxième; }, 0); + let a = [10, 20, 30]; + let total = a.reduce(function(premier, deuxième) { return premier + deuxième; }, 0); console.log(total) // Affiche 60 ``` -- {{jsxref("Array.reduceRight", "reduceRight(callback[, valeurInitiale])")}} fonctionne comme `reduce()`, mais débute avec le dernier élément (parcourt le tableau de droite à gauche). +- [`reduceRight(callback[, valeurInitiale])`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/ReduceRight) fonctionne comme `reduce()`, mais débute avec le dernier élément (parcourt le tableau de droite à gauche). -`reduce()` et `reduceRight()` sont à utiliser lorsqu'on souhaite n'obtenir qu'une seule valeur, récursivement, à partir des différents éléments du tableau. Pour plus d'informations sur l'utilisation d'une valeur d'initialisation pour ces deux fonctions, se référer à leurs pages : {{jsxref("Array.reduceRight")}} et {{jsxref("Array.reduce")}} + `reduce()` et `reduceRight()` sont à utiliser lorsqu'on souhaite n'obtenir qu'une seule valeur, récursivement, à partir des différents éléments du tableau. Pour plus d'informations sur l'utilisation d'une valeur d'initialisation pour ces deux fonctions, se référer à leurs pages : [`Array.reduceRight`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/ReduceRight) et [`Array.reduce`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce) ### Tableaux multi-dimensionnels Les tableaux peuvent être imbriqués les uns dans les autres. Cela signifie qu'un tableau peut avoir un élément dont la valeur est un tableau. En utilisant ce comportement, on peut donc créer des matrices, voire des tableaux à plusieurs dimensions. -Par exemple, avec le code suivant : +Par exemple, avec le code suivant : ```js -var a = new Array(4); +let a = new Array(4); for (i = 0; i < 4; i++) { a[i] = new Array(4); for (j = 0; j < 4; j++) { @@ -413,7 +415,7 @@ for (i = 0; i < 4; i++) { } ``` -On pourra avoir le tableau suivant sur deux dimensions : +On pourra avoir le tableau suivant sur deux dimensions : ```js Ligne 0 : [0,0] [0,1] [0,2] [0,3] @@ -422,25 +424,44 @@ Ligne 2 : [2,0] [2,1] [2,2] [2,3] Ligne 3 : [3,0] [3,1] [3,2] [3,3] ``` +### Utiliser les tableaux pour stocker d'autres propriétés + +Il est aussi possible d'utiliser les tableaux comme des objets afin de stocker d'autres informations avec des propriétés. + +```js +const tableau = [1, 2, 3]; +tableau.propriete = "valeur"; +console.log(tableau.propriete); // Affiche "valeur" dans la console +``` + ### Les tableaux et les expressions rationnelles -Lorsqu'un tableau est le résultat d'une correspondance entre une expression rationnelle et une chaîne de caractères, les éléments et propriétés du tableau fournissent des informations sur la correspondance. Les méthodes suivantes peuvent renvoyer un tableau : {{jsxref("Objets_globaux/RegExp/exec","RegExp.exec()")}}, {{jsxref("Objets_globaux/String/match/exec","String.match()")}}, {{jsxref("Objets_globaux/String/split","String.split()")}}. Pour plus d'informations sur les tableaux et les expressions rationnelles, voir le chapitre du guide JavaScript sur [les expressions rationnelles](/fr/docs/Web/JavaScript/Guide/Expressions_régulières). +Lorsqu'un tableau est le résultat d'une correspondance entre une expression rationnelle et une chaîne de caractères, les éléments et propriétés du tableau fournissent des informations sur la correspondance. Les méthodes suivantes peuvent renvoyer un tableau : [`RegExp.exec()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec), [`String.match()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/match), [`String.split()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/split). Pour plus d'informations sur les tableaux et les expressions rationnelles, voir le chapitre du guide JavaScript sur [les expressions rationnelles](/fr/docs/Web/JavaScript/Guide/Regular_Expressions). ### Manipuler des objets semblables à des tableaux -Certains objets JavaScript tels que {{domxref("NodeList")}} (renvoyé par {{domxref("document.getElementsByTagName()")}}) ou l'objet [`arguments`](/fr/docs/Web/JavaScript/Reference/Fonctions/arguments) (disponible au sein d'une fonction) ressemblent à des tableaux mais n'en sont pas (ils n'ont pas toutes les méthodes décrites ci-avant par exemple). Ainsi, l'objet `arguments` fournit une propriété {{jsxref("Objets_globaux/Function/length","length")}} mais n'implémente pas la méthode {{jsxref("Array.forEach", "forEach()")}}. +Certains objets JavaScript tels que [`NodeList`](/fr/docs/Web/API/NodeList) (renvoyé par [`document.getElementsByTagName()`](/fr/docs/Web/API/Document/getElementsByTagName)) ou l'objet [`arguments`](/fr/docs/Web/JavaScript/Reference/Functions/arguments) (disponible au sein d'une fonction) ressemblent à des tableaux mais n'en sont pas (ils n'ont pas toutes les méthodes décrites ci-avant par exemple). Ainsi, l'objet `arguments` fournit une propriété [`length`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Function/length) mais n'implémente pas la méthode [`forEach()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach). + +Les méthodes du prototype des tableaux permettent d'utiliser les méthodes d'objets `Array` sur des objets semblables à des tableaux. Attention, elles ne sont pas appelables directement depuis ces objets : -Les méthodes du prototype des tableaux permettent d'utiliser les méthodes d'objets `Array` sur des objets semblables à des tableaux : + +```js example-bad +function printArguments() { + arguments.forEach(function(item) { // TypeError: arguments.forEach is not a function + console.log(item); + }); +} +``` ```js - function alertArguments() { - Array.prototype.forEach.call(arguments, function(item) { - console.log(item); - }); - } +function printArguments() { + Array.prototype.forEach.call(arguments, function(item) { + console.log(item); + }); +} ``` -Il est possible d'utiliser ces méthodes génériques sur des chaînes de caractères : +Il est possible d'utiliser ces méthodes génériques sur des chaînes de caractères : ```js Array.prototype.forEach.call("une chaîne", function(chr) { @@ -450,24 +471,36 @@ Array.prototype.forEach.call("une chaîne", function(chr) { ## Les tableaux typés -[Les tableaux typés JavaScript](/fr/docs/Web/JavaScript/Tableaux_typés) sont des objets semblables à des tableaux qui fournissent un moyen d'accéder à des données binaires. Comme on l'a vu ci-avant, les objets {{jsxref("Array")}} grandissent et rétrécissent dynamiquement et peuvent contenir n'importe quelle valeur JavaScript. Les moteurs JavaScript effectuent des optimisations afin que les tableaux puissent être utilisés rapidement. Cependant, avec le développement des applications web, les applications viennent à manipuler des données audio, vidéo, binaires et accèdent à des données brutes via les [WebSockets](/fr/docs/WebSockets) d'autres outils. Il apparaît donc nécessaire d'avoir les outils JavaScript pertinents pour manipuler efficacement des données binaires, organisées au sein de tableaux typés. +[Les tableaux typés JavaScript](/fr/docs/Web/JavaScript/Typed_arrays) sont des objets semblables à des tableaux qui fournissent un moyen d'accéder à des données binaires. Comme on l'a vu ci-avant, les objets [`Array`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array) grandissent et rétrécissent dynamiquement et peuvent contenir n'importe quelle valeur JavaScript. Les moteurs JavaScript effectuent des optimisations afin que les tableaux puissent être utilisés rapidement. Cependant, avec le développement des applications web, les applications viennent à manipuler des données audio, vidéo, binaires et accèdent à des données brutes via les [WebSockets](/fr/docs/Web/API/WebSockets_API) d'autres outils. Il apparaît donc nécessaire d'avoir les outils JavaScript pertinents pour manipuler efficacement des données binaires, organisées au sein de tableaux typés. -### Les vues et les tampons de mémoire (_buffers_) : l'architecture des tableaux typés +### Les vues et les tampons de mémoire (<i lang="en">buffers</i>) : l'architecture des tableaux typés -Afin de permettre un maximum de flexibilité et d'efficacité, les tableaux typés JavaScript séparent l'implémentation entre **les tampons (_buffers_)** et **les vues (_views_)**. Un tampon de mémoire, implémenté par l'objet {{jsxref("ArrayBuffer")}}, est un objet représentant un fragment de données. Un tampon n'a pas de format a proprement parler et il ne fournit aucun mécanisme pour accéder à son contenu. Afin d'accéder à la mémoire contenu dans le tampon, on a besoin d'utiliser une vue. Une vue fournit un contexte, c'est-à-dire un type de donnée, un indice de départ et un nombre d'éléments, qui permet de traiter les données initiales comme un vrai tableau typé. +Afin de permettre un maximum de flexibilité et d'efficacité, les tableaux typés JavaScript séparent l'implémentation entre **les tampons (<i lang="en">buffers</i>)** et **les vues (<i lang="en">views</i>)**. Un tampon de mémoire, implémenté par l'objet [`ArrayBuffer`](/fr/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer), est un objet représentant un fragment de données. Un tampon n'a pas de format à proprement parler et il ne fournit aucun mécanisme pour accéder à son contenu. Afin d'accéder à la mémoire contenue dans le tampon, on a besoin d'utiliser une vue. Une vue fournit un contexte, c'est-à-dire un type de donnée, un indice de départ et un nombre d'éléments, qui permet de traiter les données initiales comme un vrai tableau typé. - + ### `ArrayBuffer` -Le type {{jsxref("ArrayBuffer")}} est un type de donnée utilisé pour représenter un tampon de données binaire générique dont la longueur est fixée. Un tampon de données ne peut pas être manipulé directement. Pour manipuler les données, il faut créer une vue sur le tableau typé ou un objet {{jsxref("DataView")}} qui représente le tampon dans un format spécifique et qui pourra être utilisé pour lire et écrire des informations du tampon. +Le type [`ArrayBuffer`](/fr/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) est un type de donnée utilisé pour représenter un tampon de données binaire générique dont la longueur est fixée. Un tampon de données ne peut pas être manipulé directement. Pour manipuler les données, il faut créer une vue sur le tableau typé ou un objet [`DataView`](/fr/docs/Web/JavaScript/Reference/Global_Objects/DataView) qui représente le tampon dans un format spécifique et qui pourra être utilisé pour lire et écrire des informations du tampon. -### Les vues qui sont des tableaux typés +### Les vues sur les tableaux typés Les vues de tableaux typés possèdent des noms explicites et fournissent des vues pour les types numériques usuels tels que `Int8`, `Uint32`, `Float64` et ainsi de suite. Il existe un type de vue spécial qui est `Uint8ClampedArray`. Ce type ramène les différentes valeurs exploitées entre 0 et 255. Cela peut notamment être utile pour [le traitement des données d'un canvas](/fr/docs/Web/API/ImageData). -{{page("/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray", "Les_objets_TypedArray")}} - -Pour plus d'informations sur les tableaux typés, voir [l'article de la référence](/fr/docs/Web/JavaScript/Tableaux_typés) sur les différents objets {{jsxref("TypedArray")}}. - -{{PreviousNext("Web/JavaScript/Guide/Expressions_régulières", "Web/JavaScript/Guide/Collections_avec_clés")}} +| Type | Intervalle de valeurs | Taille exprimée en octets | Description | Type Web IDL | Type équivalent en C | +| ---------------------------------------- | --------------------------------------------------------------- | ------------- | ---------------------------------------------------------------------------- | --------------------- | ------------------------------- | +| [`Int8Array`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Int8Array) | `-128` à `127` | 1 | Entier signé avec complément à deux sur 8 bits | `byte` | `int8_t` | +| [`Uint8Array`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array) | `0` à `255` | 1 | Entier non-signé sur 8 bits | `octet` | `uint8_t` | +| [`Uint8ClampedArray`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Uint8ClampedArray) | `0` à `255` | 1 | Entier non-signé sur 8 bit (écrété) | `octet` | `uint8_t` | +| [`Int16Array`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Int16Array) | `-32768` à `32767` | 2 | Entier signé avec complément à deux sur 16 bits | `short` | `int16_t` | +| [`Uint16Array`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Uint16Array) | `0` à `65535` | 2 | Entier non-signé sur 16 bits | `unsigned short` | `uint16_t` | +| [`Int32Array`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Int32Array) | `-2147483648` à `2147483647` | 4 | Entier signé avec complément à deux sur 32 bits | `long` | `int32_t` | +| [`Uint32Array`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Uint32Array) | `0` à `4294967295` | 4 | Entier non-signé sur 32 bits | `unsigned long` | `uint32_t` | +| [`Float32Array`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Float32Array) | `-3.4E38` à `3.4E38` et `1.2E-38` est le plus petit nombre positif | 4 | Nombre flottant sur 32 bits IEEE 754 (7 chiffres significatifs, ex. `1.123456`) | `unrestricted float` | `float` | +| [`Float64Array`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Float64Array) | `-1.8E308` à `1.8E308` et `5E-324` est le plus petit nombre positif | 8 | Nombre flottant sur 64 bits IEEE 754 (16 chiffres significatifs, ex. `1.123...15`) | `unrestricted double` | `double` | +| [`BigInt64Array`](/fr/docs/Web/JavaScript/Reference/Global_Objects/BigInt64Array) | `-2^63` à `2^63 - 1` | 8 | Entier signé avec complément à deux sur 64 bits | `bigint` | `int64_t (signed long long)` | +| [`BigUint64Array`](/fr/docs/Web/JavaScript/Reference/Global_Objects/BigUint64Array) | `0` à `2^64 - 1` | 8 | Entier non-signé sur 64 bits | `bigint` | `uint64_t (unsigned long long)` | + +Pour plus d'informations sur les tableaux typés, voir [l'article de la référence](/fr/docs/Web/JavaScript/Typed_arrays) sur les différents objets [`TypedArray`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray). + +{{PreviousNext("Web/JavaScript/Guide/Regular_Expressions", "Web/JavaScript/Guide/Keyed_Collections")}} diff --git a/files/fr/web/javascript/guide/introduction/index.md b/files/fr/web/javascript/guide/introduction/index.md index cc8794cc3e..12eb1059c0 100644 --- a/files/fr/web/javascript/guide/introduction/index.md +++ b/files/fr/web/javascript/guide/introduction/index.md @@ -1,47 +1,42 @@ --- title: Introduction slug: Web/JavaScript/Guide/Introduction -tags: - - Débutant - - Guide - - Intro - - JavaScript translation_of: Web/JavaScript/Guide/Introduction --- -{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Types_et_grammaire")}} +{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammar_and_types")}} Ce chapitre introduit JavaScript et présente certains de ses concepts fondamentaux. ## Ce que vous devriez déjà savoir -Pour lire ce guide, il est conseillé d'avoir : +Pour lire ce guide, il est conseillé d'avoir : -- Une compréhension générale du fonctionnement d'Internet et du [World Wide Web](https://developer.mozilla.org/fr/docs/Glossaire/World_Wide_Web) . +- Une compréhension générale du fonctionnement d'Internet et du [World Wide Web](/fr/docs/Glossary/World_Wide_Web) . - Une connaissance élémentaire du _HyperText Markup Language_ ({{Glossary("HTML")}}). - Une expérience préalable en programmation. Si vous débutez la programmation, vous pouvez utiliser l'un des tutoriels listés sur la page [JavaScript](/fr/docs/Web/JavaScript). ## Où trouver des informations concernant JavaScript -La documentation MDN pour JavaScript comprend : +La documentation MDN pour JavaScript comprend : -- [Apprendre le Web](/fr/docs/Apprendre) : cette section fournit des informations destinées aux débutants et présente les concepts de bases autour de la programmation et d'Internet. +- [Apprendre le Web](/fr/docs/Learn) : cette section fournit des informations destinées aux débutants et présente les concepts de bases autour de la programmation et d'Internet. - [Le guide JavaScript](/fr/docs/Web/JavaScript/Guide) (ce guide) fournit un aperçu du langage JavaScript et de ses objets. - [La référence JavaScript](/fr/docs/Web/JavaScript/Reference) fournit une référence détaillée sur les fonctionnalités de JavaScript. -Si vous débutez en JavaScript, vous pouvez commencer par les articles de la section [Apprendre](/fr/docs/Apprendre) et du [Guide JavaScript](/fr/docs/Web/JavaScript/Guide). Une fois que vous maîtrisez les briques de bases, vous pourrez utiliser [la référence JavaScript](/fr/docs/Web/JavaScript/Reference) pour obtenir des informations détaillées sur chacun des objets natifs et des instructions. +Si vous débutez en JavaScript, vous pouvez commencer par les articles de la section [Apprendre](/fr/docs/Learn) et du [Guide JavaScript](/fr/docs/Web/JavaScript/Guide). Une fois que vous maîtrisez les briques de bases, vous pourrez utiliser [la référence JavaScript](/fr/docs/Web/JavaScript/Reference) pour obtenir des informations détaillées sur chacun des objets natifs et des instructions. -## Qu'est-ce que JavaScript ? +## Qu'est-ce que JavaScript ? JavaScript est un langage de script, multi-plateforme et orienté objet. C'est un langage léger qui doit faire partie d'un environnement hôte (un navigateur web par exemple) pour qu'il puisse être utilisé sur les objets de cet environnement. -JavaScript contient une bibliothèque standard d'objets tels que `Array`, `Date`, et `Math`, ainsi qu'un ensemble d'éléments de langage tels que les opérateurs, les structures de contrôles et les instructions. Ces fonctionnalités centrales et natives de JavaScript peuvent être étendues de plusieurs façons en fournissant d'autres objets, par exemple : +JavaScript contient une bibliothèque standard d'objets tels que `Array`, `Date`, et `Math`, ainsi qu'un ensemble d'éléments de langage tels que les opérateurs, les structures de contrôles et les instructions. Ces fonctionnalités centrales et natives de JavaScript peuvent être étendues de plusieurs façons en fournissant d'autres objets, par exemple : - _JavaScript côté client_ étend ces éléments de base en fournissant des objets pour contrôler le navigateur et le _Document Object Model_ (DOM). Par exemple, les extensions du langage côté client permettent de placer des éléments dans un formulaire HTML, de réagir aux événements déclenchés par l'utilisateur (les clics, la saisie d'un formulaire, les actions de navigation, etc.). - _JavaScript côte serveur_ étend ces éléments de base avec des objets utiles pour le fonctionnement sur un serveur tels que la possibilité de communiquer avec une base de données, manipuler des fichiers, passer d'une application à une autre, etc. ## JavaScript et Java -JavaScript et Java se ressemblent sur certains aspects mais ils sont fondamentalement différents l'un de l'autre. Le langage JavaScript ressemble à Java mais n'est pas typé statiquement et le typage de JavaScript est faible (alors qu'il est fort en Java). La syntaxe des expressions JavaScript est très proche de celle du Java avec les conventions de nommage et les constructions conditionnelles par exemple : c'est une des raisons qui a fait que le langage LiveScript a été renommé en JavaScript. +JavaScript et Java se ressemblent sur certains aspects, mais ils sont fondamentalement différents l'un de l'autre. Le langage JavaScript ressemble à Java, mais n'est pas typé statiquement et le typage de JavaScript est faible (alors qu'il est fort en Java). La syntaxe des expressions JavaScript est très proche de celle du Java avec les conventions de nommage et les constructions conditionnelles par exemple : c'est une des raisons qui a fait que le langage LiveScript a été renommé en JavaScript. À la différence de Java qui est un système compilé et dont les classes sont déclarées, JavaScript est traité lors de l'exécution et possède quelques types de données pour représenter les nombres, les booléens et les chaînes de caractères (entre autres). JavaScript utilise un modèle basé sur les prototypes pour représenter les liens entre les objets alors que Java utilise un modèle plus courant basé sur les classes. Les prototypes permettent d'avoir un héritage dynamique. Ainsi, les caractéristiques héritées par un objet peuvent varier dans le temps. JavaScript supporte également les fonctions qui sont des objets à part entière et qui peuvent être des propriétés d'autres objets. @@ -56,17 +51,17 @@ Java est un langage de programmation utilisant les classes, conçus pour être e | Orienté objet. Aucune distinction entre les types et les objets. L'héritage est basé sur un mécanisme utilisant les prototypes et les propriétés et méthodes peuvent être ajoutées dynamiquement à n'importe quel objet. | Orienté objet, utilisant un modèle de classes. Les objets sont divisés entre les classes et les instances, l'héritage s'effectue via la hiérarchie des classes. Les classes et les instances ne peuvent pas recevoir de nouvelles propriétés ou méthodes dynamiquement. | | Le type de données des variables n'est pas déclaré (typage dynamique). | Le type de données des variables doit être déclaré (typage statique). | -Pour plus d'informations sur les différences entre JavaScript et Java, voir le chapitre sur [les détails du modèle objet JavaScript](/fr/docs/Web/JavaScript/Guide/Le_modèle_objet_JavaScript_en_détails). +Pour plus d'informations sur les différences entre JavaScript et Java, voir le chapitre sur [les détails du modèle objet JavaScript](/fr/docs/Web/JavaScript/Guide/Details_of_the_Object_Model). ## JavaScript et la spécification ECMAScript -JavaScript est standardisé par [Ecma International](https://www.ecma-international.org/) — une association européenne de standardisation des systèmes d'information et de communication (ECMA étant historiquement un acronyme pour _European Computer Manufacturers Association_) qui délivre un langage de programmation standardisé, international appelé ECMAScript. Ce langage se comporte de la même façon pour toutes les applications qui supportent ce standard. Les entreprises peuvent utiliser ce langage standard afin de développer leur implémentation de JavaScript. Le standard ECMAScript est documenté avec la spécification ECMA-262. Voir la page [Nouveautés de JavaScript](/fr/docs/Web/JavaScript/Nouveautés_et_historique_de_JavaScript) pour en savoir plus sur les différentes versions de JavaScript et les différentes éditions de la spécification ECMAScript. +JavaScript est standardisé par [Ecma International](https://www.ecma-international.org/) — une association européenne de standardisation des systèmes d'information et de communication (ECMA étant historiquement un acronyme pour _European Computer Manufacturers Association_) qui délivre un langage de programmation standardisé, international appelé ECMAScript. Ce langage se comporte de la même façon pour toutes les applications qui supportent ce standard. Les entreprises peuvent utiliser ce langage standard afin de développer leur implémentation de JavaScript. Le standard ECMAScript est documenté avec la spécification ECMA-262. Le standard ECMA-262 est également approuvé par l'[ISO](https://www.iso.ch/) (_International Organization for Standardization_) sous ISO-16262. La spécification peut également être trouvée sur [le site web d'Ecma International](https://www.ecma-international.org/publications/standards/Ecma-262.htm). La spécification ECMAScript ne décrit pas le _Document Object Model_ (DOM) qui est standardisé par le [World Wide Web Consortium (W3C)](https://www.w3.org/) et [le WHATWG (Web Hypertext Application Technology Working Group)](https://whatwg.org). Le DOM définit la façon dont les documents HTML sont exposés aux scripts. Pour mieux comprendre les différentes technologies gravitant autour de JavaScript, voir l'article [Aperçu des technologies JavaScript](/fr/docs/Web/JavaScript/JavaScript_technologies_overview). ### Documentation JavaScript et spécification ECMAScript -La spécification ECMAScript est un ensemble de conditions à respecter pour implémenter ECMAScript : cela est utile lorsqu'on souhaite implémenter des fonctionnalités standard du langage au sein d'une implémentation ou d'un moteur ECMAScript (tel que SpiderMonkey pour Firefox, ou V8 pour Chrome). +La spécification ECMAScript est un ensemble de conditions à respecter pour implémenter ECMAScript : cela est utile lorsqu'on souhaite implémenter des fonctionnalités standard du langage au sein d'une implémentation ou d'un moteur ECMAScript (tel que SpiderMonkey pour Firefox, ou V8 pour Chrome). La spécification ECMAScript n'a pas pour but d'aider les développeurs à écrire des scripts. La documentation JavaScript permet d'obtenir des informations pour écrire des scripts JavaScript. @@ -76,19 +71,19 @@ La documentation JavaScript décrit les aspects du langage qui pourront être ut ## Démarrer avec JavaScript -Pour commencer à développer en JavaScript, c'est très simple : il suffit d'avoir un navigateur web récent. Ce guide inclut certaines fonctionnalités de JavaScript qui ne sont disponibles que dans les dernières versions de Firefox, il est donc recommandé d'utiliser une version de Firefox à jour pour essayer les exemples fournis. +Pour commencer à développer en JavaScript, c'est très simple : il suffit d'avoir un navigateur web récent. Ce guide inclut certaines fonctionnalités de JavaScript qui ne sont disponibles que dans les dernières versions de Firefox, il est donc recommandé d'utiliser une version de Firefox à jour pour essayer les exemples fournis. -L'outil Web Console intégré à Firefox est utile pour expérimenter avec JavaScript. Vous pouvez l'utiliser selon deux modes : le mode de saisie à une ligne et le mode de saisie multiligne. +L'outil Web Console intégré à Firefox est utile pour expérimenter avec JavaScript. Vous pouvez l'utiliser selon deux modes : le mode de saisie à une ligne et le mode de saisie multiligne. ### La console web -La [console web](/fr/docs/Outils/Web_Console) affiche des informations sur la page actuellement chargée, elle dispose également d'une [ligne de commande](/fr/docs/Outils/Web_Console#L'interpr.C3.A9teur_de_lignes_de_commande) qui peut être utilisée pour exécuter des expressions JavaScript dans la page actuelle. +La [console web](/fr/docs/Tools/Web_Console) affiche des informations sur la page actuellement chargée, elle dispose également d'une [ligne de commande](/fr/docs/Tools/Web_Console) qui peut être utilisée pour exécuter des expressions JavaScript dans la page actuelle. -Pour ouvrir la console, dans le menu, sélectionner « Développement » puis « Console web » (en passant par la barre d'outils, ce sera « Outils » puis « Développement web » puis « Console web »). Avec le clavier, on pourra utiliser la combinaison de touche <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>K</kbd> sur Windows et Linux ou <kbd>Cmd</kbd>-<kbd>Option</kbd>-<kbd>K</kbd> sur Mac. Une fois lancée, la console apparaît en base de la fenêtre du navigateur. En bas de la zone occupée par la console, il y a une ligne de commande qui peut être utilisée pour saisir des instructions JavaScript, le résultat de ces instructions sera affiché dans le panneau au dessus : +Pour ouvrir la console, dans le menu, sélectionner « Développement » puis « Console web » (en passant par la barre d'outils, ce sera « Outils » puis « Développement web » puis « Console web »). Avec le clavier, on pourra utiliser la combinaison de touche <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>K</kbd> sur Windows et Linux ou <kbd>Cmd</kbd>-<kbd>Option</kbd>-<kbd>K</kbd> sur Mac. Une fois lancée, la console apparaît en base de la fenêtre du navigateur. En bas de la zone occupée par la console, il y a une ligne de commande qui peut être utilisée pour saisir des instructions JavaScript, le résultat de ces instructions sera affiché dans le panneau au-dessus : - + -La console fonctionne exactement de la même manière que `eval` : la dernière expression saisie est retournée. Pour simplifier, on peut imaginer que chaque fois qu'une expression est saisie dans la console, elle est en fait entourée de `console.log` autour de `eval`, comme suit: +La console fonctionne exactement de la même manière que `eval` : la dernière expression saisie est retournée. Pour simplifier, on peut imaginer que chaque fois qu'une expression est saisie dans la console, elle est en fait entourée de `console.log` autour de `eval`, comme suit: ```js function saluer(votreNom) { @@ -113,6 +108,6 @@ function saluer(utilisateur) { saluer("Alice"); // "Bonjour Alice" ``` -Dans les pages qui suivent, ce guide introduira la syntaxe du langage JavaScript ainsi que ses fonctionnalités ; vous pourrez ainsi écrire des applications plus complexes. +Dans les pages qui suivent, ce guide introduira la syntaxe du langage JavaScript ainsi que ses fonctionnalités ; vous pourrez ainsi écrire des applications plus complexes. -{{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Types_et_grammaire")}} +{{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammar_and_types")}}
\ No newline at end of file diff --git a/files/fr/web/javascript/reference/global_objects/math/atan2/index.md b/files/fr/web/javascript/reference/global_objects/math/atan2/index.md index c95dd9050b..3b775a6514 100644 --- a/files/fr/web/javascript/reference/global_objects/math/atan2/index.md +++ b/files/fr/web/javascript/reference/global_objects/math/atan2/index.md @@ -1,40 +1,38 @@ --- title: Math.atan2() slug: Web/JavaScript/Reference/Global_Objects/Math/atan2 -tags: - - JavaScript - - Math - - Méthode - - Reference translation_of: Web/JavaScript/Reference/Global_Objects/Math/atan2 original_slug: Web/JavaScript/Reference/Objets_globaux/Math/atan2 +browser-compat: javascript.builtins.Math.atan2 --- {{JSRef}} -La fonction **`Math.atan2()`** renvoie l'arc tangente du quotient de ses arguments. +La fonction **`Math.atan2()`** renvoie l'arc tangente du quotient de ses arguments, ce qui, pour `Math.atan2(y,x)`, correspond à l'angle plan (exprimé en radians) entre la droite passant par l'origine et le point de coordonnées (x,y). {{EmbedInteractiveExample("pages/js/math-atan2.html")}} ## Syntaxe - Math.atan2(y, x) +```js +Math.atan2(y, x) +``` ### Paramètres -- `x` - - : La coordonnée en abscisse du point. - `y` - : La coordonnée en ordonnée du point. +- `x` + - : La coordonnée en abscisse du point. ### Valeur de retour -L'arc tangente du quotient formé par les deux arguments, c'est-à-dire l'angle, exprimé en radians entre l'axe des abscisses et la droite passant par l'origin (0,0) et le point de coordonnées (x,y). +L'arc tangente du quotient formé par les deux arguments (compris dans <math><semantics><mrow><mo stretchy="false">[</mo><mo>-</mo><mi>π</mi><mo>,</mo><mi>π</mi><mo stretchy="false">]</mo></mrow><annotation encoding="TeX">[-\pi, \pi]</annotation></semantics></math>), c'est-à-dire l'angle, exprimé en radians entre l'axe des abscisses et la droite passant par l'origin (0,0) et le point de coordonnées (x,y). ## Description La méthode `Math.atan2()` renvoie une valeur numérique comprise entre -Pi et Pi qui représente l'angle theta d'un point de coordonnées (x,y). Cela correspond à l'angle (dans le sens trigonométrique) entre l'axe des abscisses et le point de coordonnées (`x,y`). Attention, le premier argument de la fonction est l'ordonnée (y) et le second est l'abscisse (x). - + `Math.atan2()` utilise deux arguments `x` et `y`, alors que la méthode `Math.atan()` utilise le ratio de deux nombres comme un seul argument. @@ -63,22 +61,17 @@ Math.atan2( ±Infinity, +Infinity ); // ±PI/4. ## Spécifications -| Spécification | État | Commentaires | -| ---------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | -| {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.0. | -| {{SpecName('ES5.1', '#sec-15.8.2.5', 'Math.atan2')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-math.atan2', 'Math.atan2')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-math.atan2', 'Math.atan2')}} | {{Spec2('ESDraft')}} | | +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("javascript.builtins.Math.atan2")}} +{{Compat}} ## Voir aussi -- {{jsxref("Math.acos()")}} -- {{jsxref("Math.asin()")}} -- {{jsxref("Math.atan()")}} -- {{jsxref("Math.cos()")}} -- {{jsxref("Math.sin()")}} -- {{jsxref("Math.tan()")}} +- [`Math.acos()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Math/acos) +- [`Math.asin()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Math/asin) +- [`Math.atan()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Math/atan) +- [`Math.cos()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Math/cos) +- [`Math.sin()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Math/sin) +- [`Math.tan()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Math/tan) diff --git a/files/fr/web/javascript/reference/global_objects/promise/index.md b/files/fr/web/javascript/reference/global_objects/promise/index.md index cd1f9babc5..64a34a483c 100644 --- a/files/fr/web/javascript/reference/global_objects/promise/index.md +++ b/files/fr/web/javascript/reference/global_objects/promise/index.md @@ -1,31 +1,17 @@ --- title: Promise slug: Web/JavaScript/Reference/Global_Objects/Promise -tags: - - ECMAScript 2015 - - JavaScript - - Promise - - Reference translation_of: Web/JavaScript/Reference/Global_Objects/Promise original_slug: Web/JavaScript/Reference/Objets_globaux/Promise +browser-compat: javascript.builtins.Promise --- {{JSRef}} L'objet **`Promise`** (pour « promesse ») est utilisé pour réaliser des traitements de façon asynchrone. Une promesse représente une valeur qui peut être disponible maintenant, dans le futur voire jamais. -> **Note :** Cet article décrit le constructeur `Promise`. Pour en savoir plus sur les promesses en général, nous vous conseillons de lire l'article [Utiliser les promesses](/fr/docs/Web/JavaScript/Guide/Utiliser_les_promesses). Le constructeur `Promise` est principalement utilisé pour envelopper des fonctions qui ne prennent pas en charge les promesses. +{{AvailableInWorkers}} -{{EmbedInteractiveExample("pages/js/promise-constructor.html")}} - -## Syntaxe - - new Promise( /* exécuteur */ function(resolve, reject) { ... } ); - -### Paramètres - -- `exécuteur` - - : Une fonction à laquelle on passera deux arguments : `resolve` et `reject`. Cette fonction est exécutée immédiatement par l'implémentation de **`Promise`** qui fournit les fonctions `resolve` et `reject` (elle est exécutée avant que le constructeur **`Promise`** ait renvoyé l'objet créé). Les fonctions `resolve` et `reject`, lorsqu'elles sont appelées, permettent respectivement de tenir ou de rompre la promesse. On attend de l'exécuteur qu'il démarre un travail asynchrone puis, une fois le travail terminé, appelle la fonction `resolve` (si tout s'est bien passé) ou la fonction `reject` (lorsqu'il y a eu un problème) pour définir l'état final de la promesse. - Si une erreur est générée par l'exécuteur, la promesse est rompue et la valeur de retour de l'exécuteur est ignorée. +Pour apprendre comment fonctionnent les promesses et comment les utiliser, nous vous conseillons de commencer par l'article [Utiliser les promesses](/fr/docs/Web/JavaScript/Guide/Using_promises) du guide JavaScript. ## Description @@ -35,103 +21,268 @@ Une `Promise` est dans un de ces états : - _pending (en attente)_ : état initial, la promesse n'est ni remplie, ni rompue ; - _fulfilled (tenue_) : l'opération a réussi ; -- _rejected (rompue)_ : l'opération a échoué ; -- _settled (acquittée)_ : la promesse est tenue ou rompue mais elle n'est plus en attente. +- _rejected (rompue)_ : l'opération a échoué. + +Une promesse en attente peut être _tenue_ avec une valeur ou _rompue_ avec une raison (erreur). Quand on arrive à l'une des deux situations, les gestionnaires associés lors de l'appel de la méthode `then` sont alors appelés. Si la promesse a déjà été tenue ou rompue lorsque le gestionnaire est attaché à la promesse, le gestionnaire est appelé. Cela permet qu'il n'y ait pas de situation de compétition entre une opération asynchrone en cours et les gestionnaires ajoutés. -Une promesse en attente peut être _tenue_ avec une valeur ou _rompue_ avec une raison (erreur). Quand on arrive à l'une des deux situations, les gestionnaires associés lors de l'appel de la méthode `then` sont alors appelés. (Si la promesse a déjà été tenue ou rompue lorsque le gestionnaire est attaché à la promesse, le gestionnaire est appelé. Cela permet qu'il n'y ait pas de situation de compétition entre une opération asynchrone en cours et les gestionnaires ajoutés). +Les méthodes [`Promise.prototype.then()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise/then) et [`Promise.prototype.catch()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise/catch) renvoient des promesses et peuvent ainsi être chaînées. C'est ce qu'on appelle une _composition_. -Les méthodes {{jsxref("Promise.then","Promise.prototype.then()")}} et {{jsxref("Promise.catch","Promise.prototype.catch()")}} renvoient des promesses et peuvent ainsi être chaînées. C'est ce qu'on appelle une _composition_. + - +> **Note :** D'autres langages utilisent des mécanismes d'évaluation à la volée (<i lang="en">lazy evaluation</i>) et de déport des calculs (<i lang="en">deferring computations</i>). Ces mécanismes sont également intitulés promesses (<i lang="en">promises</i>). En JavaScript, les promesses correspondent à des processus déjà lancés et qui peuvent être chaînés avec des fonctions de retour. Si vous cherchez à retarder l'évaluation, vous pouvez utiliser les fonctions fléchées sans arguments (ex. `f = () => expression`) afin de créer une expression à évaluer plus tard et utiliser `f()` pour l'évaluer au moment voulu. -> **Note :** Une promesse est dans l'état _settled_ (acquittée) qu'elle soit tenue ou rompue mais plus en attente. Le terme _resolved_ (résolue) est aussi utilisé concernant les promesses — cela signifie que la promesse est acquittée ou bien enfermée dans une chaine de promesse. Le billet de Domenic Denicola, [_States and fates_ (en anglais)](https://github.com/domenic/promises-unwrapping/blob/master/docs/states-and-fates.md), contient de plus amples détails sur la terminologie utilisée. +> **Note :** On dit qu'une promesse est dans l'état <i lang="en">settled</i> (acquittée) qu'elle soit tenue ou rompue mais plus en attente. Le terme <i lang="en">resolved</i> (résolue) est aussi utilisé concernant les promesses — cela signifie que la promesse est acquittée ou bien enfermée dans une chaine de promesse. Le billet de Domenic Denicola, [<i lang="en">States and fates</i> (en anglais)](https://github.com/domenic/promises-unwrapping/blob/master/docs/states-and-fates.md), contient de plus amples détails sur la terminologie utilisée. -> **Attention :** D'autres langages utilisent des mécanismes d'évaluation à la volée (_lazy evaluation_) et de déport des calculs (_deferring computations_). Ces mécanismes sont également intitulés promesses (_promises_). En JavaScript, les promesses correspondent à des processus déjà lancés et qui peuvent être chaînés avec des fonctions de retour. Si vous cherchez à retarder l'évaluation, vous pouvez utiliser les fonctions fléchées sans arguments (ex. `f = () => expression`) afin de créer une expression à évaluer plus tard et utiliser `f()` pour l'évaluer au moment voulu. +### Enchaînement de promesses -## Propriétés +Les méthodes `promise.then()`, `promise.catch()`, et `promise.finally()` sont utilisées pour associer une action ultérieure à une promesse lorsque celle-ci devient acquittée. -- `Promise.length` - - : Une propriété de longueur qui vaut 1 (le nombre d'arguments pour le constructeur). -- {{jsxref("Promise.prototype")}} - - : Cette propriété représente le prototype du constructeur `Promise`. +La méthode `.then()` prend deux arguments : le premier est une fonction de rappel (<i lang="en">callback</i>) pour le cas de résolution de la promesse et le second argument est une fonction de rappel pour le cas d'échec. Chaque invocation de `.then()` renvoie une nouvelle promesse qui peut éventuellement être utilisée chaînée à une autre promesse : -## Méthodes +```js +const maPromesse = new Promise((resolve, reject) => { + setTimeout(() => { + resolve('toto'); + }, 300); +}); + +maPromesse + .then(gestionnaireSuccesA, gestionnaireEchecA) + .then(gestionnaireSuccesB, gestionnaireEchecB) + .then(gestionnaireSuccesC, gestionnaireEchecC); +``` + +Le traitement continue pour chaque étape de la chaîne, même lorsque `.then()` ne possède pas de fonction de rappel renvoyant une promesse. Ainsi, une chaîne d'appels peut très bien omettre les différentes fonctions de rappel pour les cas d'échec jusqu'au `.catch()` final. + +La gestion d'une promesse rompue dans chaque `.then()` a des conséquences plus loin dans la chaîne de promesses. Il n'y a parfois pas le choix, car il faut gérer l'erreur immédiatement. Dans de tels cas, on peut lever une erreur d'un certain type et maintenir cet état d'erreur le long de la chaîne. Autrement, s'il n'est pas nécessaire d'avoir un traitement immédiat, mieux vaut laisser la gestion de l'erreur jusq'au `.catch()` final. Un appel à `.catch()` peut être vu comme un `.then()` qui n'a qu'une fonction de rappel pour gérer les cas d'échec. + +```js +maPromesse +.then(gestionnaireSuccesA) +.then(gestionnaireSuccesB) +.then(gestionnaireSuccesC) +.catch(gestionnaireToutEchec); +``` + +On peut utiliser les [expressions de fonctions fléchées](/fr/docs/Web/JavaScript/Reference/Functions/Arrow_functions) pour les fonctions de rappel. Un enchaînement avec cette forme pourra alors ressembler à : + +```js +promesse1 +.then(valeur => { return valeur + ' et truc'; }) +.then(valeur => { return valeur + ' et truc bla'; }) +.then(valeur => { return valeur + ' et blabla'; }) +.then(valeur => { return valeur + ' et blabla'; }) +.then(valeur => { console.log(valeur) }) +.catch(err => { console.log(err) }); +``` + +La condition de terminaison d'une promesse détermine son état d'acquittement pour la prochaine promesse de la chaîne. Une promesse tenue indique un succès tandis qu'une promesse rompue indique un échec. La valeur de retour pour chaque promesse résolue de la chaîne est passée à la suivante avec `.then()`, alors que la raison de l'échec est passée au prochain gestionnaire d'échec dans la chaîne. + +Les promesses d'une chaîne sont imbriquées comme des poupées russes, mais le démarrage se fait au niveau le plus imbriqué. + +```plain +(promesse D, (promesse C, (promesse B, (promesse A) ) ) ) +``` + +Lorsque la valeur qui suit une promesse est une autre promesse, on a un effet de remplacement dynamique. L'instruction `return` entraîne le « dépilement » de la promesse courante et c'est la promesse suivante qui prend sa place. Pour l'exemple d'imbrication illustré avant, si l'appel `.then()` associé à "promesse B" renvoie "promesse X", on aurait alors une situation comme celle-ci : + +```plain +(promesse D, (promesse C, (promesse X) ) ) +``` + +Une promesse peut être imbriquée à plusieurs endroits. Dans le code qui suit, la résolution de `promesseA` entraînera l'appel de deux méthodes `.then()`. + +```js +const promesseA = new Promise(uneFonction); +const promesseB = promesseA.then(gestionSucces1, gestionEchec1); +const promesseC = promesseA.then(gestionSucces2, gestionEchec2); +``` + +Il est possible d'affecter une action à une promesse qui est déjà acquittée. Dans ce cas, l'action (le cas échéant), sera réalisé à la première opportunité asynchrone, c'est-à-dire lorsque la pile d'appel aura été nettoyée et qu'un battement d'horloge se sera écoulé. On aura autrement dit un effet similaire à celui d'un `setTimeout(action,10)`. + +```js +const promesseA = new Promise( (resolutionFunc,rejectionFunc) => { + resolutionFunc(777); +}); +// Ici, "promesseA" est déjà acquittée. +promesseA.then( (val) => console.log("journalisation asynchrone / val vaut :",val) ); +console.log("journalisation immédiate"); -- {{jsxref("Promise.all", "Promise.all(iterable)")}} +// On aura alors, dans la console, la suite de messages suivante : +// journalisation immédiate +// journalisation asynchrone / val vaut : 777 +``` + +## Constructeur + +- [`Promise()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise/Promise) + - : Crée un nouvel objet `Promise`. Le constructeur est principalement utilisé pour envelopper des fonctions qui ne prennent pas en charge les promesses. + +## Méthodes statiques + +- [`Promise.all(iterable)`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise/all) - : Renvoie une promesse tenue lorsque toutes les promesses de l'argument itérable sont tenues ou une promesse rompue dès qu'une promesse de l'argument itérable est rompue. Si la promesse est tenue, elle est résolue avec un tableau contenant les valeurs de résolution des différentes promesses contenues dans l'itérable (dans le même ordre que celui-ci). Si la promesse est rompue, elle contient la raison de la rupture de la part de la promesse en cause, contenue dans l'itérable. Cette méthode est utile pour agréger les résultats de plusieurs promesses tous ensemble. -- {{jsxref("Promise.allSettled", "Promise.allSettled(iterable)")}} +- [`Promise.allSettled(iterable)`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled) - : Attend que l'ensemble des promesses aient été acquittées (tenues ou rompues) et renvoie une promesse qui est résolue après que chaque promesse ait été tenue ou rompue. La valeur de résolution de la promesse renvoyée est un tableau dont chaque élément est le résultat des promesses initiales. -- {{jsxref("Promise.race", "Promise.race(iterable)")}} +- [`Promise.any(iterable)`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise/any) + - : Renvoie une seule promesse dont la valeur de résolution est celle de la première promesse résolue de l'itérable passé en argument. +- [`Promise.race(iterable)`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise/race) - : Renvoie une promesse qui est tenue ou rompue dès que l'une des promesses de l'itérable est tenue ou rompue avec la valeur ou la raison correspondante. -- {{jsxref("Promise.reject", "Promise.reject(raison)")}} +- [`Promise.reject(raison)`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise/reject) - : Renvoie un objet `Promise` qui est rompue avec la raison donnée. -- {{jsxref("Promise.resolve", "Promise.resolve(valeur)")}} - - : Renvoie un objet `Promise` qui est tenue (résolue) avec la valeur donnée. Si la valeur possède une méthode `then`, la promesse renvoyée « suivra » cette méthode pour arriver dans son état, sinon la promesse renvoyée sera tenue avec la valeur fournie. Généralement, quand on veut savoir si une valeur est une promesse, on utilisera {{jsxref("Promise.resolve","Promise.resolve(valeur)")}} et on travaillera avec la valeur de retour en tant que promesse. - -## Prototype pour `Promise` +- [`Promise.resolve(valeur)`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise/resolve) + - : Renvoie un objet `Promise` qui est tenue (résolue) avec la valeur donnée. Si la valeur possède une méthode `then`, la promesse renvoyée « suivra » cette méthode pour arriver dans son état, sinon la promesse renvoyée sera tenue avec la valeur fournie. Généralement, quand on veut savoir si une valeur est une promesse, on utilisera [`Promise.resolve(valeur)`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise/resolve) et on travaillera avec la valeur de retour en tant que promesse. -### Propriétés +### Méthodes d'instance -{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise/prototype','Propriétés')}} +- [`Promise.prototype.catch()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise/catch) + - : Ajoute une fonction de rappel comme gestionnaire d'échec à la promesse et renvoie une nouvelle promesse dont la valeur de résolution est la valeur de retour de la fonction de rappel si cette dernière est appelée ou sinon la valeur de résolution originale de la promesse si celle-ci a réussi. +- [`Promise.prototype.then()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise/then) + - : Ajoute un gestionnaire de succès et un gestionnaire d'échec à la promesse et renvoie une nouvelle promesse qui se résout avec la valeur de retour du gestionnaire appelé ou avec la valeur de résolution originale si la promesse n'a pas été gérée (dans le cas où `onFulfilled` ou `onRejected` n'est pas une fonction). +- [`Promise.prototype.finally()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise/finally) + - : Ajoute un gestionnaire à la promesse et renvoie une nouvelle promesse qui est résolue lors de la résolution de la première promesse. Le gestionnaire est appelé quand la première promesse est acquittée, qu'elle ait réussi ou non. -### Méthodes - -{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise/prototype','Méthodes')}} +>**Note :** Voir [le guide sur les micro-tâches](/fr/docs/Web/API/HTML_DOM_API/Microtask_guide) pour en savoir plus sur la façon dont ces méthodes utilisent la queue et les services de micro-tâches. ## Exemples -### Créer une promesse - -Pour créer une promesse, on utilise l'opérateur `new` et le constructeur. Celui-ci prend en argument une fonction qui prend deux fonctions en paramètres. La première est appelée quand la tâche asynchrone est correctement terminée et la seconde est appelée quand la tâche échoue : +### Exemple simple ```js -const maPremierePromesse = new Promise((resolve, reject) => { - // réaliser une tâche asynchrone et appeler : - - // resolve(uneValeur); // si la promesse est tenue - // ou - // reject("raison d'echec"); // si elle est rompue +let maPremierePromesse = new Promise((resolve, reject) => { + // On appelle resolve(...) lorsque notre action asynchrone + // a réussi et reject(...) lorsqu'elle a échoué. + // Dans cet exemple, on utilise setTimeout(...) pour simuler + // du code asynchrone. En situation réelle, on utiliserait + // plutôt XHR ou une API Web asynchrone. + setTimeout( function() { + resolve("Succès !") // Tout s'est bien passé ! + }, 250) +}) + +maPremierePromesse.then((messageReussite) => { + // messageReussite correspond à ce qui a été passé à + // la fonction resolve(...) ci-avant. + console.log("Youpi ! " + messageReussite) }); ``` -On peut ainsi obtenir des fonctions asynchrones en renvoyant une promesse : +### Exemple avec plusieurs situations + +Cet exemple illustre différentes techniques d'utilisation des promesses et différentes situations qui peuvent se produire. + +En bas de l'exemple, on a une chaîne de promesses. Dans cet exemple, on utilise `new Promise()` pour la première promesse, mais en pratique, cela proviendrait vraisemblablement d'une fonction d'une API qui renvoie une promesse. + +La fonction `tetheredGetNumber()` illustre un générateur de promesse qui utilise `reject()` lors d'un appel asynchrone ou dans la fonction de rappel (ou dans les deux). La fonction `promiseGetWord()` illustre comment une fonction d'API peut générer et renvoyer une promesse de façon autonome. + +On notera que la fonction `troubleWithGetNumber()` finit avec `throw()`. En effet, l'exécution d'une chaîne de promesse se poursuit au travers des `.then()`, même après une erreur, sans "throw()", l'erreur pourrait sembler traitée. C'est pourquoi on voit parfois l'omission de la fonction de rappel des rejets dans les différents `.then()` et une seule fonction de rappel pour gérer les échecs dans le `catch()` final. Ici, on lève une exception avec une valeur spéciale par simplicité, mais une erreur spécialisée serait plus appropriée. + +Le code qui suit peut être exécuté dans NodeJS. N'hésitez pas à le manipuler et à tester pour mieux comprendre comment les erreurs surviennent. Pour forcer les erreurs, vous pouvez changer la valeur de `SEUIL_A`. ```js -function maFonctionAsynchrone(url) { - return new Promise((resolve, reject) => { - const xhr = new XMLHttpRequest(); - xhr.open("GET", url); - xhr.onload = () => resolve(xhr.responseText); - xhr.onerror = () => reject(xhr.statusText); - xhr.send(); - }); +"use strict"; + +// Pour tester la gestion d'erreur, on a un seuil +// qui provoquera des erreurs aléatoirement +const SEUIL_A = 8; // Abaissez ce seuil à 0 pour forcer les erreurs + +function tetheredGetNumber(resolve, reject) { + try { + setTimeout( + function() { + const randomInt = Date.now(); + const value = randomInt % 10; + try { + if(value >= SEUIL_A) { + throw new Error(`Trop grand : ${value}`); + } + } catch(msg) { + reject(`Erreur dans le callback ${msg}`); + } + resolve(value); + return; + }, 500); + // Vous pouvez expérimenter en décommentant le 'throw' + // qui suit + } catch(err) { + reject(`Erreur à l'initialisation : ${err}`); + } + return; +} + +function determineParity(value) { + const isOdd = value % 2 ? true : false ; + const parityInfo = { theNumber: value, isOdd: isOdd }; + return parityInfo; +} + +function troubleWithGetNumber(reason) { + console.error(`Problème pour avoir le nombre : ${reason}`); + throw -999; // on doit utiliser throw pour maintenir l'état d'erreur +} + +function promiseGetWord(parityInfo) { + + const tetheredGetWord = function(resolve,reject) { + const theNumber = parityInfo.theNumber; + const seuil_B = SEUIL_A - 1; + if(theNumber >= seuil_B) { + reject(`Toujours trop grand : ${theNumber}`); + } else { + parityInfo.wordEvenOdd = parityInfo.isOdd ? 'impair' : 'pair'; + resolve(parityInfo); + } + return; + } + return new Promise(tetheredGetWord); } + +(new Promise(tetheredGetNumber)) + .then(determineParity,troubleWithGetNumber) + .then(promiseGetWord) + .then((info) => { + console.log("On a eu : ",info.theNumber," , ", info.wordEvenOdd); + return info; + }) + .catch((reason) => { + if(reason === -999) { + console.error("Erreur précédemment gérée"); + } + else { + console.error(`Problème avec promiseGetWord(): ${reason}`); + } + }) + .finally((info) => console.log("C'est fini.")); ``` ### Exemple interactif +Dans le court exemple qui suit, on illustre le mécanisme d'une `Promise`. La méthode `testPromise()` est appelée chaque fois qu'on clique sur l'élément [`<button>`](/fr/docs/Web/HTML/Element/Button). Cette méthode crée une promesse qui sera tenue grâce à la fonction [`setTimeout()`](/fr/docs/Web/API/setTimeout), et avec la valeur comptePromesse (nombre commençant à 1) après `1s` à `3s` (aléatoire). Le constructeur Promise() est utilisé pour créer la promesse. + +Le fait que la promesse soit tenue est simplement enregistré via un _callback_ sur `p1.then()`. Quelques indicateurs illustrent la manière dont la partie synchrone est découplée de la partie asynchrone. + +#### HTML + ```html <button id="btn" type="button">Créer un objet Promise !</button> <div id="log"></div> ``` -Dans le court exemple qui suit, on illustre le mécanisme d'une `Promise`. La méthode `testPromise()` est appelée chaque fois qu'on clique sur l'élément {{HTMLElement("button")}}. Cette méthode crée une promesse qui sera tenue grâce à la fonction {{domxref("window.setTimeout()")}}, et avec la valeur comptePromesse (nombre commançant à 1) après `1s` à `3s` (aléatoire). Le constructeur Promise() est utilisé pour créer la promesse. - -Le fait que la promesse soit tenue est simplement enregistré via un _callback_ sur `p1.then()`. Quelques indicateurs illustrent la manière dont la partie synchrone est découplée de la partie asynchrone. +#### JavaScript ```js 'use strict'; -var comptePromesse = 0; +let comptePromesse = 0; function testPromise() { - var thisComptePromesse = ++comptePromesse; + let thisComptePromesse = ++comptePromesse; - var log = document.getElementById('log'); + let log = document.getElementById('log'); log.insertAdjacentHTML('beforeend', thisComptePromesse + ') Started (<small>Début du code synchrone</small>)<br/>'); // on crée une nouvelle promesse : - var p1 = new Promise( + let p1 = new Promise( // La fonction de résolution est appelée avec la capacité de // tenir ou de rompre la promesse function(resolve, reject) { @@ -164,11 +315,9 @@ function testPromise() { log.insertAdjacentHTML('beforeend', thisComptePromesse + ') Promise made (<small>Fin du code synchrone</small>)<br/>'); } -``` -```js if ("Promise" in window) { - var btn = document.getElementById("btn"); + let btn = document.getElementById("btn"); btn.addEventListener("click", testPromise); } else { log = document.getElementById('log'); @@ -178,26 +327,23 @@ if ("Promise" in window) { L'exemple s'exécute lorsqu'on clique sur le bouton. Pour tester cet exemple, il est nécessaire d'utiliser un navigateur qui supporte les objets `Promise`. En cliquant plusieurs fois sur le bouton en peu de temps, on verra qu'il y a plusieurs promesses tenues les une après les autres. -{{EmbedLiveSample('Exemple_interactif', '500', '200')}} +{{EmbedLiveSample('', '500', '200')}} -## Charger une image en XHR +### Charger une image en XHR -Un autre exemple simple utilisant `Promise` et {{domxref("XMLHttpRequest")}} afin de charger une image est disponible sur le dépôt GitHub MDN [js-examples](https://github.com/mdn/js-examples/tree/master/promises-test). Vous pouvez également [voir le résultat](https://mdn.github.io/js-examples/promises-test/). Chaque étape est commentée afin de vous permettre de suivre l'état de la promesse et l'architecture utilisée avec XHR. +Un autre exemple simple utilisant `Promise` et [`XMLHttpRequest`](/fr/docs/Web/API/XMLHttpRequest) afin de charger une image est disponible sur le dépôt GitHub MDN [js-examples](https://github.com/mdn/js-examples/tree/master/promises-test). Vous pouvez également [voir le résultat](https://mdn.github.io/js-examples/promises-test/). Chaque étape est commentée afin de vous permettre de suivre l'état de la promesse et l'architecture utilisée avec XHR. ## Spécifications -| Spécification | État | Commentaires | -| ---------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------- | -| {{SpecName('ES2015', '#sec-promise-objects', 'Promise')}} | {{Spec2('ES2015')}} | Définition initiale au sein d'un standard ECMA. | -| {{SpecName('ESDraft', '#sec-promise-objects', 'Promise')}} | {{Spec2('ESDraft')}} | | +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("javascript.builtins.Promise")}} +{{Compat}} ## Voir aussi -- [Manipuler les promesses](/fr/docs/Web/JavaScript/Guide/Utiliser_les_promesses) +- [Manipuler les promesses](/fr/docs/Web/JavaScript/Guide/Using_promises) - [Promises/A+ specification](https://promisesaplus.com/) - [Venkatraman.R - JS Promise (Part 1, Basics) ](https://medium.com/@ramsunvtech/promises-of-promise-part-1-53f769245a53)(en anglais) - [Venkatraman.R - JS Promise (Part 2 - Using Q.js, When.js and RSVP.js) ](https://medium.com/@ramsunvtech/js-promise-part-2-q-js-when-js-and-rsvp-js-af596232525c#.dzlqh6ski)(en anglais) diff --git a/files/fr/web/javascript/reference/statements/debugger/index.md b/files/fr/web/javascript/reference/statements/debugger/index.md index 89b0745e47..3001a16cab 100644 --- a/files/fr/web/javascript/reference/statements/debugger/index.md +++ b/files/fr/web/javascript/reference/statements/debugger/index.md @@ -1,12 +1,9 @@ --- title: debugger slug: Web/JavaScript/Reference/Statements/debugger -tags: - - JavaScript - - Reference - - Statement translation_of: Web/JavaScript/Reference/Statements/debugger original_slug: Web/JavaScript/Reference/Instructions/debugger +browser-compat: javascript.statements.debugger --- {{jsSidebar("Statements")}} @@ -14,11 +11,13 @@ L'instruction **`debugger`** permet de faire appel à un outil de débogage (qui ## Syntaxe - debugger; +```js +debugger; +``` ## Exemples -Dans l'exemple qui suit, on utilise un code avec l'instruction `debugger` qui permet de démarrer un débogueur (s'il existe) lorsque la fonction est appelée : +Dans l'exemple qui suit, on utilise un code avec l'instruction `debugger` qui permet de démarrer un débogueur (s'il existe) lorsque la fonction est appelée : ```js function codeProbablementBogue() { @@ -28,24 +27,18 @@ function codeProbablementBogue() { } ``` -Lors que le débogueur est lancé, l'exécution est interrompue au niveau de l'instruction `debugger`. Cela agit comme un point d'arrêt dans le code du script : +Lorsque le débogueur est lancé, l'exécution est interrompue au niveau de l'instruction `debugger`. Cela agit comme un point d'arrêt dans le code du script : -[](<https://mdn.mozillademos.org/files/6963/Screen Shot 2014-02-07 at 9.14.35 AM.png>) +[](screen_shot_2014-02-07_at_9.14.35_am.png) ## Spécifications -| Spécification | Statut | Commentaires | -| ------------------------------------------------------------------------------------------------ | ---------------------------- | ------------------------------------------- | -| {{SpecName('ESDraft', '#sec-debugger-statement', 'Debugger statement')}} | {{Spec2('ESDraft')}} | | -| {{SpecName('ES6', '#sec-debugger-statement', 'instruction debugger')}} | {{Spec2('ES6')}} | | -| {{SpecName('ES5.1', '#sec-12.15', 'instruction debugger')}} | {{Spec2('ES5.1')}} | Définition initiale | -| {{SpecName('ES3', '#sec-7.5.3', 'instruction debugger')}} | {{Spec2('ES3')}} | | -| {{SpecName('ES1', '#sec-7.4.3', 'instruction debugger')}} | {{Spec2('ES1')}} | Uniquement mentionné comme mot-clé réservé. | +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("javascript.statements.debugger")}} +{{Compat}} ## Voir aussi -- [Le débogueur des outils de développement Firefox](/fr/docs/Outils/Debugger) +- [Le débogueur des outils de développement Firefox](/fr/docs/Tools/Debugger) diff --git a/files/fr/web/javascript/typed_arrays/index.md b/files/fr/web/javascript/typed_arrays/index.md index 4b5c41b0f6..feed691425 100644 --- a/files/fr/web/javascript/typed_arrays/index.md +++ b/files/fr/web/javascript/typed_arrays/index.md @@ -1,60 +1,69 @@ --- title: Les tableaux typés en JavaScript slug: Web/JavaScript/Typed_arrays -tags: - - Advanced - - Guide - - JavaScript - - Typed Arrays translation_of: Web/JavaScript/Typed_arrays original_slug: Web/JavaScript/Tableaux_typés --- {{JsSidebar("Advanced")}} -Les tableaux typés JavaScript sont des objets semblables à des tableaux qui permettent d'accéder à des données binaires brutes. Pour rappel, les objets {{jsxref("Array")}} qui représentent des tableaux en JavaScript peuvent être agrandis ou réduits dynamiquement et permettent de stocker n'importe quelle valeur JavaScript. Afin que la manipulation de ces objets soit efficace, le moteur JavaScript applique un certain nombre d'optimisations. Cependant, avec les avancées réalisées (telles que les flux audio et vidéo avec WebRTC et les WebSockets), il devient nécessaire de pouvoir manipuler des données binaires brutes au sein de tableaux typés, c'est pour ça que ces objets ont été introduits. +Les **tableaux typés JavaScript** sont des objets semblables à des tableaux qui fournissent un mécanisme pour lire et écrire des données binaires brutes dans des tampons mémoires. -Ne pas confondre les tableaux typés et les tableaux « classiques » ({{jsxref("Array")}}). En effet, la méthode {{jsxref("Array.isArray()")}} renverra `false` lorsqu'elle sera utilisée sur un tableau typé. De plus, certaines des méthodes des tableaux « classiques » ne sont pas disponibles pour les tableaux typés (par exemple `push` et `pop`). +Les objets [`Array`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array) qui représentent des tableaux en JavaScript peuvent être agrandis ou réduits dynamiquement et permettent de stocker n'importe quelle valeur JavaScript. Afin que la manipulation de ces objets soit efficace, le moteur JavaScript applique un certain nombre d'optimisations. Cependant, avec les avancées réalisées (telles que les flux audio et vidéo avec WebRTC et les WebSockets), il devient nécessaire de pouvoir manipuler des données binaires brutes au sein de tableaux typés, c'est pour ça que ces objets ont été introduits. Chaque élément d'un tableau typé JavaScript est une valeur binaire exprimée sous l'un des formats pris en charge (d'entiers représentés sur 8 bits jusqu'à des nombres flottants sur 64 bits). -## Tampon de mémoire et vue : l'architecture des tableaux typés +Ne pas confondre les tableaux typés et les tableaux « classiques » ([`Array`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array)). En effet, la méthode [`Array.isArray()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray) renverra `false` lorsqu'elle sera utilisée sur un tableau typé. De plus, certaines des méthodes des tableaux « classiques » ne sont pas disponibles pour les tableaux typés (par exemple `push` et `pop`). -Afin de permettre une meilleure efficacité et une meilleure flexibilité, l'implémentation des tableaux typés JavaScript est séparée entre : les **tampons de mémoire (_buffers_)** d'une part et **les vues (_views_)** d'autre part. Un tampon de mémoire, implémenté avec l'objet {{jsxref("ArrayBuffer")}}, est un objet qui représente un fragment de données, il n'a pas de format à proprement parler et n'offre aucune fonctionnalité pour accéder à son contenu. Afin d'accéder à la mémoire contenue dans le tampon, on doit utiliser une vue. Une vue fournit un contexte (c'est-à-dire un type de donnée, un emplacement pour le début de la lecture (_offset_) et un nombre d'éléments ; c'est ce contexte qui permet de définir le tableau typé. +## Tampon de mémoire et vue : l'architecture des tableaux typés - +Afin de permettre une meilleure efficacité et une meilleure flexibilité, l'implémentation des tableaux typés JavaScript est séparée entre : les **tampons de mémoire (<i lang="en">buffers</i>)** d'une part et **les vues (<i lang="en">views</i>)** d'autre part. Un tampon de mémoire, implémenté avec l'objet [`ArrayBuffer`](/fr/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer), est un objet qui représente un fragment de données, il n'a pas de format à proprement parler et n'offre aucune fonctionnalité pour accéder à son contenu. Afin d'accéder à la mémoire contenue dans le tampon, on doit utiliser une vue. Une vue fournit un contexte (c'est-à-dire un type de donnée, un emplacement pour le début de la lecture (<i lang="en">offset</i>) et un nombre d'éléments ; c'est ce contexte qui permet de définir le tableau typé. + + ### `ArrayBuffer` -Le type {{jsxref("ArrayBuffer")}} est un type de données générique pour représenter un tampon de données de longueur fixe. Le contenu d'un `ArrayBuffer` ne peut pas être manipulé directement, il faut pour cela créer une vue sous forme d'un tableau typé ou une vue {{jsxref("DataView")}} qui représente le tampon dans un format donné et utiliser cet objet pour lire et écrire du contenu dans le tampon de données. +Le type [`ArrayBuffer`](/fr/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) est un type de données générique pour représenter un tampon de données de longueur fixe. Le contenu d'un `ArrayBuffer` ne peut pas être manipulé directement, il faut pour cela créer une vue sous forme d'un tableau typé ou une vue [`DataView`](/fr/docs/Web/JavaScript/Reference/Global_Objects/DataView) qui représente le tampon dans un format donné et utiliser cet objet pour lire et écrire du contenu dans le tampon de données. ### Les vues sous forme de tableaux typés -Les tableaux typés qui sont les vues sur ces tampons de mémoire possèdent des noms explicites correspondant aux types numériques habituels tels que `Int8`, `Uint32`, `Float64` et ainsi de suite. Il existe un type de tableau typé spécial, `Uint8ClampedArray`. Ce type permet de ramener (_clamp_) les valeurs observées entre 0 et 255. Cela peut notamment être utilisé pour [traiter les données d'un canvas](/fr/docs/Web/API/ImageData) par exemple. - -{{page("/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray", "Les_objets_TypedArray")}} +Les tableaux typés qui sont les vues sur ces tampons de mémoire possèdent des noms explicites correspondant aux types numériques habituels tels que `Int8`, `Uint32`, `Float64` et ainsi de suite. Il existe un type de tableau typé spécial, `Uint8ClampedArray`. Ce type permet de ramener (<i lang="en">clamp</i>) les valeurs observées entre 0 et 255. Cela peut notamment être utilisé pour [traiter les données d'un canvas](/fr/docs/Web/API/ImageData) par exemple. + +| Type | Intervalle de valeurs | Taille exprimée en octets | Description | Type Web IDL | Type équivalent en C | +| ---------------------------------------- | --------------------------------------------------------------- | ------------- | ---------------------------------------------------------------------------- | --------------------- | ------------------------------- | +| [`Int8Array`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Int8Array) | `-128` à `127` | 1 | Entier signé avec complément à deux sur 8 bits | `byte` | `int8_t` | +| [`Uint8Array`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array) | `0` à `255` | 1 | Entier non-signé sur 8 bits | `octet` | `uint8_t` | +| [`Uint8ClampedArray`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Uint8ClampedArray) | `0` à `255` | 1 | Entier non-signé sur 8 bit (écrété) | `octet` | `uint8_t` | +| [`Int16Array`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Int16Array) | `-32768` à `32767` | 2 | Entier signé avec complément à deux sur 16 bits | `short` | `int16_t` | +| [`Uint16Array`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Uint16Array) | `0` à `65535` | 2 | Entier non-signé sur 16 bits | `unsigned short` | `uint16_t` | +| [`Int32Array`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Int32Array) | `-2147483648` à `2147483647` | 4 | Entier signé avec complément à deux sur 32 bits | `long` | `int32_t` | +| [`Uint32Array`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Uint32Array) | `0` à `4294967295` | 4 | Entier non-signé sur 32 bits | `unsigned long` | `uint32_t` | +| [`Float32Array`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Float32Array) | `-3.4E38` à `3.4E38` et `1.2E-38` est le plus petit nombre positif | 4 | Nombre flottant sur 32 bits IEEE 754 (7 chiffres significatifs, ex. `1.123456`) | `unrestricted float` | `float` | +| [`Float64Array`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Float64Array) | `-1.8E308` à `1.8E308` et `5E-324` est le plus petit nombre positif | 8 | Nombre flottant sur 64 bits IEEE 754 (16 chiffres significatifs, ex. `1.123...15`) | `unrestricted double` | `double` | +| [`BigInt64Array`](/fr/docs/Web/JavaScript/Reference/Global_Objects/BigInt64Array) | `-2^63` à `2^63 - 1` | 8 | Entier signé avec complément à deux sur 64 bits | `bigint` | `int64_t (signed long long)` | +| [`BigUint64Array`](/fr/docs/Web/JavaScript/Reference/Global_Objects/BigUint64Array) | `0` à `2^64 - 1` | 8 | Entier non-signé sur 64 bits | `bigint` | `uint64_t (unsigned long long)` | ### `DataView` -Le type {{jsxref("DataView")}} permet de créer des objets qui seront des interfaces (bas niveau) pour lire/écrire des données dans le tampon de mémoire. Cela peut par exemple être utile lorsqu'on souhaite manipuler différents types de données. Les vues sous forme de tableaux typés suivent le même boutisme (endianness) que la plate-forme. Avec un objet `DataView`, il est possible de définir l'ordre des octets à considérer (qui sera par défaut du grand boutisme (_big-endian_) mais qui pourra être défini en petit boutisme (_little-endian_) dans les différentes méthodes d'accès/écriture). +Le type [`DataView`](/fr/docs/Web/JavaScript/Reference/Global_Objects/DataView) permet de créer des objets qui seront des interfaces (bas niveau) pour lire/écrire des données dans le tampon de mémoire. Cela peut par exemple être utile lorsqu'on souhaite manipuler différents types de données. Les vues sous forme de tableaux typés suivent le même boutisme (<i lang="en">endianness</i>) que la plate-forme. Avec un objet `DataView`, il est possible de définir l'ordre des octets à considérer (qui sera par défaut du grand boutisme (<i lang="en">big-endian</i>) mais qui pourra être défini en petit boutisme (<i lang="en">little-endian</i>) dans les différentes méthodes d'accès/écriture). ## Les API Web utilisant les tableaux typés - [`FileReader.prototype.readAsArrayBuffer()`](/fr/docs/Web/API/FileReader) - : La méthode `FileReader.prototype.readAsArrayBuffer()` permet de lire le contenu d'un [`Blob`](/fr/docs/Web/API/Blob) ou [`File`](/fr/docs/Web/API/File) donné. - [`XMLHttpRequest.prototype.send()`](/fr/docs/Web/API/XMLHttpRequest) - - : `XMLHttpRequest` et sa méthode `send()` peuvent désormais être utilisées avec un argument qui est un tableau typé ou un {{jsxref("ArrayBuffer")}}. + - : `XMLHttpRequest` et sa méthode `send()` peuvent désormais être utilisées avec un argument qui est un tableau typé ou un [`ArrayBuffer`](/fr/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer). - [`ImageData.data`](/fr/docs/Web/API/ImageData) - - : Un objet du type {{jsxref("Uint8ClampedArray")}} qui représente un tableau unidimensionnel contenant les données de l'image dans l'ordre RGBA, les entiers utilisés sont compris entre `0` et `255` (au sens large). + - : Un objet du type [`Uint8ClampedArray`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Uint8ClampedArray) qui représente un tableau unidimensionnel contenant les données de l'image dans l'ordre RGBA, les entiers utilisés sont compris entre `0` et `255` (au sens large). ## Exemples ### Utiliser les vues et les tampons -Tout d'abord, il faut créer un tampon (_buffer_). Ici, on crée un buffer de 16 octets : +Tout d'abord, il faut créer un tampon (<i lang="en">buffer</i>). Ici, on crée un tampon de 16 octets : ```js let buffer = new ArrayBuffer(16); ``` -Grâce à cette instruction, on dispose désormaits d'un fragment de mémoire dont tous les octets sont pré-initialisés à 0. Si c'est déjà une bonne chose de faite, cela n'a pas grande utilité. On peut déjà confirmer que la longueur du tampon est bien celle spécifiée initialement : +Grâce à cette instruction, on dispose désormais d'un fragment de mémoire dont tous les octets sont pré-initialisés à 0. Si c'est déjà une bonne chose de faite, cela n'a pas grande utilité. On peut déjà confirmer que la longueur du tampon est bien celle spécifiée initialement : ```js if (buffer.byteLength === 16) { @@ -64,13 +73,13 @@ if (buffer.byteLength === 16) { } ``` -Avant qu'on puisse travailler avec ce tampon, il faut créer une vue. Ici, on crée une vue qui traite le tampon comme un tableau d'entiers signés représentés sur 32 bits : +Avant qu'on puisse travailler avec ce tampon, il faut créer une vue. Ici, on crée une vue qui traite le tampon comme un tableau d'entiers signés représentés sur 32 bits : ```js let int32View = new Int32Array(buffer); ``` -Désormais, on peut accéder aux éléments du tableau typé comme avec un tableau classique : +Désormais, on peut accéder aux éléments du tableau typé comme avec un tableau classique : ```js for (let i = 0; i < int32View.length; i++) { @@ -78,11 +87,11 @@ for (let i = 0; i < int32View.length; i++) { } ``` -Ce fragment de code permet de remplir les 4 éléments du tableau (4 éléments faisant chacun 4 octets, ce qui remplit les 16 octets du tableau) avec les valeurs 0, 2, 4, et 6. +Ce fragment de code permet de remplir les 4 éléments du tableau (4 éléments faisant chacun 4 octets, ce qui remplit les 16 octets du tableau) avec les valeurs `0`, `2`, `4`, et `6`. ### Plusieurs vues sur les mêmes données -On commence à avoir des cas d'utilisation intéressants quand on peut créer plusieurs vues sur les mêmes données. Ainsi, en utilisant le code précédent, on peut continuer avec : +On commence à avoir des cas d'utilisation intéressants quand on peut créer plusieurs vues sur les mêmes données. Ainsi, en utilisant le code précédent, on peut continuer avec : ```js let int16View = new Int16Array(buffer); @@ -92,22 +101,22 @@ for (let i = 0; i < int16View.length; i++) { } ``` -Ici, on crée une vue pour des éléments sur 16 bits qui partage le même tampon que la vue précédente (qui était une vue avec des éléments sur 32 bits) et on affiche les valeurs contenues dans le tampon sous formes d'entiers représentés sur 16 bits. Le résultat obtenu est ici 0, 0, 2, 0, 4, 0, 6, 0. +Ici, on crée une vue pour des éléments sur 16 bits qui partage le même tampon que la vue précédente (qui était une vue avec des éléments sur 32 bits) et on affiche les valeurs contenues dans le tampon sous formes d'entiers représentés sur 16 bits. Le résultat obtenu est ici `0`, `0`, `2`, `0`, `4`, `0`, `6`, `0`. -On peut aller encore plus loin, par exemple : +On peut aller encore plus loin, par exemple : ```js int16View[0] = 32; console.log("L'élément 0 du tableau 32 bits est désormais " + int32View[0]); ``` -Le résultat obtenu sera "L'élément 0 du tableau 32 bits est désormais 32". Autrement dit, les deux tableaux typés construits ne sont que des vues sur le même tampon de données. Ce genre de manipulation peut être effectuée avec n'importe quel [type de vue](/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Les_objets_TypedArray). +Le résultat obtenu sera "L'élément 0 du tableau 32 bits est désormais 32". Autrement dit, les deux tableaux typés construits ne sont que des vues sur le même tampon de données. Ce genre de manipulation peut être effectué avec n'importe quel [type de vue](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#les_objets_typedarray). ### Manipuler des structures de données complexes -En combinant un même tampon et plusieurs vue de différents types, chacune commençant à un endroit différent dans le tampon, il est possible d'interagir avec des données qui représentent des objets contenant plusieurs types de données. Cela permet entre autres d'intéragir avec des structures de données complexes telles que [WebGL](/fr/docs/Web/WebGL), des fichiers de données, des structures C (notamment avec [js-ctypes](/fr/docs/Mozilla/js-ctypes)). +En combinant un même tampon et plusieurs vues de différents types, chacune commençant à un endroit différent dans le tampon, il est possible d'interagir avec des données qui représentent des objets contenant plusieurs types de données. Cela permet entre autres d'interagir avec des structures de données complexes telles que [WebGL](/fr/docs/Web/API/WebGL_API), ou des fichiers de données. -Si on a cette structure C : +Si on a cette structure C : ```cpp struct uneStruct { @@ -117,7 +126,7 @@ struct uneStruct { }; ``` -On peut réceptionner les données d'un tampon qui contiendrait des objets de ce type grâce à: +On peut réceptionner les données d'un tampon qui contiendrait des objets de ce type grâce à : ```js let buffer = new ArrayBuffer(24); @@ -135,31 +144,31 @@ On peut ensuite accéder au montant lié à un utilisateur, par exemple, avec `v ### Convertir un tableau typé en un tableau normal -Dans certains cas d'utilisation, après avoir traité un tableau typé, il peut être utile de convertir le tableau typé en un tableau normal ({{jsxref("Array")}}) afin de bénificier des propriétés du prototype d'`Array`. Pour cela, on peut utiliser la méthode {{jsxref("Array.from")}}. Si `Array.from()` n'est pas disponible, on peut effectuer cette conversion de la façon suivante : +Dans certains cas d'utilisation, après avoir traité un tableau typé, il peut être utile de convertir le tableau typé en un tableau normal ([`Array`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array)) afin de bénéficier des propriétés du prototype d'`Array`. Pour cela, on peut utiliser la méthode [`Array.from`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/from). Si `Array.from()` n'est pas disponible, on peut effectuer cette conversion de la façon suivante : ```js -let tableauTypé = new Uint8Array([1, 2, 3, 4]), - tableauNormal = Array.prototype.slice.call(tableauTypé); -tableauNormal.length === 4; -tableauNormal.constructor === Array; +const tableauType = new Uint8Array([1, 2, 3, 4]); +const tableauNormal = Array.from(tableauType); ``` -## Spécifications +On peut tout aussi bien utiliser [la syntaxe de décomposition d'un tableau](/fr/docs/Web/JavaScript/Reference/Operators/Spread_syntax) : -| Spécification | État | Commentaires | -| ------------------------------------------------------------------------------------------------ | -------------------------------- | ----------------------------------------------- | -| {{SpecName('Typed Array')}} | {{Spec2('Typed Array')}} | Remplacée par ECMAScript 2015. | -| {{SpecName('ES2015', '#sec-typedarray-objects', 'TypedArray Objects')}} | {{Spec2('ES2015')}} | Définition initiale au sein d'un standard ECMA. | -| {{SpecName('ESDraft', '#sec-typedarray-objects', 'TypedArray Objects')}} | {{Spec2('ESDraft')}} | | +```js +const tableauType = new Uint8Array([1, 2, 3, 4]); +const tableauNormal = [...tableauType]; +``` -## Compatibilité des navigateurs +Et si `Array.from()` n'est pas pris en charge, on pourra recourir à : + +```js +const tableauType = new Uint8Array([1, 2, 3, 4]); +const tableauNormal = Array.prototype.slice.call(tableauType); +``` -{{Compat("javascript.builtins.Int8Array")}} ## Voir aussi -- [Manipuler des chaînes encodées en base 64 avec des `ArrayBuffer`s ou des tableaux typés](/fr/docs/Décoder_encoder_en_base64#Annexe_.3A_D.C3.A9coder_une_cha.C3.AEne_en_base64_en_un_objet_Uint8Array_ou_ArrayBuffer) -- [`StringView` – une représentation des chaînes semblable à la réprésentation C, utilisant des tableaux typés](/fr/docs/Code_snippets/StringView) -- [Manipuler les pixels d'un canvas plus efficacement avec les tableaux typés](https://hacks.mozilla.org/2011/12/faster-canvas-pixel-manipulation-with-typed-arrays) (en anglais) -- [Les tableaux typés : des données binaires arrivent dans le navigateur](https://www.html5rocks.com/en/tutorials/webgl/typed_arrays) (en anglais) -- {{Glossary("Boutisme")}} +- [Manipuler des chaînes encodées en base 64 avec des `ArrayBuffer`s ou des tableaux typés](/fr/docs/Glossary/Base64#annexe_décoder_une_chaîne_en_base64_en_un_objet_uint8array_ou_arraybuffer) +- [Manipuler les pixels d'un canevas plus efficacement avec les tableaux typés](https://hacks.mozilla.org/2011/12/faster-canvas-pixel-manipulation-with-typed-arrays) (en anglais) +- [Les tableaux typés : des données binaires arrivent dans le navigateur](https://www.html5rocks.com/en/tutorials/webgl/typed_arrays) (en anglais) +- [Boutisme sur le glossaire MDN](/fr/docs/Glossary/Endianness) |