diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
commit | 33058f2b292b3a581333bdfb21b8f671898c5060 (patch) | |
tree | 51c3e392513ec574331b2d3f85c394445ea803c6 /files/fr/web/javascript/reference/opérateurs | |
parent | 8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff) | |
download | translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2 translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip |
initial commit
Diffstat (limited to 'files/fr/web/javascript/reference/opérateurs')
40 files changed, 7891 insertions, 0 deletions
diff --git a/files/fr/web/javascript/reference/opérateurs/addition/index.html b/files/fr/web/javascript/reference/opérateurs/addition/index.html new file mode 100644 index 0000000000..39f76c434d --- /dev/null +++ b/files/fr/web/javascript/reference/opérateurs/addition/index.html @@ -0,0 +1,83 @@ +--- +title: Addition (+) +slug: Web/JavaScript/Reference/Opérateurs/Addition +tags: + - JavaScript + - Opérateur + - Reference +translation_of: Web/JavaScript/Reference/Operators/Addition +--- +<div>{{jsSidebar("Operators")}}</div> + +<div>L'opérateur d'addition (<code>+</code>) effectue la somme de deux opérandes numériques ou la concaténation de chaînes de <span class="ver" title="">caractères</span>.</div> + + + +<div>{{EmbedInteractiveExample("pages/js/expressions-addition.html")}}</div> + +<div></div> + +<p class="hidden">La source de cet exemple interactif est stockée dans un référentiel GitHub. Si vous souhaitez contribuer au projet d'exemples interactifs, veuillez cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et envoyez-nous une pull request.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox notranslate"><strong>Opérateur:</strong> <var>x</var> + <var>y</var> +</pre> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Addition_numérique">Addition numérique</h3> + +<pre class="brush: js notranslate">// Nombre + Nombre -> addition +1 + 2 // 3 + +// Booléen + Nombre -> addition +true + 1 // 2 + +// Booléen + Booléen -> addition +false + false // 0 +</pre> + +<h3 id="Concaténation_de_chaînes">Concaténation de chaînes</h3> + +<pre class="brush: js notranslate">// String + String -> concatenation +'foo' + 'bar' // "foobar" + +// Number + String -> concatenation +5 + 'foo' // "5foo" + +// String + Boolean -> concatenation +'foo' + false // "foofalse"</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-addition-operator-plus', 'Addition operator')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div> + +<p>{{Compat("javascript.operators.addition")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Subtraction">Opérateur de soustraction</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Division">Opérateur de division</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Multiplication">Opérateur de multiplication</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Remainder">Opérateur reste</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Exponentiation">Opérateur d'exponentiation</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Increment">Opérateur d'incrémentation</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Decrement">Opérateur de décrémentation</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Unary_negation">Opérateur de négation unaire</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Unary_plus">Opérateur unaire plus</a></li> +</ul> diff --git a/files/fr/web/javascript/reference/opérateurs/addition_avec_assignement/index.html b/files/fr/web/javascript/reference/opérateurs/addition_avec_assignement/index.html new file mode 100644 index 0000000000..5377d00b35 --- /dev/null +++ b/files/fr/web/javascript/reference/opérateurs/addition_avec_assignement/index.html @@ -0,0 +1,58 @@ +--- +title: Addition avec assignement (+=) +slug: Web/JavaScript/Reference/Opérateurs/Addition_avec_assignement +tags: + - Fonctionnalité du language + - JavaScript + - Opérateur + - Opérateur d'assignement + - Reference +translation_of: Web/JavaScript/Reference/Operators/Addition_assignment +--- +<p>{{jsSidebar("Operators")}}</p> + +<p>L'opérateur d'addition avec assignement (<code>+=</code>) permet d'ajouter une valeur à une variable. Le type des deux valeurs permet de définir si l'utilisation de cet opérateur les concatènera ou les additionnera.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-addition-assignment.html")}}</div> + +<div></div> + +<p class="hidden">La source de cet exemple interactif est stocké sur GitHub. Si vous voulez contribuer au projet de l'exemple interactif, merci de cloner ceci : <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et nous envoyer une "pull-request".</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="notranslate"><strong>Opérateur :</strong> x += y +<strong>Signifie :</strong> x = x + y</pre> + +<h2 id="Examples">Examples</h2> + +<h3 id="Utilisation_de_lopérateur">Utilisation de l'opérateur</h3> + +<pre class="brush: js notranslate">// On considère les variables suivantes : +var chaine = "Hello"; +var nombre = 5; +var booleen = true; + +// Nombre + Nombre +nombre += 2; +// 7 + +// Booléen + Nombre +booleen += 1; +// 2 + +// Booléen + Booléen +booleen += false; +// 1 + +// Nombre + Chaîne +nombre += "World"; +// "5World" + +// Chaîne + Booléen +chaine += false; +// "Hellofalse" + +// Chaîne + Chaîne +chaine += "World" +// "HelloWorld"</pre> diff --git a/files/fr/web/javascript/reference/opérateurs/affecter_par_décomposition/index.html b/files/fr/web/javascript/reference/opérateurs/affecter_par_décomposition/index.html new file mode 100644 index 0000000000..cdce16f559 --- /dev/null +++ b/files/fr/web/javascript/reference/opérateurs/affecter_par_décomposition/index.html @@ -0,0 +1,424 @@ +--- +title: Affecter par décomposition +slug: Web/JavaScript/Reference/Opérateurs/Affecter_par_décomposition +tags: + - ECMAScript 2015 + - JavaScript + - Opérateur + - Reference +translation_of: Web/JavaScript/Reference/Operators/Destructuring_assignment +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>L'<strong>affectation par décomposition </strong>(<em>destructuring </em>en anglais) est une expression JavaScript qui permet d'extraire (<em>unpack</em> en anglais) des données d'un tableau ou d'un objet grâce à une syntaxe dont la forme ressemble à la structure du tableau ou de l'objet.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-destructuringassignment.html")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="brush: js">let a, b, rest; +[a, b] = [10, 20]; +console.log(a); // 10 +console.log(b); // 20 + +[a, b, ...rest] = [10, 20, 30, 40, 50]; +console.log(a); // 10 +console.log(b); // 20 +console.log(rest); // [30, 40, 50] + +({a, b} = {a: 10, b: 20}); +console.log(a); // 10 +console.log(b); // 20 + +// Proposition de syntaxe (niveau 4) +({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}); +console.log(a); // 10 +console.log(b); // 20 +console.log(rest); // {c: 30, d: 40} +</pre> + +<div class="note"> +<p><strong>Note :</strong> <code>{a, b} = {a:1, b:2}</code> n'est pas syntaxiquement valide en tant que tel, en effet <code>{a, b}</code> est ici considéré comme un bloc et non comme un objet littéral.</p> + +<p>Cependant, <code>({a, b} = {a:1, b:2})</code> sera valide comme pour la forme <code>let {a, b} = {a:1, b:2}</code>.</p> +</div> + +<h2 id="Description">Description</h2> + +<p>Ces expressions utilisant des littéraux pour les <a href="/fr/docs/Web/JavaScript/Guide/Valeurs,_variables,_et_littéraux#Litt.C3.A9raux_objets">objets</a> ou les <a href="/fr/docs/Web/JavaScript/Guide/Valeurs,_variables,_et_littéraux#Litt.C3.A9raux_de_tableaux">tableaux</a> permettent de créer simplement des données regroupées. Une fois créées, on peut les utiliser de n'importe quelle façon, y compris comme valeur renvoyée par une fonction.</p> + +<pre class="brush: js">const x = [1, 2, 3, 4, 5]; // On crée un "paquet" de données +const [y, z] = x; // On utilise l'affectation par décomposition +console.log(y); // 1 +console.log(z); // 2 +</pre> + +<p>L'intérêt de l'assignation par décomposition est de pouvoir lire une structure entière en une seule instruction. Il y a également d'autres choses que vous pouvez faire avec cette expression, comme montré dans les exemples ci-dessous.</p> + +<p>Cette syntaxe est semblable aux fonctionnalités offertes par des langages tels que Perl et Python.</p> + +<h2 id="Décomposition_dun_tableau">Décomposition d'un tableau</h2> + +<h3 id="Exemple_simple">Exemple simple</h3> + +<pre class="brush: js">const toto = ["un", "deux", "trois"]; + +// sans utiliser la décomposition +const un = toto[0]; +const deux = toto[1]; +const trois = toto[2]; + +// en utilisant la décomposition +const [un, deux, trois] = toto;</pre> + +<h3 id="Affectation_sans_déclaration">Affectation sans déclaration</h3> + +<p>L'affectation par décomposition peut être effectuée sans qu'il y ait de déclaration directement dans l'instruction d'affectation. Par exemple :</p> + +<pre class="brush: js">let a, b; +[a, b] = [1, 2]; +console.log(a); // 1 +console.log(b); // 2</pre> + +<h3 id="Valeurs_par_défaut">Valeurs par défaut</h3> + +<p>On peut définir une valeur par défaut au cas où la valeur extraite du tableau soit {{jsxref("undefined")}}. Par exemple :</p> + +<pre class="brush: js">let a, b; + +[a = 5, b = 7] = [1]; +console.log(a); // 1 +console.log(b); // 7 +</pre> + +<h3 id="Échange_de_variables">Échange de variables</h3> + +<p>Une fois le fragment de code exécuté, on aura <var>b</var> égal à 1 et <var>a</var> égal à 3. S'il n'avait pas été possible d'utiliser l'affectation par décomposition, l'échange des valeurs aurait nécessité une variable temporaire (pour des données binaires, on aurait pu utiliser une <a class="external" href="https://fr.wikipedia.org/wiki/Permutation_(informatique)#En_utilisant_l.27op.C3.A9ration_XOR">permutation XOR</a>).</p> + +<pre class="brush:js">let a = 1; +let b = 3; + +[a, b] = [b, a]; +console.log(a); // 3 +console.log(b); // 1</pre> + +<h3 id="Renvoyer_plusieurs_valeurs">Renvoyer plusieurs valeurs</h3> + +<p>Grâce à l'affectation par décomposition, les fonctions peuvent renvoyer plusieurs valeurs. Il était déjà possible de renvoyer un tableau mais cela ajoute un nouveau degré de flexibilité.</p> + +<pre class="brush:js">function f() { + return [1, 2]; +} +</pre> + +<p>Les valeurs de retour sont déclarées via une syntaxe semblable à celle utilisée pour déclarer les tableaux, utilisant les crochets. On peut ainsi renvoyer autant de valeurs que souhaité. Dans cet exemple, <code>f()</code> renvoie les valeurs <code>[1, 2]</code>.</p> + +<pre class="brush:js">let a, b; +[a, b] = f(); +console.log("A vaut " + a + " B vaut " + b); +</pre> + +<p>L'instruction <code>[a, b] = f()</code> assigne, dans l'ordre, les résultats de la fonction aux variables représentées entre les crochets. Ainsi, ici <var>a</var> vaut 1 et b vaut 2.</p> + +<p>On peut également récupérer la valeur de retour comme un tableau :</p> + +<pre class="brush:js">const x = f(); +console.log("X vaut " + x); +</pre> + +<p>Et on aura x qui sera égal au tableau contenant 1 et 2.</p> + +<h3 id="Ignorer_certaines_valeurs">Ignorer certaines valeurs</h3> + +<p>On peut également ignorer certaines des valeurs renvoyées qu'on ne souhaiterait pas traiter :</p> + +<pre class="brush:js">function f() { + return [1, 2, 3]; +} + +const [a, , b] = f(); +console.log("A vaut " + a + " B vaut " + b); +</pre> + +<p>Après avoir exécuté ce code, on aura a égal à 1 et b égal à 3. La valeur 2 est ignorée. On peut ignorer n'importe laquelle des valeurs (voire toutes). Par exemple :</p> + +<pre class="brush:js">[,,] = f(); +</pre> + +<h3 id="Exploiter_les_résultats_dune_expression_rationnelle">Exploiter les résultats d'une expression rationnelle</h3> + +<p>Lorsque la méthode <code><a href="/fr/docs/JavaScript/Reference/Objets_globaux/Object/RegExp/Exec">exec()</a></code>, liées aux expressions rationnelles, trouve une correspondance, elle renvoie un tableau qui contient d'abord la partie complète de la chaîne qui correspond puis ensuite les différentes portions correspondant aux différents groupes. L'affectation par décomposition permet de filtrer simplement les valeurs qu'on souhaite exploiter. Ici, on ignore le premier élément qui est la correspondance complète :</p> + +<pre class="brush:js">function parseProtocol(url) { + const parsedURL = /^(\w+)\:\/\/([^\/]+)\/(.*)$/.exec(url); + if (!parsedURL) { + return false; + } + console.log(parsedURL); // ["https://developer.mozilla.org/fr/Web/JavaScript", "https", "developer.mozilla.org", "fr/Web/JavaScript"] + + const [, protocol, fullhost, fullpath] = parsedURL; + return protocol; +} + +console.log(parseProtocol('https://developer.mozilla.org/en-US/Web/JavaScript')); // "https" +</pre> + +<h3 id="Affecter_le_reste_dun_tableau_à_une_variable">Affecter le reste d'un tableau à une variable</h3> + +<p>On peut également utiliser la décomposition d'un tableau afin d'en affecter une partie à une variable :</p> + +<pre class="brush: js">const [a, ...b] = [1, 2, 3]; +console.log(a); // 1 +console.log(b); // [2, 3]</pre> + +<p>Un exception {{jsxref("SyntaxError")}} sera levée si une virgule est laissée à la fin de l'élément du reste du tableau de gauche :</p> + +<pre class="brush: js example-bad">const [a, ...b,] = [1, 2, 3] +// SyntaxError : un élément du reste ne peut pas avoir +// de virgule à la fin</pre> + +<h2 id="Décomposer_un_objet">Décomposer un objet</h2> + +<h3 id="Exemple_simple_2">Exemple simple</h3> + +<pre class="brush: js">const o = {p: 42, q: true}; +const {p, q} = o; + +console.log(p); // 42 +console.log(q); // true + +// Assign new variable names +const {p: toto, q: truc} = o; + +console.log(toto); // 42 +console.log(truc); // true +</pre> + +<h3 id="Affectation_sans_déclaration_2">Affectation sans déclaration</h3> + +<p>Il est possible d'effectuer une affectation par décomposition même si aucune déclaration n'est directement utilisée dans l'instruction d'affectation. Par exemple :</p> + +<pre class="brush: js">let a, b; +({a, b} = {a:1, b:2}); +</pre> + +<div class="note"> +<p><strong>Note :</strong> Les parenthèses <code>( ... )</code> utilisées autour de l'instruction sont nécessaires pour que la partie gauche soit bien interprétée comme un objet littéral et non comme un bloc. Il est également nécessaire d'avoir un point-virgule avant les parenthèses de l'instruction car sinon, ces parenthèses peuvent être interprétées comme un appel de fonction.</p> +</div> + +<h3 id="Affecter_avec_un_nom_différent">Affecter avec un nom différent</h3> + +<p>Lorsqu'on décompose un objet, on peut affecter la variable obtenue sur une variable qui possède un autre nom (que celui de la propriété) :</p> + +<pre class="brush: js">const o = {p: 42, q: true}; +const {p: toto, q: truc} = o; + +console.log(toto); // 42 +console.log(truc); // true</pre> + +<p>Ici, par exemple, <code>const {p: toto} = o</code> prend la propriété <code>p</code> de l'objet <code>o</code> pour l'affecter à une variable locale intitulée <code>toto</code>.</p> + +<h3 id="Valeurs_par_défaut_2">Valeurs par défaut</h3> + +<p>Une variable peut recevoir une valeur par défaut lors de la décomposition si la propriété correspondante de l'objet vaut <code>undefined</code>.</p> + +<pre class="brush: js">const {a = 10; b = 5} = {a: 3}; + +console.log(a); // 3 +console.log(b); // 5</pre> + +<h3 id="Affecter_de_nouveaux_noms_aux_variables_et_fournir_des_valeurs_par_défaut">Affecter de nouveaux noms aux variables et fournir des valeurs par défaut</h3> + +<p>Il est possible d'extraitre une valeur d'un objet pour lui affecter un nouveau nom et lui affecter une valeur par défaut au cas où la valeur extraite vaut <code>undefined</code>.</p> + +<pre class="brush: js">const {a: aa = 10, b: bb = 5} = {a: 3}; + +console.log(aa); // 3 +console.log(bb); // 5</pre> + +<h3 id="Arguments_par_défaut_dune_fonction">Arguments par défaut d'une fonction</h3> + +<h4 id="Version_ES5">Version ES5</h4> + +<pre class="brush: js">function dessinGrapheES5(options) { + options = options === undefined ? {} : options; + var size = options.size === undefined ? 'big' : options.size; + var coords = options.coords === undefined ? { x: 0, y: 0 } : options.coords; + var radius = options.radius === undefined ? 25 : options.radius; + console.log(size, coords, radius); + // seulement ensuite on dessine le graphe +} + +dessinGrapheES5({ + coords: { x: 18, y: 30 }, + radius: 30 +});</pre> + +<h4 id="Version_ES2015">Version ES2015</h4> + +<pre class="brush: js">function dessinGrapheES2015({size = 'big', coords = { x: 0, y: 0 }, radius = 25} = {}) +{ + console.log(size, coords, radius); + // on dessine le graphe +} + +dessinGrapheES2015({ + coords: { x: 18, y: 30 }, + radius: 30 +});</pre> + +<div class="note"> +<p><strong>Note</strong> : Dans la signature de la fonction <code>dessinGrapheES2015</code> ci avant, la valeur décomposée à gauche utilise un objet vide comme opérande droit (<code>{size = 'big', coords = { x: 0, y: 0 }, radius = 25} = {}</code>). On aurait également pu écrire la fonction sans cet objet vide mais, dans ce cas, il aurait fallu au moins un argument pour utiliser la fonction. Avec cette « forme », <code>dessinGrapheES2015()</code> pourra être appelée sans paramètre.</p> +</div> + +<h3 id="Décomposition_imbriquée_avec_objets_et_tableaux">Décomposition imbriquée avec objets et tableaux</h3> + +<pre class="brush:js">const metadata = { + title: "Scratchpad", + translations: [ + { + locale: "de", + localization_tags: [ ], + last_edit: "2014-04-14T08:43:37", + url: "/de/docs/Tools/Scratchpad", + title: "JavaScript-Umgebung" + } + ], + url: "/en-US/docs/Tools/Scratchpad" +}; + +let { title: englishTitle, translations: [{ title: localeTitle }] } = metadata; + +console.log(englishTitle); // "Scratchpad" +console.log(localeTitle); // "JavaScript-Umgebung"</pre> + +<h3 id="Décomposition_et_utilisation_de_for_of">Décomposition et utilisation de <a href="/fr/docs/JavaScript/Référence_JavaScript/Instructions/for...of">for of</a></h3> + +<pre class="brush: js">const personnes = [ + { + nom: "Alain Dupont", + famille: { + mere: "Isabelle Dupont", + pere: "Jean Dupont", + soeur: "Laure Dupont" + }, + age: 35 + }, + { + nom: "Luc Marchetoile", + famille: { + mere: "Patricia Marchetoile", + pere: "Antonin Marchetoile", + frere: "Yann Marchetoile" + }, + age: 25 + } +]; + +for (const {nom: n, famille: { pere: f } } of personnes) { + console.log("Nom : " + n + ", Père : " + f); +} + +// "Nom : Alain Dupont, Père : Jean Dupont" +// "Nom : Luc Marchetoile, Père : Antonin Marchetoile"</pre> + +<h3 id="Décomposer_les_propriétés_dobjets_passés_en_arguments">Décomposer les propriétés d'objets passés en arguments</h3> + +<pre class="brush:js">const user = { + id: 42, + displayName: "jbiche", + fullName: { + firstName: "Jean", + lastName: "Biche" + } +}; + +function userId({id}) { + return id; +} + +function whois({displayName: displayName, fullName: {firstName: name}}){ + console.log(displayName + " est " + name); +} + +console.log("userId: " + userId(user)); w// "userId: 42" +whois(user); // "jbiche est Jean"</pre> + +<p>Cela permet d'accéder directement à <code>id</code>, <code>displayName</code> et <code>firstName</code> depuis l'objet <code>user</code>.</p> + +<h3 id="Les_noms_de_propriétés_calculés_et_la_décomposition">Les noms de propriétés calculés et la décomposition</h3> + +<p>Il est possible d'utiliser des noms de propriétés calculés, comme avec les <a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Initialisateur_objet#Noms_de_propri.C3.A9t.C3.A9s_calcul.C3.A9s">littéraux objets</a>, avec la décomposition.</p> + +<pre class="brush: js">let clef = "z"; +let { [clef]: toto } = { z: "truc" }; + +console.log(toto); // "truc"</pre> + +<h3 id="Syntaxe_du_«_reste_»_et_décomposition_dun_objet">Syntaxe du « reste » et décomposition d'un objet</h3> + +<p><a href="https://github.com/tc39/proposal-object-rest-spread">La proposition de décomposition des propriétés et de la syntaxe du reste dans ECMAScript</a> ajoute <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/paramètres_du_reste">la syntaxe du reste</a> pour la décomposition. La propriété du reste permet de collecter les propriétés énumérables restantes qui n'auraient pas été extraites par la décomposition :</p> + +<pre class="brush: js">let {a, b, ...reste } = {a: 10, b: 20, c: 30, d: 40}; +a; // 10 +b; // 20 +reste; // { c: 30, d: 40 }</pre> + +<h3 id="Gestion_des_identifiants_invalides_comme_noms_de_propriétés">Gestion des identifiants invalides comme noms de propriétés</h3> + +<p>Si besoin, on peut également utiliser la décomposition pour fournir un alias à des noms de propriétés qui ne seraient pas des identifiants valides. Par exemple :</p> + +<pre class="brush: js">const toto = {'truc-bidule': true} +const {'truc-bidule': trucBidule } = toto; + +console.log(trucBidule); // "true"</pre> + +<h3 id="Combiner_la_décomposition_de_tableaux_et_dobjets">Combiner la décomposition de tableaux et d'objets</h3> + +<p>Il est possible de décomposer un tableau et un objet simultanément. Dans l'exemple qui suit, on accède ainsi à la propriété <code>nom</code> du troisième élément du tableau <code>props</code>:</p> + +<pre class="brush: js">const props = [ + { id: 1, nom: "Toto"}, + { id: 2, nom: "Truc"}, + { id: 3, nom: "Bidule"} +]; + +const [,, {nom}] = props; +console.log(nom); // Bidule</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-destructuring-assignment', 'Destructuring assignment')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Définition initiale.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-destructuring-assignment', 'Destructuring assignment')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.operators.destructuring")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_d_affectation">Opérateurs d'affectation</a></li> + <li><a href="https://tech.mozfr.org/post/2015/06/05/ES6-en-details-%3A-la-decomposition">ES6 en détails : La décomposition sur tech.mozfr.org</a></li> +</ul> diff --git a/files/fr/web/javascript/reference/opérateurs/assignement/index.html b/files/fr/web/javascript/reference/opérateurs/assignement/index.html new file mode 100644 index 0000000000..5011c20000 --- /dev/null +++ b/files/fr/web/javascript/reference/opérateurs/assignement/index.html @@ -0,0 +1,65 @@ +--- +title: Assignement (=) +slug: Web/JavaScript/Reference/Opérateurs/Assignement +tags: + - Fonctionnalités du language + - JavaScript + - Opérateur + - Opérateur d'assignement + - Reference +translation_of: Web/JavaScript/Reference/Operators/Assignment +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>L'opérateur d'assignement simple (<code>=</code>) est utilisé pour définir la valeur d'une variable. Il est possible d'ajouter une valeur à plusieurs variables en chaînant les variables.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-assignment.html")}}</div> + +<div></div> + +<p class="hidden">La source de cet exemple interactif est stocké sur GitHub. Si vous voulez contribuer au projet de l'exemple interactif, merci de cloner ceci : <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et nous envoyer une "pull-request".</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox notranslate"><strong>Opérateur :</strong> x = y +</pre> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Assignement_simple_et_variables_en_chaînes">Assignement simple et variables en chaînes</h3> + +<pre class="brush: js notranslate">// On considère les variables suivantes : +var x = 5; +var y = 10; +var z = 25; + +x = y; +// x est égale à 10 + +x = y = z; +// x, y et z sont égales à 25</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + + + +<p>{{Compat("javascript.operators.assignment")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide/Expressions_et_Opérateurs">Assignment operators in the JS guide</a></li> +</ul> diff --git a/files/fr/web/javascript/reference/opérateurs/async_function/index.html b/files/fr/web/javascript/reference/opérateurs/async_function/index.html new file mode 100644 index 0000000000..0dd3cf0def --- /dev/null +++ b/files/fr/web/javascript/reference/opérateurs/async_function/index.html @@ -0,0 +1,116 @@ +--- +title: Expression async function +slug: Web/JavaScript/Reference/Opérateurs/async_function +tags: + - Function + - JavaScript + - Opérateur + - Reference +translation_of: Web/JavaScript/Reference/Operators/async_function +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Le mot-clé <strong><code>async function</code></strong> peut être utilisé pour définir une fonction asynchrone au sein d'une expression.</p> + +<div class="note"> +<p><strong>Note :</strong> Il est aussi possible de définir une fonction asynchrone en utilisant une <a href="/fr/docs/Web/JavaScript/Reference/Instructions/async_function">instruction <code>async function</code></a>.</p> +</div> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">async function [<em>name</em>]([<em>param1</em>[, <em>param2[</em>, ..., <em>paramN</em>]]]) { + <em>instructions</em> +}</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>name</code></dt> + <dd>Le nom de la fonction. Il est facultatif et s'il n'est pas utilisé, la fonction est <em>anonyme</em>. Le nom utilisé est uniquement local pour le corps de la fonction.</dd> + <dt><code>paramN</code></dt> + <dd>Le nom d'un argument à passer à la fonction.</dd> + <dt><code>instructions</code></dt> + <dd>Les instructions qui composent le corps de la fonction.</dd> +</dl> + +<div class="note"> +<p><strong>Note :</strong> À partir d'ES2015 (ES6), il est aussi possible d'utiliser des <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es">fonctions fléchées</a> pour les expressions de fonction asynchrone.</p> +</div> + +<h2 id="Description">Description</h2> + +<p>Une expression <code>async function</code> est très proche, et partage quasiment la même syntaxe avec {{jsxref('Instructions/async_function', 'une instruction async function',"",1)}}. La différence principale entre une expression async <code>function</code> et une instruction async <code>function</code> est qu'on peut omettre le nom de la fonction dans les expressions <code>async function</code>. On peut donc utiliser une expression <code>async function</code> afin de créer une <em>IIFE</em> (pour <em>Immediately Invoked Function Expression</em>) qu'on appelle au moment de sa définition. Voir également le chapitre sur <a href="/fr/docs/Web/JavaScript/Reference/Fonctions">les fonctions</a> pour plus d'informations.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Exemple_simple">Exemple simple</h3> + +<pre class="brush: js">function resolveAfter2Seconds(x) { + return new Promise(resolve => { + setTimeout(() => { + resolve(x); + }, 2000); + }); +}; + +(async function(x) { // fonction asynchrone immédiatement appelée + var a = resolveAfter2Seconds(20); + var b = resolveAfter2Seconds(30); + return x + await a + await b; +})(10).then(v => { + console.log(v); // affiche 60 après 2 secondes. +}); + +var add = async function(x) { + var a = await resolveAfter2Seconds(20); + var b = await resolveAfter2Seconds(30); + return x + a + b; +}; + +add(10).then(v => { + console.log(v); // affiche 60 après 4 secondes. +}); +</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-async-function-definitions', 'async function')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES2018', '#sec-async-function-definitions', 'async function')}}</td> + <td>{{Spec2('ES2018')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES2017', '#sec-async-function-definitions', 'async function')}}</td> + <td>{{Spec2('ES2017')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.operators.async_function_expression")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Instructions/async_function", "async function")}}</li> + <li>L'objet {{jsxref("AsyncFunction")}}</li> + <li>{{jsxref("Opérateurs/await", "await")}}</li> +</ul> diff --git a/files/fr/web/javascript/reference/opérateurs/await/index.html b/files/fr/web/javascript/reference/opérateurs/await/index.html new file mode 100644 index 0000000000..87423b32a0 --- /dev/null +++ b/files/fr/web/javascript/reference/opérateurs/await/index.html @@ -0,0 +1,132 @@ +--- +title: await +slug: Web/JavaScript/Reference/Opérateurs/await +tags: + - JavaScript + - Opérateur + - Reference +translation_of: Web/JavaScript/Reference/Operators/await +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>L'opérateur <strong><code>await</code></strong> permet d'attendre la résolution d'une promesse ({{jsxref("Promise")}}). Il ne peut être utilisé qu'au sein d'une fonction asynchrone (définie avec l'instruction {{jsxref("Instructions/async_function", "async function")}}).</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">[<em>rv</em>] = await <em>expression</em>;</pre> + +<dl> + <dt><code>expression</code></dt> + <dd>Une promesse ({{jsxref("Promise")}}) ou toute autre valeur dont on souhaite attendre la résolution.</dd> + <dt><code>rv</code></dt> + <dd> + <p>La valeur de retour qui est celle de la promesse lorsqu'elle est résolue ou la valeur de l'expression lorsque celle-ci n'est pas une promesse.</p> + </dd> +</dl> + +<h2 id="Description">Description</h2> + +<p>L'expression <code>await</code> interrompt l'exécution d'une fonction asynchrone et attend la résolution d'une promesse. Lorsque la promesse est résolue (tenue ou rompue), la valeur est renvoyée et l'exécution de la fonction asynchrone reprend. Si la valeur de l'expression n'est pas une promesse, elle est convertie en une promesse résolue ayant cette valeur.</p> + +<p>Si la promesse est rompue, l'expression <code>await</code> lève une exception avec la raison.</p> + +<h2 id="Exemples">Exemples</h2> + +<p>Si on passe une promesse à une expression <code>await</code>, celle-ci attendra jusqu'à la résolution de la promesse et renverra la valeur de résolution.</p> + +<pre class="brush: js">function resolveAfter2Seconds(x) { + return new Promise(resolve => { + setTimeout(() => { + resolve(x); + }, 2000); + }); +} + +async function f1() { + var x = await resolveAfter2Seconds(10); + console.log(x); // 10 +} +f1(); +</pre> + +<p>Les objets dotés d'une méthode <code>then()</code> (<em>thenable</em> en anglais) seront également résolus :</p> + +<pre class="brush: js">async function f0() { + const thenable = { + then: function(resolve, _reject) { + resolve("résolu :)"); + } + }; + console.log(await thenable); // résolu :) +} +f0();</pre> + +<p>Si la valeur n'est pas une promesse, elle est convertie en une promesse résolue :</p> + +<pre class="brush: js">async function f2() { + var y = await 20; + console.log(y); // 20 +} +f2();</pre> + +<p>Si la promesse est rejetée, la raison est fournie avec l'exception.</p> + +<pre class="brush: js">async function f3() { + try { + var z = await Promise.reject(30); + } catch (e) { + console.log(e); // 30 + } +} +f3();</pre> + +<p>On peut également gérer le cas où la promesse est rejetée grâce à {{jsxref("Promise.prototype.catch()")}} :</p> + +<pre class="brush: js">var response = await maFonctionPromesse().catch( + (err) => { + console.log(err); + } +);</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("ESDraft", "#sec-async-function-definitions", "async functions")}}</td> + <td>{{Spec2("ESDraft")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("ES2018", "#sec-async-function-definitions", "async functions")}}</td> + <td>{{Spec2('ES2018')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("ES2017", "#sec-async-function-definitions", "async functions")}}</td> + <td>{{Spec2('ES2017')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.operators.await")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>L'instruction {{jsxref("Instructions/async_function", "async function")}}</li> + <li>L'expression {{jsxref("Opérateurs/async_function", "async function")}}</li> + <li>L'objet {{jsxref("AsyncFunction")}}</li> +</ul> diff --git a/files/fr/web/javascript/reference/opérateurs/class/index.html b/files/fr/web/javascript/reference/opérateurs/class/index.html new file mode 100644 index 0000000000..b41f9fc832 --- /dev/null +++ b/files/fr/web/javascript/reference/opérateurs/class/index.html @@ -0,0 +1,111 @@ +--- +title: class +slug: Web/JavaScript/Reference/Opérateurs/class +tags: + - ECMAScript 2015 + - JavaScript + - Opérateur + - Reference +translation_of: Web/JavaScript/Reference/Operators/class +--- +<div>{{JSSidebar("Operators")}}</div> + +<p>Une <strong>expression de classe</strong> est un moyen de définir une classe avec ECMASCript 2015 (ES6). Semblable aux <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_function">expressions de fonctions</a>, les expressions de classes peuvent être nommées ou anonymes. Si l'expression est nommée, le nom de la classe ne sera local que pour le corps de la fonction. Cette syntaxe n'est qu'un « sucre syntaxique » pour faciliter l'écriture du code, elle ne modifie en aucun cas le modèle d'héritage utilisé par JavaScript qui est un modèle à base de prototypes.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-classexpression.html")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">var MaClasse = class [nomClasse] [extends] { + // corps de la classe +};</pre> + +<h2 id="Description">Description</h2> + +<p>Une expression de classe utilise une syntaxe similaire à celle d'une <a href="/fr/docs/Web/JavaScript/Reference/Instructions/class">instruction de classe</a>. En revanche, avec les expressions de classes, il est possible de ne pas nommer la classe, ce qu'il est impossible de faire avec les instructions de classes. De plus, en utilisant les expressions de classe, on peut redéfinir/redéclarer les classes si nécessaire. Le type d'une classe sera toujours <code>"function"</code>.</p> + +<p>Le corps d'une classe sera exécuté en <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a> (pour les instructions et les expressions de classe).</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Une_expression_simple">Une expression simple</h3> + +<p>Ici, on utilise une expression de classe anonyme qu'on lie à la variable <code>Toto</code>.</p> + +<pre class="brush: js">var Toto = class { + constructor() {} + truc() { + return "Coucou monde !"; + } +}; + +var instance = new Toto(); +instance.truc(); // "Coucou monde !" +Toto.name; // "Toto" +</pre> + +<h3 id="Des_expressions_nommées">Des expressions nommées</h3> + +<p>Si on souhaite faire référence à la classe, au sein du corps de la classe, on pourra utiliser une expression nommée. Le nom utilisé ne sera visible que depuis l'intérieur de la portée de l'expression de classe.</p> + +<pre class="brush: js">// TBD +var Toto = class TotoNommé { + constructor() {} + quiEstLa() { + return TotoNommé.name; + } +} + +var truc = new Toto; +truc.quiEstLa(); // "TotoNommmé" +TotoNommé.name; // ReferenceError +Toto.name; // "TotoNommé" +</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-class-definitions', 'Class definitions')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Définition initiale</td> + </tr> + <tr> + <td>{{SpecName('ES2016', '#sec-class-definitions', 'Class definitions')}}</td> + <td>{{Spec2('ES2016')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES2017', '#sec-class-definitions', 'Class definitions')}}</td> + <td>{{Spec2('ES2017')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.operators.class")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_function">Les expressions <code>function</code></a></li> + <li><a href="/fr/docs/Web/JavaScript/Reference/Instructions/class">Les déclaration <code>class</code></a></li> + <li><a href="/fr/docs/Web/JavaScript/Reference/Classes">Les classes</a></li> +</ul> diff --git a/files/fr/web/javascript/reference/opérateurs/compréhensions_de_générateur/index.html b/files/fr/web/javascript/reference/opérateurs/compréhensions_de_générateur/index.html new file mode 100644 index 0000000000..83682e6284 --- /dev/null +++ b/files/fr/web/javascript/reference/opérateurs/compréhensions_de_générateur/index.html @@ -0,0 +1,183 @@ +--- +title: Compréhensions de générateur +slug: Web/JavaScript/Reference/Opérateurs/Compréhensions_de_générateur +tags: + - Iterator + - JavaScript + - Non-standard + - Obsolete + - Reference +translation_of: Archive/Web/JavaScript/Generator_comprehensions +--- +<div>{{JSSidebar("Operators")}}{{Non-standard_Header}}{{Obsolete_Header("gecko58")}}</div> + +<div class="warning"><strong>Non-standard. Ne pas utiliser !</strong><br> +La syntaxe de compréhensions de générateurs ne sont pas une fonctionnalité standard et ont été retirées à partir de Firefox 58. Mieux vaut utiliser les {{jsxref("Instructions/function*", "générateurs", "", 1)}} pour des fonctionnalités similaires.</div> + +<p>La syntaxe de <strong>compréhension de générateur</strong> était une expression qui permettait de construire rapidement une fonction génératrice à partir d'un objet itérable. Toutefois, cette syntaxe a été retirée du standard et de l'implémentation qui en est faite par Firefox. Elle ne doit pas être utilisée.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">(for (x of itérable) x) +(for (x of itérable) if (condition) x) +(for (x of itérable) for (y of itérable) x + y) +</pre> + +<h2 id="Description">Description</h2> + +<p>Une compréhension de générateur peut contenir deux sortes de composants :</p> + +<ul> + <li>{{jsxref("Instructions/for...of", "for...of")}} et</li> + <li>{{jsxref("Instructions/if...else", "if")}}</li> +</ul> + +<p>L'itération <code>for-of</code> est toujours le premier composant. Il est possible d'utiliser plusieurs itérations <code>for-of</code> et plusieurs instructions <code>if</code>.</p> + +<p>Les {{jsxref("Opérateurs/Compréhensions_de_tableau","compréhensions de tableaux","","true")}} ont un inconvénient majeur : quand on les utilise, un nouveau tableau est créé en mémoire. Cela ne pose pas de problème particulier quand le tableau en question est petit (l'impact sera alors léger) mais lorsque le tableau est très grand (voire infini avec un générateur), cela peut poser problème que de vouloir créer un nouveau tableau.</p> + +<p>Les générateurs permettent de calculer des suites à la demande (chaque élément successif est calculé lorsqu'on en a besoin). Les compréhensions de générateurs sont presque identiques, d'une point de vue syntaxique, aux compréhensions de tableaux. Plutôt d'utiliser des crochets, elles utilisent des parenthèses et au lieu de créer un tableau, elles créent un générateur qui pourra être utilisé. Cette notation peut être vue comme une notation raccourcie pour créer des générateurs.</p> + +<p>Imaginons qu'on ait un itérateur qui parcourt une grande série d'entiers et qu'on veuille créer un itérateur qui itère sur les doubles de ces entiers. Une compréhension de tableau entraînerait la création d'un tableau complet en mémoire, dont les éléments seraient les valeurs doublées :</p> + +<pre class="brush: js">var doubles = [for (i in it) i * 2]; +</pre> + +<p>En revanche, une compréhension de générateur permettrait de créer un nouvel itérateur qui pourrait être utilisé pour créer les valeurs doublées à la demande, quand on a besoin de les utiliser :</p> + +<pre class="brush: js">var it2 = (for (i in it) i * 2); +console.log(it2.next()); // La première valeur, doublée +console.log(it2.next()); // La deuxième valeur, doublée +</pre> + +<p>Lorsqu'une compréhension de générateur est utilisée comme un argument d'une fonction, les parenthèses utilisées pour l'appel de la fonction permettent de ne pas écrire les parenthèse encadrant la compréhension :</p> + +<pre class="brush: js">var résultat = faireQuelqueChose(for (i in it) i * 2); +</pre> + +<p>Avec la compréhension de générateur, on ne parcourt qu'une fois la structure de l'objet alors qu'avec une compréhension de tableau, on parcourt une fois le tableau pour construire la nouvelle version puis une seconde fois quand on souhaite l'utiliser.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Compréhensions_simples">Compréhensions simples</h3> + +<pre class="brush:js">(for (i of [ 1, 2, 3 ]) i*i ); +// fonction génératrice qui générera 1, 4, et 9 + +[...(for (i of [ 1, 2, 3 ]) i*i )]; +// [1, 4, 9] + +var abc = [ "A", "B", "C" ]; +(for (lettres of abc) lettres.toLowerCase()); +// fonction génératrice qui générera "a", "b", et "c" +</pre> + +<h3 id="Compréhensions_utilisant_une_instruction_if">Compréhensions utilisant une instruction <code>if</code></h3> + +<pre class="brush: js">var années = [ 1954, 1974, 1990, 2006, 2010, 2014 ]; + +(for (année of années) if (année > 2000) année); +// fonction génératrice qui générera 2006, 2010, et 2014 + +(for (année of années) if (année > 2000) if(année < 2010) année); +// fonction génératrice qui générera 2006, équivaut à : + +(for (année of années) if (année > 2000 && année < 2010) année); +// fonction génératrice qui générera 2006 +</pre> + +<h3 id="Compréhensions_de_générateurs_et_fonctions_génératrices">Compréhensions de générateurs et fonctions génératrices</h3> + +<p>Pour mieux comprendre la syntaxe des compréhensions, on peut la comparer avec celle des fonctions génératrices :</p> + +<p>Exemple 1 : Générateur simple.</p> + +<pre class="brush: js">var nombres = [ 1, 2, 3 ]; + +// Fonction génératrice +(function*() { + for (let i of nombres) { + yield i * i; + } +})() + +// Compréhension de générateur +(for (i of nombres) i*i ); + +// Résultat : les deux instructions renvoient chacune un générateur pour créer [ 1, 4, 9 ] +</pre> + +<p>Second exemple : Un générateur avec <code>if</code>.</p> + +<pre class="brush: js">var nombres = [ 1, 2, 3 ]; + +// Fonction génératrice +(function*() { + for (let i of nombres) { + if (i < 3) { + yield i * 1; + } + } +})() + +// Compréhension +(for (i of nombres) if (i < 3) i); + +// Résultat : les deux renvoient un générateur qui générera [ 1, 2 ]</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<p>Était initialement prévu pour le brouillon ECMAScript 2015 mais fut retiré lors de la révision 27 (août 2014). Consulter les révisions antérieures d'ES2015 pour les spécifications de cette sémantique.</p> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.operators.generator_comprehensions")}}</p> + +<h2 id="Notes_relatives_à_l'implémentation_de_SpiderMonkey">Notes relatives à l'implémentation de SpiderMonkey</h2> + +<ul> + <li>{{jsxref("Instructions/let", "let")}} n'est pas supporté comme identifiant car il n'est disponible qu'avec JavaScript 1.7 et pour la manipulations des balises de script XUL.</li> + <li>La décomposition, utilisée dans les compréhensions, n'est pas encore supportée ({{bug(980828)}}).</li> +</ul> + +<h2 id="Différences_avec_les_anciennes_compréhensions_JS_1.7_et_JS_1.8">Différences avec les anciennes compréhensions JS 1.7 et JS 1.8</h2> + +<div class="warning"> +<p>Les compréhensions « JS1.7 / JS1.8 » ont été retirées à partir de Gecko 46 ({{bug(1220564)}}).</p> +</div> + +<p><strong>Ancienne syntaxe pour les compréhensions (ne plus l'utiliser) :</strong></p> + +<pre class="brush: js example-bad">[X for (Y in Z)] +[X for each (Y in Z)] +[X for (Y of Z)] +</pre> + +<p>Les différences :</p> + +<ul> + <li>Les compréhensions ES2016 créent une portée par nœud <code>for</code> et non pas une portée pour l'ensemble de la compréhension. + + <ul> + <li>Ancienne version : <code>[...(()=>x for (x of [0, 1, 2]))][1]() // 2</code></li> + <li>Nouvelle version: <code>[...(for (x of [0, 1, 2]) ()=>x)][1]() // 1, chaque itération crée une nouvelle liaison pour x. </code></li> + </ul> + </li> + <li>Les compréhensions ES2016 débutent par <code>for</code> et non pas l'expression d'affectation. + <ul> + <li>Ancienne version : <code>(i * 2 for (i of nombres))</code></li> + <li>Nouvelle version : <code>(for (i of nombres) i * 2)</code></li> + </ul> + </li> + <li>Les compréhensions ES2016 peuvent utiliser plusieurs composants <code>if</code> et <code>for</code>.</li> + <li>Les compréhensions ES2016 ne fonctionnent qu'avec les boucles <code>{{jsxref("Instructions/for...of", "for...of")}}</code>, pas avec les boucles <code>{{jsxref("Instructions/for...in", "for...in")}}</code>.</li> +</ul> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Instructions/for...of", "for...of")}}</li> + <li>{{jsxref("Opérateurs/Compréhensions_de_tableau", "Compréhensions_de_tableau")}}</li> +</ul> diff --git a/files/fr/web/javascript/reference/opérateurs/compréhensions_de_tableau/index.html b/files/fr/web/javascript/reference/opérateurs/compréhensions_de_tableau/index.html new file mode 100644 index 0000000000..17a61266a9 --- /dev/null +++ b/files/fr/web/javascript/reference/opérateurs/compréhensions_de_tableau/index.html @@ -0,0 +1,209 @@ +--- +title: Compréhensions de tableau +slug: Web/JavaScript/Reference/Opérateurs/Compréhensions_de_tableau +tags: + - JavaScript + - Non-standard + - Obsolete + - Opérateurs + - Reference +translation_of: Archive/Web/JavaScript/Array_comprehensions +--- +<div>{{jsSidebar("Operators")}}{{Obsolete_Header(58)}}</div> + +<div class="warning"><strong>Non-standard. Ne pas utiliser !</strong><br> +Les compréhensions de tableau ne sont pas standard et ont été retirées à partir de Firefox 58. Pour obtenir des fonctionnalités équivalentes, il est conseillés d'utiliser {{jsxref("Array.prototype.map")}}, {{jsxref("Array.prototype.filter")}}, {{jsxref("Fonctions/Fonctions_fléchées", "les fonctions fléchées", "", 1)}} et la{{jsxref("Opérateurs/Opérateurs/Affecter_par_décomposition", "décomposition", "", 1)}}.</div> + +<p>La syntaxe de <strong>compréhension de tableau</strong> était une expression JavaScript permettant de construire rapidement un nouveau tableau à partir d'un tableau existant. Toutefois, cette syntaxe a été retirée du standard et de l'implémentation qui en est faite par Firefox. Elle ne doit pas être utilisée.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">[for (x of itérable) x] +[for (x of itérable) if (condition) x] +[for (x of itérable) for (y of itérable) x + y] +</pre> + +<h2 id="Description">Description</h2> + +<p>Dans une compréhension de tableau, on peut utiliser deux types de composants :</p> + +<ul> + <li>{{jsxref("Instructions/for...of", "for...of")}} et</li> + <li>{{jsxref("Instructions/if...else", "if")}}</li> +</ul> + +<p>L'itération basée sur <code>for...of</code> sera toujours le premier composant. On peut utiliser plusieurs <code>for...of</code> ou instructions <code>if</code>.</p> + +<p>Les compréhensions de tableau furent proposées pour être standardisées avec ECMAScript 2016. Elles fournissent une notation raccourcie pour pouvoir construire un nouveau tableau basé sur le contenu d'un autre tableau. Les compréhensions sont proches des fonctions {{jsxref("Array.prototype.map", "map()")}} et {{jsxref("Array.prototype.filter", "filter()")}} qui peuvent être combinées pour arriver au même effet.</p> + +<p>La compréhension qui suit prend un tableau de nombres et crée un nouveau tableau qui contiendra les doubles de chaque élément :</p> + +<pre class="brush: js">var nombres = [1, 2, 3, 4]; +var doublés = [for (i of nombres) i * 2]; +console.log(doublés); // affiche 2,4,6,8 +</pre> + +<p>Cela est équivalent à l'opération suivante, qui utilise {{jsxref("Array.prototype.map", "map()")}} :</p> + +<pre class="brush: js">var doublés = nombres.map(i => i * 2); +</pre> + +<p>Les compréhensions peuvent également être utilisées pour sélectionner certains éléments qui respectent un critère donné. Voici par exemple une compréhension qui ne sélectionne que les nombres pairs :</p> + +<pre class="brush: js">var nombres = [1, 2, 3, 21, 22, 30]; +var pairs = [for (i of nombres) if (i % 2 === 0) i]; +console.log(pairs); // affiche 2,22,30 +</pre> + +<p>Ici, la méthode {{jsxref("Array.prototype.filter", "filter()")}} peut être utilisée pour parvenir au même résultat :</p> + +<pre class="brush: js">var pairs = nombres.filter(i => i % 2 === 0); +</pre> + +<p>{{jsxref("Array.prototype.map", "map()")}} et {{jsxref("Array.prototype.filter", "filter()")}} peuvent être utilisés pour traduire une compréhension de tableau.</p> + +<p>Voici un autre exemple de compréhension, qui ne prend que les nombres pairs et qui les double :</p> + +<pre class="brush: js">var nombres = [1, 2, 3, 21, 22, 30]; +var pairsDoublés = [for (i of nombres) if (i % 2 === 0) i * 2]; +console.log(pairsDoublés); // affiche 4,44,60 +</pre> + +<p>Les crochets d'une compréhension introduisent un bloc implicite pour les portées. Les nouvelles variables (comme <code>i</code> dans l'exemple), sont traitées comme si elles avaient été déclarées avec {{jsxref("Instructions/let","let")}}. Cela signifie donc que ces variables ne pourront pas être utilisées en dehors de la compréhension.</p> + +<p>L'élément d'entrée d'une compréhension de tableau ne doit pas nécessairement être un tableau, il est également possible d'utiliser <a href="/fr/docs/Web/JavaScript/Guide/iterateurs_et_generateurs">des itérateurs et des générateurs</a>.</p> + +<p>Une chaîne de caractères peut aussi être utilisé comme élément de départ :</p> + +<pre class="brush: js">var str = 'abcdef'; +var consonnes = [for (c of str) if (!(/[aeiouyAEIOUY]/).test(c)) c].join(''); // 'bcdf' +var avecZéros = [for (c of str) c+'0' ].join(''); // 'a0b0c0d0e0f0' +</pre> + +<p>Là encore, la structure de l'élément d'entrée n'est pas préservée, il faut donc utiliser {{jsxref("Array.prototype.join", "join()")}} pour récupérer une chaîne.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Compréhensions_de_tableaux_simples">Compréhensions de tableaux simples</h3> + +<pre class="brush:js">[for (i of [ 1, 2, 3 ]) i*i ]; +// [ 1, 4, 9 ] + +var abc = [ "A", "B", "C" ]; +[for (lettres of abc) lettres.toLowerCase()]; +// [ "a", "b", "c" ]</pre> + +<h3 id="Compréhensions_de_tableaux_utilisant_if">Compréhensions de tableaux utilisant <code>if</code></h3> + +<pre class="brush: js">var années = [ 1954, 1974, 1990, 2006, 2010, 2014 ]; +[for (année of années) if (année > 2000) année]; +// [ 2006, 2010, 2014 ] +[for (année of années) if (année > 2000) if(année < 2010) année]; +// [ 2006 ] qui correspond aussi à +[for (année of années) if (année > 2000 && année < 2010) année]; +// [ 2006 ]</pre> + +<h3 id="Comparaison_avec_map_et_filter">Comparaison avec <code>map</code> et <code>filter</code></h3> + +<p>Afin de mieux comprendre la syntaxe des compréhensions, on peut la comparer avec les méthodes de l'objet Array {{jsxref("Array.map", "map")}} et {{jsxref("Array.filter", "filter")}} :</p> + +<pre class="brush: js">var nombres = [ 1, 2, 3 ]; + +nombres.map(function (i) { return i * i }); +nombres.map(i => i*i); +[for (i of nombres) i*i ]; +// tous vaudront [ 1, 4, 9 ] + +nombres.filter(function (i) { return i < 3 }); +nombres.filter(i => i < 3); +[for (i of nombres) if (i < 3) i]; +// on obtiendra [ 1, 2 ] pour ces trois instructions +</pre> + +<h3 id="Les_compréhensions_manipulant_deux_tableaux">Les compréhensions manipulant deux tableaux</h3> + +<p>On peut itérer deux fois avec <code>for...of</code> afin de travailler avec deux tableaux :</p> + +<pre class="brush: js">var nombres = [ 1, 2, 3 ]; +var lettres = [ "a", "b", "c" ]; + +var produitCartésien = [for (i of nombres) for (j of lettres) i+j]; +// [ "1a", "1b", "1c", "2a", "2b", "2c", "3a", "3b", "3c" ] + +var grille = [for (i of nombres) [for (j of lettres) i+j]]; +// [ +// ["1a", "1b", "1c"], +// ["2a", "2b", "2c"], +// ["3a", "3b", "3c"] +// ] + +[for (i of nombres) if (i > 1) for (j of lettres) if(j > "a") i+j] +// ["2b", "2c", "3b", "3c"], correspond à : + +[for (i of nombres) for (j of lettres) if (i > 1) if(j > "a") i+j] +// ["2b", "2c", "3b", "3c"] + +[for (i of nombres) if (i > 1) [for (j of lettres) if(j > "a") i+j]] +// [["2b", "2c"], ["3b", "3c"]], ne correspond pas à : + +[for (i of nombres) [for (j of lettres) if (i > 1) if(j > "a") i+j]] +// [[], ["2b", "2c"], ["3b", "3c"]] +</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<p>Ce point faisait initialement partie du brouillon ECMAScript 2015 mais fut retiré dans la révision 27 (août 2014). Veuillez vous référer aux révisions précédentes pour la sémantique utilisée.</p> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.operators.array_comprehensions")}}</p> + +<h2 id="Notes_spécifiques_relatives_à_l'implémentation_de_SpiderMonkey">Notes spécifiques relatives à l'implémentation de SpiderMonkey</h2> + +<ul> + <li><a href="/fr/docs/Web/JavaScript/Reference/Instructions/let"><code>let</code></a> en tant qu'identifiant n'est plus supporté. <code>let</code> est seulement disponible pour JS 1.7 et les balises des scripts XUL.</li> + <li>La déconstruction des tableaux n'est pas encore supportée.</li> +</ul> + +<h2 id="Différences_avec_les_compréhensions_précédentes_JS1.7JS1.8">Différences avec les compréhensions précédentes JS1.7/JS1.8</h2> + +<div class="warning"> +<p>Les compréhensions « JS1.7 / JS1.8 » ont été retirées à partir de Gecko 46 ({{bug(1220564)}}).</p> +</div> + +<p><strong>Ancienne syntaxe pour les compréhensions (ne plus l'utiliser) :</strong></p> + +<pre class="brush: js example-bad">[X for (Y in Z)] +[X for each (Y in Z)] +[X for (Y of Z)] +</pre> + +<p>Les différences :</p> + +<ul> + <li>Les compréhensions ESNext créent une portée par nœud «for » au lieu d'une portée par compréhension. + <ul> + <li>Ancienne syntaxe : <code>[()=>x for (x of [0, 1, 2])][1]() // 2</code></li> + <li>Nouvelle syntaxe : <code>[for (x of [0, 1, 2]) ()=>x][1]() // 1, </code>chaque itération crée une nouvelle liaison pour <code>x</code>.</li> + </ul> + </li> + <li>Les compréhensions ESNext débutent avec "for" et non plus avec une expression d'assignation : + <ul> + <li>Ancienne syntaxe : <code>[i * 2 for (i of nombres)]</code></li> + <li>Nouvelle syntaxe : <code>[for (i of nombres) i * 2]</code></li> + </ul> + </li> + <li>Les compréhensions ESNext peuvent comporter plusieurs composants <code>if</code> et <code>for</code>.</li> + <li>Les compréhensions ESNext ne fonctionnent qu'avec <code>{{jsxref("Instructions/for...of", "for...of")}}</code> et ne fonctionnent pas avec <code>{{jsxref("Instructions/for...in", "for...in")}}</code>.</li> +</ul> + +<p>Pour quelques suggestions pour migrer du code, voir le bug {{bug("1220564")}} et notamment le commentaire #42.</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Instructions/for...of", "for...of")}}</li> + <li>{{jsxref("Opérateurs/Compréhensions_de_générateurs", "Les compréhensions de générateurs", "" ,1)}}</li> +</ul> diff --git a/files/fr/web/javascript/reference/opérateurs/expression_closures/index.html b/files/fr/web/javascript/reference/opérateurs/expression_closures/index.html new file mode 100644 index 0000000000..a80e576883 --- /dev/null +++ b/files/fr/web/javascript/reference/opérateurs/expression_closures/index.html @@ -0,0 +1,85 @@ +--- +title: Expression closures +slug: Web/JavaScript/Reference/Opérateurs/Expression_closures +tags: + - Functions + - JavaScript + - Non-standard + - Obsolete + - Reference +translation_of: Archive/Web/JavaScript/Expression_closures +--- +<div>{{JSSidebar("Operators")}}{{Non-standard_Header}}{{Obsolete_Header("gecko60")}}</div> + +<div class="warning"><strong>Opérateur non-standard, ne pas utiliser !</strong><br> +Cette syntaxe est une fonctionnalité dépréciée, spécifique à Firefox et qui a été retirée avec Firefox 60. En remplacement, il est préférable d'utiliser <a href="/fr/docs/Web/JavaScript/Reference/fonctions_fléchées">les fonctions fléchées</a>.</div> + +<p>Les expressions de fermetures sont une notation de raccourci pour écrire des fonctions simples.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">function [<em>nom</em>]([<em>param1</em>[, <em>param2[</em>, ..., <em>paramN</em>]]]) + <em>expression</em> +</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>nom</code></dt> + <dd>Le nom de la fonction, ce paramètre est optionnel. S'il n'est pas utilisé, la fonction sera <em>anonyme</em>. Le nom de cette fonction est local uniquement pour le corps de la fonction.</dd> + <dt><code>paramN</code></dt> + <dd>Le nom d'un argument à passer à la fonction. Une fonction peut avoir jusqu'à 255 arguments.</dd> + <dt><code>expression</code></dt> + <dd>L'expression qui correspond au corps de la fonction.</dd> +</dl> + +<h2 id="Description">Description</h2> + +<p>Cet élément du langage n'est qu'une notation raccourcie pour l'écriture de fonctions simples. Il permet d'approcher un peu plus d'une notation correspondant au <a href="https://fr.wikipedia.org/wiki/Lambda-calcul">lambda calcul</a>.</p> + +<p>Pour les versions de JavaScript antérieures ou égales à 1.7 :</p> + +<pre class="brush: js">function(x) { return x * x; }</pre> + +<p>Avec JavaScript 1.8 :</p> + +<pre class="brush: js">function(x) x * x</pre> + +<p>Cette syntaxe permet de ne pas utiliser les accolades et l'instruction <code>return</code> (ici implicite). En dehors de la concision syntaxique, cet opérateur n'apporte pas d'autre avantage.</p> + +<h2 id="Exemples">Exemples</h2> + +<p>Un raccourci pour ajouter des gestionnaires d'événements :</p> + +<pre class="brush: js"> document.addEventListener("click", function() false, true); +</pre> + +<p>On peut utiliser cette notation avec les fonctions introduites pour les tableaux avec JavaScript 1.6 :</p> + +<pre class="brush: js">elems.some(function(elem) elem.type == "text"); +</pre> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.operators.expression_closures")}}</p> + +<h3 id="Notes_de_compatibilité">Notes de compatibilité</h3> + +<ul> + <li>À partir de Gecko / SpiderMonkey 45 {{geckoRelease(45)}}, des avertissements dans la console sont ajoutés aux fermetures d'expression ({{bug(995610)}}).</li> + <li>La syntaxe <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Expression_closures">des expressions de fermetures</a> (<em>closure expression</em>) n'est pas autorisée dans les fonctions asynchrones. Cela déclenchera une exception {{jsxref("SyntaxError")}} à partir de Firefox 55.</li> +</ul> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Fonctions", "Fonctions et portées de fonctions")}}</li> + <li>{{jsxref("Objets_globaux/Function","l'objet Function")}}</li> + <li>{{jsxref("Instructions/function", "instruction function")}}</li> + <li>{{jsxref("Opérateurs/L_opérateur_function", "expression function")}}</li> + <li>{{jsxref("Instructions/function*", "instruction function*")}}</li> + <li>{{jsxref("Opérateurs/function*", "expression function*")}}</li> + <li>{{jsxref("Objets_globaux/GeneratorFunction", "l'objet GeneratorFunction")}}</li> +</ul> diff --git a/files/fr/web/javascript/reference/opérateurs/function_star_/index.html b/files/fr/web/javascript/reference/opérateurs/function_star_/index.html new file mode 100644 index 0000000000..8fa8fa1a4e --- /dev/null +++ b/files/fr/web/javascript/reference/opérateurs/function_star_/index.html @@ -0,0 +1,91 @@ +--- +title: Expression function* +slug: Web/JavaScript/Reference/Opérateurs/function* +tags: + - ECMAScript 2015 + - Function + - Iterator + - JavaScript + - Operator + - Reference +translation_of: Web/JavaScript/Reference/Operators/function* +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Le mot-clé <strong><code>function*</code></strong> peut être utilisé pour définir une fonction génératrice à l'intérieur d'une expression.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-functionasteriskexpression.html")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">function* [<em>nom</em>]([<em>param1</em>[, <em>param2[</em>, ..., <em>paramN</em>]]]) { + <em>instructions</em> +}</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>nom</code></dt> + <dd>Le nom de la fonction. Ce paramètre est optionnel, auquel cas la fonction sera une fonction <em>anonyme</em>. Le nom sera local par rapport au corps de la fonction.</dd> + <dt><code>paramN</code></dt> + <dd>Le nom d'un argument à passer à la fonction. Une fonction peut avoir jusqu'à 255 arguments.</dd> + <dt><code>instructions</code></dt> + <dd>Les instructions qui forment le corps de la fonction.</dd> +</dl> + +<h2 id="Description">Description</h2> + +<p>Une expression <code>function*</code> est très semblable à une instruction {{jsxref('Instructions/function*', 'function*')}}, elle possède également une syntaxe similaire. La différence principale entre une expression <code>function*</code> et une instruction <code>function*</code> est le nom de la fonction. En effet, dans les expressions, le nom peut être omis pour créer une fonction génératrice<em> anonyme</em>. Voir également le chapitre sur les <a href="/fr/docs/Web/JavaScript/Reference/Fonctions">fonctions</a> pour plus d'informations.</p> + +<h2 id="Exemples">Exemples</h2> + +<p>L'exemple qui suit illustre comment définir une génératrice anonyme et l'affecter à une variable <code>x</code>. Cette fonction génèrera le carré de son argument :</p> + +<pre class="brush: js">var x = function*(y) { + yield y * y; +}; +</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-generator-function-definitions', 'function*')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Définition initiale.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-generator-function-definitions', 'function*')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.operators.function_star")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>L'instruction {{jsxref("Instructions/function*", "function*")}}</li> + <li>L'objet {{jsxref("GeneratorFunction")}}</li> + <li><a href="/fr/docs/Web/JavaScript/Guide/The_Iterator_protocol">Le protocole itérateur</a></li> + <li>{{jsxref("Opérateurs/yield", "yield")}}</li> + <li>{{jsxref("Opérateurs/yield*", "yield*")}}</li> + <li>L'objet {{jsxref("Function")}}</li> + <li>L'instruction {{jsxref("Instructions/function", "function")}}</li> + <li>L'expression {{jsxref("Opérateurs/L_opérateur_function", "function")}}</li> + <li>{{jsxref("Fonctions", "Fonctions et portée des fonctions","","1")}}</li> +</ul> diff --git a/files/fr/web/javascript/reference/opérateurs/groupement/index.html b/files/fr/web/javascript/reference/opérateurs/groupement/index.html new file mode 100644 index 0000000000..07292088cd --- /dev/null +++ b/files/fr/web/javascript/reference/opérateurs/groupement/index.html @@ -0,0 +1,91 @@ +--- +title: Opérateur de groupement +slug: Web/JavaScript/Reference/Opérateurs/Groupement +tags: + - JavaScript + - Operator + - Primary Expressions +translation_of: Web/JavaScript/Reference/Operators/Grouping +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>L'opérateur de groupement <code>( )</code> contrôle la précédence de l'évaluation dans les expressions.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-groupingoperator.html")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"> ( )</pre> + +<h2 id="Description">Description</h2> + +<p>L'opérateur de groupement consiste en une paire de parenthèses encadrant une expression et permettant de surcharger la <a href="/fr/docs/JavaScript/Reference/Operateurs/Précédence_des_opérateurs">précédence normale des opérateurs </a>afin que les expressions dont la précédence est plus basse soient évaluées avant.</p> + +<h2 id="Exemples">Exemples</h2> + +<p>Normalement, la multiplication et la division sont prises en compte avant l'addition et la soustraction. On peut changer ce comportement avec l'opérateur de groupement.</p> + +<pre class="brush:js">var a = 1; +var b = 2; +var c = 3; + +// précédence normale +a + b * c // 7 +// l'évaluation est effectuée de cette façon +a + (b * c) // 7 + +// précédence surchargée avec le groupement +// on additionne avant de multiplier +(a + b) * c // 9 + +// mathématiquement, cela est équivalent à +a * c + b * c // 9 +</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-grouping-operator', 'The Grouping Operator')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-grouping-operator', 'L\'opérateur de groupement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.1.6', 'L\'opérateur de groupement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-11.1.4','L\'opérateur de groupement')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Définition initiale, implémentée avec JavaScript 1.0.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.operators.grouping")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/JavaScript/Reference/Operateurs/Précédence_des_opérateurs">Précédence des opérators</a></li> + <li>{{jsxref("Operators/delete", "delete")}}</li> + <li>{{jsxref("Operators/typeof", "typeof")}}</li> +</ul> diff --git a/files/fr/web/javascript/reference/opérateurs/index.html b/files/fr/web/javascript/reference/opérateurs/index.html new file mode 100644 index 0000000000..531baa29cc --- /dev/null +++ b/files/fr/web/javascript/reference/opérateurs/index.html @@ -0,0 +1,302 @@ +--- +title: Opérateurs +slug: Web/JavaScript/Reference/Opérateurs +tags: + - JavaScript + - Opérateurs + - Reference +translation_of: Web/JavaScript/Reference/Operators +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Ce chapitre documente l'ensemble des opérateurs, expressions et mots-clés utilisés en JavaScript.</p> + +<h2 id="Expressions_et_opérateurs_par_catégorie">Expressions et opérateurs, par catégorie</h2> + +<p>Pour une liste alphabétique, voir le volet de navigation situé à gauche sur cette page.</p> + +<h3 id="Expressions_primaires">Expressions primaires</h3> + +<p>Les mots-clés basiques et les expressions générales en JavaScript.</p> + +<dl> + <dt>{{jsxref("Opérateurs/L_opérateur_this", "this")}}</dt> + <dd>Le mot-clé <code>this</code> fait référence à une propriété spéciale du contexte d'exécution de la fonction.</dd> + <dt>{{jsxref("Opérateurs/L_opérateur_function", "function")}}</dt> + <dd>Le mot-clé <code>function</code> définit une expression de fonction.</dd> + <dt>{{jsxref("Opérateurs/class", "class")}}</dt> + <dd>Le mot-clé <code>class</code> définit une expression de classe.</dd> + <dt> {{jsxref("Opérateurs/function*", "function*")}}</dt> + <dd>Le mot-clé <code>function*</code> définit une expression pour une fonction génératrice.</dd> + <dt>{{jsxref("Opérateurs/yield", "yield")}}</dt> + <dd>Cet opérateur permet de suspendre et de reprendre l'exécution d'une fonction génératrice.</dd> + <dt>{{jsxref("Opérateurs/yield*", "yield*")}}</dt> + <dd>Cet opérateur permet de déléguer l'exécution de la fonction à une autre fonction ou un autre objet itérable.</dd> + <dt>{{experimental_inline}} {{jsxref("Opérateurs/async_function", "async function*")}}</dt> + <dd>L'opérateur <code>async function</code> définit une expression de fonction asynchrone.</dd> + <dt>{{experimental_inline}} {{jsxref("Opérateurs/await", "await")}}</dt> + <dd>Cet opérateur permet de stopper et de reprendre l'exécution d'une fonction asynchrone et d'attendre pour la résolution ou le rejet d'une promesse.</dd> + <dt>{{jsxref("Objets_globaux/Array", "[]")}}</dt> + <dd>Littéral initialisateur de tableau.</dd> + <dt>{{jsxref("Opérateurs/Initialisateur_objet", "{}")}}</dt> + <dd>Littéral initialisateur d'objet.</dd> + <dt>{{jsxref("Objets_globaux/RegExp", "/ab+c/i")}}</dt> + <dd>Littéral d'expression rationnelle.</dd> + <dt>{{jsxref("Opérateurs/Groupement", "( )")}}</dt> + <dd>Opérateur de groupement.</dd> +</dl> + +<h3 id="Expressions_«_vers_la_gauche_»">Expressions « vers la gauche »</h3> + +<p>On affectera des valeurs aux variables à gauche de l'expression.</p> + +<dl> + <dt>{{jsxref("Opérateurs/Opérateurs_de_membres", "Opérateurs de membres", "", 1)}}</dt> + <dd>Les opérateurs de membres permettent d'accéder à une propriété ou une méthode d'un objet (<code>objet.propriété</code> et <code>object["propriété"]</code>).</dd> + <dt>{{jsxref("Opérateurs/L_opérateur_new", "new")}}</dt> + <dd>L'opérateur <code>new</code> permet de créer une instance d'un constructeur.</dd> + <dt><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/new.target">new.target</a></dt> + <dd>Dans les constructeurs, <code>new.target</code> fait référence au constructeur invoqué par {{jsxref("Opérateurs/new", "new")}}.</dd> + <dt>{{jsxref("Opérateurs/super", "super")}}</dt> + <dd>Le mot-clé <code>super</code> permet d'appeler le constructeur parent.</dd> + <dt>{{jsxref("Opérateurs/Syntaxe_décomposition", "...obj")}}</dt> + <dd>L'opérateur de décomposition permet de développer une expression là où on attend plusieurs arguments (pour des appels de fonctions) ou plusieurs éléments (pour les littéraux de tableaux).</dd> +</dl> + +<h3 id="Incrémentation_et_décrémentation">Incrémentation et décrémentation</h3> + +<p>Les opérateurs d'incrémentation et de décrémentation, suffixe et préfixe :</p> + +<dl> + <dt>{{jsxref("Opérateurs/Opérateurs_arithmétiques", "A++", "#Incr.C3.A9ment_(.2B.2B)")}}</dt> + <dd>Opérateur d'incrémentation suffixe.</dd> + <dt>{{jsxref("Opérateurs/Opérateurs_arithmétiques", "A--", "#D.C3.A9cr.C3.A9ment_(--)")}}</dt> + <dd>Opérateur de décrémentation suffixe.</dd> + <dt>{{jsxref("Opérateurs/Opérateurs_arithmétiques", "++A", "#Incr.C3.A9ment_(.2B.2B)")}}</dt> + <dd>Opérateur d'incrémentation préfixe.</dd> + <dt>{{jsxref("Opérateurs/Opérateurs_arithmétiques", "--A", "#D.C3.A9cr.C3.A9ment_(--)")}}</dt> + <dd>Opérateur de décrémentation préfixe.</dd> +</dl> + +<h3 id="Opérateurs_unaires">Opérateurs unaires</h3> + +<p>Une opération unaire est une opération qui ne possède qu'un opérande.</p> + +<dl> + <dt>{{jsxref("Opérateurs/L_opérateur_delete", "delete")}}</dt> + <dd>L'opérateur <code>delete</code> permet de supprimer une propriété d'un objet.</dd> + <dt>{{jsxref("Opérateurs/L_opérateur_void", "void")}}</dt> + <dd>L'opérateur <code>void</code> écarte la valeur de retour d'une expression.</dd> + <dt>{{jsxref("Opérateurs/L_opérateur_typeof", "typeof")}}</dt> + <dd>L'opérateur <code>typeof</code> permet de déterminer le type d'un objet donné.</dd> + <dt>{{jsxref("Opérateurs/Opérateurs_arithmétiques", "+", "#Plus_unaire_(.2B)")}}</dt> + <dd>Le plus unaire permet de convertir son opérande en une valeur du type <code>Number</code>.</dd> + <dt>{{jsxref("Opérateurs/Opérateurs_arithmétiques", "-", "#N.C3.A9gation_unaire_(-)")}}</dt> + <dd>La négation unaire permet de convertir son opérande en une valeur du type <code>Number</code> puis d'en prendre l'opposé.</dd> + <dt>{{jsxref("Opérateurs/Opérateurs_binaires", "~", "#.7E_.28NON_binaire.29")}}</dt> + <dd>L'opérateur binaire NON (<em>NOT</em>).</dd> + <dt>{{jsxref("Opérateurs/Opérateurs_logiques", "!", "#NON_logique_.28.21.29")}}</dt> + <dd>L'opérateur du NON logique.</dd> +</dl> + +<h3 id="Opérateurs_arithmétiques">Opérateurs arithmétiques</h3> + +<p>Les opérateurs arithmétiques utilisent des opérandes numériques et renvoie une valeur numérique.</p> + +<dl> + <dt>{{jsxref("Opérateurs/Opérateurs_arithmétiques", "+", "#Addition_(.2B)")}}</dt> + <dd>L'opérateur d'addition.</dd> + <dt>{{jsxref("Opérateurs/Opérateurs_arithmétiques", "-", "#Soustraction_(-)")}}</dt> + <dd>L'opérateur de soustraction.</dd> + <dt>{{jsxref("Opérateurs/Opérateurs_arithmétiques", "/", "#Division_(.2F)")}}</dt> + <dd>L'opérateur de division.</dd> + <dt>{{jsxref("Opérateurs/Opérateurs_arithmétiques", "*", "#Multiplication_(*)")}}</dt> + <dd>L'opérateur de multiplication.</dd> + <dt>{{jsxref("Opérateurs/Opérateurs_arithmétiques", "%", "#Reste_(.25)")}}</dt> + <dd>L'opérateur du reste.</dd> + <dt>{{jsxref("Opérateurs/Opérateurs_arithmétiques","**","#Exponentiation")}}</dt> + <dd>Opérateur de puissance (exponentiation).</dd> +</dl> + +<h3 id="Opérateurs_relationnels">Opérateurs relationnels</h3> + +<p>Un opérateur de comparaison permet de comparer deux opérandes et de renvoyer une valeur booléenne selon le résultat de cette comparaison.</p> + +<dl> + <dt>{{jsxref("Opérateurs/L_opérateur_in", "in")}}</dt> + <dd>L'opérateur <code>in</code> permet de déterminer si un objet possède une propriété donnée.</dd> + <dt>{{jsxref("Opérateurs/instanceof", "instanceof")}}</dt> + <dd>L'opérateur <code>instanceof</code> permet de déterminer si un objet est une instance d'un autre objet.</dd> + <dt>{{jsxref("Opérateurs/Opérateurs_de_comparaison", "<", "#Op.C3.A9rateur_inf.C3.A9rieur_strict_(<)")}}</dt> + <dd>Opérateur inférieur strict.</dd> + <dt>{{jsxref("Opérateurs/Opérateurs_de_comparaison", ">", "#Op.C3.A9rateur_sup.C3.A9rieur_strict_(>)")}}</dt> + <dd>Opérateur supérieur strict.</dd> + <dt>{{jsxref("Opérateurs/Opérateurs_de_comparaison", "<=", "#Op.C3.A9rateur_inf.C3.A9rieur_ou_.C3.A9gal_(<.3D)")}}</dt> + <dd>Opérateur inférieur ou égal.</dd> + <dt>{{jsxref("Opérateurs/Opérateurs_de_comparaison", ">=", "#Op.C3.A9rateur_sup.C3.A9rieur_ou_.C3.A9gal_(>.3D)")}}</dt> + <dd>Opérateur supérieur ou égal.</dd> +</dl> + +<div class="note"> +<p><strong>Note :</strong> <code>=></code> n'est pas un opérateur. Il s'agit de la notation utilisée pour <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es">les fonctions fléchées</a>.</p> +</div> + +<h3 id="Opérateurs_d'égalité">Opérateurs d'égalité</h3> + +<p>Un opérateur d'égalité considère deux opérandes et produit un résultat booléen basé sur le résultat de la comparaison.</p> + +<dl> + <dt>{{jsxref("Opérateurs/Opérateurs_de_comparaison", "==", "#Egalit.C3.A9_(.3D.3D)")}}</dt> + <dd>Opérateur d'égalité faible.</dd> + <dt>{{jsxref("Opérateurs/Opérateurs_de_comparaison", "!=", "#Inequality_(!.3D)")}}</dt> + <dd>Opérateur d'inégalité faible.</dd> + <dt>{{jsxref("Opérateurs/Opérateurs_de_comparaison", "===", "#Identity_.2F_strict_equality_(.3D.3D.3D)")}}</dt> + <dd>Opérateur d'égalité stricte.</dd> + <dt>{{jsxref("Opérateurs/Opérateurs_de_comparaison", "!==", "#Non-identity_.2F_strict_not_equal_(!.3D.3D)")}}</dt> + <dd>Opérateur d'inégalité stricte.</dd> +</dl> + +<h3 id="Opérateurs_de_décalage_binaires">Opérateurs de décalage binaires</h3> + +<p>Ces opérations permettent de décaler les bits contenus dans l'opérande.</p> + +<dl> + <dt>{{jsxref("Opérateurs/Opérateurs_binaires", "<<", "#.3C.3C_.28d.C3.A9calage_.C3.A0_gauche.29")}}</dt> + <dd>Opérateur binaire de décalage à gauche.</dd> + <dt>{{jsxref("Opérateurs/Opérateurs_binaires", ">>", "#.3E.3E_.28d.C3.A9calage_.C3.A0_droite_avec_propagation_du_signe.29")}}</dt> + <dd>Opérateur binaire de décalage à droite.</dd> + <dt>{{jsxref("Opérateurs/Opérateurs_binaires", ">>>", "#.3E.3E.3E_.28d.C3.A9calage_.C3.A0_droite_avec_insertion_de_z.C3.A9ros.29")}}</dt> + <dd>Opérateur binaire de décalage à droite non-signé.</dd> +</dl> + +<h3 id="Opérateurs_binaires_logiques">Opérateurs binaires logiques</h3> + +<p>Les opérateurs binaires logiques traitent leurs opérandes comme des valeurs sur 32 bits et renvoient une valeur numérique JavaScript correspondant au résultat.</p> + +<dl> + <dt>{{jsxref("Opérateurs/Opérateurs_binaires", "&", "#&_.28ET_binaire.29")}}</dt> + <dd>ET binaire (<em>AND</em>).</dd> + <dt>{{jsxref("Opérateurs/Opérateurs_binaires", "|", "#|_.28OU_binaire.29")}}</dt> + <dd>OU binaire (<em>OR</em>).</dd> + <dt>{{jsxref("Opérateurs/Opérateurs_binaires", "^", "#.5E_.28XOR_binaire.29")}}</dt> + <dd>OU exclusif binaire (<em>XOR</em>).</dd> +</dl> + +<h3 id="Opérateurs_logiques">Opérateurs logiques</h3> + +<p>Les opérateurs logiques sont généralement utilisés avec des valeurs booléennes et renvoient une valeur booléenne, résultat de l'opération.</p> + +<dl> + <dt>{{jsxref("Opérateurs/Opérateurs_logiques", "&&", "#ET_logique_.28&&.29")}}</dt> + <dd>ET logique (<em>AND</em>).</dd> + <dt>{{jsxref("Opérateurs/Opérateurs_logiques", "||", "#OU_logique_.28||.29")}}</dt> + <dd>OU logique (<em>OR</em>).</dd> +</dl> + +<h3 id="Opérateur_conditionnel_ternaire">Opérateur conditionnel ternaire</h3> + +<dl> + <dt>{{jsxref("Opérateurs/L_opérateur_conditionnel", "(condition ? siVrai : siFaux)")}}</dt> + <dd> + <p>Cet opérateur renvoie une des deux valeurs fournie en fonction de la valeur logique de la condition.</p> + </dd> +</dl> + +<h3 id="Opérateurs_d'affectation">Opérateurs d'affectation</h3> + +<p>Un opérateur d'affectation permet d'affecter une valeur à son opérande gauche en se basant sur la valeur de l'opérande droit.</p> + +<dl> + <dt>{{jsxref("Opérateurs/Opérateurs_d_affectation", "=", "#Assignment")}}</dt> + <dd>Opérateur d'affectation.</dd> + <dt>{{jsxref("Opérateurs/Opérateurs_d_affectation", "*=", "#Multiplication_assignment")}}</dt> + <dd>Affectation après multiplication.</dd> + <dt>{{jsxref("Opérateurs/Opérateurs_d_affectation", "/=", "#Division_assignment")}}</dt> + <dd>Affectation après division.</dd> + <dt>{{jsxref("Opérateurs/Opérateurs_d_affectation", "%=", "#Remainder_assignment")}}</dt> + <dd>Affectation du reste.</dd> + <dt>{{jsxref("Opérateurs/Opérateurs_d_affectation", "+=", "#Addition_assignment")}}</dt> + <dd>Affectation après addition.</dd> + <dt>{{jsxref("Opérateurs/Opérateurs_d_affectation", "-=", "#Subtraction_assignment")}}</dt> + <dd>Affectation après soustraction.</dd> + <dt>{{jsxref("Opérateurs/Opérateurs_d_affectation", "<<=", "#Left_shift_assignment")}}</dt> + <dd>Affectation après décalage à gauche.</dd> + <dt>{{jsxref("Opérateurs/Opérateurs_d_affectation", ">>=", "#Right_shift_assignment")}}</dt> + <dd>Affectation après décalage à droite.</dd> + <dt>{{jsxref("Opérateurs/Opérateurs_d_affectation", ">>>=", "#Unsigned_right_shift_assignment")}}</dt> + <dd>Affectation après décalage à droite non-signé.</dd> + <dt>{{jsxref("Opérateurs/Opérateurs_d_affectation", "&=", "#Bitwise_AND_assignment")}}</dt> + <dd>Affectation après ET binaire.</dd> + <dt>{{jsxref("Opérateurs/Opérateurs_d_affectation", "^=", "#Bitwise_AND_assignment")}}</dt> + <dd>Affectation après OU exclusif binaire.</dd> + <dt>{{jsxref("Opérateurs/Opérateurs_d_affectation", "|=","#Bitwise_OR_assignment")}}</dt> + <dd>Affectation après OU binaire.</dd> + <dt>{{jsxref("Opérateurs/Affecter_par_décomposition", "[a, b] = [1, 2]")}} {{jsxref("Opérateurs/Affecter_par_décomposition", "{a, b} = {a:1, b:2}")}}</dt> + <dd> + <p>L'affectation par décomposition permet de d'affecter des propriétés d'un objet ou des éléments d'un tableau à plusieurs variables. Cela permet d'utiliser une syntaxe semblable aux littéraux de tableaux/objets.</p> + </dd> +</dl> + +<h3 id="Opérateur_virgule">Opérateur virgule</h3> + +<dl> + <dt>{{jsxref("Opérateurs/L_opérateur_virgule", ",")}}</dt> + <dd>L'opérateur virgule permet d'évaluer plusieurs expressions en une seule instruction et de renvoyer le résultat de la dernière expression.</dd> +</dl> + +<h3 id="Fonctionnalités_non-standardsnon-standard_inline">Fonctionnalités non-standards{{non-standard_inline}}</h3> + +<dl> + <dt>{{non-standard_inline}}{{jsxref("Opérateurs/Expression_fermetures", "Expression de fermetures", "", 1)}}</dt> + <dd>La syntaxe d'expression de fermeture est un raccourci pour écrire des fonctions simples.</dd> + <dt>{{non-standard_inline}}{{jsxref("Opérateurs/Expression_fonction_génératrice_historique", "", 1)}}</dt> + <dd>Le mot-clé <code>function</code> peut être utilisé afin de définir une fonction génératrice historique. au sein d'une expression.</dd> + <dt>{{non-standard_inline}} {{jsxref("Opérateurs/Compréhensions_de_tableau", "[for (x of y) x]")}}</dt> + <dd>Compréhensions de tableau.</dd> + <dt>{{non-standard_inline}}{{jsxref("Opérateurs/Compréhensions_de_générateur", "(for (x of y) y)")}}</dt> + <dd>Compréhensions de générateurs.</dd> +</dl> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('ES1','#sec-11','Expressions')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Définition initiale.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11', 'Expressions')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-ecmascript-language-expressions', 'ECMAScript Language: Expressions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Nouveaux éléments : opérateur de décomposition, affectation par décomposition, mot-clé <code>super</code> .</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-ecmascript-language-expressions', 'ECMAScript Language: Expressions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.operators")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/JavaScript/Reference/Operators/Pr%C3%A9c%C3%A9dence_des_op%C3%A9rateurs">La précédence des opérateurs</a> en JavaScript</li> +</ul> diff --git a/files/fr/web/javascript/reference/opérateurs/initialisateur_objet/index.html b/files/fr/web/javascript/reference/opérateurs/initialisateur_objet/index.html new file mode 100644 index 0000000000..6aa4d3121f --- /dev/null +++ b/files/fr/web/javascript/reference/opérateurs/initialisateur_objet/index.html @@ -0,0 +1,305 @@ +--- +title: Initialisateur d'objet +slug: Web/JavaScript/Reference/Opérateurs/Initialisateur_objet +tags: + - ECMAScript 2015 + - JavaScript + - Object + - Reference +translation_of: Web/JavaScript/Reference/Operators/Object_initializer +--- +<div>{{JsSidebar("Operators")}}</div> + +<p>Il est possible d'initialiser un objet en utilisant les notations <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object"><code>new Object()</code></a>,<code> <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/create">Object.create()</a></code>, ou grâce à un littéral (appelée initialisateur). Un initialisateur d'objet est une liste contenant plusieurs (éventuellement 0) propriétés, séparées par des virgules, et leurs valeurs associées, cette liste étant entourée d'accolades (<code>{}</code>).</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-objectinitializer.html")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="brush: js">var o = {}; +var o = { a: "toto", b: 42, c: {} }; + +var a = "toto", b = 42, c = {}; +var o = { a: a, b: b, c: c }; + +var o = { + <var>property: function </var>(<var>paramètres</var>) {}, + get property() {}, + set property(<var>valeur</var>) {} +}; +</pre> + +<h3 id="Nouvelles_notations_ECMAScript_2015_(ES6)">Nouvelles notations ECMAScript 2015 (ES6)</h3> + +<p>ECMAScript 2015 (ES6) introduit de nouvelles notations. Pour plus d'informations sur la compatibilité de ces notations avec les différents environnements, se référer au tableau de compatibilité ci-après.</p> + +<pre class="brush: js">// Raccourcis pour les noms de propriétés (ES2015) +var a = "toto", b = 42, c = {}; +var o = { a, b, c }; + +// Raccourcis pour les noms de méthodes(ES2015) +var o = { + <var>property</var>(<var>paramètres</var>) {} +}; + +// Noms calculés pour les propriétés (ES2015) +var prop = "toto"; +var o = { + [prop]: "hey", + ["tr" + "uc"]: "ho", +};</pre> + +<h2 id="Description">Description</h2> + +<p>Un initialisateur d'objet est une expression qui permet de décrire l'initialisation d'un {{jsxref("Object")}}. Les objets sont constitués de propriétés qui permettent de les décrire. Les valeurs des propriétés d'un objet peuvent être construites à partir de <a href="/fr/docs/Web/JavaScript/Structures_de_données#Les_valeurs_primitives">types de données primitifs</a> ou à partir d'autres objets.</p> + +<h3 id="Créer_des_objets">Créer des objets</h3> + +<p>On peut créer un objet sans aucune propriété grâce à l'expression suivante :</p> + +<pre class="brush: js">var objet = {};</pre> + +<p>Cependant, en utilisant un littéral ou un initialisateur, on peut créer des objets disposant de propriétés rapidement. Il suffit d'inscrire une liste de clés-valeurs séparées par des virgules. Le fragment de code qui suit permet de créer un objet avec trois propriétés identifiées par les clés <code>"toto"</code>, <code>"âge"</code> et <code>"machin"</code>. Les valeurs respectives de ces différentes propriétés sont : la chaîne de caractères <code>"truc"</code>, le nombre <code>42</code> et un autre objet.</p> + +<pre class="brush: js">var object = { + toto: 'truc', + âge: 42, + machin: { maProp: 12 }, +}</pre> + +<h3 id="Accéder_à_des_propriétés">Accéder à des propriétés</h3> + +<p>Après la création d'un objet, vous pourrez avoir besoin de consulter ou de modifier ses propriétés. Il est possible d'accéder aux propriétés d'un objet en utilisant un point ou des crochets. Voir la page sur les <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_membres">accesseurs de propriétés</a> pour plus d'information.</p> + +<pre class="brush: js">object.toto; // "truc" +object['âge']; // 42 + +object.toto = 'machin'; +</pre> + +<h3 id="Définir_des_propriétés">Définir des propriétés</h3> + +<p>On a déjà vu comment on pouvait utiliser la syntaxe de l'initialisateur pour définir des propriétés. Il arrive souvent de vouloir utiliser des variables comme propriétés d'un objet. C'est pourquoi on peut trouver le code suivant :</p> + +<pre class="brush: js">var a = 'toto', + b = 42, + c = {}; + +var o = { + a: a, + b: b, + c: c +};</pre> + +<p>Avec ECMAScript 2015 (ES6), on peut utiliser une notation plus courte pour un résultat égal :</p> + +<pre class="brush: js">var a = 'toto', + b = 42, + c = {}; + +// Raccourcis sur les noms de propriétés (ES2015) +var o = { a, b, c }; + +// Autrement dit +console.log((o.a === { a }.a)); // true +</pre> + +<h4 id="Les_duplicatas_et_les_noms_de_propriétés">Les duplicatas et les noms de propriétés</h4> + +<p>Si le même nom est utilisé plusieurs fois pour différentes propriétés, ce sera la dernière propriété qui sera prise en compte :</p> + +<pre class="brush: js">var a = {x: 1, x: 2}; +console.log(a); // { x: 2} +</pre> + +<p>Le mode strict d'ECMAScript 5 renvoyait une exception {{jsxref("SyntaxError")}} lorsque plusieurs propriétés avaient le même nom. ECMAScript 2015 (ES6) permettant de créer des propriétés avec des noms qui sont calculés à l'exécution, cette restriction a été retirée.</p> + +<pre class="brush: js">function vérifierSémantiqueES2015(){ + 'use strict'; + try { + ({ prop: 1, prop: 2 }); + + // Aucune erreur, la sémantique en cours consiste à accepter les propriétés dupliquées + return true; + } catch (e) { + // Une erreur est renvoyée : les duplicatas sont interdits en mode strict + return false; + } +}</pre> + +<h3 id="Définitions_de_méthodes">Définitions de méthodes</h3> + +<p>Une propriété d'un objet peut être une <a href="/fr/docs/Web/JavaScript/Reference/Functions">function</a>, un <a href="/fr/docs/Web/JavaScript/Reference/Functions/get">accesseur</a> ou un <a href="/fr/docs/Web/JavaScript/Reference/Functions/set">mutateur</a> :</p> + +<pre class="brush: js">var o = { + <var>property: function </var>(<var>paramètres</var>) {}, + get <var>property</var>() {}, + set <var>property</var>(<var>valeur</var>) {} +};</pre> + +<p>Avec ECMAScript 2015 (ES6), une notation raccourcie permet de ne plus utiliser le mot-clé "<code>function</code>".</p> + +<pre class="brush: js">// Raccourci pour les noms de méthodes (ES2015) +var o = { + <var>property</var>(<em>paramètres</em>) {}, + *<var>generator</var>() {} +};</pre> + +<p>Ou encore :</p> + +<pre class="brush: js">var o = { + *generator() { + ... + } +};</pre> + +<p>En utilisant uniquement ECMAScript 5, on aurait écrit :</p> + +<p><em>(Il n'y a pas de function génératrice en ECMAScript5, mais l'exemple permet de comprendre l'évolution de la syntaxe) :</em></p> + +<pre class="brush: js">var o = { + generator: function* (){} +}; +</pre> + +<p>Pour plus d'informations et d'exemples sur les méthodes, voir la page concernant les<a href="/fr/docs/Web/JavaScript/Reference/Functions/Method_definitions"> définitions de méthode</a>.</p> + +<h3 id="Noms_de_propriétés_calculés">Noms de propriétés calculés</h3> + +<p>Avec ECMAScript 2015 (ES6), on peut utiliser un initialisateur et avoir des noms de propriétés qui soient calculés lors de l'exécution. Ainsi, en plaçant une expression entre crochets <code>[]</code>, celle-ci sera calculée pour déterminer le nom de la propriété. Cette notation est la symétrique des crochets utilisés pour accéder aux propriétés. Il est désormais possible d'utiliser cette notation dans les littéraux objets :</p> + +<pre class="brush: js">// Calcul des noms de propriétés (ES2015) +var i = 0; +var a = { + ['toto' + ++i]: i, + ['toto' + ++i]: i, + ['toto' + ++i]: i +}; + +console.log(a.toto1); // 1 +console.log(a.toto2); // 2 +console.log(a.toto3); // 3 + +var param = 'taille'; +var config = { + [param]: 12, + ['mobile' + param.charAt(0).toUpperCase() + param.slice(1)]: 4 +}; + +console.log(config); // { taille: 12, mobileTaille: 4 }</pre> + +<h3 id="Décomposition_des_propriétés">Décomposition des propriétés</h3> + +<p>La proposition de la décomposition des propriétés à ECMAScript (au niveau 4, finalisée) vise à permettre la décomposition des propriétés dans les littéraux objets. Cela permet de copier les propriétés énumérables directes à partir d'un objet source vers un nouvel objet.</p> + +<p>Le clonage superficiel (sans rattacher le prototype) ou la fusion d'objets pourra désormais être écrite de façon plus concise qu'avec {{jsxref("Object.assign()")}}.</p> + +<pre class="brush: js">var obj1 = { toto: 'truc', x: 42 }; +var obj2 = { toto: 'bidule', y: 13 }; + +var clone = { ...obj1 }; +// Object { toto: 'truc', x: 42 } + +var fusion = { ...obj1, ...obj2 }; +// Object { toto: 'bidule', x: 42, y: 13 }; +</pre> + +<p>On notera que la méthode {{jsxref("Object.assign()")}} déclenche <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/set">les mutateurs</a>, ce qui n'est pas le cas de l'opérateur de décomposition.</p> + +<h3 id="Changement_de_prototype">Changement de prototype</h3> + +<p>Définir une propriété avec la syntaxe <code>__proto__: valeur</code> ou <code>"__proto__": valeur</code> ne permet pas de créer une propriété avec le nom <code>__proto__</code>. Si la valeur fournie est un objet ou est <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/null"><code>null</code></a>, cela modifie le <code>[[Prototype]]</code> de l'objet. (Si la valeur fournie n'est pas un objet ou n'est pas null, l'objet ne sera pas modifié.)</p> + +<pre class="brush: js">var obj1 = {}; +assert(Object.getPrototypeOf(obj1) === Object.prototype); + +var obj2 = { __proto__: null }; +assert(Object.getPrototypeOf(obj2) === null); + +var protoObj = {}; +var obj3 = { '__proto__': protoObj }; +assert(Object.getPrototypeOf(obj3) === protoObj); + +var obj4 = { __proto__: "not an object or null" }; +assert(Object.getPrototypeOf(obj4) === Object.prototype); +assert(!obj4.hasOwnProperty("__proto__")); +</pre> + +<p>On ne peut modifier le prototype qu'une seule fois pour une même notation littérale. Toute tentative pour modifier le prototype plusieurs fois renverra une erreur de syntaxe.</p> + +<p>Les définitions de propriétés qui n'utilisent pas les deux points ne permettent pas de modifier le prototype, elles définieront une propriété de façon classique.</p> + +<pre class="brush: js">var __proto__ = 'variable'; + +var obj1 = { __proto__ }; +assert(Object.getPrototypeOf(obj1) === Object.prototype); +assert(obj1.hasOwnProperty('__proto__')); +assert(obj1.__proto__ === 'variable'); + +var obj2 = { __proto__() { return 'hello'; } }; +assert(obj2.__proto__() === 'hello'); + +var obj3 = { ['__prot' + 'o__']: 17 }; +assert(obj3.__proto__ === 17); +</pre> + +<h2 id="Notation_littérale_et_JSON">Notation littérale et JSON</h2> + +<p>La notation utilisant un littéral objet n'est pas identique à celle utilisée par la <strong>J</strong>ava<strong>S</strong>cript <strong>O</strong>bject <strong>N</strong>otation (<a href="/fr/docs/JSON">JSON</a>). Bien que ces notations se ressemblent, il existe certaines différences :</p> + +<ul> + <li>JSON ne permet de définir des propriétés qu'en utilisant la syntaxe <code>"propriété": valeur</code>. Le nom de la propriété doit être entouré de double-quotes et la définition de la propriété ne peut pas être raccourcie.</li> + <li>En JSON les valeurs ne peuvent être uniquement que des chaînes de caractères, des nombres, des tableaux, <code>true</code>, <code>false</code>, <code>null</code>, ou tout autre objet (JSON).</li> + <li>Une valeur de fonction (voir le paragraphe "Méthodes" ci-avant) ne peut pas être affectée comme valeur en JSON.</li> + <li>Les objets {{jsxref("Date")}} seront convertis en chaînes de caractères avec {{jsxref("JSON.parse()")}}.</li> + <li>{{jsxref("JSON.parse()")}} rejètera les noms de propriétés calculés et renverra une erreur dans ce cas.</li> +</ul> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Définition initiale.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.1.5', 'Object Initializer')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td><a href="/fr/docs/Web/JavaScript/Reference/Functions/get">Ajout des <em>getter</em> et </a><em><a href="/fr/docs/Web/JavaScript/Reference/Functions/set">setter</a></em> (accesseur/mutateur).</td> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-object-initializer', 'Object Initializer')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Ajout des raccourcis pour les noms de méthodes et propriétés et des noms de propriétés calculés.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object-initializer', 'Object Initializer')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.operators.object_initializer")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_membres">Accesseurs de propriétés</a></li> + <li><code><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_get">get</a></code> / <code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_set">set</a></code></li> + <li><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Définition_de_méthode">Définitions de méthode</a></li> + <li><a href="/fr/docs/Web/JavaScript/Reference/Grammaire_lexicale">Grammaire lexicale</a> de JavaScript</li> +</ul> diff --git a/files/fr/web/javascript/reference/opérateurs/instanceof/index.html b/files/fr/web/javascript/reference/opérateurs/instanceof/index.html new file mode 100644 index 0000000000..1db76a5bbd --- /dev/null +++ b/files/fr/web/javascript/reference/opérateurs/instanceof/index.html @@ -0,0 +1,173 @@ +--- +title: instanceof +slug: Web/JavaScript/Reference/Opérateurs/instanceof +tags: + - JavaScript + - Operator + - Prototype + - Reference + - instanceof +translation_of: Web/JavaScript/Reference/Operators/instanceof +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>L'<strong>opérateur <code>instanceof</code></strong> permet de tester si un objet possède, dans sa chaîne de prototype, la propriété <code>prototype</code> d'un certain constructeur.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-instanceof.html")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox notranslate"><em>objet</em> instanceof <em>constructeur</em></pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>objet</code></dt> + <dd>L'objet qu'on souhaite analyser.</dd> +</dl> + +<dl> + <dt><code>constructeur</code></dt> + <dd>La fonction dont on souhaite vérifier la présence dans la chaîne de prototypes.</dd> +</dl> + +<h2 id="Description">Description</h2> + +<p>L'opérateur <code>instanceof</code> teste la présence de <code>constructeur.prototype</code> dans la chaîne de prototypes d'<code>objet</code>.</p> + +<pre class="brush: js notranslate">function C(){} // Définition du constructeur +function D(){} // Définition d'un autre constructeur + +var o = new C(); + +// true, car : Object.getPrototypeOf(o) === C.prototype +o instanceof C; + +// false, car D.prototype n'existe pas dans la chaîne de prototype de o +o instanceof D; + +o instanceof Object; // true, car: +C.prototype instanceof Object // true + +C.prototype = {}; +var o2 = new C(); + +o2 instanceof C; // true + +// false, car C.prototype n'existe plus dans la chaîne de prototype de o +o instanceof C; + +D.prototype = new C(); // Utilisation de l'héritage +var o3 = new D(); +o3 instanceof D; // true +o3 instanceof C; // true car C.prototype fait partie de la chaîne de o3 +</pre> + +<p>À noter que la valeur retournée par <code>instanceof</code> peut être différente suite à un changement de la propriété <code>prototype</code> du constructeur, notamment via la méthode <code>Object.setPrototypeOf()</code>. On peut aussi utiliser la pseudo-propriété <code>__proto__</code> qui n'était pas standard avant ECMAScript 2015.</p> + +<h3 id="instanceof_dans_dautres_contextes_frames_ou_fenêtres"><code>instanceof</code> dans d'autres contextes (frames ou fenêtres)</h3> + +<p>Différents niveaux d'intégrations ont différents environnements. Cela signifie que les valeurs retournées sont différentes (objet globaux différents, constructeurs différents, etc.). Cela peut engendrer des résultats inattendus. Par exemple, <code>[] instanceof window.frames[0].Array</code> renverra <code>false</code>, car <code>Array !== </code><code>window.frames[0].Array</code> et que les tableaux héritent de leur constructeur.</p> + +<p>Cela peut être contre-intuitif au début, mais lorsqu'il est nécessaire de travailler avec plusieurs frames ou fenêtres, et que des objets sont transférés via des fonctions, cela sera un obstacle valide et important. Par contre, il est tout à fait possible d'utiliser <code>Array.isArray(myObj)</code> pour vérifier de manière sécurisée qu'un tableau est effectivement un tableau.</p> + +<p>Ainsi, pour vérifier qu'un <a href="/fr/docs/Web/API/Node">nœud</a> est bien un objet de type <a href="/fr/docs/Web/API/SVGElement">SVGElement</a> dans un autre contexte, on pourra utiliser <code>monNœud instanceof monNœud.documentMaitre.vue.SVGElement</code>.</p> + +<div class="note"><strong>Note aux développeurs Mozilla :</strong><br> +Dans un code utilisant XPCOM, <code>instanceof</code> a un comportement particulier : <code>obj instanceof </code><em><code>xpcomInterface</code></em> (ex : <code>Components.interfaces.nsIFile</code>) appelle <code>obj.QueryInterface(<em>xpcomInterface</em>)</code> et retourne <code>true</code> si QueryInterface réussit. Un effet indésirable à cela est qu'il est possible d'utiliser les propriétés de <em><code>xpcomInterface</code></em> sur <code>obj</code> après un test réussi d'<code>instanceof</code>. Contrairement au JavaScript classique, <code>obj instanceof xpcomInterface </code>fonctionnera comme prévu même si <code>obj</code> appartient à un autre niveau d'organisation (fenêtre, frame, etc.).</div> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Démonstration_que_String_et_Date_sont_de_type_Object_et_cas_aux_limites_des_littéraux">Démonstration que <code>String</code> et <code>Date</code> sont de type <code>Object</code> et cas aux limites des littéraux</h3> + +<p>Le code suivant utilise <code>instanceof</code> pour démontrer que les objets <code>String</code> et <code>Date</code> sont aussi de type <code>Object</code> (ils dérivent d'<code>Object</code>).</p> + +<p>Cependant, les objets créés à partir de littéraux objets sont une exception : en effet, bien que leur prototype ne soit pas défini, <code>instanceof Object</code> renvoie <code>true</code>.</p> + +<pre class="brush: js notranslate">var chaîneSimple = "Une chaîne simple"; +var maChaîne = new String(); +var newChaîne = new String("Chaîne créée avec un constructeur"); +var maDate = new Date(); +var monObjet = {}; +var monNonObjet = Object.create(null); + +chaîneSimple instanceof String; //false car le prototype vaut undefined +maChaîne instanceof String; // true +newChaîne instanceof String; // true +maChaîne instanceof Object; // true + +monObjet instanceof Object; // true, bien que le protoype soit undefined +({}) instanceof Object; // true, comme pour le cas précédent +monNonObjet instance Object; // false + +maChaîne instanceof Date; // false + +maDate instanceof Date; // true +maDate instanceof Object; // true +maDate instanceof String; // false +</pre> + +<h3 id="Démonstration_que_mavoiture_est_de_type_Voiture_et_de_type_Object">Démonstration que <code>mavoiture</code> est de type <code>Voiture</code> et de type <code>Object</code></h3> + +<p>Le code suivant créé un objet de type <code>Voiture</code> et une instance de cet objet, <code>mavoiture</code>. L'opérateur <code>instanceof</code> montre que l'objet <code>mavoiture</code> est de type <code>Voiture</code> et de type <code>Object</code>.</p> + +<pre class="brush: js notranslate">function Voiture(fabricant, modele, annee) { + this.fabricant = fabricant; + this.modele = modele; + this.annee = annee; +} +var mavoiture = new Voiture("Citroën", "C3", 2006); +var a = mavoiture instanceof Voiture; // retourne true +var b = mavoiture instanceof Object; // retourne true +</pre> + +<h3 id="Attention_à_la_précédence_des_opérateurs">Attention à la précédence des opérateurs</h3> + +<p>Pour tester qu'un objet n'est pas une instance d'un constructeur donné, on pourra faire le test <code>!(monObj instanceof Constructor)</code>. Toutefois, attention à ne pas écrire <code>!monObj instanceof Constructor</code> car <code>!monObj</code> serait traité en priorité et on testerait donc <code>false instanceof Constructor</code> qui sera toujours faux.</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-relational-operators', 'Relational Operators')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-relational-operators', 'Opérateurs relationnels')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.8.6', 'Opérateur instanceof')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-11.8.6', 'Opérateur instanceof')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Définition initiale. Implémentée avec JavaScript 1.4.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.operators.instanceof")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Opérateurs/L_opérateur_typeof","typeof")}}</li> + <li>{{jsxref("Symbol.hasInstance")}}</li> +</ul> diff --git a/files/fr/web/javascript/reference/opérateurs/l_opérateur_conditionnel/index.html b/files/fr/web/javascript/reference/opérateurs/l_opérateur_conditionnel/index.html new file mode 100644 index 0000000000..c2357f8e93 --- /dev/null +++ b/files/fr/web/javascript/reference/opérateurs/l_opérateur_conditionnel/index.html @@ -0,0 +1,152 @@ +--- +title: L'opérateur conditionnel +slug: Web/JavaScript/Reference/Opérateurs/L_opérateur_conditionnel +tags: + - JavaScript + - Opérateur +translation_of: Web/JavaScript/Reference/Operators/Conditional_Operator +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>L'<strong>opérateur (ternaire) conditionnel</strong> est le seul opérateur JavaScript qui comporte trois opérandes. Cet opérateur est fréquemment utilisé comme raccourci pour la déclaration de {{jsxref("Instructions/if...else")}}.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-conditionaloperators.html")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><em>condition</em> ? <em>exprSiVrai</em> : <em>exprSiFaux</em> </pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>condition</code></dt> + <dd>Une expression qui est évaluée en un booléen (<code>true</code> ou <code>false</code>).</dd> +</dl> + +<dl> + <dt><code>exprSiVrai</code></dt> + <dd>Une expression qui est évaluée si la condition est équivalente à <code>true</code> (<em>truthy</em>)</dd> + <dt><code>exprSiFaux</code></dt> + <dd>Une expression qui est évaluée si la condition est équivalente à <code>false</code> (<em>falsy</em>).</dd> +</dl> + +<h2 id="Description">Description</h2> + +<p>SI <code>condition</code> vaut <code>true</code>, l'opérateur renverra la valeur d'<code>exprSiVrai;</code> dans le cas contraire, il renverra la valeur de <code>exprSiFaux</code>. Par exemple, on peut afficher un message différent en fonction d'une variable <code>estMembre</code> avec cette déclaration :</p> + +<pre class="brush: js">"Le prix est : " + (estMembre ? "15 €" : "30 €") +</pre> + +<p>On peut également affecter des variables dont la valeur dépendra du test :</p> + +<pre class="brush: js">var elvisLives = Math.PI > 4 ? "Yep" : "Nope";</pre> + +<p>On peut enchaîner plusieurs évaluations ternaires l'une à la suite de l'autre (cet opérateur se propage de la gauche vers la droite) :</p> + +<pre class="brush: js">var premierControle = false, + secondControle = false, + acces = premierControle ? "Accès refusé" : secondControle ? "Accès refusé" : "Accès autorisé"; + +console.log(acces); // "Accès autorisé"</pre> + +<p>Il est également possible d'utiliser cet opérateur pour effectuer l'une ou l'autre expression selon le cas de figure qui se présente :</p> + +<pre class="brush: js">var stop = false, age = 16; + +age > 18 ? location.assign("continue.html") : stop = true; +</pre> + +<p>en utilisant l'{{jsxref("Opérateurs/L_opérateur_virgule","opérateur virgule")}}, on peut même y placer plusieurs instructions (attention toutefois à la lisibilité et à se demander si un {{jsxref("Instructions/if...else","if...else")}} n'est pas plus approprié).</p> + +<pre class="brush: js">var stop = false, age = 23; + +age > 18 ? ( + console.log("OK, accès autorisé."), + location.assign("continue.html") +) : ( + stop = true, + console.log("Accès refusé !") +); +</pre> + +<p>De la même façon, on peut effectuer plusieurs opérations, encadrées par des parenthèses, avant d'affecter le résultat de l'opérateur à une variable. Conformément à l'opérateur virgule, ce sera <strong><em>la dernière valeur qui sera affectée</em></strong>. Ici aussi, attention à la lisibilité du code relativement à un <code>if...else</code>.</p> + +<pre class="brush: js">var age = 16; + +var url = age > 18 ? ( + console.log("Accès autorisé."), + // console.log renvoie "undefined", mais cela importe peu car + // ce n'est pas le dernier élément de l'expression + "continue.html" // la valeur à affecter si âge > 18 +) : ( + console.log("Accès refusé !"), + // etc. + "stop.html" // la valeur à affecter si âge <= 18 +); + +location.assign(url); // "stop.html"</pre> + +<h3 id="Utiliser_l'opérateur_ternaire_dans_la_valeur_de_retour">Utiliser l'opérateur ternaire dans la valeur de retour</h3> + +<p>On peut utiliser l'opérateur ternaire (voire une imbrication de celui-ci) pour remplacer certaines formulations avec <code>if...else</code> où <code>return</code> est la seule instruction utilisée :</p> + +<pre class="brush: js">var func1 = function( .. ) { + if (condition1) { return valeur1 } + else if (condition2) { return valeur2 } + else if (condition3) { return valeur3 } + else { return value4 } +} + +var func2 = function( .. ) { + return condition1 ? valeur1 + : condition2 ? valeur2 + : condition3 ? valeur3 + : valeur4 +}</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-conditional-operator', 'Conditional Operator')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-conditional-operator', 'Conditional Operator')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.12', 'The conditional operator')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-11.12', 'The conditional operator')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Définition initiale, implémentée avec JavaScript 1.0.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.operators.conditional")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>L'instruction {{jsxref("Instructions/if...else","if...else")}}</li> + <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Optional_chaining">Le chaînage optionnel</a></li> +</ul> diff --git a/files/fr/web/javascript/reference/opérateurs/l_opérateur_delete/index.html b/files/fr/web/javascript/reference/opérateurs/l_opérateur_delete/index.html new file mode 100644 index 0000000000..19a48f8649 --- /dev/null +++ b/files/fr/web/javascript/reference/opérateurs/l_opérateur_delete/index.html @@ -0,0 +1,305 @@ +--- +title: L'opérateur delete +slug: Web/JavaScript/Reference/Opérateurs/L_opérateur_delete +tags: + - JavaScript + - Opérateur + - Reference +translation_of: Web/JavaScript/Reference/Operators/delete +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>L'opérateur <strong><code>delete</code></strong> permet de retirer une propriété d'un objet.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-deleteoperator.html")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">delete <em>expression</em></pre> + +<p>où <em>expression</em> est évaluée comme une référence à une propriété :</p> + +<pre class="syntaxbox">delete <em>objet.propriete</em> +delete <em>objet</em>['propriete'] +</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>objet</code></dt> + <dd>Le nom d'un objet ou une expression dont l'évaluation fournit un objet.</dd> + <dt><code>propriete</code></dt> + <dd>La propriété qu'on souhaite supprimer.</dd> +</dl> + +<h3 id="Valeur_de_retour">Valeur de retour</h3> + +<p><code>true</code> pour tous les cas sauf lorsque la propriété est une propriété <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty">propre</a> <a href="/fr/docs/Web/JavaScript/Reference/Erreurs/Cant_delete">non-configurable</a> auquel cas <code>false</code> est renvoyé en mode non-strict.</p> + +<h3 id="Exceptions">Exceptions</h3> + +<p>Cet opérateur lève une exception {{jsxref("TypeError")}} en <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a> si la propriété est une propriété propre qui est non-configurable.</p> + +<h2 id="Description">Description</h2> + +<p>Contrairement à ce qu'on pourrait penser, l'opérateur <code>delete</code> n'a rien à voir avec une libération de mémoire directe. La gestion de la mémoire en JavaScript est réalisée de façon indirecte en tenant compte des références, <a href="/fr/docs/Web/JavaScript/Gestion_de_la_mémoire">voir cette page pour plus de détails</a>.</p> + +<p>L'opérateur <code><strong>delete</strong></code> permet de retirer une propriété donnée d'un objet. Lorsque la suppression se déroule sans problème, l'opération renvoie <code>true</code>, sinon c'est la valeur <code>false</code> qui est renvoyée. Voici quelques scénarios importants qui précisent ce comportement :</p> + +<ul> + <li>Si la propriété qu'on souhaite supprimer n'existe pas, <code>delete</code> n'aura aucun effet et l'opération renverra <code>true</code></li> + <li>Si une propriété du même nom existe sur la chaîne de prototypes, après la suppression, l'objet utilisera la propriété disponible sur la chaîne de prototypes. Autrement dit, <code>delete</code> n'a d'effet que sur les propriétés directement rattachées à un objet (les propriétés « propres »).</li> + <li>Toute propriété déclarée avec {{jsxref("Instructions/var","var")}} ne peut pas être supprimée de la portée globale ou de la portée d'une fonction. + <ul> + <li>Aussi, <code>delete</code> ne pourra supprimer des fonctions de la portée globale (que ce soit une définition de fonction ou une expression de fonction).</li> + <li>Les fonctions qui font partie d'un objet (à l'exception de la portée globale) peuvent être supprimées avec <code>delete</code>.</li> + </ul> + </li> + <li>Toute propriété déclarée avec {{jsxref("Instructions/let","let")}} ou {{jsxref("Instructions/const","const")}} ne peut être supprimée de la portée dans laquelle elles ont été créées.</li> + <li>Les propriétés non-configurable ne peuvent pas être retirées. Cela inclut les propriétés des objets natifs comme {{jsxref("Math")}}, {{jsxref("Array")}}, {{jsxref("Object")}} et les propriétés qui sont créées comme non-configurable grâce à la méthode {{jsxref("Object.defineProperty()")}}.</li> +</ul> + +<p>Voici un fragment de code qui illustre certains cas :</p> + +<pre class="brush: js">var Employe = { + age: 28, + nom: 'abc', + designation: 'developpeur' +} + +console.log(delete Employe.nom); // renvoie true +console.log(delete Employe.age); // renvoie true + +// Lorsqu'on souhaite supprimer une propriété +// inexistante, on obtient true +console.log(delete Employe.salaire); // renvoie true +</pre> + +<h3 id="Les_propriétés_non-configurables">Les propriétés non-configurables</h3> + +<p>Lorsqu'une propriété est marquée comme non-configurable, <code>delete</code> n'aura aucun effet et l'opération renverra <code>false</code>. En mode strict, cela déclenchera une exception <code>TypeError</code>.</p> + +<pre class="brush: js">var Employe = {}; +Object.defineProperty(Employe, 'nom', {configurable: false}); + +console.log(delete Employe.nom); // renvoie false +</pre> + +<p>{{jsxref("Instructions/var","var")}} (ou <code>let</code> ou <code>const</code>) crée des propriétés non-configurables qui ne peuvent pas être supprimées via <code>delete</code> :</p> + +<pre class="brush: js">var autreNom = 'XYZ'; + +// On peut accéder à la description de cette +// propriété globale grâce à : +Object.getOwnPropertyDescriptor(window, 'autreNom') + +/* Object {value: "XYZ", + writable: true, + enumerable: true, + <strong>configurable: false</strong>} +*/ + +// On voit que "autreNom", ajouté avec var +// est marquée comme "non-configurable" + +delete autreNom; // renvoie false</pre> + +<p>En mode strict, cela aurait déclenché une exception.</p> + +<h3 id="Mode_strict_ou_non-strict">Mode strict ou non-strict ?</h3> + +<p>Lorsqu'on est en mode strict, si <code>delete</code> est utilisé sur une référence directe à une variable, un argument de fonction ou un nom de fonction, il déclenchera une exception {{jsxref("SyntaxError")}}<strong>.</strong></p> + +<p>Toute variable définie avec <code>var</code> est marquée comme non-configurable. Dans l'exemple qui suit, <code>salaire</code> est non-configurable et ne peut pas être supprimé. En mode non-strict, l'opération <code>delete</code> renverra <code>false</code>.</p> + +<pre class="brush: js">function Employe() { + delete salaire; + var salaire; +} + +Employe(); +</pre> + +<p>Voyons comment ce code se comporte en mode strict : au lieu de renvoyer false, l'instruction lève une exception <code>SyntaxError</code>.</p> + +<pre class="brush: js">"use strict"; + +function Employe() { + delete salaire; // SyntaxError + var salaire; +} + +// De même, tout accès direct à une fonction +// avec delete lèvera une SyntaxError + +function DemoFunction() { + //du code +} + +delete DemoFunction; // SyntaxError +</pre> + +<h2 id="Exemples">Exemples</h2> + +<pre class="brush: js">// on crée la propriété adminName sur la portée globale +adminName = 'xyz'; + +// on crée la propriété empCount sur la portée globale +// On utilise var, elle est donc non-configurable +var empCount = 43; + +EmployeeDetails = { + name: 'xyz', + age: 5, + designation: 'Developer' +}; + +// adminName est une propriété de la portée globale +// qui peut être supprimée car configurable. +delete adminName; // renvoie true + +// En revanche empCount n'est pas configurable +// car c'est var qui a été utilisée. +delete empCount; // renvoie false + +// delete peut être utilisé pour retirer des propriétés +// d'objets +delete EmployeeDetails.name; // renvoie true + +<strong>// </strong>Même lorsque la propriété n'existe pas, +// l'opération renvoie "true" +delete EmployeeDetails.salary; // renvoie true + +// delete n'a pas d'impact sur les propriétés +// statiques natives +delete Math.PI; // renvoie false + +// EmployeeDetails est une propriété de la portée globale +// définie sans var, elle est donc configurable +delete EmployeeDetails; // renvoie true + +function f() { + var z = 44; + + // delete n'a pas d'impact sur les noms + // des variables locales + delete z; // returns false +} +</pre> + +<h3 id="delete_et_la_chaîne_de_prototypes"><code>delete</code> et la chaîne de prototypes</h3> + +<p>Dans l'exemple qui suit, on supprime une propriété directement rattachée à un objet (une propriété « propre ») alors qu'une propriété du même nom existe sur la chaîne de prototypes :</p> + +<pre class="brush: js">function Toto(){ + this.truc = 10; +} + +Toto.prototype.truc = 42; + +var toto = new Toto(); + +// L'instruction suivante renvoie true, +// après avoir effectivement supprimé +// la propriété de l'objet toto +delete toto.truc; + +// toto.truc est toujours disponible car +// elle est disponible sur la chaîne de +// prototypes +console.log(toto.truc); + +// Ici on supprime la propriété du prototype +delete Toto.prototype.truc; + +// On aura "undefined" dans la console +// car l'objet n'hérite plus de cette propriété +// qui a été supprimée +console.log(toto.truc);</pre> + +<h3 id="Supprimer_les_éléments_dun_tableau">Supprimer les éléments d'un tableau</h3> + +<p>Lorsqu'on supprime un élément d'un tableau, la longueur du tableau n'est pas modifiée. Cela vaut également lorsqu'on supprime le dernier élément du tableau.</p> + +<p>Lorsqu'on utilise <code>delete</code> pour retirer un élément du tableau, cet élément n'est plus dans le tableau. Dans l'exemple suivant, on retire <code>arbres[3]</code> grâce à <code>delete</code>.</p> + +<pre class="brush: js">var arbres = ["cèdre","pin","chêne","érable","sapin"]; +delete arbres[3]; +if (3 in arbres) { + // Le code ici ne sera pas exécuté +}</pre> + +<p>Si on veut conserver l'existence d'un élément du tableau avec une valeur indéfinie, on pourra affecter la valeur <code>undefined</code> à cet élément. Ainsi, contrairement à l'exemple précédent, en utilisant <code>undefined</code>, <code>arbres[3]</code> continue d'être présent :</p> + +<pre class="brush: js">var arbres = ["cèdre","pin","chêne","érable","sapin"]; +arbres[3] = undefined; +if (3 in arbres) { + // Le code ici sera bien exécuté +}</pre> + +<p>Si on souhaite plutôt retirer un élément du tableau en changeant le contenu du tableau, on pourra utiliser la méthode {{jsxref("Array.splice()")}}. Dans l'exemple qui suit, la valeur actuelle de <code>arbres[3]</code> est retirée du tableau grâce à <code>splice()</code> mais l'index suivant se décale et arbres[4] devient arbres[3] :</p> + +<pre class="brush: js">var arbres = ["cèdre","pin","chêne","érable","sapin"]; +if (3 in arbres) { + // Le code ici sera exécuté +} +arbres.splice(3, 1); +console.log(arbres); // ["cèdre","pin","chêne","sapin"]; +if (3 in arbres) { + // Le code ici sera également exécuté +} +</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-delete-operator', 'The delete Operator')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-delete-operator', 'The delete Operator')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.4.1', 'The delete Operator')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-11.4.1', 'The delete Operator')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Définition initiale. Implémenté avec JavaScript 1.2.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.operators.delete")}}</p> + +<h2 id="Notes_de_compatibilité">Notes de compatibilité</h2> + +<p>Bien que l'ordre d'itération des objets soit laissé à l'implémentation selon le standard ECMAScript, il semblerait que la plupart des navigateurs utilise un ordre d'itération basé sur l'ordre d'ajout des propriétés (au moins pour les propriétés propres). Toutefois, pour Internet Explorer, lorsqu'on utilise <code>delete</code> sur une propriété puis qu'on redéfinit plus tard une propriété avec le même nom, l'ordre d'itération de cette propriété sera le même que précédemment (alors que dans les autres navigateurs, cette « nouvelle » propriété sera parcourue en dernier).</p> + +<p>Aussi, si on veut simuler un tableau associatif ordonné de façon transparente et pour plusieurs navigateurs, il faudra utiliser deux tableaux ou, mieux encore, un objet {{jsxref("Map")}} si celui-ci est disponible.</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="https://perfectionkills.com/understanding-delete/">Une analyse de <code>delete</code> par Kangax, en anglais</a></li> + <li>{{jsxref("Reflect.deleteProperty()")}}</li> + <li>{{jsxref("Map.prototype.delete()")}}</li> +</ul> diff --git a/files/fr/web/javascript/reference/opérateurs/l_opérateur_function/index.html b/files/fr/web/javascript/reference/opérateurs/l_opérateur_function/index.html new file mode 100644 index 0000000000..bff2848ad7 --- /dev/null +++ b/files/fr/web/javascript/reference/opérateurs/l_opérateur_function/index.html @@ -0,0 +1,163 @@ +--- +title: L'opérateur function +slug: Web/JavaScript/Reference/Opérateurs/L_opérateur_function +tags: + - Function + - JavaScript + - Operator + - Reference +translation_of: Web/JavaScript/Reference/Operators/function +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Le mot-clé <strong><code>function</code></strong> permet de définir une fonction à l'intérieur d'une expression.</p> + +<div class="note"> +<p><strong>Note :</strong> Il est également possible de définir des fonctions grâce au constructeur <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Function">Function</a></code> et aux <a href="/fr/docs/Web/JavaScript/Reference/Instructions/function">déclarations de fonction</a>.</p> +</div> + +<div>{{EmbedInteractiveExample("pages/js/expressions-functionexpression.html")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">function [<em>nom</em>]([<em>param1</em>[, <em>param2[</em>, ..., <em>paramN</em>]]]) { + <em>instructions</em> +}</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>nom</code></dt> + <dd>Le nom de la fonction. Peut être omis, auquel cas on parlera d'une fonction <em>anonyme</em>.</dd> +</dl> + +<dl> + <dt><code>paramN</code></dt> + <dd>Le nom d'un paramètre à passer à la fonction.</dd> +</dl> + +<dl> + <dt><code>instructions</code></dt> + <dd>Les instructions constituant le corps de la fonction.</dd> +</dl> + +<div class="note"> +<p><strong>Note :</strong> À partir d'ES2015/ES6, on peut également former des expressions de fonction avec <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es">des fonctions fléchées</a>.</p> +</div> + +<h2 id="Description">Description</h2> + +<p>Une expression de fonction est très similaire et a presque la même syntaxe qu'une déclaration de fonction (consultez la page sur l'instruction <a href="/fr/docs/Web/JavaScript/Reference/Instructions/function"><code>function</code></a> pour plus de détails). La différence principale entre une expression de fonction et une instruction est le nom de la fonction. En effet, pour les expressions, celui peut être omis (on parle alors d'une fonction <em>anonyme</em>). Consultez l'article <a href="/fr/docs/Web/JavaScript/Guide/Fonctions">Fonctions</a> pour des informations concernant les différences entre les instructions de fonctions et les expressions de fonctions. Une fonction peut être appelée <a href="/fr/docs/Glossaire/IIFE">immédiatement après sa définition (on parle alors de fonction invoquée immédiatement ou <em>IIFE</em> pour <em>Immediately Invoked Function Expression</em> en anglais)</a>.</p> + +<h3 id="Remontée_(hoisting)_des_expressions_de_fonction">Remontée (<em>hoisting</em>) des expressions de fonction</h3> + +<p>En JavaScript, les expressions de fonction ne sont pas remontées (à la différence des déclarations de fonction). Il est donc impossible d'utiliser les expressions de fonction avant leur définition :</p> + +<pre class="brush: js">nonRemontée(); // TypeError: nonRemontée is not a function + +var nonRemontée = function() { + console.log("truc"); +} +</pre> + +<h2 id="Exemples">Exemples</h2> + +<p>L'exemple qui suit définit une fonction anonyme et l'assigne à une variable <code>x</code>. La fonction renvoie le carré de son paramètre :</p> + +<pre class="brush: js">var x = function(y) { + return y * y; +}; +</pre> + +<h3 id="Expression_nommée">Expression nommée</h3> + +<p>Si on souhaite faire référence à une fonction au sein du corps de la fonction, il faudra créer une expression de fonction nommée. Le nom sera alors local au corps de la fonction (portée). Cela permet entre autres d'éviter d'utiliser la propriété non-standard <code><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/arguments/callee">arguments.callee</a></code>.</p> + +<pre class="brush: js">var math = { + 'factorielle': function factorielle(n) { + if (n <= 1) { + return 1; + } + return n * factorielle(n - 1); + } +};</pre> + +<p>La variable affectée à l'expression de fonction aura une propriété <code>name</code>. Ce nom n'est pas modifié si la variable est réaffectée. Si le nom de la fonction est absent, ce sera celui de la variable (nom « implicite »). Cela vaut également pour <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es">les fonctions fléchées</a> :</p> + +<pre class="brush: js">var toto = function() {}; +console.log(toto.name); // "toto" + +var toto2 = toto; +console.log(toto2.name); // "toto" + +var truc = function machin() {} +console.log(truc.name); // "machin" +</pre> + +<h3 id="IIFE_pour_Immediately_Invoked_Function_Expression_ou_expression_de_fonction_immédiatement_appelée">IIFE pour <em>Immediately Invoked Function Expression</em> ou expression de fonction immédiatement appelée</h3> + +<p>On peut utiliser une expression de fonction pour créer une « IIFE », c'est-à-dire une expression de fonction qu'on appelle dès sa définition :</p> + +<pre class="brush: js">var a = "coucou"; +var b = "monde"; + +// IIFE +(function(x, y) { + console.log(x + " " + y); +})(a, b); +// coucou monde +</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-function-definitions', 'Function definitions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-function-definitions', 'Définitions de fonction')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-13', 'Définitions de fonction')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-13', 'Définitions de fonction')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Définition initiale. Implémentée avec JavaScript 1.5.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.operators.function")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Fonctions", "Fonctions et portée des fonctions")}}</li> + <li>{{jsxref("Objets_globaux/Function","L'objet Function")}}</li> + <li>{{jsxref("Instructions/function", "Instruction function")}}</li> + <li>{{jsxref("Instructions/function*", "Instruction function*")}}</li> + <li>{{jsxref("Opérateurs/function*", "Expression function*")}}</li> + <li>{{jsxref("GeneratorFunction")}}</li> + <li><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es">Les fonctions fléchées</a></li> + <li><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/async_function">Les expressions de fonctions asynchrones (l'opérateur <code>async function</code>)</a></li> + <li><a href="/fr/docs/Web/JavaScript/Reference/Instructions/async_function">Les déclarations de fonctions asynchrones (l'instruction <code>async function</code>)</a></li> +</ul> diff --git a/files/fr/web/javascript/reference/opérateurs/l_opérateur_in/index.html b/files/fr/web/javascript/reference/opérateurs/l_opérateur_in/index.html new file mode 100644 index 0000000000..53c02fb41c --- /dev/null +++ b/files/fr/web/javascript/reference/opérateurs/l_opérateur_in/index.html @@ -0,0 +1,145 @@ +--- +title: L'opérateur in +slug: Web/JavaScript/Reference/Opérateurs/L_opérateur_in +tags: + - JavaScript + - Operator + - Reference +translation_of: Web/JavaScript/Reference/Operators/in +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>L'<strong>opérateur <code>in</code></strong> renvoie <code>true</code> si une propriété donnée appartient à l'objet donné (directement ou via sa chaîne de prototype).</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-inoperator.html")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><em>propriété</em> in <em>nomObjet</em> +</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>propriété</code></dt> + <dd>Une expression évaluée en un nombre ou une chaîne de caractères qui représente le nom d'une propriété ou l'indice d'un tableau.</dd> +</dl> + +<dl> + <dt><code>nomObjet</code></dt> + <dd>Le nom de l'objet qu'on souhaite inspecter.</dd> +</dl> + +<h2 id="Description">Description</h2> + +<p>Les exemples suivants illustrent certaines utilisation de l'opérateur <code>in</code>.</p> + +<pre class="brush: js">// Tableaux +var arbres = ["sapin", "hêtre", "cèdre", "chêne", "érable"]; +0 in arbres // renvoie true +3 in arbres // renvoie true +6 in arbres // renvoie false +"hêtre" in arbres // renvoie false (l'indice doit être spécifié, pas la valeur à cet indice) +"length" in arbres // renvoie true (length est une propriété des objets Array) +Symbol.iterator in arbres // renvoie true (les tableaux sont itérables, à partir d'ES6) + +// Objets prédéfinis +"PI" in Math // renvoie true +var ma_chaine = new String("corail"); +"length" in ma_chaine // renvoie true + +// Objets personnalisés +var voiture = {marque : "Honda", modèle : "Accord", année : 1998}; +"marque" in voiture // renvoie true +"modèle" in voiture // renvoie true +"marque" in voiture // renvoie true +"Accord" in voiture // renvoie false +</pre> + +<p>L'opérande droit doit toujours être du type objet (et pas un autre type primitif). Par exemple, on peut utiliser une chaîne créée avec le constructeur <code>String</code>, mais pas une chaîne littérale.</p> + +<pre class="brush: js">var couleur1 = new String("vert"); +"length" in couleur1 // renvoie true +var couleur2 = "corail"; +"length" in couleur2 // génère une erreur (couleur n'est pas un objet String) +</pre> + +<h3 id="Utilisation_de_l'opérateur_in_avec_des_propriétés_supprimées_ou_indéfinies">Utilisation de l'opérateur <code>in</code> avec des propriétés supprimées ou indéfinies</h3> + +<p>Si une propriété est supprimée avec l'opérateur <code><a href="fr/R%c3%a9f%c3%a9rence_de_JavaScript_1.5_Core/Op%c3%a9rateurs/Op%c3%a9rateurs_sp%c3%a9ciaux/L'op%c3%a9rateur_delete">delete</a></code>, l'opérateur <code>in</code> renvoie <code>false</code> pour cette propriété.</p> + +<pre class="brush: js">var voiture = {marque : "Honda", modèle : "Accord", année : 1998}; +delete voiture.marque; +"marque" in voiture // renvoie false + +var arbres = new Array("sapin", "hêtre", "cèdre", "chêne", "érable"); +delete arbres[3]; +3 in arbres // renvoie false +</pre> + +<p>Si une propriété est définie à {{jsxref("Objets_globaux/undefined", "undefined")}} mais n'est pas supprimée, l'opérateur <code>in</code> renverra <code>true</code> pour cette propriété.</p> + +<pre class="brush: js">var voiture = {marque : "Honda", modèle : "Accord", année : 1998}; +voiture.marque = undefined; +"marque" in voiture // renvoie true + +var arbres = new Array("sapin", "hêtre", "cèdre", "chêne", "érable"); +arbres[3] = undefined; +3 in arbres // renvoie true +</pre> + +<h3 id="Propriétés_héritées">Propriétés héritées</h3> + +<p>L'opérateur <code>in</code> renvoie <code>true</code> pour les propriétés qui appartiennent à la chaîne de prototypes. SI on souhaite la présence d'une propriété non-héritée, on utilisera plutôt {{jsxref("Object.prototype.hasOwnProperty()")}}.</p> + +<pre class="brush: js">"toString" in {}; // renvoie true</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-relational-operators', 'Relational Operators')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-relational-operators', 'Opérateurs relationnels')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.8.7', 'Opérateur in')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-11.8.7', 'Opérateurs in')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Définition initiale. Implémentée avec JavaScript 1.4.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.operators.in")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Instructions/for...in","for...in")}}</li> + <li>{{jsxref("Opérateurs/L_opérateur_delete","delete")}}</li> + <li>{{jsxref("Object.prototype.hasOwnProperty()")}}</li> + <li>{{jsxref("Reflect.has()")}}</li> + <li><a href="/fr/docs/Web/JavaScript/Caractère_énumérable_des_propriétés_et_rattachement">Caractère énumérable des propriétés et rattachement</a></li> +</ul> diff --git a/files/fr/web/javascript/reference/opérateurs/l_opérateur_new/index.html b/files/fr/web/javascript/reference/opérateurs/l_opérateur_new/index.html new file mode 100644 index 0000000000..b82a898dc9 --- /dev/null +++ b/files/fr/web/javascript/reference/opérateurs/l_opérateur_new/index.html @@ -0,0 +1,200 @@ +--- +title: L'opérateur new +slug: Web/JavaScript/Reference/Opérateurs/L_opérateur_new +tags: + - JavaScript + - Operator + - Reference +translation_of: Web/JavaScript/Reference/Operators/new +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>L'<strong>opérateur <code>new</code></strong> permet de créer une instance d'un certain type d'objet à partir du constructeur qui existe pour celui-ci (natif ou défini par l'utilisateur).</p> + +<p>Le mot-clé <code>new</code>, utilisé avec une fonction, applique les 4 étapes suivantes :</p> + +<ol> + <li>Il crée un nouvel objet à partir de zéro</li> + <li>Il lie cet objet à un autre objet en le définissant comme son prototype.</li> + <li>Le nouvel objet, créé à l'étape 1, est passé comme valeur <code>this</code> à la fonction</li> + <li>Si la fonction ne renvoie pas d'objet, c'est la valeur <code>this</code> qui est renvoyée.</li> +</ol> + +<div>{{EmbedInteractiveExample("pages/js/expressions-newoperator.html")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">new <em>constructeur</em>[([<em>arguments</em>])]</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>constructeur</code></dt> + <dd>Une fonction ou une classe qui définit le type de l'objet qui sera une instance.</dd> +</dl> + +<dl> + <dt><code>arguments</code></dt> + <dd>Une liste de valeurs correspondant aux arguments avec lesquels appeler le <code>constructeur</code>.</dd> +</dl> + +<h2 id="Description">Description</h2> + +<p>La création d'un objet personnalisé se fait en deux étapes :</p> + +<ol> + <li>Définition du type d'objet en écrivant une fonction.</li> + <li>Création d'une instance de l'objet avec <code>new</code>.</li> +</ol> + +<p>Pour définir un type d'objet, créez une fonction pour ce type qui spécifie son nom, ses propriétés et ses méthodes. Un objet peut avoir des propriétés qui sont elles-mêmes des objets, comme on pourra le voir dans les exemples ci-dessous.</p> + +<p>Lorsque le code <code>new <em>Toto</em>(...)</code> est exécuté, voici ce qui se passe :</p> + +<ol> + <li>Un nouvel objet est créé qui hérite de <code><em>Toto</em>.prototype</code>.</li> + <li>La fonction constructrice <code><em>Toto</em></code> est appelée avec les arguments fournis, <code><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_this">this</a></code> étant lié au nouvel objet créé. <code>new <em>Toto</em></code> sera équivalent à <code>new <em>Toto</em>()</code> (i.e. un appel sans argument).</li> + <li>L'objet renvoyé par le constructeur devient le résultat de l'expression qui contient <code>new</code>. Si le constructeur ne renvoie pas d'objet de façon explicite, l'objet créé à l'étape 1 sera utilisé. (En général, les constructeurs ne renvoient pas de valeurs mais si on souhaite surcharger le processus habituel, on peut utiliser cette valeur de retour).</li> +</ol> + +<p>Il est toujours possible d'ajouter une propriété à un objet défini précédemment. Par exemple, l'instruction <code>voiture1.couleur = "noir"</code> ajoute une propriété couleur à <code>voiture1</code>, et lui assigne une valeur : "<code>noir</code>". Cependant, ceci n'affecte aucunement les autres objets. Pour ajouter une nouvelle propriété à tous les objets du même type, cette propriété doit être ajoutée à la définition du type d'objet <code>Voiture</code>.</p> + +<p>Il est possible d'ajouter une propriété partagée par tous les objets d'un type déjà défini auparavant en utilisant sa propriété <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Function/prototype">Function.prototype</a></code>. Ceci permet de définir une propriété partagée par tous les objets créés avec cette fonction, plutôt que simplement par une seule instance de ce type d'objet. Le code qui suit ajoute une propriété couleur avec la valeur <code>"couleur standard"</code> à tous les objets de type <code>Voiture</code>, et redéfinit ensuite cette valeur avec la chaîne "<code>noir</code>" uniquement pour l'instance d'objet <code>voiture1</code>. Pour plus d'informations, voir la page sur <a href="/fr/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain">prototype</a>.</p> + +<pre class="brush: js">function Voiture() {} +voiture1 = new Voiture(); +voiture2 = new Voiture(); + +console.log(voiture1.couleur); // undefined + +Voiture.prototype.couleur = "couleur standard"; +console.log(voiture1.couleur); // couleur standard + +voiture1.couleur = "noir"; +console.log(voiture1.couleur); // noir + +console.log(voiture1.__proto__.couleur); // couleur standard +console.log(voiture2.__proto__.couleur); // couleur standard +console.log(voiture1.couleur); // noir +console.log(voiture2.couleur); // couleur standard +</pre> + +<div class="note"> +<p><strong>Note :</strong> Si on n'écrit pas l'appel du constructeur avec l'opérateur <code>new</code>, le constructeur est appelé comme une fonction normale et ne crée pas d'objet. Dans ce cas, la valeur de <code>this</code> sera différente.</p> +</div> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Exemple_type_d'objet_et_instance_d'objet">Exemple : type d'objet et instance d'objet</h3> + +<p>Supposons que vous vouliez créer un type d'objet pour les voitures. Vous voulez que ce type d'objet s'appelle <code>Voiture</code>, et qu'il ait des propriétés pour la marque, le modèle et l'année. Pour ce faire, vous écririez la fonction suivante :</p> + +<pre class="brush: js">function Voiture(marque, modèle, année) { + this.marque = marque; + this.modèle = modèle; + this.année = année; +} +</pre> + +<p>À présent, vous pouvez créer un objet appelé <code>ma_voiture</code> de la manière suivante :</p> + +<pre class="brush: js">ma_voiture = new Voiture("Volkswagen", "Golf TDi", 1997); +</pre> + +<p>Cette instruction crée l'objet <code>ma_voiture</code> et assigne les valeurs spécifiées à ses propriétés. La valeur de <code>ma_voiture.marque</code> est alors la chaîne <code>"Volkswagen"</code>, celle de <code>ma_voiture.année</code> est l'entier 1997, et ainsi de suite.</p> + +<p>Il est possible de créer un nombre illimité d'objets <code>Voiture</code> en appelant <code>new</code>. Par exemple :</p> + +<pre class="brush: js">voiture_de_ken = new Voiture("Nissan", "300ZX", 1992); +</pre> + +<h3 id="Exemple_propriété_d'objet_qui_est_elle-même_un_autre_objet">Exemple : propriété d'objet qui est elle-même un autre objet</h3> + +<p>Supposons que vous ayez défini un objet appelé <code>Personne</code> de la manière suivante :</p> + +<pre class="brush: js">function Personne(nom, age, surnom) { + this.nom = nom; + this.age = age; + this.surnom = surnom; +} +</pre> + +<p>Et que vous avez ensuite instancié deux nouveaux objets <code>Personne</code> de la manière suivante :</p> + +<pre class="brush: js">rand = new Personne("Rand McNally", 33, "Randy"); +ken = new Personne("Ken Jones", 39, "Kenny"); +</pre> + +<p>Vous pouvez alors réécrire la définition de <code>Voiture</code> pour contenir une propriété <code>propriétaire</code> qui reçoit un objet <code>Personne</code>, comme ceci :</p> + +<pre class="brush: js">function Voiture(marque, modèle, année, propriétaire) { + this.marque = marque; + this.modèle = modèle; + this.année = année; + this.propriétaire = propriétaire; +} +</pre> + +<p>Pour instancier les nouveaux objets, vous utiliserez ensuite :</p> + +<pre class="brush: js">voiture1 = new Voiture("Volkswagen", "Golf TDi", 1997, rand); +voiture2 = new Voiture("Nissan", "300ZX", 1992, ken); +</pre> + +<p>Plutôt que de passer une chaîne littérale ou une valeur entière lors de la création des nouveaux objets, les instructions ci-dessus utilisent les objets <code>rand</code> et <code>ken</code> comme paramètres pour les propriétaires. Pour connaître le nom du propriétaire de <code>voiture2</code>, on peut alors accéder à la propriété suivante :</p> + +<pre class="brush: js">voiture2.propriétaire.nom +</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-new-operator', 'Opérateur new')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-new-operator', 'Opérateur new')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.2.2', 'Opérateur new')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-11.2.2', 'Opérateur new')}}</td> + <td>{{Spec2('ES3')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-11.2.2', 'Opérateur new')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Définition initiale. Implémentée avec JavaScript 1.0.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.operators.new")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Function")}}</li> + <li>{{jsxref("Reflect.construct()")}}</li> + <li>{{jsxref("Object.prototype")}}</li> +</ul> diff --git a/files/fr/web/javascript/reference/opérateurs/l_opérateur_this/index.html b/files/fr/web/javascript/reference/opérateurs/l_opérateur_this/index.html new file mode 100644 index 0000000000..a5b23ca81d --- /dev/null +++ b/files/fr/web/javascript/reference/opérateurs/l_opérateur_this/index.html @@ -0,0 +1,420 @@ +--- +title: L'opérateur this +slug: Web/JavaScript/Reference/Opérateurs/L_opérateur_this +tags: + - JavaScript + - Operator + - Reference +translation_of: Web/JavaScript/Reference/Operators/this +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>En JavaScript, <strong>le mot-clé <code>this</code></strong> se comporte légèrement différemment des autres langages de programmation. Son comportement variera également légèrement selon qu'on utilise le <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a> ou le mode non-strict.</p> + +<p>Dans la plupart des cas, la valeur de <code>this</code> sera déterminée à partir de la façon dont une fonction est appelée. Il n'est pas possible de lui affecter une valeur lors de l'exécution et sa valeur peut être différente à chaque fois que la fonction est appelée. La méthode {{jsxref("Function.prototype.bind()","bind()")}} a été introduite avec ECMAScript 5 pour <a href="#bind">définir la valeur de <code>this</code> pour une fonction, indépendamment de la façon dont elle est appelée</a>. ECMAScript 2015 (ES6) a ajouté <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es">les fonctions fléchées</a> dans lesquelles <code>this</code> correspond à la valeur du contexte englobant.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-this.html")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">this</pre> + +<h3 id="Valeur">Valeur</h3> + +<p>L'objet JavaScript représentant le contexte dans lequel le code courant est exécuté.</p> + +<h2 id="Dans_le_contexte_global">Dans le contexte global</h2> + +<p>Dans le contexte global d'exécution (c'est-à-dire, celui en dehors de toute fonction), <code>this</code> fait référence à l'objet global (qu'on utilise ou non le mode strict).</p> + +<pre class="brush:js">// Si l'environnement de script est un navigateur, +// l'objet window sera l'objet global +console.log(this === window); // true + +this.a = 37; +console.log(window.a); // 37 + +this.b = "MDN"; +console.log(window.b); // "MDN" +console.log(b); // "MDN" +</pre> + +<div class="blockIndicator note"> +<p><strong>Note :</strong> Il est également possible d'accéder au contexte global avec la propriété {{jsxref("globalThis")}} quel que soit le contexte utilisé pour l'exécution.</p> +</div> + +<h2 id="Dans_le_contexte_dune_fonction">Dans le contexte d'une fonction</h2> + +<p>S'il est utilisé dans une fonction, la valeur de <code>this</code> dépendra de la façon dont la fonction a été appelée.</p> + +<h3 id="Avec_un_appel_simple">Avec un appel simple</h3> + +<pre class="brush:js">function f1(){ + return this; +} + +// Dans un navigateur +f1() === window; // true (objet global) + +// Côté serveur (ex. Node) +f1() === global; // true +</pre> + +<p>Dans cet exemple, la valeur de <code>this</code> n'est pas définie lors de l'appel. Le code n'étant pas en mode strict, <code>this</code> doit toujours être un objet et ce sera donc l'objet global (soit {{domxref("Window", "window")}} pour un navigateur).</p> + +<pre class="brush:js">function f2(){ + "use strict"; // on utilise le mode strict + return this; +} + +f2() === undefined; // true +</pre> + +<p>En mode strict, la valeur de <code>this</code> est conservée (il reste le même) entre le moment de sa définition et l'entrée dans le contexte d'exécution. S'il n'est pas défini, il reste <code>undefined</code>. Il pourrait être défini avec n'importe quelle autre valeur, telle que <code>null</code> ou <code>42</code> ou <code>"Je ne suis pas this"</code>.</p> + +<div class="note"><strong>Note :</strong> Dans ce deuxième exemple,<code>this</code> vaut {{jsxref("undefined")}} car <code>f2</code> a été appelé sans « base » (ex. : <code>window.f2()</code>). Cette fonctionnalité ne fut pas correctement implémentée dans certains navigateurs aux débuts du mode strict, en effet, certains renvoyaient alors l'objet <code>window</code>.</div> + +<h3 id="call_et_apply"><code>call</code> et <code>apply</code></h3> + +<p>Pour passer <code>this</code> d'un contexte à un autre, on pourra utiliser {{jsxref("Function.prototype.call()", "call()")}} ou {{jsxref("Function.prototype.apply()", "apply()")}} :</p> + +<pre class="brush: js">// Un objet peut être passé en premier argument +// de call ou de apply +var obj = { a: "Toto" }; + +// Ici, on déclare une variable et la variable est affectée à l'objet global window comme propriété de celui-ci +var a = "Global"; + +function whatsThis(arg) { + // La valeur de this ici dépend de la façon + // dont la fonction est appelée + return this.a; +} + +whatsThis(); // 'Global' car celui-ci dans la fonction n'est pas défini, il est donc défini par défaut sur l'objet global window +whatsThis.call(obj); // "Toto" +whatsThis.apply(obj); // "Toto" +</pre> + +<p>Lorsque le mot-clé <code>this</code> est utilisé dans le corps d'une fonction, il est possible d'utiliser les méthodes {{jsxref("Function.prototype.call()", "call()")}} ou {{jsxref("Function.prototype.apply()", "apply()")}} pour lier <code>this</code> à un objet donné. Toutes les fonctions héritent de ces méthodes grâce à {{jsxref("Function.prototype")}}.</p> + +<pre class="brush:js">function ajout(c, d){ + return this.a + this.b + c + d; +} + +var o = {a:1, b:3}; + +// Le premier paramètre correspond à l'objet qu'on souhaite +// lier à 'this', les paramètres suivants sont les arguments +// à utiliser dans l'appel de la fonction +ajout.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16 + +// Le premier paramètre correspond à l'objet qu'on souhaite +// lier à 'this', le second paramètre est le tableau dont les +// les éléments sont les arguments à passer à la fonction +ajout.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34 +</pre> + +<p>Note : En mode non-strict, si la valeur à lier à <code>this</code>, passée à <code>call</code> ou <code>apply</code>, n'est pas un objet, le moteur JavaScript tentera de la convertir en un objet grâce à l'opération interne <code>ToObject</code>. Si la valeur est d'un type primitif autre qu'objet, <code>7</code> ou <code>'toto'</code> par exemple, elle sera convertie en un objet grâce au constructeur associé. Ainsi, on aura le nombre <code>7</code> converti en un objet grâce à <code>new Number(7)</code> et la chaîne <code>'toto'</code> convertie en objet grâce à <code>new String('toto')</code>.</p> + +<pre class="brush:js">function truc() { + console.log(Object.prototype.toString.call(this)); +} + +truc.call(7); // [object Number] +truc.call('foo'); // [object String] +</pre> + +<h3 id="La_méthode_bind">La méthode <code>bind</code></h3> + +<p>Avec ECMAScript 5, une nouvelle fonction fut introduite : {{jsxref("Function.prototype.bind()")}}. Lorsqu'on appelle <code>f.bind(unObjet)</code>, on crée une nouvelle fonction qui possède le même corps et la même portée que <code>f</code>, mais où <code>this</code> sera lié, de façon permanente, au premier argument passé à <code>bind</code>, quelle que soit la façon dont la méthode est utilisée.</p> + +<pre class="brush:js">function f(){ + return this.a; +} + +var g = f.bind({a:"azerty"}); +console.log(g()); // azerty + +var h = g.bind({a:"coucou"}); // bind ne fonctionne qu'une seule fois +console.log(h()); // azerty + +var o = {a:37, f:f, g:g, h:h}; +console.log(o.a, o.f(), o.g(), o.h()); // 37, 37, azerty, azerty +</pre> + +<h3 id="Avec_les_fonctions_fléchées">Avec les fonctions fléchées</h3> + +<p>En utilisant <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fléchées">les fonctions fléchées</a>, <code>this</code> correspond à la valeur de <code>this</code> utilisé dans le contexte englobant. Lorsqu'on utilise une fonction fléchée dans du code global, <code>this</code> sera l'objet global :</p> + +<pre class="brush: js">var objetGlobal = this; +var toto = (() => this); +console.log(toto() === objetGlobal); // true</pre> + +<p>Peu importe la façon dont <code>toto</code> sera appelée, <code>this</code> sera toujours l'objet global. Cela est également valable pour les méthodes d'objet (où généralement <code>this</code> correspond à l'objet courant) ou lorsque <code>call</code>, <code>apply</code> ou <code>bind</code> sont utilisés :</p> + +<pre class="brush: js">// Appelé comme la méthode d'un objet +var obj = {toto: toto}; +console.log(obj.toto() === objetGlobal); // true + +// Ici on utilise call +console.log(toto.call(obj) === objetGlobal); // true +// Là on utilise bind +toto = toto.bind(obj); +console.log(toto() === objetGlobal); // true</pre> + +<p>Quelle que soit la méthode utilisée le <code>this</code> de <code>toto</code> sera défini avec la valeur qu'il avait lors de la création (dans l'exemple précédent, il s'agit de l'objet global). Cela vaut également pour les fonctions fléchées créées dans d'autres fonctions : <code>this</code> prendra la valeur de <code>this</code> dans le contexte englobant.</p> + +<pre class="brush: js">// On crée un objet obj qui a une méthode truc +// qui renvoie une fonction qui renvoie la +// valeur de this. +// La fonction qui est renvoyée est créée sous +// la forme d'une fonction fléchée. this est +// donc fixé de façon permanente avec la valeur +// de this du contexte englobant. +var obj = { truc : function() { + var x = (() => this); + return x; + } + }; +// On appelle truc comme une méthode d'obj, this +// vaudra donc obj. On récupère la fonction +// renvoyée par truc et on en stocke une référence +// avec la variable fn +var fn = obj.truc(); + +// On appelle fn sans définir this, par défaut +// en mode strict cela correspondrait à l'objet +// global ou à undefined +console.log(fn() === obj); // true + +// Attention à ne pas référence la méthode d'obj +// sans l'appeler +var fn2 = obj.truc; +// Appeler le this de la fonction fléchée dans ce contexte +// renverra window car c'est le this associé à fn2 (qui +// correspond au contexte global) +console.log(fn2()() == window); // true</pre> + +<p>Dans l'exemple précédent, la fonction affectée à <code>obj.truc</code> renvoie une autre fonction créée sous la forme d'une fonction fléchée. Par conséquent, <code>this</code> vaut toujours <code>obj.truc</code> lorsque la fonction est appelée. Lorsque la fonction est renvoyée, <code>this</code> continue de correspondre à la valeur initiale. Dans ce code, <code>this</code> vaut <code>obj</code> et garde cette valeur, même lorsqu'il est appelé plus tard.</p> + +<h3 id="En_tant_que_méthode_dun_objet">En tant que méthode d'un objet</h3> + +<p>Lorsqu'une fonction est appelée comme méthode d'un objet, <code>this</code> correspondra à l'objet possédant la méthode qu'on appelle.</p> + +<p>Ainsi, dans l'exemple suivant, lorsqu'on appelle <code>o.f()</code>, le <code>this</code> contenu à l'intérieur de la fonction correspond à l'objet <code>o</code>.</p> + +<pre class="brush:js">var o = { + prop: 37, + f: function() { + return this.prop; + } +}; + +console.log(o.f()); // 37 +</pre> + +<p>On notera que ce comportement n'est pas du tout affecté par la façon ou l'endroit de la définition de la fonction. Dans l'exemple précédent, on aurait très bien pu définir la fonction plus tard et la rattacher à une propriété de <code>o</code> plutôt que de la déclarer de cette façon. On aura le même résultat en faisant ainsi :</p> + +<pre class="brush:js">var o = {prop: 37}; + +function indépendante() { + return this.prop; +} + +o.f = indépendante; + +console.log(o.f()); // 37 +</pre> + +<p>On voit ici que ce qui importe est la façon dont la fonction est appelée et non pas la façon dont elle est définie. Ici la fonction est appelée comme une propriété (méthode) de <code>o</code>.</p> + +<p>De la même façon, <code>this</code> n'est affecté que par la référence la plus proche. Autrement dit, dans l'exemple suivant quand on appelle la fonction <code>o.b.g</code>, on appelle la méthode <code>g</code> de l'objet <code>o.b</code>. Ainsi, au moment de l'exécution, <code>this</code> fera référence à <code>o.b</code>. Le fait que cet objet soit une propriété de <code>o</code> n'a aucun impact : seule la référence objet la plus proche compte.</p> + +<pre class="brush:js">o.b = {g: indépendante, prop: 42}; +console.log(o.b.g()); // 42 +</pre> + +<h4 id="this_sur_la_chaîne_de_prototypes_de_lobjet"><code>this</code> sur la chaîne de prototypes de l'objet</h4> + +<p>Ce qui a été vu ci-avant est également applicable pour les méthodes qui sont présentes sur la chaîne de prototypes de l'objet. Si une méthode se situe sur la chaîne de prototype, <code>this</code> fera référence à l'objet appelant (de la même façon que si la méthode était une propriété directe de l'objet).</p> + +<pre class="brush:js">var o = {f:function(){ return this.a + this.b; }}; +var p = Object.create(o); +p.a = 1; +p.b = 4; + +console.log(p.f()); // 5 +</pre> + +<p>Dans cet exemple, l'objet qui est affecté à la variable <code>p</code> ne possède pas directement la propriété <code>f</code>, il en hérite de par son prototype. Cela n'impacte en rien la détermination de <code>this</code> car la recherche de la propriété <code>f</code> remonte le long de la chaîne de prototype et s'arrête à <code>o</code>. Au début de cette recherche, on a une référence à <code>p.f</code>, aussi <code>this</code> fera référence à l'objet représenté par <code>p</code>. Autrement dit <code>f</code> étant appelé comme une méthode de <code>p</code>, <code>this</code> fera ici référence à <code>p</code>. Cette fonctionnalité fait partie des caractéristiques de l'héritage prototypal de JavaScript.</p> + +<h4 id="this_dans_un_getter_ou_setter"><code>this</code> dans un <em>getter</em> ou <em>setter</em></h4> + +<p>Ici aussi, on a le même principe lorsque la fonction est appelée à partir d'un accesseur (<em>getter</em>) ou d'un mutateur (<em>setter</em>). Une fonction utilisée comme accesseur ou mutateur verra son <code>this</code> lié à l'objet à partir duquel on souhaite accéder/changer la propriété.</p> + +<pre class="brush:js">function moduleRéel(){ + return Math.sqrt(this.re * this.re + this.im * this.im); +} + +var o = { + re: 1, + im: -1, + get phase(){ + return Math.atan2(this.im, this.re); + } +}; + +Object.defineProperty(o, 'moduleRéel', { + get: moduleRéel, enumerable:true, configurable:true}); + +console.log(o.phase, o.moduleRéel); // logs -0.78 1.4142 +</pre> + +<h3 id="En_tant_que_constructeur">En tant que constructeur</h3> + +<p>Lorsqu'une fonction est utilisée comme constructeur (c'est-à-dire qu'elle est invoquée avec le mot-clé {{jsxref("Opérateurs/L_opérateur_new","new")}}), le <code>this</code> correspondant sera lié au nouvel objet en train d'être construit.</p> + +<div class="note"> +<p><strong>Note : </strong>Par défaut, un constructeur renverra l'objet auquel <code>this</code> fait référence. Cependant si la valeur de retour du constructeur est définie et est un objet, ce sera elle qui sera renvoyée (sinon ce sera la valeur de <code>this</code>).</p> +</div> + +<pre class="brush:js">/* + * Les constructeurs fonctionnent de la façon suivante : + * + * function MonConstructeur(){ + * // le corps de la fonction + * // on crée des propriétés sur |this| + * // par exemple + * this.fum = "nom"; + * // etc. + * + * // Si la fonction utilise une instruction de + * // retour (return) et renvoie un objet + * // ce sera cet objet qui sera le résultat de + * // l'expression |new|. + * // Sinon, le résultat sera l'objet + * // lié à |this| + * // (ce second cas est celui qu'on rencontre + * // fréquemment). + * } + */ + +function C(){ + this.a = 37; +} + +var o = new C(); +console.log(o.a); // 37 + + +function C2(){ + this.a = 37; + return {a:38}; +} + +o = new C2(); +console.log(o.a); // 38 +</pre> + +<p>Dans le dernier exemple (<code>C2</code>), on renvoie un objet lors de la construction. L'objet qui était lié <code>this</code> est alors abandonné. (L'instruction "<code>this.a = 37;</code>" devient alors totalement inutile, bien qu'elle soit exécutée, elle n'aura aucun effet de bord.)</p> + +<h3 id="En_tant_que_gestionnaire_dévénement_DOM">En tant que gestionnaire d'événement DOM</h3> + +<p>Lorsqu'une fonction est utilisée comme gestionnaire d'événement (<em>event handler</em>), le <code>this</code> correspondant prendra la valeur de l'élément ayant déclenché l'événement (certains navigateurs ne suivent pas cette convention et les gestionnaires sont ajoutés dynamiquement avec d'autres méthodes qu'{{domxref("EventTarget.addEventListener()", "addEventListener()")}}).</p> + +<pre class="brush:js">// Lorsque cette fonction est appelée +// comme listener, l'élément associé +// sera coloré en bleu +function bluify(e){ + // Cette proposition est toujours vraie + console.log(this === e.currentTarget); + + // true lorsque currentTarget et target correspondent + // au même objet + console.log(this === e.target); + + this.style.backgroundColor = '#A5D9F3'; +} + +// On obtient une liste de tous les éléments +// contenus dans le document +var elements = document.getElementsByTagName('*'); + +// On ajout le listener bluify pour réagier au clic +// Quand on clique sur un élément, il deviendra bleu +for(var i=0 ; i<elements.length ; i++){ + elements[i].addEventListener('click', bluify, false); +}</pre> + +<h3 id="En_tant_que_gestionnaire_dévénements_in-line">En tant que gestionnaire d'événements <em>in-line</em></h3> + +<p>Lorsque le code est appelé depuis un gestionnaire d'événement « en ligne » (<em>in-line</em>), la valeur de <code>this</code> correspondra à l'élément du DOM sur lequel on a placé le <em>listener</em>. Ainsi :</p> + +<pre class="brush:js"><button onclick="console.log(this.tagName.toLowerCase());"> + Afficher this +</button> +</pre> + +<p>montrera le texte <code>button</code> lorsqu'on cliquera dessus. Attention, seul le code externe verra la valeur de <code>this</code> affectée de cette façon :</p> + +<pre class="brush:js"><button onclick="console.log((function(){return this})());"> + Afficher le this interne +</button> +</pre> + +<p>Ici, on utilise <code>this </code>à l'intérieur d'une fonction et il n'est pas défini en amont. Il renvoie donc l'objet global (l'objet <code>window</code> pour un navigateur avec du code non-strict).</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-this-keyword', 'Le mot-clé this')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-this-keyword', 'Le mot-clé this')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.1.1', 'Le mot-clé this')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-11.1.1', 'Le mot-clé this')}}</td> + <td>{{Spec2('ES3')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-11.1.1', 'Le mot-clé this')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Définition initiale. Implémentée avec JavaScript 1.0.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.operators.this")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">Le mode strict</a></li> + <li><a href="https://github.com/getify/You-Dont-Know-JS/blob/master/this%20&%20object%20prototypes/README.md#you-dont-know-js-this--object-prototypes">this & les prototypes objet</a> de Kyle Simpson sur GitHub (en anglais)</li> + <li><a href="https://dmitripavlutin.com/gentle-explanation-of-this-in-javascript/">Un article explicatif sur <code>this</code> (en anglais)</a></li> + <li>La propriété {{jsxref("globalThis")}} qui permet d'accéder à l'objet global <code>this</code></li> +</ul> diff --git a/files/fr/web/javascript/reference/opérateurs/l_opérateur_typeof/index.html b/files/fr/web/javascript/reference/opérateurs/l_opérateur_typeof/index.html new file mode 100644 index 0000000000..e65d9a6db2 --- /dev/null +++ b/files/fr/web/javascript/reference/opérateurs/l_opérateur_typeof/index.html @@ -0,0 +1,273 @@ +--- +title: L'opérateur typeof +slug: Web/JavaScript/Reference/Opérateurs/L_opérateur_typeof +tags: + - JavaScript + - Operator + - Reference +translation_of: Web/JavaScript/Reference/Operators/typeof +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>L'opérateur <strong><code>typeof</code></strong> renvoie une chaîne qui indique le type de son opérande.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-typeof.html")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<p>L'opérateur <code>typeof</code> est suivi de son opérande :</p> + +<pre class="syntaxbox">typeof <em>operande</em></pre> + +<h3 id="Paramètre">Paramètre</h3> + +<p><code><em>operande</em></code> est une expression qui représente la valeur dont on souhaite obtenir le type.</p> + +<h2 id="Description">Description</h2> + +<p>Le tableau qui suit liste les résultats possibles de l'opérateur <code>typeof</code>. Pour plus d'informations sur les types et valeurs primitives en JavaScript, voir la page sur <a href="/fr/docs/Web/JavaScript/Structures_de_données#Les_valeurs_primitives">les types et structures de données JavaScript</a>.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Type</th> + <th scope="col">Résultat</th> + </tr> + </thead> + <tbody> + <tr> + <td>indéfini</td> + <td><code>"undefined"</code></td> + </tr> + <tr> + <td>nul</td> + <td><code>"object" </code>(voir ci-après)</td> + </tr> + <tr> + <td>booléen</td> + <td><code>"boolean"</code></td> + </tr> + <tr> + <td>nombre</td> + <td><code>"number"</code></td> + </tr> + <tr> + <td>grand entier</td> + <td><code>"bigint"</code></td> + </tr> + <tr> + <td>chaîne de caractère</td> + <td><code>"string"</code></td> + </tr> + <tr> + <td>symbole (nouveauté d'ECMAScript 6 / 2015)</td> + <td><code>"symbol"</code></td> + </tr> + <tr> + <td>objet de l'environnement (fourni par l'environnement dans lequel est utilisé JS)</td> + <td><em>Résultat différent selon l'implémentation</em></td> + </tr> + <tr> + <td>Objet Function (au sens ECMA-262, un objet qui implémente [[Call]])</td> + <td><code>"function"</code></td> + </tr> + <tr> + <td>Tout autre objet</td> + <td><code>"object"</code></td> + </tr> + </tbody> +</table> + +<h2 id="Exemples">Exemples</h2> + +<pre class="brush:js">// Pour les nombres +typeof 37 === 'number'; +typeof 3.14 === 'number'; +typeof(42) === 'number'; +typeof Math.LN2 === 'number'; +typeof Infinity === 'number'; +typeof NaN === 'number'; // Bien que littéralement ce soit "Not-A-Number"… +typeof Number('1') === 'number'; // Number essaie de convertir l'argument en nombre + +// Grand entier +typeof 42n === 'bigint'; + +// Les chaînes de caractères +typeof "" === 'string'; +typeof "bla" === 'string'; +typeof "1" === 'string'; // on a ici un nombre écrit sous forme d'une chaîne +typeof (typeof 1) === 'string'; // typeof renvoie toujours une chaîne +typeof String(1) === 'string'; // String convertit n'importe quelle valeur en chaîne + + +// Les booléens +typeof true === 'boolean'; +typeof false === 'boolean'; +typeof Boolean(1) === 'boolean'; // Boolean convertit n'importe quelle valeur en son équivalent logique +typeof !!(1) === 'boolean'; // deux appels à l'opérateur ! (le NON logique) sont équivalents à Boolean() + + +// Les symboles +typeof Symbol() === 'symbol' +typeof Symbol('foo') === 'symbol' +typeof Symbol.iterator === 'symbol' + + +// Indéfini +typeof undefined === 'undefined'; +typeof blabla === 'undefined'; // pour une variable indéfinie + + +// Les objets +typeof {a:1} === 'object'; + +// Utiliser la méthode <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/isArray">Array.isArray</a> ou Object.prototype.toString.call +// afin de différencier les objets des tableaux +typeof [1, 2, 4] === 'object'; + +typeof new Date() === 'object'; +typeof /regex/ === 'object'; // Voir la section sur les expressions rationnelles + +// Les expressions suivantes sont source de confusion +// à ne pas utiliser sous cette forme +typeof new Boolean(true) === 'object'; +typeof new Number(1) === 'object'; +typeof new String("abc") === 'object'; + + +// Les fonctions +typeof function(){} === 'function'; +typeof class C {} === 'function'; +typeof Math.sin === 'function'; +</pre> + +<h2 id="Informations_supplémentaires">Informations supplémentaires</h2> + +<h3 id="null"><code>null</code></h3> + +<pre class="brush:js">// Cela est valable depuis les commencements de JavaScript +typeof null === 'object'; +</pre> + +<p>Lors de la première implémentation de JavaScript, les valeurs JavaScript étaient représentées avec une étiquette de type et une valeur. Pour les objets, l'étiquette de type était 0. <code>null</code> était représenté par la valeur NULL (0x00 pour la plupart des plates-formes). Par conséquent, l'étiquette de type de <code>null</code> valait 0, d'où le comportement de <code>typeof</code> (<a href="https://www.2ality.com/2013/10/typeof-null.html">source</a>).</p> + +<p>Un correctif fut proposé pour ECMAScript mais il fut <a class="external" href="https://web.archive.org/web/20160331031419/http://wiki.ecmascript.org:80/doku.php?id=harmony:typeof_null">refusé</a>. Avec cette version, on aurait eu <code>typeof null === 'null'</code>.</p> + +<h3 id="Utiliser_l'opérateur_new">Utiliser l'opérateur <code>new</code></h3> + +<pre class="brush: js">// Tous les constructeurs doivent être employés +// avec le mot-clé "new" +var maChaine = new String("toto"); +var monNombre = new Number(100); + +typeof maChaine; // renverra "object" +typeof monNombre; // renverra "object" + +// En revanche avec le constructeur Function, +// on aura : +var maFonction = new Function(); +typeof maFonction; // renverra "function"</pre> + +<h3 id="Utilisation_des_parenthèses">Utilisation des parenthèses</h3> + +<pre class="brush: js">// Les parenthèses peuvent s'avérer utile pour +// déterminer le type de données d'une expression +// complète + +var maDonnee = 99; + +typeof maDonnee + 'Toto'; // renverra 'number Toto' +typeof (maDonnee + 'Toto'); // renverra 'string' +</pre> + +<h3 id="Expressions_rationnelles">Expressions rationnelles</h3> + +<p>Les expressions rationnelles qu'on peut appeler directement furent parfois ajoutées de façon non standard dans certains navigateurs.</p> + +<pre class="brush:js">typeof /s/ === 'function'; // Chrome 1 à 12 : Non conforme à ECMAScript 5.1 +typeof /s/ === 'object'; // À partir de Firefox 5 : Conforme à ECMAScript 5.1 +</pre> + +<h3 id="Zone_morte_temporaire_(Temporal_Dead_Zone_TDZ)">Zone morte temporaire (<em>Temporal Dead Zone</em> / TDZ)</h3> + +<p>Avant ECMAScript 2015 (ES6), <code>typeof</code> retournait toujours une chaîne de caractères, quel que soit l'opérande utilisé. On ne pouvait pas avoir d'erreur en utilisant <code>typeof</code>.</p> + +<p>Avec l'apparition des opérateurs <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/let">let</a></code> et <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/const">const</a></code>, si on utilise <code>typeof</code> sur des variables déclarées avec ces opérateurs (ou avec une classe) avant leur déclaration, cela déclenchera une erreur {{jsxref("ReferenceError")}}. Si on utilise <code>typeof</code> sur une variable déclarée avec <code>var</code> avant la déclaration, cela renverra <code>undefined</code>. Les variables déclarées avec <code>let</code> et <code>const</code> sont en fait placées dans une <em><a href="/fr/docs/Web/JavaScript/Reference/Instructions/let#Zone_morte_temporaire_(Temporal_Dead_Zone_TDZ)_et_les_erreurs_liées_à_let">zone morte temporaire </a></em>entre le début du bloc et leur initialisation et dans cette zone, tout accès à la variable produit une erreur.</p> + +<pre class="brush: js">typeof variableGlobaleNonDeclaree === "undefined"; + +typeof variableLet; // ReferenceError +let variableLet; + +typeof constante; // ReferenceError +const constante = "coucou"; + +typeof maClasse; // ReferenceError +class maClasse{};</pre> + +<h3 id="Exceptions">Exceptions</h3> + +<p>Tous les navigateurs actuels exposent un objet non-standard {{domxref("document.all")}} dont le type est <code>"undefined"</code>.</p> + +<pre class="brush: js">typeof document.all === "undefined";</pre> + +<p>Bien que la spécification requière que les objets exostiques aient des types différents, ces types doivent être des chaînes différentes des chaînes existantes pour les objets standards. À ce titre, le type de <code>document.all</code> représente une violation « volontaire » du standard ECMAScript original.</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-typeof-operator', 'Opérateur typeof')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-typeof-operator', 'Opérateur typeof')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.4.3', 'Opérateur typeof')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-11.4.3', 'Opérateur typeof')}}</td> + <td>{{Spec2('ES3')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-11.4.3', 'Opérateur typeof')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Définition initiale, implémentée avec JavaScript 1.1.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.operators.typeof")}}</p> + +<h2 id="Notes_spécifiques_à_IE">Notes spécifiques à IE</h2> + +<p>Pour les versions 6, 7 et 8 d'Internet Explorer, les objets de l'environnement hôte sont des objets et non des fonctions. Par exemple, on aura :</p> + +<pre class="brush: js">typeof alert === 'object'</pre> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>L'opérateur {{jsxref("Opérateurs/instanceof","instanceof")}}</li> + <li><a href="http://es-discourse.com/t/why-typeof-is-no-longer-safe/15">Discussion es-discuss sur l'évolution de <code>typeof</code> avec ECMAScript 2015 et <code>let</code></a></li> + <li><a href="https://github.com/tc39/ecma262/issues/668">À propos du non-respect volontaire du standard avec le type de <code>document.all</code></a></li> +</ul> diff --git a/files/fr/web/javascript/reference/opérateurs/l_opérateur_virgule/index.html b/files/fr/web/javascript/reference/opérateurs/l_opérateur_virgule/index.html new file mode 100644 index 0000000000..d3ccf9c8f4 --- /dev/null +++ b/files/fr/web/javascript/reference/opérateurs/l_opérateur_virgule/index.html @@ -0,0 +1,107 @@ +--- +title: L'opérateur virgule +slug: Web/JavaScript/Reference/Opérateurs/L_opérateur_virgule +tags: + - JavaScript + - Opérateur + - Reference +translation_of: Web/JavaScript/Reference/Operators/Comma_Operator +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>L'opérateur<strong> virgule</strong> permet d'évaluer chacun de ses opérandes (de la gauche vers la droite) et de renvoyer la valeur du dernier opérande.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-commaoperators.html")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><em>expr1</em>, <em>expr2, expr3...</em></pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>expr1</code>, <code>expr2, expr3...</code></dt> + <dd>Des expressions JavaScript.</dd> +</dl> + +<h2 id="Description">Description</h2> + +<p>L'opérateur virgule peut être utilisé lorsqu'on souhaite utiliser plusieurs expressions là où la syntaxe n'en attend qu'une seule. Cet opérateur est souvent utilisé dans une boucle {{jsxref("Instructions/for","for")}} afin de fournir plusieurs paramètres.</p> + +<p>L'opérateur virgule est à différencier de la virgule utilisée pour séparer les éléments d'un tableau ou les propriétés d'un objet ou encore les arguments d'une fonction.</p> + +<h2 id="Exemples">Exemples</h2> + +<p>SI on a un tableau à 2 dimensions appelé <code>monTableau</code>, qui possède 10 éléments ayant chacun 10 éléments, on peut utiliser le code suivant avec l'opérateur virgule afin d'incrémenter deux variables (<code>i</code> et <code>j</code>) à la fois. Attention, la virgule utilisée au sein de l'instruction <code>var</code> <strong>n'est pas</strong> l'opérateur virgule (car il ne peut exister au sein d'une expression) ; ici c'est un caractère spécial de l'instruction {{jsxref("Instructions/var","var")}}. Le code qui suit affiche les éléments présents sur la diagonale de cette matrice :</p> + +<pre class="brush:js;highlight:[1]">for (var i = 0, j = 9; i <= 9; i++, j--){ + console.log("monTableau[" + i + "][" + j + "] = " + monTableau[i][j]); +}</pre> + +<p>Dans le code suivant, <code>a</code> est défini avec la valeur de <code>b = 3</code> (qui est 3) et l'expression <code>c = 4</code> est toujours évaluée et c'est ce résultat affiché dans la console du fait de la précédence et de l'associativité des opérateurs.</p> + +<pre class="brush: js">var a, b, c; +a = b = 3, c = 4; // Renvoie 4 dans la console +console.log(a); // 3</pre> + +<p>Pour isoler la précédence de l'opérateur, on peut utiliser des parenthèses :</p> + +<pre class="brush: js">var x, y, z; +x = (y = 5, z = 6); // Renvoie 6 dans la console +console.log(x); // 6</pre> + +<h3 id="Effectuer_un_traitement_puis_renvoyer_une_valeur">Effectuer un traitement puis renvoyer une valeur</h3> + +<p>Un autre exemple consiste à effectuer un certain traitement sur la variable puis à renvoyer le résultat. Par définition, seul le dernier élément sera renvoyé mais les instructions précédentes seront bien exécutées. AInsi, on pourrait avoir :</p> + +<pre class="brush: js">function maFonction () { + var x = 0; + + return (x += 1, x); // ce qui revient à renvoyer ++x +}</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-comma-operator', 'Comma operator')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-comma-operator', 'Comma operator')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.14', 'Comma operator')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-11.14', 'Comma operator')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Définition initiale</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.operators.comma")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>Les boucles {{jsxref("Instructions/for","for")}}</li> +</ul> diff --git a/files/fr/web/javascript/reference/opérateurs/l_opérateur_void/index.html b/files/fr/web/javascript/reference/opérateurs/l_opérateur_void/index.html new file mode 100644 index 0000000000..e15eb1ed76 --- /dev/null +++ b/files/fr/web/javascript/reference/opérateurs/l_opérateur_void/index.html @@ -0,0 +1,122 @@ +--- +title: L'opérateur void +slug: Web/JavaScript/Reference/Opérateurs/L_opérateur_void +tags: + - JavaScript + - Operator + - Reference +translation_of: Web/JavaScript/Reference/Operators/void +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>L'<strong>opérateur <code>void</code></strong> permet d'évaluer une <em>expression</em> donnée et de renvoyer <code>undefined</code>.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-voidoperator.html")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">void <em>expression</em></pre> + +<h2 id="Description">Description</h2> + +<p>Cet opérateur permet d'évaluer des expressions retournant une valeur là où on attend une expression qui vaut {{jsxref("undefined")}}.</p> + +<p>L'opérateur <code>void</code> est souvent utilisé pour obtenir la valeur <code>undefined</code>, généralement avec "<code>void(0)</code>" (qui est l'équivalent de "<code>void 0</code>"). Pour ce cas d'exemple, on aurait très bien pu utiliser la variable globale {{jsxref("undefined")}}.</p> + +<p>Attention à <a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Pr%C3%A9c%C3%A9dence_des_op%C3%A9rateurs">la précédence des opérateurs</a> et notamment de celle de <code>void</code>, si besoin, on pourra utiliser des parenthèses pour clarifier la résolution de l'expression :</p> + +<pre class="brush: js">void 2 == '2'; // renvoie false +void (2 === '2'); // renvoie undefined</pre> + +<h2 id="Expressions_de_fonction_appelées_immédiatement">Expressions de fonction appelées immédiatement</h2> + +<p>Lorsqu'on utilise tout un script dans une fonction qu'on évalue immédiatement, <code>void</code> peut être utilisé pour que le mot-clé <code>function</code> soit traité comme une expression plutôt que comme une déclaration.</p> + +<pre class="brush: js">void function iife() { + var toto = function () {}; + var machin = function () {}; + var truc = function () { + toto(); + machin(); + }; + var bidule = function () {}; + + truc(); + bidule(); +}(); +</pre> + +<h2 id="Les_URI_JavaScript">Les URI JavaScript</h2> + +<p>Lorsqu'un navigateur utilise une URI avec <code>javascript:</code>, le code de l'URI est évalué et le résultat remplace le contenu de la page, sauf si la valeur renvoyée vaut {{jsxref("Objets_globaux/undefined","undefined")}}. L'utilisateur <code>void</code> peut alors être utilisé pour renvoyer cette valeur. Par exemple :</p> + +<pre><a href="javascript:void(0);"> + Cliquer ici (sans effet) +</a> + +<a href="javascript:void(document.body.style.backgroundColor='green');"> + Cliquer ici pour rendre le fond vert +</a></pre> + +<p>Malgré cela, il n'est pas recommandé d'utiliser le pseudo-protocole <code>javascript:</code>, on lui préférera des méthodes moins risquées et moins intrusives comme les gestionnaires d'événements.</p> + +<h2 id="Fonctions_fléchées_sans_valeur_de_retour">Fonctions fléchées sans valeur de retour</h2> + +<p>Les fonctions fléchées raccourcissent la syntaxe pour obtenir la valeur d'une fonction avec le résultat d'une expression qui constitue le corps de la fonction. Ainsi, la fonction renvoie nécessairement une valeur. Aussi, convertir une base de code afin d'utiliser des fonctions fléchées peut avoir certains effets de bord lorsqu'on souhaite qu'une fonction soit simplement exécutée mais pas que sa valeur de retour interfère avec le reste.</p> + +<p>Pour éviter de transmettre cette valeur de retour, on pourra utiliser l'opérateur <code>void</code> :</p> + +<pre class="brush: js">button.onclick = () => void faireQQc();</pre> + +<p>Ainsi, la valeur de retour de la fonction <code>faireQQc</code> sera bloquée par <code>void</code> et c'est <code>undefined</code> qui sera la valeur de retour de la fonction fléchée. Cela s'avère utile si on change l'API de <code>faireQQc</code> par exemple et qu'on souhaite éviter les effets de bord causés par cette modification.</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-void-operator', 'Opérateur void')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-void-operator', 'L\'opérateur void')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.4.2', 'L\'opérateur void')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-11.4.2', 'L\'opérateur void')}}</td> + <td>{{Spec2('ES3')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-11.4.2', 'L\'opérateur void')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Définition initiale. Implémentée avec JavaScript 1.1</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.operators.void")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("undefined")}}</li> +</ul> diff --git a/files/fr/web/javascript/reference/opérateurs/new.target/index.html b/files/fr/web/javascript/reference/opérateurs/new.target/index.html new file mode 100644 index 0000000000..63be303c4c --- /dev/null +++ b/files/fr/web/javascript/reference/opérateurs/new.target/index.html @@ -0,0 +1,110 @@ +--- +title: new.target +slug: Web/JavaScript/Reference/Opérateurs/new.target +tags: + - ECMAScript 2015 + - JavaScript + - Reference +translation_of: Web/JavaScript/Reference/Operators/new.target +--- +<div>{{JSSidebar("Operators")}}</div> + +<p>La syntaxe<strong> <code>new.target</code></strong> est disponible dans toutes les fonctions et permet entre autres de tester si une fonction ou un constructeur a été appelé avec <code>new</code>. Dans les constructeurs, il fait référence au constructeur invoqué par <code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_new">new</a></code>. Dans les appels de fonction « normaux », <code>new.target</code> vaut {{jsxref("undefined")}}.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-newtarget.html")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">new.target</pre> + +<h2 id="Description">Description</h2> + +<p>La syntaxe <code>new.target</code> se compose du mot-clé <code>new</code>, suivi d'un point puis d'un nom de propriété (ici <code>target</code>). Généralement et par ailleurs, <code>new.</code> est utilisé comme contexte pour accéder à une propriété. Ici, <code>new.</code> ne fait pas réellement référence à un objet. Dans les appels de constructeurs, <code>new.target</code> fait référence au constructeur qui a été appelé par <code>new</code>. Cette syntaxe permet donc de récupérer cette valeur.</p> + +<p><code>new.target</code> est une méta-propriété, disponible pour toutes les fonctions. Dans <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es">les fonctions fléchées</a>, <code>new.target</code> fait référence au <code>new.target</code> de la fonction englobante.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Utilisation_de_new.target_dans_les_appels_de_fonction">Utilisation de <code>new.target</code> dans les appels de fonction</h3> + +<p>Utilisé dans les appels de fonctions « classiques » (autrement dit pour les fonctions qui ne sont pas des constructeurs), <code>new.target</code> vaut {{jsxref("undefined")}}. Cela permet de détecter si une fonction a été appelée comme constructeur avec <code><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_new">new</a></code> :</p> + +<pre class="brush: js">function Toto(){ + if (!new.target) throw "Toto() doit être appelé avec new" + console.log("Toto instancié avec new"); +} + +new Toto(); // affiche "Toto instancié avec new" dans la console +Toto(); // lève l'exception avec "Toto doit être appelé avec new" +</pre> + +<h3 id="Utilisation_de_new.target_dans_les_constructeurs">Utilisation de <code>new.target</code> dans les constructeurs</h3> + +<p>Utilisés dans les appels de constructeurs de classe, <code>new.target</code> fait référence au constructeur utilisé directement avec <code>new</code>. C'est également le cas quand le constructeur est présent dans une classe parente et est délégué depuis le constructeur fils :</p> + +<pre class="brush: js">class A { + constructor() { + console.log(new.target.name); + } +} + +class B extends A { constructor() { super(); } } + +var a = new A(); // affiche "A" +var b = new B(); // affiche "B" + +class C { + constructor() { + console.log(new.target); + } +} + +class D extends C { + constructor() { + super(); + } +} + +var c = new C(); // function C() +var d = new D(); // function D() +</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-built-in-function-objects', 'Built-in Function Objects')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Définition initiale.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-built-in-function-objects', 'Built-in Function Objects')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.operators.new_target")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/JavaScript/Reference/Fonctions">Les fonctions</a></li> + <li><a href="/fr/docs/Web/JavaScript/Reference/Classes">Les classes</a></li> + <li><code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_new">new</a></code></li> + <li><code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_this">this</a></code></li> + <li><a href="https://tech.mozfr.org/post/2015/08/12/ES6-en-details-%3A-les-sous-classes-et-l-heritage">Cet article sur les classes traduit en français</a></li> +</ul> diff --git a/files/fr/web/javascript/reference/opérateurs/nullish_coalescing_operator/index.html b/files/fr/web/javascript/reference/opérateurs/nullish_coalescing_operator/index.html new file mode 100644 index 0000000000..06de88d2b1 --- /dev/null +++ b/files/fr/web/javascript/reference/opérateurs/nullish_coalescing_operator/index.html @@ -0,0 +1,151 @@ +--- +title: Opérateur de coalescence des nuls (Nullish coalescing operator) +slug: Web/JavaScript/Reference/Opérateurs/Nullish_coalescing_operator +tags: + - Coalescence + - JavaScript + - Opérateur + - Reference + - falsy + - nullish +translation_of: Web/JavaScript/Reference/Operators/Nullish_coalescing_operator +--- +<p>{{JSSidebar("Operators")}}</p> + +<p>L'<strong>opérateur de coalescence des nuls</strong> (<code>??</code>), est un opérateur logique qui renvoie son opérande de droite lorsque son opérande de gauche vaut <code>{{jsxref("null")}}</code> ou <code>{{jsxref("undefined")}}</code> et qui renvoie son opérande de gauche sinon.</p> + +<p>Contrairement à <a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_logiques">l'opérateur logique OU (<code>||</code>)</a>, l'opérande de gauche sera renvoyé s'il s'agit d'une <a href="/fr/docs/Glossaire/Falsy">valeur équivalente à <code>false</code></a> <strong>qui n'est ni</strong> <code>null</code><strong>, ni</strong> <code>undefined</code>. En d'autres termes, si vous utilisez <code>||</code> pour fournir une valeur par défaut à une variable <code>foo</code>, vous pourriez rencontrer des comportements inattendus si vous considérez certaines valeurs <em>falsy</em> comme utilisables (par exemple une chaine vide <code>''</code> ou <code>0</code>). Voir ci-dessous pour plus d'exemples.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-nullishcoalescingoperator.html")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox notranslate"><var>leftExpr</var> ?? <var>rightExpr</var> +</pre> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Utilisation_de_lopérateur_de_coalescence_des_nuls">Utilisation de l'opérateur de coalescence des nuls</h3> + +<p>Dans cet exemple, nous fournirons des valeurs par défaut mais conserverons des valeurs autres que <code>null</code> ou <code>undefined</code>.</p> + +<pre class="brush: js notranslate">const valeurNulle = null; +const texteVide = ""; // falsy +const unNombre = 42; + +const valA = valeurNulle ?? "valeur par défaut pour A"; +const valB = texteVide ?? "valeur par défaut pour B"; +const valC = unNombre ?? 0; + +console.log(valA); // "valeur par défaut pour A" +console.log(valB); // "" (car la chaine vide n'est ni `<code>null`</code> ni `<code>undefined`</code>) +console.log(valC); // 42</pre> + +<h3 id="Affectation_dune_valeur_par_défaut_à_une_variable">Affectation d'une valeur par défaut à une variable</h3> + +<p>Auparavant, lorsque l'on voulait attribuer une valeur par défaut à une variable, une solution fréquente consistait à utiliser l'opérateur logique OU (<code>||</code>) :</p> + +<pre class="brush: js notranslate">let toto; + +// toto ne se voit jamais attribuer de valeur, il vaut donc undefined +let unTexteBateau = toto || 'Coucou !';</pre> + +<p>Cependant, parce que <code>||</code> est un opérateur logique booléen, l'opérande de gauche a été converti en un booléen pour l'évaluation et aucune valeur <em>falsy</em> (<code>0</code>, <code>''</code>, <code>NaN</code>, <code>null</code>, <code>undefined</code>) n'a été renvoyée. Ce comportement peut entraîner des conséquences inattendues si on souhaite considérer <code>0</code>, <code>''</code> ou <code>NaN</code> comme des valeurs valides.</p> + +<pre class="brush: js notranslate">let compteur = 0; +let texte = ""; + +let qté = compteur || 42; +let message = texte || "Coucou !"; +console.log(qté); // 42 et non 0 +console.log(message); // "Coucou !" et non "" +</pre> + +<p>L'opérateur de coalescence des nuls évite ce risque en ne renvoyant le deuxième opérande que lorsque le premier vaut <code>null</code> ou <code>undefined</code> (mais pas d'autres valeurs <em>falsy</em>) :</p> + +<pre class="brush: js notranslate">let monTexte = ''; // Un chaine vide (qui est donc une valeur falsy) + +let notFalsyText = monTexte || 'Hello world'; +console.log(notFalsyText); // Hello world + +let preservingFalsy = monTexte ?? 'Salut le voisin'; +console.log(preservingFalsy); // '' (car monTexte n'est ni null ni undefined) +</pre> + +<h3 id="Court-circuitage">Court-circuitage</h3> + +<p>À l'instar des opérateurs logiques OR (<code>||</code>) et AND (<code>&&</code>), l'expression de droite n'est pas évaluée si celle de gauche ne vaut ni <code>null</code> ni <code>undefined</code>.</p> + +<pre class="brush: js notranslate">function A() { console.log('A a été appelée'); return undefined; } +function B() { console.log('B a été appelée'); return false; } +function C() { console.log('C a été appelée'); return "toto"; } + +console.log( A() ?? C() ); +// Inscrit "A a été appelée" puis "C a été appelée" et enfin "toto" +// puisque : A() retourne undefined, les deux expressions sont donc évaluées + +console.log( B() ?? C() ); +// Inscrit "B a été appelée" puis false +// puisque : B() retourne false (et non null ou undefined) et +// l'opérande de droite n'est pas évaluée +</pre> + +<h3 id="Pas_de_chaînage_possible_avec_les_opérateurs_AND_ou_OR">Pas de chaînage possible avec les opérateurs AND ou OR</h3> + +<p>Il n'est pas possible de combiner les opérateurs AND (<code>&&</code>) ou OR (<code>||</code>) directement avec l'opérateur de coalescence des nuls (<code>??</code>). Un tel cas lèverait une exception <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/SyntaxError">SyntaxError</a></code>.</p> + +<pre class="brush: js example-bad notranslate">null || undefined ?? "toto"; // soulève une SyntaxError +true || undefined ?? "toto"; // soulève une SyntaxError</pre> + +<p>Cependant, fournir des parenthèses pour indiquer explicitement la priorité est correct :</p> + +<pre class="brush: js example-good notranslate">(null || undefined) ?? "toto"; // Renvoie "toto" +</pre> + +<h3 id="Relation_avec_lopérateur_de_chaînage_optionnel_.">Relation avec l'opérateur de chaînage optionnel (<code>?.</code>)</h3> + +<p>Tout comme l'opérateur de coalescence des nuls, l'<a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Optional_chaining">opérateur de chaînage optionnel (?.)</a> traite les valeurs <code>null</code> et <code>undefined</code> comme des valeurs spécifiques. Ce qui permet d'accéder à une propriété d'un objet qui peut être <code>null</code> ou <code>undefined</code>.</p> + +<pre class="brush: js notranslate">let toto = { uneProprieteToto: "coucou" }; + +console.log(toto.uneProprieteToto?.toUpperCase()); // "COUCOU" +console.log(toto.uneProprieteTiti?.toUpperCase()); // undefined +</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#prod-Nulli', 'nullish coalescing expression')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("javascript.operators.nullish_coalescing")}}</p> + +<h3 id="Progression_de_limplantation">Progression de l'implantation</h3> + +<p>Le tableau suivant montre l'état quotidien de l'implantation de cette fonctionnalité car elle n'est pas encore stable entre les navigateurs. Les données sont générées en exécutant les contrôles de fonctionnalité appropriés décrits par <a class="external external-icon" href="https://github.com/tc39/test262" rel="noopener">Test262</a>, la suite de contrôle normée de JavaScript, dans la version nightly ou la dernière version officielle de chaque moteur d'exécution de JavaScript des navigateurs.</p> + +<p>{{EmbedTest262ReportResultsTable("coalesce-expression")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Glossaire/Falsy"><em>Falsy values</em> (Valeurs équivalentes à <code>false</code> dans un contexte booléen)</a></li> + <li><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Optional_chaining">Opérateur de chaînage optionnel (<em>optional chaining</em>)</a></li> + <li><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_logiques#Logical_OR">Opérateur logique OU (<code>||</code>)</a></li> + <li><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Valeurs_par_d%C3%A9faut_des_arguments">Valeurs par défaut des arguments</a></li> +</ul> diff --git a/files/fr/web/javascript/reference/opérateurs/optional_chaining/index.html b/files/fr/web/javascript/reference/opérateurs/optional_chaining/index.html new file mode 100644 index 0000000000..9885b6d8ca --- /dev/null +++ b/files/fr/web/javascript/reference/opérateurs/optional_chaining/index.html @@ -0,0 +1,196 @@ +--- +title: Chaînage optionnel (optional chaining) +slug: Web/JavaScript/Reference/Opérateurs/Optional_chaining +tags: + - Chaînage + - Chaînage optionnel + - Coalescence + - JavaScript + - Operator + - Opérateur + - Reference +translation_of: Web/JavaScript/Reference/Operators/Optional_chaining +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>L'opérateur de <strong>chaînage optionnel</strong> <strong><code>?.</code></strong> permet de lire la valeur d'une propriété située profondément dans une chaîne d'objets connectés sans avoir à valider expressément que chaque référence dans la chaîne est valide. <span class="seoSummary">L'opérateur <code>?.</code> fonctionne de manière similaire à l'opérateur de chaînage <code>.</code>, à ceci près qu'au lieu de causer une erreur si une référence est {{jsxref("null")}} ou {{jsxref("undefined")}}, l'expression se court-circuite avec <code>undefined</code> pour valeur de retour.</span> Quand il est utilisé avec des appels de fonctions, il retourne <code>undefined</code> si la fonction donnée n'existe pas.</p> + +<p>Ceci résulte en des expressions plus courtes et plus simples lors de l'accès à des propriétés chaînées quand il est possible qu'une référence soit manquante. Ceci peut aussi être utile lors de l'exploration du contenu d'un objet lorsqu'il n'y a aucune garantie concernant les propriétés qui sont requises.</p> + +<p>Le chainage optionnel ne peut pas être utilisé sur un objet initialement inexistant. Il ne remplace les vérifications du type <code>if (typeof a == "undefined")</code>.</p> + +<p>{{EmbedInteractiveExample("pages/js/expressions-optionalchainingoperator.html")}}</p> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox notranslate"><var>obj</var>?.<var>prop</var> +<var>obj</var>?.[<var>expr</var>] +<em>arr?.[index]</em> +<var>func</var>?.(<var>args</var>) +</pre> + +<h2 id="Description">Description</h2> + +<p>L'opérateur de chaînage optionnel fournit un moyen de simplifier l'accès aux valeurs au sein d'objets connectés quand il est possible qu'une référence ou une fonction soit <code>undefined</code> ou <code>null</code>.</p> + +<p>Par exemple, considérant un objet <code>obj</code> qui a une structure imbriquée. Sans chaînage optionnel, chercher une sous-propriété imbriquée en profondeur requiert de valider les références intermédiaires, tel que :</p> + +<pre class="brush: js notranslate">let nestedProp = obj.premier && obj.premier.second;</pre> + +<p>La valeur de <code>obj.premier</code> est confirmée comme n'étant pas <code>null</code> (ni <code>undefined</code>) avant que d'accéder à la valeur de <code>obj.premier.second</code>. Ceci prévient l'erreur qui pourrait survenir si vous accédiez simplement <code>obj.premier.second</code> directement sans vérifier <code>obj.premier</code>.</p> + +<p>Avec l'opérateur de chaînage optionnel (<code>?.</code>), vous n'avez pas besoin de vérifier explicitement et de court-circuiter la vérification selon l'état de <code>obj.premier</code> avant que d'accéder à <code>obj.premier.second</code> :</p> + +<pre class="brush: js notranslate">let nestedProp = obj.<code>premier</code>?.second;</pre> + +<p>En utilisant l'opérateur <code>?.</code> au lieu de l'opérateur <code>.</code>, JavaScript sait implicitement qu'il doit vérifier <code>obj.premier</code> pour être certain qu'il ne soit <code>null</code> ou <code>undefined</code> avant que de tenter d'accéder à <code>obj.first.second</code>. Si <code>obj.premier</code> est <code>null</code> ou <code>undefined</code>, l'expression se court-circuite automatiquement et retourne <code>undefined</code>.</p> + +<p>C'est équivalent à : </p> + +<pre class="brush: js notranslate">let temp = obj.<code>premier</code>; +let nestedProp = ((temp === null || temp === undefined) ? undefined : temp.second); +</pre> + +<h3 id="Chaînage_optionnel_avec_des_appels_de_fonctions">Chaînage optionnel avec des appels de fonctions</h3> + +<p>Vous pouvez utiliser le chaînage optionnel lorsque vous tentez d'appeler une méthode qui pourrait ne pas exister. Ceci peut être une aide précieuse, par exemple, lorsque vous utilisez une API dans laquelle une méthode pourrait être indisponible, à cause d'une implantation datée ou à cause d'une fonctionnalité qui n'est pas disponible sur l'appareil de l'utilisateur.</p> + +<p>Utiliser le chaînage optionnel avec les appels de fonction entraîne le retour automatique de la valeur <code>undefined</code> pour l'expression plutôt que de jeter une exception si la méthode n'est pas trouvée :</p> + +<pre class="brush: js notranslate">let result = uneInterface.uneMéthode?.();</pre> + +<div class="blockIndicator note"> +<p><strong>Note :</strong> S'il est une propriété qui porte ce nom et qui n'est pas une fonction, utiliser <code>?.</code> jètera aussi une exception {{jsxref("TypeError")}} (<code>x.y</code><code> is not a function</code>).</p> +</div> + +<h4 id="Réaliser_des_fonctions_de_rappel_optionnelles_ou_des_écouteurs_dévènements">Réaliser des fonctions de rappel optionnelles ou des écouteurs d'évènements</h4> + +<p>Si vous utilisez des fonctions ou des méthodes de recherche depuis un objet avec <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Object_destructuring">une affectation par décomposition</a>, vous pourriez avoir des valeurs inexistantes que vous ne pouvez appeler comme fonction à moins que vous ayez vérifié leur existance. En utilisant <code>?.</code>, vous pourriez vous passer de cette vérification supplémentaire :</p> + +<pre class="brush: js notranslate">// ES2019 +function doSomething(onContent, onError) { + try { + // ... faire quelque chose avec les données + } + catch (err) { + if (onError) { // vérifier que onError existe réellement + onError(err.message); + } + } +} +</pre> + +<pre class="brush: js notranslate">// Utiliser le chaînage optionnel avec les appels de fonctions +function doSomething(onContent, onError) { + try { + // ... faire quelque chose avec les données + } + catch (err) { + onError?.(err.message); // pas d'exception si onError n'est pas défini + } +} +</pre> + +<h3 id="Chaînage_optionnel_avec_les_expressions">Chaînage optionnel avec les expressions</h3> + +<p>Vous pouvez aussi utiliser l'opérateur de chaînage optionnel lorsque vous accédez aux propriétés avec une expression en utilisant <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors#Bracket_notation">la notation avec crochets des accesseurs de propriétés</a> :</p> + +<pre class="brush: js notranslate">let nestedProp = obj?.['propName']; +</pre> + +<h3 id="Chaînage_optionnel_invalide_depuis_le_côté_gauche_dune_affectation">Chaînage optionnel invalide depuis le côté gauche d'une affectation</h3> + +<pre class="notranslate"><code>let objet = {}; +objet?.propriété = 1; // Uncaught SyntaxError: Invalid left-hand side in assignment</code></pre> + +<h3 id="Accès_aux_éléments_de_tableau_avec_le_chaînage_optionnel">Accès aux éléments de tableau avec le chaînage optionnel</h3> + +<pre class="notranslate">let élément = arr?.[42];</pre> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Exemple_basique">Exemple basique</h3> + +<p>Cet exemple cherche la valeur de la propriété <code>name</code> dans un objet stocké comme propriété de nom <code>bar</code> d'un objet Map alors que cet objet <code>bar</code> n'existe pas. Le résultat est donc <code>undefined</code>.</p> + +<pre class="brush: js notranslate">let monMap = new Map(); +monMap.set("foo", {name: "baz", desc: "inga"}); + +let nameBar = monMap.get("bar")?.name;</pre> + +<h3 id="Court-circuiter_une_évaluation">Court-circuiter une évaluation</h3> + +<p>Lorsque vous utilisez le chaînage optionnel avec une expression, si l'opérande gauche est <code>null</code> ou <code>undefined</code>, l'expression ne sera par évaluée. Par exemple :</p> + +<pre class="brush: js notranslate">let objetPotentiellementNul = null; +let x = 0; +let prop = objetPotentiellementNul?.[x++]; + +console.log(x); // 0 car x n'a pas été incrémenté +</pre> + +<h3 id="Empiler_les_opérateurs_de_chaînage_optionnel">Empiler les opérateurs de chaînage optionnel</h3> + +<p>Avec les structures imbriquées, il est possible d'utiliser le chaînage optionnel plusieurs fois :</p> + +<pre class="brush: js notranslate">let client = { + nom: "Carl", + details: { + age: 82, + localisation: "Paradise Falls" + // adresse détaillée inconnue + } +}; +let villeDuClient = client.details?.adresse?.ville; + +// … cela fonctionne aussi avec le chaînage optionnel sur les appels de fonction +let durée = vacations.trip?.getTime?.(); +</pre> + +<h3 id="Combinaison_avec_lopérateur_de_coalescence_des_nuls_Nullish_coalescing_operator">Combinaison avec l'opérateur de coalescence des nuls (Nullish coalescing operator)</h3> + +<p>L'{{JSxRef("Opérateurs/Nullish_coalescing_operator", "Opérateur de coalescence des nuls (Nullish coalescing operator)", '', 1)}} peut être utilisé après un chaînage optionnel afin de construire une valeur par défaut quand aucune n'a été trouvée :</p> + +<pre class="notranslate">let client = { + nom: "Carl", + details: { age: 82 } +}; +const villeDuClient = client?.ville ?? "Ville Inconnue"; +console.log(villeDuClient); // Ville inconnue</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#prod-OptionalExpression', 'optional expression')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs"><span>Compatibilité des navigateurs</span></h2> + +<div> + + +<p>{{Compat("javascript.operators.optional_chaining")}}</p> + +<h3 id="Progression_de_limplantation">Progression de l'implantation</h3> + +<p>Le tableau suivant montre l'état quotidien de l'implantation de cette fonctionnalité car elle n'est pas encore stable entre les navigateurs. Les données sont générées en exécutant les contrôles de fonctionnalité appropriés décrits par <a href="https://github.com/tc39/test262">Test262</a>, la suite de contrôle normée de JavaScript, dans la version nightly ou la dernière version officielle de chaque moteur d'exécution de JavaScript des navigateurs.</p> + +<p>{{EmbedTest262ReportResultsTable("optional-chaining")}}</p> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{JSxRef("Operators/Nullish_Coalescing_Operator", "Opérateur de coalescence des nuls (Nullish coalescing operator)", '', 1)}}</li> +</ul> diff --git a/files/fr/web/javascript/reference/opérateurs/opérateurs_arithmétiques/index.html b/files/fr/web/javascript/reference/opérateurs/opérateurs_arithmétiques/index.html new file mode 100644 index 0000000000..b0a4c14ba9 --- /dev/null +++ b/files/fr/web/javascript/reference/opérateurs/opérateurs_arithmétiques/index.html @@ -0,0 +1,295 @@ +--- +title: Opérateurs arithmétiques +slug: Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques +tags: + - JavaScript + - Operator + - Reference +translation_of: Web/JavaScript/Reference/Operators +--- +<div>{{jsSidebar("Operators")}}</div> + +<p><strong>Les opérateurs arithmétiques </strong>utilisent des valeurs numériques (variables ou littéraux) comme opérandes et renvoient une valeur numérique. Les opérateurs arithmétiques standard sont l'addition (+), la soustraction (-), la multiplication (*), et la division (/).</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-arithmetic.html")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<h2 id="Addition_2"><a name="Addition">Addition (+)</a></h2> + +<p>L'opérateur d'addition permet d'obtenir la somme des opérandes numériques ou bien la concaténation de chaînes de caractères.</p> + +<h3 id="Syntaxe">Syntaxe</h3> + +<pre class="syntaxbox">Opérateur : x + y</pre> + +<h3 id="Exemples">Exemples</h3> + +<pre class="brush: js">// nombre + nombre -> addition +1 + 2 // 3 + +// booléen + nombre -> addition +true + 1 // 2 + +// booléen + booléen -> addition +false + false // 0 + +// nombre + chaîne de caractères -> concaténation +5 + " + + concaténation +"toto" + false // "totofalse" + +// chaîne de caractères + chaîne de caractères -> concaténation +"toto" + "truc" // "tototruc" +</pre> + +<h2 id="Soustraction_-"><a name="Subtraction">Soustraction (-)</a></h2> + +<p>L'opérateur de soustraction soustrait les deux opérandes pour obtenir leur différence.</p> + +<h3 id="Syntaxe_2">Syntaxe</h3> + +<pre class="syntaxbox">Opérateur : x - y</pre> + +<h3 id="Exemples_2">Exemples</h3> + +<pre class="brush:js">5 - 3 // 2 +3 - 5 // -2 +"toto" - 3 // NaN +</pre> + +<h2 id="Division_2"><a name="Division">Division (/)</a></h2> + +<p>L'opérateur de division produit le quotient de ces opérandes avec l'opérande gauche comme numérateur et l'opérande droit comme dénominateur.</p> + +<h3 id="Syntaxe_3">Syntaxe</h3> + +<pre class="syntaxbox">Opérateur : x / y</pre> + +<h3 id="Exemples_3">Exemples</h3> + +<pre class="brush: js">1 / 2 // renvoie 0.5 en JavaScript +1 / 2 // renvoie 0 en Java +// (aucun des deux opérandes n'est un nombre flottant de façon explicite) + +1.0 / 2.0 // renvoie 0.5 en JavaScript et Java + +2.0 / 0 // renvoie Infinity (pour l'infini) en JavaScript +2.0 / 0.0 // renvoie Infinity également +2.0 / -0.0 // renvoie -Infinity en JavaScript</pre> + +<h2 id="Multiplication_*"><a name="Multiplication">Multiplication (*)</a></h2> + +<p>L'opérateur de multiplication permet d'obtenir le produit des opérandes.</p> + +<h3 id="Syntaxe_4">Syntaxe</h3> + +<pre class="syntaxbox">Opérateur : x * y</pre> + +<h3 id="Exemples_4">Exemples</h3> + +<pre class="brush: js">2 * 2 // 4 +-2 * 2 // -4 +Infinity * 0 // NaN +Infinity * Infinity // Infinity +"toto" * 2 // NaN +</pre> + +<h2 id="Reste"><a name="Remainder">Reste (%)</a></h2> + +<p>L'opérateur « reste » renvoie le reste de la division du premier opérande par le second. Le résultat obtenu a toujours le signe du numérateur (la quantité divisée).</p> + +<h3 id="Syntaxe_5">Syntaxe</h3> + +<pre class="syntaxbox">Opérateur : var1 % var2</pre> + +<h3 id="Exemples_5">Exemples</h3> + +<pre class="brush: js">12 % 5 // 2 +-1 % 2 // -1 +1 % -2 // 1 +NaN % 2 // NaN +1 % 2 // 1 +2 % 3 // 2 +-4 % 2 // -0 +5.5 % 2 // 1.5</pre> + +<h2 id="Exponentiation_**"><a id="Exponentiation" name="Exponentiation">Exponentiation (**)</a></h2> + +<p>L'opérateur d'exponentiation (aussi appelé opérateur de puissance) renvoie le résultat de l'élévation d'un nombre (premier opérande) à une puissance donnée (deuxième opérande). Par exemple : <code>var1 ** var2</code> sera équivalent à <code>var1<sup>var2</sup></code> en notation mathématique. Cet opérateur est associatif à droite, autrement dit <code>a ** b ** c</code> est égal à <code>a ** (b ** c)</code>.</p> + +<h3 id="Syntaxe_6">Syntaxe</h3> + +<pre class="syntaxbox">Opérateur : var1 ** var2</pre> + +<h3 id="Notes">Notes</h3> + +<p>Dans la plupart des langages (par exemple PHP, Python, etc.), l'opérateur d'exponentiation est défini avec une précédence supérieure à celle des opérateurs unaires tels que le plus unaire et le moins unaire. Des exceptions existent comme Bash où l'opérateur ** a une précédence inférieure à celle des opérateurs unaires. En JavaScript, il est impossible d'écrire une expression ambigüe avec l'exponentiation : il est impossible de placer un opérateur unaire juste avant le nombre.</p> + +<pre class="brush: js">-2 ** 2; +// vaut 4 en Bash ou -4 avec d'autres langages +// C'est invalide en JavaScript car il y +// une ambiguïté liée à l'expression + +- (2 ** 2); +// -4 en JavaScript car les parenthèses lèvent +// l'ambiguïté +</pre> + +<h3 id="Exemples_6">Exemples</h3> + +<pre class="brush: js">2 ** 3 // 8 +3 ** 2 // 9 +3 ** 2.5 // 15.588457268119896 +10 ** -1 // 0.1 +NaN ** 2 // NaN + +2 ** 3 ** 2 // 512 +2 ** (3 ** 2) // 512 +(2 ** 3) ** 2 // 64</pre> + +<div class="note"> +<p><strong>Note :</strong> JavaScript possède également <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#(XOR_binaire)">un opérateur binaire ^ (XOR logique)</a>. <code>**</code> et <code>^</code> sont deux opérateurs bien différents. Par exemple <code>2 ** 3 === 8</code> et <code>2 ^ 3 === 1</code>.</p> +</div> + +<h2 id="Incrément"><a name="Increment">Incrément (++)</a></h2> + +<p>L'opérateur d'incrément ajoute une unité à son opérande et renvoie une valeur.</p> + +<ul> + <li>Si l'opérateur est utilisé en suffixe (par exemple : x++), il renvoie la valeur avant l'incrémentation.</li> + <li>Si l'opérateur est utilisé en préfixe (par exemple : ++x), il renvoie la valeur après l'incrémentation.</li> +</ul> + +<h3 id="Syntaxe_7">Syntaxe</h3> + +<pre class="syntaxbox">Opérateur : x++ ou ++x</pre> + +<h3 id="Exemples_7">Exemples</h3> + +<pre class="brush: js">// Suffixe +var x = 3; +y = x++; // y = 3, x = 4 + +// Préfixe +var a = 2; +b = ++a; // a = 3, b = 3 +</pre> + +<h2 id="Décrément_--"><a name="Decrement">Décrément (--)</a></h2> + +<p>L'opérateur de décrément soustrait une unité à son opérande et renvoie une valeur.</p> + +<ul> + <li>Si l'opérateur est utilisé en suffixe (par exemple : x--), il renvoie la valeur avant la décrémentation.</li> + <li>Si l'opérateur est utilisé en préfixe (par exemple : --x), il renvoie la valeur après la décrémentation.</li> +</ul> + +<h3 id="Syntaxe_8">Syntaxe</h3> + +<pre class="syntaxbox">Opérateur : x-- ou --x</pre> + +<h3 id="Exemples_8">Exemples</h3> + +<pre class="brush: js">// Suffixe +var x = 3; +y = x--; // y = 3, x = 2 + +// Préfixe +var a = 2; +b = --a; // a = 1, b = 1 +</pre> + +<h2 id="Négation_unaire_-"><a name="Unary_negation">Négation unaire (-)</a></h2> + +<p>L'opérateur de négation unaire précède son opérande et prend l'opposé de celui-ci (après l'avoir converti en nombre si besoin).</p> + +<h3 id="Syntaxe_9">Syntaxe</h3> + +<pre class="syntaxbox">Opérateur : -x</pre> + +<h3 id="Exemples_9">Exemples</h3> + +<pre class="brush: js">var x = 3; +y = -x; // y = -3, x = 3 + +// La négation unaire permet de convertir +// un opérande en nombre +var y = "4"; +var z = -y; // z = -4 +</pre> + +<h2 id="Plus_unaire"><a name="Unary_plus">Plus unaire</a> (+)</h2> + +<p>L'opérateur unaire plus (+) précède son opérande, l'évaluation correspond à son opérande, converti en nombre si possible et si ce n'est pas déjà un nombre. Bien que l'opérateur de négation unaire (-) puisse également convertir les expressions qui ne sont pas des nombres, le plus unaire est la méthode la plus efficace et celle la plus utilisée pour convertir quelque chose en un nombre car la conversion est la seule opération effectuée. Cet opérateur permet de convertir les chaînes de caractères représentant des nombres entiers, des nombres flottants ainsi que les valeurs <code>true</code>, <code>false</code>, et <code>null</code>. Les entiers, représentés sous forme décimale ou hexadécimale (préfixés par "0x"), sont supportés. Les nombres négatifs sont également supportés (mais pas au format hexadécimal). Si l'opérateur ne peut pas analyser l'opérande fourni, il sera évalué à <a href="/fr/docs/JavaScript/Reference/Propriétés_globales/NaN">NaN</a>.</p> + +<h3 id="Syntaxe_10">Syntaxe</h3> + +<pre class="syntaxbox">Opérator : +x</pre> + +<h3 id="Exemples_10">Exemples</h3> + +<pre class="brush: js">+3 // 3 ++"3" // 3 ++true // 1 ++false // 0 ++null // 0 ++function(val){ return val; } // NaN +</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-additive-operators')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES2017', '#sec-postfix-expressions')}}</td> + <td>{{Spec2('ES2017')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES2016', '#sec-postfix-expressions')}}</td> + <td>{{Spec2('ES2016')}}</td> + <td><a href="https://github.com/rwaldron/exponentiation-operator">Ajout de l'opérateur d'exponentiation.</a></td> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-postfix-expressions')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Définis au sein de plusieurs sections de cette spécification : <a href="https://www.ecma-international.org/ecma-262/6.0/#sec-additive-operators">Opérateurs additifs</a>, <a href="https://www.ecma-international.org/ecma-262/6.0/#sec-multiplicative-operators">opérateurs multiplicatifs</a>, <a href="https://www.ecma-international.org/ecma-262/6.0/#sec-postfix-expressions">expressions postfixes</a>, <a href="https://www.ecma-international.org/ecma-262/6.0/#sec-unary-operators">opérateurs unaires</a>.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.3')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Définis au sein de plusieurs sections de cette spécification : <a href="https://www.ecma-international.org/ecma-262/5.1/#sec-11.6">Opérateurs additifs</a>, <a href="https://www.ecma-international.org/ecma-262/5.1/#sec-11.5">opérateurs multiplicatifs</a>,<a href="https://www.ecma-international.org/ecma-262/5.1/#sec-11.3"> expressions postfixes</a>, <a href="https://www.ecma-international.org/ecma-262/5.1/#sec-11.4">opérateurs unaires</a>.</td> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Définition initiale</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.operators.arithmetic")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_d_affectation">Opérateurs d'affectation</a></li> +</ul> diff --git a/files/fr/web/javascript/reference/opérateurs/opérateurs_binaires/index.html b/files/fr/web/javascript/reference/opérateurs/opérateurs_binaires/index.html new file mode 100644 index 0000000000..621bfdbc4d --- /dev/null +++ b/files/fr/web/javascript/reference/opérateurs/opérateurs_binaires/index.html @@ -0,0 +1,553 @@ +--- +title: Opérateurs binaires +slug: Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires +tags: + - JavaScript + - Operator + - Opérateur + - Reference +translation_of: Web/JavaScript/Reference/Operators +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Les opérateurs binaires traitent leurs opérandes comme des séquences de 32 bits (des zéros et des uns), plutôt que comme des nombres décimaux, hexadécimaux ou octaux. Par exemple, le nombre décimal neuf a une représentation binaire de 1001. Les opérateurs binaires traitent de telles représentations binaires, mais renvoient des valeurs numériques JavaScript standards.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-bitwiseoperators.html")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<p>Le tableau qui suit résume les opérateurs binaires de JavaScript :</p> + +<table class="standard-table"> + <tbody> + <tr> + <th>Opérateur</th> + <th>Utilisation</th> + <th>Description</th> + </tr> + <tr> + <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#(ET_binaire)">ET binaire</a></td> + <td><code>a & b</code></td> + <td> + <p>Renvoie un <code>1</code> pour chaque position de bit pour laquelle les bits correspondants des deux opérandes sont des <code>1</code>.</p> + </td> + </tr> + <tr> + <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#(OU_binaire)">OU binaire</a></td> + <td><code>a | b</code></td> + <td>Renvoie un <code>1</code> pour chaque position de bit pour laquelle le bit correspondant d'au moins un des deux opérandes est un <code>1</code> .</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#(XOR_binaire)">OU exclusif binaire (<em>XOR</em>)</a></td> + <td><code>a ^ b</code></td> + <td>Renvoie un <code>1</code> pour chaque position de bit pour laquelle le bit correspondant d'un seul des deux opérandes est un <code>1</code>.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#(NON_binaire)">NON binaire</a></td> + <td><code>~ a</code></td> + <td>Inverse les bits de son opérande.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#<<_(décalage_à_gauche)">Décalage à gauche</a></td> + <td><code>a << b</code></td> + <td>Décale <code>a</code> en représentation binaire de <code>b</code> bits vers la gauche, en introduisant des zéros par la droite.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#>>_(décalage_à_droite_avec_propagation_du_signe)">Décalage à droite avec propagation du signe</a></td> + <td><code>a >> b</code></td> + <td>Décale <code>a</code> en représentation binaire de <code>b</code> bits vers la droite, en rejetant les bits à droite.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#>>>_(décalage_à_droite_avec_insertion_de_zéros)">Décalage à droite avec introduction de zéros</a></td> + <td><code>a >>> b</code></td> + <td>Décale <code>a</code> en représentation binaire de <code>b</code> bits vers la droite, en rejetant les bits à droite et en introduisant des zéros par la gauche.</td> + </tr> + </tbody> +</table> + +<h2 id="Entiers_sur_32_bits_signés">Entiers sur 32 bits signés</h2> + +<p>Les opérandes de tous les opérateurs binaires sont convertis en entiers signés sur 32 bits en ordre big-endian et en format de <a href="https://fr.wikipedia.org/wiki/Compl%C3%A9ment_%C3%A0_deux">complément à deux</a> (à l'exception de l'opération de décalage à droite avec remplissage des zéros qui renvoie un non-signé). L'ordre big-endian signifie que le bit le plus significatif (la position du bit qui a la plus grande valeur) est le bit le plus à gauche si les 32 bits sont disposés sur une ligne horizontale. Le format de complément à deux signifie que la contrepartie négative d'un nombre (par exemple 5 pour -5) est l'inversion de tous les bits du nombre (NON binaire du nombre, c'est-à-dire son complément à un) plus un. Par exemple, la représentation suivante encode l'entier 314 (base 10) :</p> + +<pre class="eval">00000000000000000000000100111010 +</pre> + +<p>La représentation suivante encode ~314, c'est-à-dire le complément à un de 314 :</p> + +<pre class="eval">11111111111111111111111011000101 +</pre> + +<p>Finalement, la représentation suivante encode -314, c'est-à-dire le complément à deux de 314 :</p> + +<pre class="eval">11111111111111111111111011000110 +</pre> + +<p>Le complément à deux garantit que le bit le plus à gauche soit 0 lorsque le nombre est positif, et <code>1</code> lorsque le nombre est négatif. C'est pourquoi on l'appelle le <em>bit de signe</em> .</p> + +<p>Le nombre 0 est l'entier constitué intégralement de bits à <code>0</code> .</p> + +<pre>0 (base 10) = 00000000000000000000000000000000 (base 2)</pre> + +<p>Le nombre -1 est l'entier constitué intégralement de bits à <code>1</code> .</p> + +<pre>-1 (base 10) = 11111111111111111111111111111111 (base 2)</pre> + +<p>Le nombre <code>-2147483648</code> (qui correspond à <code>-0x80000000</code> en notation hexadécimale) est l'entier uniquement composé de 0, à l'exception du premier bit (le plus à gauche) qui vaut 1.</p> + +<pre>-2147483648 (base 10) = 10000000000000000000000000000000 (base 2)</pre> + +<p>Le nombre <code>2147483647</code> (qui correspond à <code>0x7fffffff</code> en notation hexadécimale) est l'entier uniquement composé de 1, à l'exception du premier bit (le plus à gauche) qui vaut 0.</p> + +<pre>2147483647 (base 10) = 01111111111111111111111111111111 (base 2)</pre> + +<p>Les nombres <code>-2147483648</code> et <code>2147483647</code> sont respectivement le nombre le plus petit et le plus grand qu'on peut représenter sur 32 bits (signés).</p> + +<h2 id="Opérateurs_logiques_binaires">Opérateurs logiques binaires</h2> + +<p>Conceptuellement, les opérateurs logiques binaires fonctionnent de la manière suivante :</p> + +<ul> + <li>Les opérandes sont convertis en entiers sur 32 bits et exprimés sous la forme d'une série de bits (des 1 et des 0). Les nombres sur plus de 32 bits voient leurs bits supplémentaires supprimés : + <pre class="brush: js">Avant : 11100110111110100000000000000110000000000001 +Après : 10100000000000000110000000000001</pre> + </li> + <li>Chaque bit du premier opérande est combiné avec le bit correspondant du second opérande : le premier bit avec le premier bit, le second bit avec le second bit, et ainsi de suite.</li> + <li>L'opérateur est appliqué à chaque paire de bits, et le résultat est construit bit après bit.</li> +</ul> + +<h3 id="(ET_binaire)"><a name="ET">& (ET binaire)</a></h3> + +<p>Effectue l'opération ET (<em>AND</em>) sur chaque paire de bits. <code>a</code> ET <code>b</code> donne 1 uniquement si à la fois <code>a</code> et <code>b</code> sont <code>1</code> . La table de vérité pour l'opération ET est :</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">a</td> + <td class="header">b</td> + <td class="header">a ET b</td> + </tr> + <tr> + <td>0</td> + <td>0</td> + <td>0</td> + </tr> + <tr> + <td>0</td> + <td>1</td> + <td>0</td> + </tr> + <tr> + <td>1</td> + <td>0</td> + <td>0</td> + </tr> + <tr> + <td>1</td> + <td>1</td> + <td>1</td> + </tr> + </tbody> +</table> + +<pre class="eval"> 9 (base 10) = 00000000000000000000000000001001 (base 2) + 14 (base 10) = 00000000000000000000000000001110 (base 2) + -------------------------------- +14 & 9 (base 10) = 00000000000000000000000000001000 (base 2) = 8 (base 10) +</pre> + +<p>Utiliser le ET binaire avec n'importe quel nombre x et zéro donne zéro. Utiliser le ET binaire avec n'importe quel nombre x et -1 donne x.</p> + +<h3 id="(OU_binaire)"><a name="OU">| (OU binaire)</a></h3> + +<p>Effectue l'opération OU (<em>OR</em>) sur chaque paire de bits. <code>a</code> OU <code>b</code> donne <code>1</code> si <code>a</code> ou <code>b</code> vaut 1. La table de vérité pour l'opération OU est :</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">a</td> + <td class="header">b</td> + <td class="header">a OU b</td> + </tr> + <tr> + <td>0</td> + <td>0</td> + <td>0</td> + </tr> + <tr> + <td>0</td> + <td>1</td> + <td>1</td> + </tr> + <tr> + <td>1</td> + <td>0</td> + <td>1</td> + </tr> + <tr> + <td>1</td> + <td>1</td> + <td>1</td> + </tr> + </tbody> +</table> + +<pre class="eval"> 9 (base 10) = 00000000000000000000000000001001 (base 2) + 14 (base 10) = 00000000000000000000000000001110 (base 2) + -------------------------------- +14 | 9 (base 10) = 00000000000000000000000000001111 (base 2) = 15 (base 10) +</pre> + +<p>Utiliser le OU binaire avec n'importe quel nombre x et 0 donne x. Utiliser le OU binaire avec n'importe quel nombre x et -1 donne -1.</p> + +<h3 id="(XOR_binaire)"><a name="XOR">^ (XOR binaire)</a></h3> + +<p>Effectue l'opération XOR (OU exclusif) sur chaque paire de bits. <code>a</code> XOR <code>b</code> donne <code>1</code> si <code>a</code> et <code>b</code> sont différents. La table de vérité pour l'opération XOR est :</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">a</td> + <td class="header">b</td> + <td class="header">a XOR b</td> + </tr> + <tr> + <td>0</td> + <td>0</td> + <td>0</td> + </tr> + <tr> + <td>0</td> + <td>1</td> + <td>1</td> + </tr> + <tr> + <td>1</td> + <td>0</td> + <td>1</td> + </tr> + <tr> + <td>1</td> + <td>1</td> + <td>0</td> + </tr> + </tbody> +</table> + +<pre class="eval"> 9 (base 10) = 00000000000000000000000000001001 (base 2) + 14 (base 10) = 00000000000000000000000000001110 (base 2) + -------------------------------- +14 ^ 9 (base 10) = 00000000000000000000000000000111 (base 2) = 7 (base 10) +</pre> + +<p>Utiliser le XOR binaire avec n'importe quel nombre x et 0 donne x. Utiliser le XOR binaire avec n'importe quel nombre x et -1 donne ~x.</p> + +<h3 id="(NON_binaire)"><a name="NON">~ (NON binaire)</a></h3> + +<p>Effectue l'opération NON (<em>NOT</em>) sur chaque bit. NON <code>a</code> donne la valeur inversée (c'est-à-dire le complément à un) de <code>a</code>. La table de vérité de l'opération NON est :</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">a</td> + <td class="header">NON a</td> + </tr> + <tr> + <td>0</td> + <td>1</td> + </tr> + <tr> + <td>1</td> + <td>0</td> + </tr> + </tbody> +</table> + +<pre class="eval"> 9 (base 10) = 00000000000000000000000000001001 (base 2) + -------------------------------- +~9 (base 10) = 11111111111111111111111111110110 (base 2) = -10 (base 10) +</pre> + +<p>Utiliser le NON binaire avec n'importe quel nombre <code>x</code> donne <code>-(x + 1)</code>. Par exemple, <code>~-5</code> donne <code>4</code>.</p> + +<p>Étant donnée la représentation sur 32 bits des nombres en JavaScript, on a <code>~-1</code> et <code>~4294967295</code> (2<sup>32</sup>-1) qui valent tous les deux <code>0</code>.</p> + +<h2 id="Opérateurs_de_décalage_binaire">Opérateurs de décalage binaire</h2> + +<p>Les opérateurs de décalage binaire (<em>shift</em>) prennent deux opérandes : le premier est une valeur à décaler et le second spécifie le nombre de positions de bits duquel le premier opérande doit glisser. La direction de l'opération de décalage est contrôlée par l'opérateur utilisé.</p> + +<p>Les opérateurs de décalage convertissent leurs opérandes en entiers 32 bits en ordre big-endian et renvoient un résultat du même type que l'opérande de gauche. L'opérande droit doit être inférieur à 32, sinon les cinq bits les plus faibles seront utilisés.</p> + +<h3 id="<<_(décalage_à_gauche)"><a name="Gauche"><< (décalage à gauche)</a></h3> + +<p>Cet opérateur décale le premier opérande du nombre de bits spécifié vers la gauche. Les bits surnuméraires éjectés à gauche sont perdus. Des bits à zéro sont insérés par la droite.</p> + +<p>Par exemple, <code>9 << 2</code> donne 36 :</p> + +<pre class="eval"> 9 (base 10) : 00000000000000000000000000001001 (base 2) + -------------------------------- +9 << 2 (base 10) : 00000000000000000000000000100100 (base 2) = 36 (base 10) +</pre> + +<p>Décaler un nombre <strong>x</strong> de <strong>y</strong> bits vers la gauche renverra <math><semantics><mrow><mi>x</mi><mo>*</mo><msup><mn>2</mn><mi>y</mi></msup></mrow><annotation encoding="TeX">x*2^y</annotation></semantics></math>. Par exemple, <code>9 << 3</code> correspondra à <code>9 * (2 ** 3) = 9 * 8 = 72</code>.</p> + +<h3 id=">>_(décalage_à_droite_avec_propagation_du_signe)"><a name="Droite">>> (décalage à droite avec propagation du signe)</a></h3> + +<p>Cet opérateur décale le premier opérande du nombre de bits spécifié vers la droite. Les bits surnuméraires éjectés à droite sont perdus. Des copies du bit le plus à gauche sont insérés par la gauche. Comme le bit le plus a gauche a la même valeur qu'avant l'opération, le bit de signe (celui qui est le plus à gauche) ne change pas. D'où ce qu'on appelle la « propagation du signe ».</p> + +<p>Par exemple, <code>9 >> 2</code> donne 2 :</p> + +<pre class="eval"> 9 (base 10) : 00000000000000000000000000001001 (base 2) + -------------------------------- +9 >> 2 (base 10) : 00000000000000000000000000000010 (base 2) = 2 (base 10) +</pre> + +<p>De même, <code>-9 >> 2</code> donne -3, parce que le signe est préservé :</p> + +<pre class="eval"> -9 (base 10) : 11111111111111111111111111110111 (base 2) + -------------------------------- +-9 >> 2 (base 10) : 11111111111111111111111111111101 (base 2) = -3 (base 10) +</pre> + +<h3 id=">>>_(décalage_à_droite_avec_insertion_de_zéros)"><a name="Droite_zero">>>> (décalage à droite avec insertion de zéros)</a></h3> + +<p>Cet opérateur décale le premier opérande du nombre de bits spécifié vers la droite. Les bits surnuméraires éjectés à droite sont perdus. Des bits à zéro sont insérés par la gauche. Le bit de signe devient 0, donc le résultat est toujours positif. À la différence des autres opérateurs binaires, cette opération renvoie un entier non-signé sur 32 bits.</p> + +<p>Pour les nombres non négatifs, le décalage à droite avec insertion de zéros et le décalage à droite avec propagation du signe donnent le même résultat. Par exemple, <code>9 >>> 2</code> donne 2, tout comme <code>9 >> 2</code> :</p> + +<pre class="eval"> 9 (base 10) : 00000000000000000000000000001001 (base 2) + -------------------------------- +9 >>> 2 (base 10) : 00000000000000000000000000000010 (base 2) = 2 (base 10) +</pre> + +<p>Cependant, ce n'est pas le cas des nombres négatifs. Par exemple, <code>-9 >>> 2</code> donne 1073741821, ce qui est différent de <code>-9 >> 2</code> (qui donne -3) :</p> + +<pre class="eval"> -9 (base 10) : 11111111111111111111111111110111 (base 2) + -------------------------------- +-9 >>> 2 (base 10) : 00111111111111111111111111111101 (base 2) = 1073741821 (base 10) +</pre> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Exemple_flags_et_bitmasks">Exemple : <em>flags</em> et <em>bitmasks</em></h3> + +<p>Les opérateurs logiques binaires sont souvent utilisés pour créer, manipuler et lire des séquences de<em>flags</em> , qui sont comme des variables binaires. On pourrait très bien utiliser des variables à la place de ces séquences binaires, mais des flags binaires prennent nettement moins de mémoire (par un facteur de 32).</p> + +<p>Supposons que l'on ait 4 flags :</p> + +<ul> + <li>flag A : nous avons une araignée</li> + <li>flag B : nous avons une belette</li> + <li>flag C : nous avons un chat</li> + <li>flag D : nous avons un dinosaure</li> +</ul> + +<p>Ces flags sont représentés par une séquence de bits : DCBA. Lorsqu'un flag est <em>positionné</em>, il a une valeur de 1. Sinon, il a une valeur de 0. Supposons qu'une variable <code>flags</code> a la valeur binaire de 0101 :</p> + +<pre class="eval">var flags = 0x5; // 0101 en binaire +</pre> + +<p>Cette valeur indique :</p> + +<ul> + <li>le flag A est vrai (nous avons une araignée) ;</li> + <li>le flag B est faux (nous n'avons pas de belette) ;</li> + <li>le flag C est vrai (nous avons un chat) ;</li> + <li>le flag D est faux (nous n'avons pas de dinosaure).</li> +</ul> + +<p>Comme les opérateurs binaires sont sur 32 bits, <code>0101</code> est en fait <code>00000000000000000000000000000101</code>, mais les zéros qui précèdent peuvent être négligés étant donné qu'ils ne contiennent aucune information significative.</p> + +<p>Un <em>bitmask</em> est une séquence de bits qui peuvent manipuler et/ou lire des flags. Typiquement, un masque « primitif » pour chaque flag est défini :</p> + +<pre class="eval">var FLAG_A = 0x1; // 0001 +var FLAG_B = 0x2; // 0010 +var FLAG_C = 0x4; // 0100 +var FLAG_D = 0x8; // 1000 +</pre> + +<p>De nouveaux masques peuvent être créés à l'aide des opérateurs logiques binaires sur ces masques primitifs. Par exemple, le masque <code>1011</code> peut être créé avec une opération OU sur <code>FLAG_A</code>, <code>FLAG_B</code> et <code>FLAG_D</code> :</p> + +<pre class="eval">var mask = FLAG_A | FLAG_B | FLAG_D; // 0001 | 0010 | 1000 => 1011 +</pre> + +<p>Des valeurs de flag particulières peuvent être extraites à l'aide d'une opération ET avec un bitmask, où chaque bit avec la valeur 1 va « extraire » le flag qui correspond. Le bitmask <em>masque</em> les flags dont on n'a pas besoin en effectuant l'opération ET avec des zéros (d'où le terme « bitmask »). Par exemple, le masque 0100 peut être utilisé pour voir si le flag C est positionné :</p> + +<pre class="eval">// si l'on a un chat +if (flags & FLAG_C) { // 0101 & 0100 => 0100 => true + // faire quelque chose +} +</pre> + +<p>Un masque avec plusieurs flags positionnés agit comme un « et/ou ». Par exemple, les deux instructions suivantes sont équivalentes :</p> + +<pre class="eval">// si on a une belette ou si on a un chat +if ((flags & FLAG_B) || (flags & FLAG_C)) { // (0101 & 0010) || (0101 & 0100) => 0000 || 0100 => true + // faire quelque chose +} +</pre> + +<pre class="eval">// si on a une belette ou si on a un chat +var mask = FLAG_B | FLAG_C; // 0010 | 0100 => 0110 +if (flags & mask) { // 0101 & 0110 => 0100 => true + // faire quelque chose +} +</pre> + +<p>Les flags peuvent être positionnés en utilisant l'opération OU avec un masque, où chaque bit de la valeur 1 définira le flag correspondant, si celui-ci n'est pas déjà positionné. Par exemple, le masque 1100 peut être utilisé pour positionner les flags C et D :</p> + +<pre class="eval">// oui, on a un chat et un dinosaure +var mask = FLAG_C | FLAG_D; // 0100 | 1000 => 1100 +flags |= mask; // 0101 | 1100 => 1101 +</pre> + +<p>Les flags peuvent être remis à zéro en utilisant l'opération ET avec un masque, où chaque bit avec la valeur 0 remettra à zéro le flag correspondant s'il ne l'est pas déjà. Ce masque peut être créé avec l'opération NOT sur les masques primitifs. Par exemple, le masque 1010 peut être utilisé pour remettre à zéro les flags A et C :</p> + +<pre class="eval">// non, nous n'avons pas d'araignée ou de chat +var mask = ~(FLAG_A | FLAG_C); // ~0101 => 1010 +flags &= mask; // 1101 & 1010 => 1000 +</pre> + +<p>Le masque aurait également pu être créé avec <code>~FLAG_A & ~FLAG_C</code> (Loi de De Morgan) :</p> + +<pre class="eval">// non, nous n'avons pas d'araignée ou de chat +var mask = ~FLAG_A & ~FLAG_C; +flags &= mask; // 1101 & 1010 => 1000 +</pre> + +<p>Les flags peuvent être inversés en utilisant l'opération XOR avec un masque, où chaque bit avec la valeur 1 inversera le flag correspondant. Par exemple, le masque 0110 peut être utilisé pour inverser les flags B et C :</p> + +<pre class="eval">// si on n'avait pas de belette, on en a maintenant une. +// si on en avait une, on ne l'a plus. Même chose pour les chats. +var mask = FLAG_B | FLAG_C; +flags = flags ^ mask; // 1100 ^ 0110 => 1010 +</pre> + +<p>Finalement, les flags peuvent être tous inversés avec l'opérateur NON :</p> + +<pre class="eval">// entrée dans un univers parallèle... +flags = ~flags; // ~1010 => 0101 +</pre> + +<h3 id="Codes_de_conversion">Codes de conversion</h3> + +<p>Pour convertir une <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String">String</a></code> binaire en un <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Number">Number</a></code> (en base 10):</p> + +<pre class="brush: js">var chaîneBinaire = "1011"; +var monNombre = parseInt(chaîneBinaire, 2); +console.log(monNombre); // affiche 11 (1011 en base 2) +</pre> + +<p>Pour convertir un <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Number">Number</a></code> (en base 10) en une <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String">String</a></code> binaire :</p> + +<pre class="brush: js">var monNombre = 11; +var chaîneBinaire = monNombre.toString(2); +console.log(chaîneBinaire); // affiche 1011 (11 en base 10) +</pre> + +<h3 id="Automatiser_la_création_d'un_masque">Automatiser la création d'un masque</h3> + +<p>Si vous devez créer plusieurs masques à partir de booléens, il est possible d'automatiser ce processus :</p> + +<pre class="brush: js">function créerMasque () { + var nMask = 0, nFlag = 0, nLen = arguments.length > 32 ? 32 : arguments.length; + for (nFlag; nFlag < nLen; nMask |= arguments[nFlag] << nFlag++); + return nMask; +} +var masque1 = créerMasque(true, true, false, true); // 11, i.e.: 1011 +var masque2 = créerMasque(false, false, true); // 4, i.e.: 0100 +var masque3 = créerMasque(true); // 1, i.e.: 0001 +// etc. + +console.log(masque1); // affiche 11, i.e.: 1011 +</pre> + +<h3 id="Algorithme_réciproque_obtenir_un_tableau_de_booléen_à_partir_d'un_masque">Algorithme réciproque : obtenir un tableau de booléen à partir d'un masque</h3> + +<p>Si on souhaite créer un tableau de booléens à partir d'un masque, on pourra utiliser le code suivant :</p> + +<pre class="brush: js">function tableauMasque (nMask) { + // nMask doit être compris entre -2147483648 et 2147483647 + if (nMask > 0x7fffffff || nMask < -0x80000000) { + throw new TypeError("tableauMasque - intervalle de valeur dépassé"); + } + for (var nShifted = nMask, aFromMask = []; nShifted; + aFromMask.push(Boolean(nShifted & 1)), nShifted >>>= 1); + return aFromMask; +} + +var tableau1 = tableauMasque(11); +var tableau2 = tableauMasque(4); +var tableau3 = tableauMasque(1); + +console.log("[" + tableau1.join(", ") + "]"); +// affiche "[true, true, false, true]", i.e.: 11, i.e.: 1011 +</pre> + +<p>On peut ainsi utiliser les deux algorithmes :</p> + +<pre class="brush: js">var test = 19; // un masque quelconque +var résultat = créerMasque.apply(this, tableauMasque(test)); + +console.log(résultat); // 19 +</pre> + +<p>Pour l'exemple (car il existe la méthode <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Number/toString">Number.toString(2)</a></code>), on peut également modifier l'algorithme précédent pour créer une chaîne à partir de la représentation binaire d'un nombre :</p> + +<pre class="brush: js">function créerChaîneBinaire(nMask) { + // nMask doit être compris entre -2147483648 et 2147483647 + for (var nFlag = 0, nShifted = nMask, sMask = ""; nFlag < 32; + nFlag++, sMask += String(nShifted >>> 31), nShifted <<= 1); + return sMask; +} + +var string1 = créerChaîneBinaire(11); +var string2 = créerChaîneBinaire(4); +var string3 = créerChaîneBinaire(1); + +console.log(string1); +// affiche 00000000000000000000000000001011, i.e. 11 +</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Définition initiale.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.7')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Définis au sein de plusieurs sections de la spécification : <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.4.8">Opérateur NON binaire</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.7">Opérateurs binaires de décalage</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.10">Opérateurs binaires</a></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-bitwise-shift-operators')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Définis au sein de plusieurs sections de la spécification : <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-bitwise-not-operator">Opérateur NON binaire</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-bitwise-shift-operators">Opérateurs binaires de décalage</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-binary-bitwise-operators">Opérateurs binaires</a></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-bitwise-shift-operators')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Defined in several sections of the specification: <a href="http://tc39.github.io/ecma262/#sec-bitwise-not-operator">opérateur NON binaire</a>, <a href="http://tc39.github.io/ecma262/#sec-bitwise-shift-operators">opérateurs binaires de décalage</a>, <a href="http://tc39.github.io/ecma262/#sec-binary-bitwise-operators">opérateurs binaires</a></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.operators.bitwise")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_logiques">Les opérateurs logiques</a></li> +</ul> diff --git a/files/fr/web/javascript/reference/opérateurs/opérateurs_d_affectation/index.html b/files/fr/web/javascript/reference/opérateurs/opérateurs_d_affectation/index.html new file mode 100644 index 0000000000..78c433de70 --- /dev/null +++ b/files/fr/web/javascript/reference/opérateurs/opérateurs_d_affectation/index.html @@ -0,0 +1,413 @@ +--- +title: Opérateurs d'affectation +slug: Web/JavaScript/Reference/Opérateurs/Opérateurs_d_affectation +tags: + - JavaScript + - Operator + - Reference +translation_of: Web/JavaScript/Reference/Operators#Assignment_operators +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Un <strong>opérateur d'affectation</strong> permet d'assigner une valeur à son opérande gauche en se basant sur la valeur de son opérande droit.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-assignment.html")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<h2 id="Description">Description</h2> + +<p>L'opérateur utilisé pour l'affectation est le symbole égal (<code>=</code>), il permet d'affecter la valeur de l'opérande droit à son opérande gauche. Ainsi, quand on écrit <code>x = y</code>, on affecte la valeur de <code>y</code> à <code>x</code>. Les autres opérateurs d'affectation sont généralement des raccourcis pour des opérations standards. Ils sont décrits ci-après avec définitions et exemples.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th>Nom</th> + <th>Opérateur (raccourci)</th> + <th>Signification</th> + </tr> + <tr> + <td><a href="#Assignment">Affectation</a></td> + <td><code>x = y</code></td> + <td><code>x = y</code></td> + </tr> + <tr> + <td><a href="#Addition_assignment">Affectation après addition</a></td> + <td><code>x += y</code></td> + <td><code>x = x + y</code></td> + </tr> + <tr> + <td><a href="#Subtraction_assignment">Affectation après soustraction</a></td> + <td><code>x -= y</code></td> + <td><code>x = x - y</code></td> + </tr> + <tr> + <td><a href="#Multiplication_assignment">Affectation après multiplication</a></td> + <td><code>x *= y</code></td> + <td><code>x = x * y</code></td> + </tr> + <tr> + <td><a href="#Division_assignment">Affectation après division</a></td> + <td><code>x /= y</code></td> + <td><code>x = x / y</code></td> + </tr> + <tr> + <td><a href="#Remainder_assignment">Affectation du reste</a></td> + <td><code>x %= y</code></td> + <td><code>x = x % y</code></td> + </tr> + <tr> + <td><a href="#Exponentiation">Affectation après exponentiation</a></td> + <td><code>x **= y</code></td> + <td><code>x = x ** y</code></td> + </tr> + <tr> + <td><a href="#Left_shift_assignment">Affectation après décalage à gauche</a></td> + <td><code>x <<= y</code></td> + <td><code>x = x << y</code></td> + </tr> + <tr> + <td><a href="#Right_shift_assignment">Affectation après décalage à droite</a></td> + <td><code>x >>= y</code></td> + <td><code>x = x >> y</code></td> + </tr> + <tr> + <td><a href="#Unsigned_right_shift_assignment">Affectation après décalage à droite non-signé</a></td> + <td><code>x >>>= y</code></td> + <td><code>x = x >>> y</code></td> + </tr> + <tr> + <td><a href="#Bitwise_AND_assignment">Affectation après ET binaire</a></td> + <td><code>x &= y</code></td> + <td><code>x = x & y</code></td> + </tr> + <tr> + <td><a href="#Bitwise_XOR_assignment">Affectation après OU exclusif binaire</a></td> + <td><code>x ^= y</code></td> + <td><code>x = x ^ y</code></td> + </tr> + <tr> + <td><a href="#Bitwise_OR_assignment">Affectation après OU binaire</a></td> + <td><code>x |= y</code></td> + <td><code>x = x | y</code></td> + </tr> + </tbody> +</table> + +<h2 id="Affectation"><a name="Assignment">Affectation</a></h2> + +<p>L'opérateur d'affectation simple permet d'assigner une valeur à une variable. Le résultat de l'affectation est la valeur affectée. Il est possible de chaîner plusieurs opérateurs d'affectation afin d'assigner une même valeur à plusieurs variables. Voir l'exemple ci-après.</p> + +<h4 id="Syntaxe">Syntaxe</h4> + +<pre class="syntaxbox"><strong>Opérateur :</strong> x = y +</pre> + +<h4 id="Exemples">Exemples</h4> + +<pre class="brush: js">// Si on dispose des variables suivantes : +// x = 5; +// y = 10; +// z = 25; + +x = y; // x vaudra désormais 10 +x = y = z; // x, y et z valent désormais tous 25 +</pre> + +<h3 id="Affectation_après_addition"><a name="Addition_assignment">Affectation après addition</a></h3> + +<p>Cet opérateur permet d'ajouter la valeur de l'opérande droit à une variable, le résultat de l'addition étant affecté à cette variable. Les types des deux opérandes déterminent le comportement de l'opérateur. Selon le type, on pourra en effet avoir une addition ou une concaténation. Voir la page sur l'opérateur d'{{jsxref("Opérateurs/Opérateurs_arithmétiques", "addition", "#Addition_(.2B)", 1)}} pour plus d'informations.</p> + +<h4 id="Syntaxe_2">Syntaxe</h4> + +<pre class="syntaxbox"><strong>Opérateur :</strong> x += y +<strong>Signification :</strong> x = x + y +</pre> + +<h4 id="Exemples_2">Exemples</h4> + +<pre class="brush: js">// Si on dispose des variables suivantes : +// toto = "toto"; +// truc = 5; +// machin = true; + + +// Nombre + Nombre -> addition +truc += 2; // 7 + +// Booléen + Booléen -> addition +machin += 1; // 2 + +// Booléen + Booléen -> addition +machin += false; // 1 + +// Nombre + String -> concaténation +truc += "toto"; // "5toto" + +// String + Booléen -> concaténation +toto += false; // "totofalse" + +// String + String -> concaténation +toto += "truc"; // "tototruc" +</pre> + +<h3 id="Affectation_après_soustraction"><a name="Subtraction_assignment">Affectation après soustraction</a></h3> + +<p>Cet opérateur soustrait la valeur de l'opérande droit à la variable puis affecte le résultat de cette soustraction à la variable. Voir la page sur l'opérateur de {{jsxref("Opérateurs/Opérateurs_arithmétiques", "soustraction", "#Soustraction_(-)", 1)}} pour plus d'information.</p> + +<h4 id="Syntaxe_3">Syntaxe</h4> + +<pre class="syntaxbox"><strong>Opérateur :</strong> x -= y +<strong>Signification :</strong> x = x - y +</pre> + +<h4 id="Exemples_3">Exemples</h4> + +<pre class="brush: js">// Si on a la variable suivante : +// truc = 5; + +truc -= 2; // 3 +truc -= "toto"; // NaN +</pre> + +<h3 id="Affectation_après_multiplication"><a name="Multiplication_assignment">Affectation après multiplication</a></h3> + +<p>Cet opérateur permet de multiplier une variable par la valeur de l'opérande droit et d'affecter le résultat de cette opération à la variable. Voir la page sur l'opérateur de {{jsxref("Opérateurs/Opérateurs_arithmétiques", "multiplication", "#Multiplication_(*)", 1)}} pour plus d'informations.</p> + +<h4 id="Syntaxe_4">Syntaxe</h4> + +<pre class="syntaxbox"><strong>Opérateur :</strong> x *= y +<strong>Signification :</strong> x = x * y +</pre> + +<h4 id="Exemples_4">Exemples</h4> + +<pre class="brush: js">// Si on a la variable suivante : +// truc = 5; + +truc *= 2; // 10 +truc *= "toto"; // NaN +</pre> + +<h3 id="Affectation_après_division"><a name="Division_assignment">Affectation après division</a></h3> + +<p>Cet opérateur permet de diviser une variable par la valeur de l'opérande droit et d'affecter le résultat de cette opération à la variable. Voir la page sur l'opérateur de {{jsxref("Opérateurs/Opérateurs_arithmétiques", "division", "#Division_(.2F)", 1)}} pour plus d'informations.</p> + +<h4 id="Syntaxe_5">Syntaxe</h4> + +<pre class="syntaxbox"><strong>Opérateur :</strong> x /= y +<strong>Signification :</strong> x = x / y +</pre> + +<h4 id="Exemples_5">Exemples</h4> + +<pre class="brush: js">// Si on a la variable suivante : +// truc = 5; + +truc /= 2; // 2.5 +truc /= "toto"; // NaN +truc /= 0; // Infinity +</pre> + +<h3 id="Affectation_du_reste"><a name="Remainder_assignment">Affectation du reste</a></h3> + +<p>Cet opérateur permet de divisier une variable par la valeur de l'opérande droit et d'affecter le reste de cette division à la variable. Pour plus d'informations, voir la page sur l'opérateur {{jsxref("Opérateurs/Opérateurs_arithmétiques", "reste", "#Reste_(.25)", 1)}}.</p> + +<h4 id="Syntaxe_6">Syntaxe</h4> + +<pre class="syntaxbox"><strong>Opérateur :</strong> x %= y +<strong>Signification :</strong> x = x % y +</pre> + +<h4 id="Exemples_6">Exemples</h4> + +<pre class="brush: js">// Si on a la variable suivante : +// truc = 5; + +truc %= 2; // 1 +truc %= "toto"; // NaN +truc %= 0; // NaN +</pre> + +<h3 id="Affectation_après_exponentiation"><a id="Exponentiation" name="Exponentiation">Affectation après exponentiation</a></h3> + +<p>L'opérateur d'affectation après exponentiation renvoie le résultat de l'élévation du premier opérande à la puissance donnée par le second opérande. Pour plus de détails, voir la page sur {{jsxref("Opérateurs/Opérateurs_arithmétiques", "l'opérateur d'exponentiation", "#Exponentiation_(**)", 1)}} for more details.</p> + +<h4 id="Syntaxe_7">Syntaxe</h4> + +<pre class="syntaxbox"><strong>Opérateur :</strong> x **= y +<strong>Signification :</strong> x = x ** y +</pre> + +<h4 id="Exemples_7">Exemples</h4> + +<pre class="brush: js">// Si on a la variable : +// toto = 5 + +toto **= 2 // 25 +toto **= "truc" // NaN</pre> + +<h3 id="Affectation_après_décalage_à_gauche"><a name="Left_shift_assignment">Affectation après décalage à gauche</a></h3> + +<p>Cet opérateur permet de décaler un nombre donné de bits vers la gauche, le résultat de l'opération est ensuite affecté à la variable. Voir la page sur l'opérateur de {{jsxref("Opérateurs/Opérateurs_binaires", "décalage à gauche", "#.3C.3C_.28d.C3.A9calage_.C3.A0_gauche.29", 1)}} pour plus d'informations.</p> + +<h4 id="Syntaxe_8">Syntaxe</h4> + +<pre class="syntaxbox"><strong>Opérateur :</strong> x <<= y +<strong>Signification :</strong> x = x << y +</pre> + +<h4 id="Exemples_8">Exemples</h4> + +<pre class="brush: js">var toto = 5; // (00000000000000000000000000000101) +toto <<= 2; // 20 (00000000000000000000000000010100) +</pre> + +<h3 id="Affectation_après_décalage_à_droite"><a name="Right_shift_assignment">Affectation après décalage à droite</a></h3> + +<p>Cet opérateur permet de décaler un nombre donné de bits vers la droite, le résultat de l'opération est ensuite affecté à la variable. Voir la page sur l'opérateur de {{jsxref("Opérateurs/Opérateurs_binaires", "décalage à droite", "##.3E.3E_.28d.C3.A9calage_.C3.A0_droite_avec_propagation_du_signe.29", 1)}} pour plus d'informations.</p> + +<h4 id="Syntaxe_9">Syntaxe</h4> + +<pre class="syntaxbox"><strong>Opérateur :</strong> x >>= y +<strong>Signification :</strong> x = x >> y +</pre> + +<h4 id="Exemples_9">Exemples</h4> + +<pre class="brush: js">var toto = 5; // (00000000000000000000000000000101) +toto >>= 2; // 1 (00000000000000000000000000000001) + +var toto -5; // (-00000000000000000000000000000101) +toto >>= 2; // -2 (-00000000000000000000000000000010) +</pre> + +<h3 id="Affectation_après_décalage_à_droite_non-signé"><a name="Unsigned_right_shift_assignment">Affectation après décalage à droite non-signé</a></h3> + +<p>Cet opérateur permet de décaler le contenu de la variable d'un nombre de bits donné pour ensuite affecter le résultat à la variable. Voir la page sur l'opérateur de {{jsxref("Opérateurs/Opérateurs_binaires", "décalage à droite non-signé", "#.3E.3E.3E_.28d.C3.A9calage_.C3.A0_droite_avec_insertion_de_z.C3.A9ros.29", 1)}} pour plus de détails.</p> + +<h4 id="Syntaxe_10">Syntaxe</h4> + +<pre class="syntaxbox"><strong>Opérateur :</strong> x >>>= y +<strong>Signification :</strong> x = x >>> y +</pre> + +<h4 id="Exemples_10">Exemples</h4> + +<pre class="brush: js">var toto = 5; // (00000000000000000000000000000101) +toto >>>= 2; // 1 (00000000000000000000000000000001) + +var toto = -5; // (-00000000000000000000000000000101) +toto >>>= 2; // 1073741822 (00111111111111111111111111111110)</pre> + +<h3 id="Affectation_après_ET_binaire"><a name="Bitwise_AND_assignment">Affectation après ET binaire</a></h3> + +<p>Cet opérateur effectue une opération ET binaire sur les deux opérandes et affecte le résultat de l'opération à la variable (l'opérande gauche). Pour plus d'informations sur cette opération, voir la page sur l'opérateur {{jsxref("Opérateurs/Opérateurs_binaires", "binaire ET", "#&_.28ET_binaire.29", 1)}}.</p> + +<h4 id="Syntaxe_11">Syntaxe</h4> + +<pre class="syntaxbox"><strong>Opérateur :</strong> x &= y +<strong>Signification :</strong> x = x & y +</pre> + +<h4 id="Exemple">Exemple</h4> + +<pre class="brush: js">var truc = 5; +// 5: 00000000000000000000000000000101 +// 2: 00000000000000000000000000000010 +truc &= 2; // 0 +</pre> + +<h3 id="Affectation_après_OU_exclusif_(XOR)_binaire"><a name="Bitwise_XOR_assignment">Affectation après OU exclusif (<em>XOR</em>) binaire</a></h3> + +<p>Cet opérateur utilise une représentation binaire des deux opérandes, effectue une opération binaire avec un OU exclusif et affecte le résultat à la variable. Pour plus d'informations sur cette opération, voir la page sur l'opérateur {{jsxref("Opérateurs/Opérateurs_binaires", "binaire OU exclusif", "#.5E_.28XOR_binaire.29", 1)}}.</p> + +<h4 id="Syntaxe_12">Syntaxe</h4> + +<pre class="syntaxbox"><strong>Opérateur :</strong> x ^= y +<strong>Signification :</strong> x = x ^ y +</pre> + +<h4 id="Exemple_2">Exemple</h4> + +<pre class="brush: js">var toto = 5; +toto ^= 2; // 7 +// 5: 00000000000000000000000000000101 +// 2: 00000000000000000000000000000010 +// ----------------------------------- +// 7: 00000000000000000000000000000111 +</pre> + +<h3 id="Affectation_après_OU_binaire"><a name="Bitwise_OR_assignment">Affectation après OU binaire</a></h3> + +<p>Cet opérateur utilise une représentation binaire des deux opérandes, effectue un OU logique binaire entre ces deux variables et affecte le résultat de l'opération à la variable. Pour plus de détails sur cette opération, voir la page sur l'opérateur {{jsxref("Opérateurs/Opérateurs_binaires", "OU binaire", "#|_.28OU_binaire.29", 1)}}.</p> + +<h4 id="Syntaxe_13">Syntaxe</h4> + +<pre class="syntaxbox"><strong>Opérateur :</strong> x |= y +<strong>Signification :</strong> x = x | y +</pre> + +<h4 id="Exemple_3">Exemple</h4> + +<pre class="brush: js">var toto = 5; +toto |= 2; // 7 +// 5: 00000000000000000000000000000101 +// 2: 00000000000000000000000000000010 +// ----------------------------------- +// 7: 00000000000000000000000000000111 +</pre> + +<h2 id="Exemples_11">Exemples</h2> + +<h3 id="Opérande_gauche_utilisé_avec_un_autre_opérateur_d'affectation">Opérande gauche utilisé avec un autre opérateur d'affectation</h3> + +<p>Dans certains cas, l'opérateur d'affectation (par exemple<code> x += y</code>) n'est pas identique à l'expression développée correspondante (respectivement <code>x = x + y</code>). Lorsque l'opérande gauche contient lui-même un opérateur d'affectation, l'opérande gauche n'est évalué qu'une fois. Ainsi :</p> + +<pre class="brush: js">a[i++] += 5 // i est évalué une fois +a[i++] = a[i++] + 5 // i est évalué deux fois +</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-assignment-operators', 'Assignment operators')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.13', 'Assignment operators')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-11.13', 'Assignment operators')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Définition initiale</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.operators.assignment")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques">Les opérateurs arithmétiques</a></li> +</ul> diff --git a/files/fr/web/javascript/reference/opérateurs/opérateurs_de_chaînes/index.html b/files/fr/web/javascript/reference/opérateurs/opérateurs_de_chaînes/index.html new file mode 100644 index 0000000000..ad0a7e526f --- /dev/null +++ b/files/fr/web/javascript/reference/opérateurs/opérateurs_de_chaînes/index.html @@ -0,0 +1,27 @@ +--- +title: Opérateurs de chaînes +slug: Web/JavaScript/Reference/Opérateurs/Opérateurs_de_chaînes +translation_of: Web/JavaScript/Reference/Operators/Arithmetic_Operators#Addition +--- +<p> </p> +<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3> +<p>En complément des opérateurs de comparaison, qui peuvent être utilisés sur des valeurs chaînes de caractères, l'opérateur de concaténation (<code>+</code>) permet d'assembler deux chaînes, en renvoyant une nouvelle chaîne étant l'union des deux opérandes chaînes. Par exemple, <code>"ma " + "chaîne"</code> renvoie la chaîne <code>"ma chaîne"</code>.</p> +<p>L'opérateur raccourci d'assignation <code>+=</code> peut également être utilisé pour concaténer des chaînes. Par exemple, si la variable <code>ma_chaine</code> a la valeur <code>"alpha"</code>, l'expression <code>ma_chaine += "bet"</code> sera évaluée à <code>"alphabet"</code> et assignera cette valeur à la variable <code>ma_chaine</code>.</p> +<table class="fullwidth-table"> + <tbody> + <tr> + <td class="header" colspan="2">Opérateur</td> + </tr> + <tr> + <td>Implémentation :</td> + <td>JavaScript 1.0</td> + </tr> + <tr> + <td>Version ECMA :</td> + <td>ECMA-262</td> + </tr> + </tbody> +</table> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Reference/Operators/String_Operators", "es": "es/Referencia_de_JavaScript_1.5/Operadores/String", "pl": "pl/Dokumentacja_j\u0119zyka_JavaScript_1.5/Operatory/Operatory_dzia\u0142aj\u0105ce_na_ci\u0105gach_znak\u00f3w" } ) }}</p> diff --git a/files/fr/web/javascript/reference/opérateurs/opérateurs_de_comparaison/index.html b/files/fr/web/javascript/reference/opérateurs/opérateurs_de_comparaison/index.html new file mode 100644 index 0000000000..2e6ab2bb31 --- /dev/null +++ b/files/fr/web/javascript/reference/opérateurs/opérateurs_de_comparaison/index.html @@ -0,0 +1,256 @@ +--- +title: Opérateurs de comparaison +slug: Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison +tags: + - JavaScript + - Opérateur + - Reference +translation_of: Web/JavaScript/Reference/Operators +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>JavaScript possède des opérateurs de comparaisons stricts et des opérateurs de comparaisons qui effectuent des conversions. Une comparaison strict (ex. : <code>===</code>) ne sera vraie que si les deux opérandes sont du même type. La comparaison d'égalité faible (<code>==</code>) convertira les deux opérandes en un même type avant d'effectuer la comparaison. Pour les comparaisons relationnelles (ex. : <code><=</code>), les opérandes sont tout d'abord converties en valeurs, puis en valeurs du même type, enfin la comparaison est effectuée.</p> + +<p>Les chaînes de caractères sont comparées en fonction de l'ordre lexicographique, avec des valeurs Unicode.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-comparisonoperators.html")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<p>Les règles de comparaisons pour <a href="/fr/docs/Web/JavaScript/Structures_de_données#Les_valeurs_primitives">les types primitifs</a> sont les suivantes :</p> + +<ul> + <li>Deux chaînes de caractères sont strictement égales lorsqu'elles ont la même séquence de caractères, la même longueur et les mêmes caractères aux mêmes positions.</li> + <li>Deux nombres sont strictement égaux lorsqu'ils ont la même valeur. {{jsxref("Objets_globaux/NaN","NaN")}} n'est égal à rien, y compris lui-même. Le zéro positif et le zéro négatif sont considérés égaux.</li> + <li>Deux booléens sont strictement égaux s'ils valent tous les deux <code>true</code> ou tous les deux <code>false</code>.</li> + <li>Deux objets distincts ne sont jamais égaux l'un à l'autre (pour l'égalité faible et stricte).</li> + <li>Deux objets sont égaux si les deux opérandes sont des références au même objet.</li> + <li>Les types nul et indéfini sont strictement égaux à eux-mêmes et sont faiblement égaux l'un à autre.</li> +</ul> + +<h2 id="Les_opérateurs_dégalité">Les opérateurs d'égalité</h2> + +<h3 id="Égalité_simple"><a>Égalité simple (==)</a></h3> + +<p>L'opérateur d'égalité simple convertit les deux opérandes s'<strong>ils ne sont pas du même type</strong>, ensuite la comparaison stricte est appliquée. Si <strong>les deux opérandes sont des objets</strong>, le moteur JavaScript comparera les références internes pour voir si elles réfèrent au même objet en mémoire.</p> + +<h4 id="Syntaxe">Syntaxe</h4> + +<pre class="syntaxbox">x == y +</pre> + +<h4 id="Exemples">Exemples</h4> + +<pre class="brush: js"> 1 == 1; // true +"1" == 1; // true + 1 == '1'; // true + 0 == false; // true + 0 == null; // false + 0 == undefined // false +null == undefined // true + +var obj1 = { "clé": "valeur"}; +var obj2 = { "clé": "valeur"}; +obj1 == obj2 // false +</pre> + +<h3 id="Inégalité_simple_!"><a>Inégalité simple (!=)</a></h3> + +<p>L'opérateur d'inégalité simple renvoie <code>true</code> si les deux opérandes ne sont pas égaux. Si les deux opérandes <strong>ne sont pas du même type</strong>, une conversion sera effectuée vers un type adéquat. <strong>Si les deux opérandes sont des objets,</strong> le moteur JavaScript comparera les références internes pour voir si elles réfèrent à des objets différents en mémoire.</p> + +<h4 id="Syntaxe_2">Syntaxe</h4> + +<pre class="syntaxbox">x != y</pre> + +<h4 id="Exemples_2">Exemples</h4> + +<pre class="brush: js">1 != 2; // true +1 != "1"; // false +1 != '1'; // false +1 != true; // false +0 != false; // false +</pre> + +<h3 id="Égalité_stricte"><a>Égalité stricte (===)</a></h3> + +<p>L'opérateur d'égalité stricte renvoie <code>true</code> si les opérandes sont strictement égaux (voir ci-avant), <strong>aucune conversion de type n'est effectuée</strong>.</p> + +<h4 id="Syntaxe_3">Syntaxe</h4> + +<pre class="syntaxbox">x === y</pre> + +<h4 id="Exemples_3">Exemples</h4> + +<pre class="brush: js ">3 === 3 // true +3 === '3' // false + +var objet1 = {'clé': 'valeur'}; +var objet2 = {'clé': 'valeur'}; +objet1 === objet2; // false +</pre> + +<h3 id="Inégalité_stricte_!"><a>Inégalité stricte (!==)</a></h3> + +<p>L'opérateur d'inégalité stricte renvoie <code>true</code> si les opérandes sont de types différents ou ne sont pas égaux.</p> + +<h4 id="Syntaxe_4">Syntaxe</h4> + +<pre class="syntaxbox">x !== y</pre> + +<h4 id="Exemples_4">Exemples</h4> + +<pre class="brush: js">3 !== '3' // true +4 !== 3 // true +</pre> + +<h2 id="Opérateurs_relationnels">Opérateurs relationnels</h2> + +<div class="note"> +<p><strong>Note :</strong> Chacun de ces opérateurs invoquera la fonction <code>valueOf()</code> des opérandes qui sont des objets avant d'effectuer la comparaison.</p> +</div> + +<h3 id="Supérieur_strict_>"><a>Supérieur strict (>)</a></h3> + +<p>Cet opérateur renvoie <code>true</code> si l'opérande gauche est strictement supérieur à l'opérande droit.</p> + +<h4 id="Syntaxe_5">Syntaxe</h4> + +<pre class="syntaxbox">x > y</pre> + +<h4 id="Exemples_5">Exemples</h4> + +<pre class="brush: js">4 > 3; // true +</pre> + +<h3 id="Supérieur_ou_égal_>"><a>Supérieur ou égal (>=)</a></h3> + +<p>Cet opérateur renvoie <code>true</code> si l'opérande gauche est supérieur ou égal à l'opérande droit</p> + +<h4 id="Syntaxe_6">Syntaxe</h4> + +<pre class="syntaxbox"> x >= y</pre> + +<h4 id="Exemples_6">Exemples</h4> + +<pre class="brush: js">4 >= 3; // true +3 >= 3; // true +</pre> + +<h3 id="Inférieur_strict_<"><a>Inférieur strict (<)</a></h3> + +<p>Cet opérateur renvoie <code>true</code> si l'opérande gauche est strictement inférieur à l'opérande droit</p> + +<h4 id="Syntaxe_7">Syntaxe</h4> + +<pre class="syntaxbox"> x < y</pre> + +<h4 id="Exemples_7">Exemples</h4> + +<pre class="brush: js">3 < 4; // true +</pre> + +<h3 id="Inférieur_ou_égal_<"><a>Inférieur ou égal (<=)</a></h3> + +<p>Cet opérateur renvoie <code>true</code> si l'opérande gauche est inférieur ou égal à l'opérande droit</p> + +<h4 id="Syntaxe_8">Syntaxe</h4> + +<pre class="syntaxbox"> x <= y</pre> + +<h4 id="Exemples_8">Exemples</h4> + +<pre class="brush: js">3 <= 4; // true +</pre> + +<h2 id="Utiliser_les_opérateurs_dégalité">Utiliser les opérateurs d'égalité</h2> + +<p>Les opérateurs d'égalité/inégalité faible (<code>==</code> et <code>!=</code>) utilisent <a href="https://www.ecma-international.org/ecma-262/5.1/#sec-11.9.3">l'algorithme de comparaison d'égalité abstraite</a> afin de comparer les deux opérandes. Si les opérandes sont de types primitifs différents, le moteur tentera de les convertir en un même type avant d'effectuer la comparaison. Ainsi, dans l'expression <code>5 == '5'</code>, la chaîne de droite est convertie en un nombre avant que la comparaison soit faite.</p> + +<p>Les opérateurs d'égalité/inégalité stricte (<code>===</code> et <code>!==</code>) utilisent <a href="https://www.ecma-international.org/ecma-262/5.1/#sec-11.9.6">l'algorithme de comparaison d'égalité stricte</a>. Si les opérandes sont de types différents, le résultat sera toujours <code>false</code>, on aura donc <code>5 !== '5'</code>.</p> + +<p>Selon qu'on souhaite comparer des opérandes qui sont censés avoir le même type ou non, on utilisera l'un ou l'autre type d'opérateur.</p> + +<p>Si un opérande doit être comparé à un autre type, le moteur effectuera une conversion de la façon suivante :</p> + +<ul> + <li>Lorsqu'une comparaison est opérée entre une chaîne de caractères et un nombre, Javascript tente de convertir la chaine en une valeur numérique. Une valeur mathématique est obtenue à partir de la chaîne littérale numérique, puis celle-ci est arrondie à une valeur de type Nombre.</li> + <li>Si l'un des opérandes est de type booléen, <code>true</code> sera converti en 1 et <code>false</code> en +0.</li> + <li>Si on compare un objet avec un nombre ou une chaîne, le moteur JavaScript tentera de renvoyer la valeur par défaut de l'objet. Les opérateurs opèrent une conversion grâce aux méthodes <code>valueOf</code> (pour obtenir un nombre) et <code>toString</code> (pour obtenir une chaîne de caractères). Si cela ne fonctionne pas, une exception sera levée.</li> + <li>Un objet sera converti en un type primitif autre uniquement si l'autre opérande est un type primitif (autre qu'objet). Si les deux opérandes sont des objets, ils seront comparés comme deux objets (voir ci-avant) et l'égalité ne sera vérifiée que si les opérandes font référence au même objet en mémoire</li> +</ul> + +<div class="note"> +<p><strong>Note :</strong> Voir également la page sur <a href="/fr/docs/Web/JavaScript/Les_diff%C3%A9rents_tests_d_%C3%A9galit%C3%A9_comment_les_utiliser">les différents tests d'égalité et quand les utiliser</a>.</p> +</div> + +<div class="note"><strong>Note :</strong> Les objets String sont du type objet et ne sont pas de simples chaînes de caractères ! Cela peut parfois avoir des conséquences surprenantes :</div> + +<pre class="brush:js">// true car les deux opérandes sont du type primitif chaîne de caractères +'toto' === 'toto' + +var a = new String('toto'); +var b = new String('toto'); + +// false car a et b sont du type objet mais font référence à deux objets distincts +a == b + +// false car a et b sont du type objet mais font référence à deux objets distincts +a === b + +// true car a et 'toto' sont de type différents et lorsque a est +// converti, la fonction de conversion renvoie bien la chaîne 'toto' +a == 'toto' </pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Définition initiale. Implémentée avec JavaScript 1.0</td> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Ajoute les opérateurs <code>===</code> et <code>!==</code>. Implémentés avec JavaScript 1.3</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.8')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Définis dans plusieurs sections de la spécification : <a href="https://www.ecma-international.org/ecma-262/5.1/#sec-11.8">opérateurs relationnels</a>, <a href="https://www.ecma-international.org/ecma-262/5.1/#sec-11.9">opérateurs d'égalité</a></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-relational-operators')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Définis dans plusieurs sections de la spécification : <a href="https://www.ecma-international.org/ecma-262/6.0/#sec-relational-operators">opérateurs relationnels</a>, <a href="https://www.ecma-international.org/ecma-262/6.0/#sec-equality-operators">opérateurs d'égalité</a></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-relational-operators')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Définis dans plusieurs sections de la spécification : <a href="https://tc39.github.io/ecma262/#sec-relational-operators">opérateurs relationnels</a>, <a href="https://tc39.github.io/ecma262/#sec-equality-operators">opérateurs d'égalité</a></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.operators.comparison")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Object.is()")}}</li> + <li>{{jsxref("Math.sign()")}}</li> + <li><a href="/fr/docs/Web/JavaScript/Guide/%C3%89galit%C3%A9_en_JavaScript">L'égalité en JavaScript</a></li> + <li><a href="/fr/docs/Web/JavaScript/Les_diff%C3%A9rents_tests_d_%C3%A9galit%C3%A9_comment_les_utiliser">Les différents tests d'égalité en JavaScript</a></li> +</ul> diff --git a/files/fr/web/javascript/reference/opérateurs/opérateurs_de_membres/index.html b/files/fr/web/javascript/reference/opérateurs/opérateurs_de_membres/index.html new file mode 100644 index 0000000000..e78aae110d --- /dev/null +++ b/files/fr/web/javascript/reference/opérateurs/opérateurs_de_membres/index.html @@ -0,0 +1,154 @@ +--- +title: Accesseurs de propriétés +slug: Web/JavaScript/Reference/Opérateurs/Opérateurs_de_membres +tags: + - JavaScript + - Opérateur + - Reference +translation_of: Web/JavaScript/Reference/Operators/Property_Accessors +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Les <strong>accesseurs de propriété</strong> permettent de fournir un accès aux propriétés d'un objet en utilisant une notation avec un point ou une notation avec des crochets</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-propertyaccessors.html")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">objet.propriété +objet["propriété"] +</pre> + +<h2 id="Description">Description</h2> + +<p>Les objets peuvent être vus comme des tableaux associatifs (<em>map</em>, dictionnaires, table de hachage, annuaire, etc.). Les <em>clés</em> (<em>keys</em>) de ce tableau sont les noms des propriétés de l'objet. Lorsqu'on parle d'objets, on fait généralement une distinction entre les propriétés et les méthodes. En réalité cette différence est plus dûe à une convention qu'à une réelle distinction. En effet, une méthode est simplement une propriété qu'on peut appeler (sa valeur fera souvent référence à une instance de {{jsxref("Function")}}).</p> + +<p>Il existe deux façons d'accéder aux propriétés d'un objet : la notation avec point et la notation avec crochets.</p> + +<h3 id="Notation_avec_point">Notation avec point</h3> + +<pre class="brush: js">obtenir = objet.propriété; +objet.propriété = définir; +</pre> + +<p><code>propriété</code> doit être un identifiant JavaScript valide, c'est-à-dire une séquence de caractères alphanumériques, soulignés (« <code>_</code> ») et signes dollar (« <code>$</code> »), qui ne peut commencer par un nombre. Par exemple, <code>objet.$1</code> est valide, mais <code>objet.1</code> ne l'est pas.</p> + +<pre class="brush: js">document.createElement('pre'); +</pre> + +<p>Ici, la méthode <code>createElement</code> est obtenue depuis l'objet <code>document</code> et est appelée.</p> + +<p>Si on utilise une méthode pour un littéral numérique et que celui-ci ne possède pas de point décimal ni d'exposant lié à la notation scientifique, il faudra laisser un ou plusieurs blancs afin que l'appel soit bien interprété comme un appel de méthode plutôt que comme un séparateur décimal :</p> + +<pre class="brush: js">77 .toExponential(); +// ou +77 +.toExponential(); +// ou, mieux pour la lisibilité +(77).toExponential(); +// ou encore +77.0.toExponential(); +// 77. correspond à 77.0 et là il n'y a aucun doute +</pre> + +<h3 id="Notation_avec_crochets">Notation avec crochets</h3> + +<pre class="brush: js">obtenir = objet[nom_de_propriété]; +objet[nom_de_propriété] = définir; +</pre> + +<p><code>nom_de_propriété</code> est une chaîne de caractères ou un {{jsxref("Symbol","symbole","","")}}. Elle n'a pas besoin d'être un identifiant valide ; elle peut avoir n'importe quelle valeur, par exemple <code>"1foo"</code>, <code>"!bar!"</code> ou même <code>" "</code> (une espace).</p> + +<h4 id="Exemple">Exemple</h4> + +<pre class="brush: js">document['createElement']('pre'); +</pre> + +<p>Cette ligne fait exactement la même chose que l'exemple précédent.</p> + +<h3 id="Noms_de_propriétés">Noms de propriétés</h3> + +<p>Les noms de propriétés doivent être des chaînes de caractères ou des symboles. Cela signifie que les autres types d'objet ne peuvent pas être utilisés comme clés d'un objet. Tout autre type d'objet, même un nombre, sera converti en une chaîne via sa méthode <a href="fr/R%c3%a9f%c3%a9rence_de_JavaScript_1.5_Core/Objets_globaux/Object/toString"><code>toString</code></a>.</p> + +<h4 id="Exemples">Exemples</h4> + +<pre class="brush: js">var objet = {}; +objet['1'] = 'valeur'; +console.log(objet[1]); +</pre> + +<p>Ceci affichera « valeur », étant donné que le nombre <code>1</code> sera converti en une chaîne <code>"1"</code>.</p> + +<pre class="brush: js">var toto = {propriété_unique : 1}, truc = {propriété_unique : 2}, objet = {}; +objet[toto] = 'valeur'; +console.log(objet[truc]); +</pre> + +<p>Ce code affichera également « valeur », étant donné que <code>toto</code> et <code>truc</code> seront convertis en la même chaîne de caractères. Dans le cas du moteur JavaScript <a href="fr/SpiderMonkey">SpiderMonkey</a>, cette chaîne serait <code>"['object Object']"</code>.</p> + +<h3 id="Liaison_de_méthodes">Liaison de méthodes</h3> + +<p>Une méthode n'est pas liée à l'objet dont elle est une méthode. En particulier, <code>this</code> n'est pas défini dans une méthode, c'est-à-dire que <code>this</code> ne fait pas nécessairement référence à un objet contenant la méthode. En réalité, <code>this</code> est « passé » par l'appel de la fonction.</p> + +<p>Pour plus d'informations, consultez la page sur <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_this#Liaison_de_m.C3.A9thodes">l'opérateur <code>this</code> et les liaisons de méthodes</a>.</p> + +<h3 id="Note_concernant_eval">Note concernant <code>eval</code></h3> + +<p>Les nouveaux venus en JavaScript font souvent l'erreur d'utiliser {{jsxref("eval", "eval()")}} alors que la notation avec crochets pourrait être utilisée. Par exemple, la syntaxe suivante est utilisée dans de nombreux scripts.</p> + +<pre class="brush: js">x = eval('document.formulaire.' + controle + '.value'); +</pre> + +<p><code>eval</code> est lente et insécurisée et devrait être évitée dès que possible. Il est préférable d'utiliser la notation avec crochets :</p> + +<pre class="brush: js">x = document.formulaire[controle].value; +</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-property-accessors', 'Property Accessors')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-property-accessors', 'Accesseurs de propriété')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.2.1', 'Accesseurs de propriété')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-11.2.1', 'Accesseurs de propriété')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Définition initiale, implémentée avec JavaScript 1.0.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.operators.property_accessors")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Object")}}</li> + <li>{{jsxref("Object.defineProperty()")}}</li> + <li><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Affecter_par_décomposition">L'affectation par décomposition</a></li> + <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Optional_chaining">Le chaînage optionnel</a></li> +</ul> diff --git a/files/fr/web/javascript/reference/opérateurs/opérateurs_logiques/index.html b/files/fr/web/javascript/reference/opérateurs/opérateurs_logiques/index.html new file mode 100644 index 0000000000..8a87240700 --- /dev/null +++ b/files/fr/web/javascript/reference/opérateurs/opérateurs_logiques/index.html @@ -0,0 +1,255 @@ +--- +title: Opérateurs logiques +slug: Web/JavaScript/Reference/Opérateurs/Opérateurs_logiques +tags: + - JavaScript + - Operator + - Reference +translation_of: Web/JavaScript/Reference/Operators +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Les opérateurs logiques sont typiquement utilisés avec des valeurs booléennes (logiques) ; lorsque c'est le cas, ils renvoient une valeur booléenne également. Cependant, les opérateurs <code>&&</code> et <code>||</code> renvoient en réalité la valeur d'un des opérandes spécifiés. Si ces opérateurs sont utilisés avec des valeurs non booléennes, ils peuvent donc également renvoyer une valeur non booléenne.</p> + +<p>{{EmbedInteractiveExample("pages/js/expressions-logicaloperator.html")}}</p> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<h2 id="Description">Description</h2> + +<p>Les opérateurs logiques sont décrits dans le tableau suivant (les expressions indiquées comme opérandes peuvent être de n'importe quel type et pas nécessairement être booléennes au sens strict) :</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th>Opérateur</th> + <th>Usage</th> + <th>Description</th> + </tr> + <tr> + <td>ET logique (<code>&&</code>)</td> + <td><code><em>expr1</em> &&<em>expr2</em> </code></td> + <td>Renvoie <code>expr1</code> si cette expression peut être convertie en <code>false</code>, sinon renvoie <code>expr2</code>.</td> + </tr> + <tr> + <td>OU logique (<code>||</code>)</td> + <td><code><em>expr1</em> ||<em>expr2</em> </code></td> + <td>Renvoie <code>expr1</code> si cette expression peut être convertie en <code>true</code>, sinon renvoie <code>expr2</code>.</td> + </tr> + <tr> + <td>NON logique (<code>!</code>)</td> + <td><code>!<em>expr</em> </code></td> + <td>Renvoie <code>false</code> si son opérande unique peut être converti en <code>true</code>, sinon il renvoie <code>true</code>.</td> + </tr> + </tbody> +</table> + +<p>Si une valeur peut être convertie en <code>true</code>, on dit en anglais qu'elle est <em>truthy</em>. Pour <code>false</code> on dit qu'elle est <em>falsy</em>.</p> + +<p>Parmi les expressions qui peuvent être converties en <code>false</code>, citons celles qui seront évaluées à :</p> + +<ul> + <li><code>null</code>,</li> + <li><code>NaN</code>,</li> + <li><code>0</code>,</li> + <li>la chaîne vide (<code>""</code> ou <code>''</code> ou <code>``</code>),</li> + <li><code>undefined</code>.</li> +</ul> + +<p>Même si les opérateurs <code>&&</code> et <code>||</code> peuvent être utilisés avec des opérandes qui ne sont pas des valeurs booléennes, ils peuvent toujours être considérés comme des opérateurs booléens puisque leurs valeurs de retour peuvent toujours être converties en valeurs booléennes.</p> + +<h3 id="Évaluation_court-circuit">Évaluation court-circuit</h3> + +<p>Comme les expressions logiques sont évaluées de gauche à droite, leur évaluation sera éventuellement « court-circuitée » à l'aide des règles suivantes :</p> + +<ul> + <li>l'évaluation de <code>false &&<em> n'importe quoi</em> </code> est court-circuitée en <code>false</code>.</li> + <li>l'évaluation de <code>true ||<em> n'importe quoi</em> </code> est court-circuitée en <code>true</code>.</li> +</ul> + +<p>Les règles de la logique garantissent que ces évaluations seront toujours correctes. Notons que la partie<em>n'importe quoi</em> des expressions mentionnées ci-dessus ne sera jamais évaluée, et que tout effet de bord éventuel induit par cette évaluation ne se produira pas.</p> + +<p>Ainsi, les deux fonctions suivantes sont équivalentes :</p> + +<pre>function courtCircuit() { + // OU logique + faireQuelqueChose() || faireAutreChose(); + + faireQuelqueChose() && faireAutreChose(); +} + +function évaluationÉquivalente() { + var orFlag = faireQuelqueChose(); + if (!orFlag) { + faireAutreChose(); + } + + var andFlag = faireQuelqueChose(); + if (andFlag) { + faireAutreChose(); + } +} +</pre> + +<h3 id="Précédence_des_opérateurs">Précédence des opérateurs</h3> + +<p>Les expressions suivantes ne sont pas équivalentes en raison de <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Précédence_des_opérateurs">la précédence des opérateurs</a>. Cela permet de noter que l'opérande droit ne doit être qu'une seule expression (si nécessaire entourée de parenthèses).</p> + +<pre>true || false && false // renvoie true car && est appliqué en premier +(true || false) && false // renvoie false car || est appliqué en premier grâce aux parenthèses</pre> + +<h3 id="ET_logique"><a name="Logical_AND">ET logique (<code>&&</code>)</a></h3> + +<p>Le code qui suit illustre comment utiliser l'opérateur <code>&&</code> (ET logique).</p> + +<pre>a1 = true && true // t && t renvoie true +a2 = true && false // t && f renvoie false +a3 = false && true // f && t renvoie false +a4 = false && (3 == 4) // f && f renvoie false +a5 = "Yip" && "Yop" // t && t renvoie "Yop" +a6 = false && "Yop" // f && t renvoie false +a7 = "Yop" && false // t && f renvoie false +a8 = "" && true // f && f renvoie "" +a9 = false && "" // f && f renvoie false +</pre> + +<h3 id="OU_logique"><a name="Logical_OR">OU logique (<code>||</code>)</a></h3> + +<p>Le code qui suit illustre quelques exemples d'utilisation de l'opérateur <code>||</code> (OU logique).</p> + +<pre>o1 = true || true // t || t renvoie true +o2 = false || true // f || t renvoie true +o3 = true || false // t || f renvoie true +o4 = false || (3 == 4) // f || f renvoie false +o5 = "Yip" || "Yop" // t || t renvoie "Yip" +o6 = false || "Yip" // f || t renvoie "Yip" +o7 = "Yip" || false // t || f renvoie "Yip" +o8 = "" || false // f || f renvoie false +o9 = false || "" // f || f renvoie "" +010 = false|| monObjet // f || objet renvoie monObjet +</pre> + +<h3 id="NON_logique!"><a name="Logical_NOT">NON logique(<code>!</code>)</a></h3> + +<p>Le code qui suit illustre quelques exemples d'utilisation de l'opérateur <code>!</code> (NON logique).</p> + +<pre>n1 = !true // !t renvoie false +n2 = !false // !f renvoie true +n3 = !"" // !f renvoie true +n3 = !"Yop" // !t renvoie false +</pre> + +<h4 id="Utilisation_de_la_double_négation">Utilisation de la double négation</h4> + +<p>Il est possible d'utiliser deux fois le NON logique à la suite afin de forcer la conversion d'une valeur en un booléen. On obtiendra ainsi le booléen <code>true</code> si la valeur est équivalente à vrai et <code>false</code> si la valeur est équivalente à faux. Cette opération de conversion peut également être réalisée grâce à la fonction {{jsxref("Boolean")}}.</p> + +<pre class="brush: js">n1 = !!true; // une valeur équivalente à true renvoie true +n2 = !!{}; // un objet, même vide est toujours équivalent à true +n3 = !!(new Boolean(false)); // même lorsque leur constructeur est Boolean ! +n4 = !!false; // une valeur équivalente à false renvoie false +n5 = !!""; // idem +n6 = !!Boolean(false); // ici Boolean n'est pas utilisé comme constructeur + // et la valeur produite est bien équivalente à false</pre> + +<h3 id="Règles_de_conversions">Règles de conversions</h3> + +<h4 id="Convertir_un_ET_logique_avec_des_OU_logiques">Convertir un ET logique avec des OU logiques</h4> + +<p>L'opération suivante</p> + +<pre>condition1 && condition2</pre> + +<p>sera toujours égale à :</p> + +<pre>!(!condition1 || !condition2)</pre> + +<h4 id="Convertir_un_OU_logique_avec_des_ET_logiques">Convertir un OU logique avec des ET logiques</h4> + +<p>L'opération suivante :</p> + +<pre>condition1 || condition2</pre> + +<p>sera toujours égale à :</p> + +<pre>!(!condition1 && !condition2)</pre> + +<h4 id="Convertir_des_NON_logiques_successifs">Convertir des NON logiques successifs</h4> + +<p>Si on a l'opération suivante avec un booléen :</p> + +<pre>!!condition +</pre> + +<p>elle sera toujours équivalente à</p> + +<pre>condition</pre> + +<h3 id="Retirer_les_parenthèses_imbriquées">Retirer les parenthèses imbriquées</h3> + +<p>Les expressions logiques sont évaluées de gauche à droite, il est donc possible de retirer certaines parenthèses d'une expression complexe grâce à quelques règles.</p> + +<h4 id="Retirer_les_parenthèses_dun_ET_imbriqué">Retirer les parenthèses d'un ET imbriqué</h4> + +<p>Cette opération :</p> + +<pre>condition1 || (condition2 && condition3)</pre> + +<p>sera toujours équivalente à :</p> + +<pre>condition1 || condition2 && condition3</pre> + +<h4 id="Retirer_les_parenthèses_dun_OU_imbriqué">Retirer les parenthèses d'un OU imbriqué</h4> + +<p>Cette opération :</p> + +<pre>condition1 && (condition2 || condition3)</pre> + +<p>sera toujours équivalente à :</p> + +<pre>!(!condition1 || !condition2 && !condition3)</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Définition initiale.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.11')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Définis dans plusieurs sections de la spécification : <a href="https://www.ecma-international.org/ecma-262/5.1/#sec-11.4.9">opérateur NON logique</a>, <a href="https://www.ecma-international.org/ecma-262/5.1/#sec-11.11">opérateurs logiques binaires</a></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-binary-logical-operators')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Définis dans plusieurs sections de la spécification : <a href="https://www.ecma-international.org/ecma-262/6.0/#sec-logical-not-operator">opérateur NON logique</a>, <a href="https://www.ecma-international.org/ecma-262/6.0/#sec-binary-logical-operators">opérateurs logiques binaires</a></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-binary-logical-operators')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Définis dans plusieurs sections de la spécification : <a href="https://tc39.github.io/ecma262/#sec-logical-not-operator">opérateur NON logique</a>, <a href="https://tc39.github.io/ecma262/#sec-binary-logical-operators">opérateurs logiques binaires</a></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p> + +<p>{{Compat("javascript.operators.logical")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_binaires">Les opérateurs binaires</a></li> + <li><a href="/fr/docs/Web/JavaScript/Guide/Types_et_grammaire#Les_littéraux_booléens">Le type primitif booléen</a></li> + <li>Le constructeur objet {{jsxref("Boolean")}}</li> +</ul> diff --git a/files/fr/web/javascript/reference/opérateurs/précédence_des_opérateurs/index.html b/files/fr/web/javascript/reference/opérateurs/précédence_des_opérateurs/index.html new file mode 100644 index 0000000000..1aac441b77 --- /dev/null +++ b/files/fr/web/javascript/reference/opérateurs/précédence_des_opérateurs/index.html @@ -0,0 +1,359 @@ +--- +title: Précédence des opérateurs +slug: Web/JavaScript/Reference/Opérateurs/Précédence_des_opérateurs +tags: + - JavaScript + - Opérateur + - Reference + - precedence +translation_of: Web/JavaScript/Reference/Operators/Operator_Precedence +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>La <strong>précédence des opérateurs</strong> détermine l'ordre dans lequel les opérateurs sont évalués. Les opérateurs avec la plus haute précédence sont évalués en premier.</p> + +<p>Ainsi, l'opérateur de multiplication (« <code>*</code> ») (ayant une précédence plus haute que l'opérateur d'addition (« <code>+</code> »)) est évalué en premier et l'expression <code>6 * 4 + 2</code> renverra 26 (et pas 36).</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-operatorprecedence.html")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<h2 id="Associativité">Associativité</h2> + +<p>L'associativité détermine l'ordre dans lequel des opérateurs de même précédence sont évalués. Par exemple, considérons l'expression suivante :</p> + +<pre class="syntaxbox">a OP b OP c +</pre> + +<p>Une associativité de gauche (gauche à droite) signifie qu'elle est évaluée comme <code>(a OP b) OP c</code>, tandis qu'une associativité de droite (droite à gauche) signifie qu'elle est interprétée comme <code>a OP (b OP c)</code>. Les opérateurs d'affectation sont associatifs de droite, on peut donc écrire :</p> + +<pre class="brush:js">a = b = 5; +</pre> + +<p>avec le résultat attendu que <code>a</code> et <code>b</code> obtiennent la même valeur de 5. C'est parce que l'opérateur d'affectation retourne la valeur qu'il affecte. D'abord, <code>b</code> est défini à la valeur 5. Ensuite, <code>a</code> est défini avec la valeur renvoyée par <code>b = 5</code> qui est 5.</p> + +<h2 id="Exemples">Exemples</h2> + +<pre class="brush: js">3 > 2 && 2 > 1 +// renvoie true + +3 > 2 > 1 +// renvoie false car 3 > 2 vaut true et que true > 1 vaut false +// En ajoutant des parenthèses, on y voit plus clair (3 > 2) > 1 +</pre> + +<h2 id="Tableau">Tableau</h2> + +<p>Le tableau suivant est classé de la plus haute (0) à la plus basse (19) précédence.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th>Précédence</th> + <th>Type d'opérateur</th> + <th>Associativité</th> + <th>Opérateurs individuels</th> + </tr> + <tr> + <td>0</td> + <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Groupement">Groupement</a></td> + <td>Non applicable</td> + <td><code>( … )</code></td> + </tr> + <tr> + <td colspan="1" rowspan="5">1</td> + <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_membres#Notation_avec_point">Accès à un membre</a></td> + <td>Gauche à droite</td> + <td><code>… . …</code></td> + </tr> + <tr> + <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_membres#Notation_avec_crochets">Accès à un membre calculé</a></td> + <td>Gauche à droite</td> + <td><code>… [ … ]</code></td> + </tr> + <tr> + <td><code><a href="/fr/docs/JavaScript/Reference/R%C3%A9f%C3%A9rence_JavaScript/Op%C3%A9rateurs/Op%C3%A9rateurs_sp%C3%A9ciaux/L'op%C3%A9rateur_new">new</a></code> (avec une liste d'arguments)</td> + <td>Non applicable</td> + <td><code>new … ( … )</code></td> + </tr> + <tr> + <td><a href="/fr/docs/Web/JavaScript/Guide/Fonctions">Appel de fonction</a></td> + <td>Gauche à droite</td> + <td><code>… ( <var>… </var>)</code></td> + </tr> + <tr> + <td><a href="/fr/docs/Web/JavaScript/Reference/Operators/Optional_chaining">Chaînage optionnel</a></td> + <td>Gauche à droite</td> + <td><code>?.</code></td> + </tr> + <tr> + <td>2</td> + <td><code><a href="/fr/docs/JavaScript/Reference/R%C3%A9f%C3%A9rence_JavaScript/Op%C3%A9rateurs/Op%C3%A9rateurs_sp%C3%A9ciaux/L'op%C3%A9rateur_new">new</a></code> (sans liste d'arguments)</td> + <td>Droite à gauche</td> + <td><code>new …</code></td> + </tr> + <tr> + <td rowspan="2">3</td> + <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#Incr.C3.A9ment_(.2B.2B)">Incrémentation suffixe</a></td> + <td>Non applicable</td> + <td><code>… ++</code></td> + </tr> + <tr> + <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#D.C3.A9cr.C3.A9ment_(--)">Décrémentation suffixe</a></td> + <td>Non applicable</td> + <td><code>… --</code></td> + </tr> + <tr> + <td colspan="1" rowspan="10">4</td> + <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_logiques#Logical_NOT_.28.21.29">NON logique</a></td> + <td>Droite à gauche</td> + <td><code>! …</code></td> + </tr> + <tr> + <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#.7E_.28NON_binaire.29">NON binaire</a></td> + <td>Droite à gauche</td> + <td><code>~ …</code></td> + </tr> + <tr> + <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#Plus_unaire_(.2B)">Plus unaire</a></td> + <td>Droite à gauche</td> + <td><code>+ …</code></td> + </tr> + <tr> + <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#N.C3.A9gation_unaire_(-)">Négation unaire</a></td> + <td>Droite à gauche</td> + <td><code>- …</code></td> + </tr> + <tr> + <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#Incr.C3.A9ment_(.2B.2B)">Incrémentation préfixe</a></td> + <td>Droite à gauche</td> + <td><code>++ …</code></td> + </tr> + <tr> + <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#D.C3.A9cr.C3.A9ment_(--)">Décrémentation préfixe</a></td> + <td>Droite à gauche</td> + <td><code>-- …</code></td> + </tr> + <tr> + <td><code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_typeof">typeof</a></code></td> + <td>Droite à gauche</td> + <td><code>typeof …</code></td> + </tr> + <tr> + <td><code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_void">void</a></code></td> + <td>Droite à gauche</td> + <td><code>void …</code></td> + </tr> + <tr> + <td><code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_delete">delete</a></code></td> + <td>Droite à gauche</td> + <td><code>delete …</code></td> + </tr> + <tr> + <td><code><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/await">await</a></code></td> + <td>Droite à gauche</td> + <td><code>await …</code></td> + </tr> + <tr> + <td rowspan="4">5</td> + <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#Exponentiation_(**)">Exponentiation</a></td> + <td>Droite à gauche</td> + <td><code>… ** …</code></td> + </tr> + <tr> + <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#Multiplication_(*)">Multiplication</a></td> + <td>Gauche à droite</td> + <td><code>… * …</code></td> + </tr> + <tr> + <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#Division_(.2F)">Division</a></td> + <td>Gauche à droite</td> + <td><code>… / …</code></td> + </tr> + <tr> + <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#Reste_(.25)">Reste</a></td> + <td>Gauche à droite</td> + <td><code>… % …</code></td> + </tr> + <tr> + <td rowspan="2">6</td> + <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#Addition_(.2B)">Addition</a></td> + <td>Gauche à droite</td> + <td><code>… + …</code></td> + </tr> + <tr> + <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#Soustraction_(-)">Soustraction</a></td> + <td>Gauche à droite</td> + <td><code>… - …</code></td> + </tr> + <tr> + <td rowspan="3">7</td> + <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#.3C.3C_.28d.C3.A9calage_.C3.A0_gauche.29">Décalage binaire à gauche</a></td> + <td>Gauche à droite</td> + <td><code>… << …</code></td> + </tr> + <tr> + <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#.3E.3E_.28d.C3.A9calage_.C3.A0_droite_avec_propagation_du_signe.29">Décalage binaire à droite</a></td> + <td>Gauche à droite</td> + <td><code>… >> …</code></td> + </tr> + <tr> + <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#.3E.3E.3E_.28d.C3.A9calage_.C3.A0_droite_avec_insertion_de_z.C3.A9ros.29">Décalage binaire à droite non-signé</a></td> + <td>Gauche à droite</td> + <td><code>… >>> …</code></td> + </tr> + <tr> + <td rowspan="6">8</td> + <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison#Inf.C3.A9rieur_strict_(<)">Inférieur strict</a></td> + <td>Gauche à droite</td> + <td><code>… < …</code></td> + </tr> + <tr> + <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison#Inf.C3.A9rieur_ou_.C3.A9gal_(<.3D)">Inférieur ou égal</a></td> + <td>Gauche à droite</td> + <td><code>… <= …</code></td> + </tr> + <tr> + <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison#Sup.C3.A9rieur_strict_(>)">Supérieur strict</a></td> + <td>Gauche à droite</td> + <td><code>… > …</code></td> + </tr> + <tr> + <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison#Sup.C3.A9rieur_ou_.C3.A9gal_(>.3D)">Supérieur ou égal</a></td> + <td>Gauche à droite</td> + <td><code>… >= …</code></td> + </tr> + <tr> + <td><code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_in">in</a></code></td> + <td>Gauche à droite</td> + <td><code>… in …</code></td> + </tr> + <tr> + <td><code><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/instanceof">instanceof</a></code></td> + <td>Gauche à droite</td> + <td><code>… instanceof …</code></td> + </tr> + <tr> + <td rowspan="4">9</td> + <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison#.C3.89galit.C3.A9_simple_(.3D.3D)">Égalité faible</a></td> + <td>Gauche à droite</td> + <td><code>… == …</code></td> + </tr> + <tr> + <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison#In.C3.A9galit.C3.A9_simple_(!.3D)">Inégalité faible</a></td> + <td>Gauche à droite</td> + <td><code>… != …</code></td> + </tr> + <tr> + <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison#.C3.89galit.C3.A9_stricte_(.3D.3D.3D)">Égalité stricte</a></td> + <td>Gauche à droite</td> + <td><code>… === …</code></td> + </tr> + <tr> + <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison#In.C3.A9galit.C3.A9_stricte_(!.3D.3D)">Inégalité stricte</a></td> + <td>Gauche à droite</td> + <td><code>… !== …</code></td> + </tr> + <tr> + <td>10</td> + <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#&_.28ET_binaire.29">ET binaire</a></td> + <td>Gauche à droite</td> + <td><code>… & …</code></td> + </tr> + <tr> + <td>11</td> + <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#.5E_.28XOR_binaire.29">OU exclusif (<em>XOR</em>) binaire</a></td> + <td>Gauche à droite</td> + <td><code>… ^ …</code></td> + </tr> + <tr> + <td>12</td> + <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#(OU_binaire)" title="JavaScript/Reference/Operators/Bitwise_Operators">OU binaire</a></td> + <td>Gauche à droite</td> + <td><code>… | …</code></td> + </tr> + <tr> + <td>13</td> + <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_logiques#Logical_AND_.28&&.29">ET logique</a></td> + <td>Gauche à droite</td> + <td><code>… && …</code></td> + </tr> + <tr> + <td>14</td> + <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_logiques#OU_logique_(.7C.7C)">OU logique</a></td> + <td>Gauche à droite</td> + <td><code>… || …</code></td> + </tr> + <tr> + <td>15</td> + <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_conditionnel">Opérateur conditionnel ternaire</a></td> + <td>Droite à gauche</td> + <td><code>… ? … : …</code></td> + </tr> + <tr> + <td rowspan="13">16</td> + <td rowspan="13"><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_d_affectation">Affectation</a></td> + <td rowspan="13">Droite à gauche</td> + <td><code>… = …</code></td> + </tr> + <tr> + <td><code>… += …</code></td> + </tr> + <tr> + <td><code>… -= …</code></td> + </tr> + <tr> + <td><code>… *= …</code></td> + </tr> + <tr> + <td><code>… /= …</code></td> + </tr> + <tr> + <td><code>… **= …</code></td> + </tr> + <tr> + <td><code>… %= …</code></td> + </tr> + <tr> + <td><code>… <<= …</code></td> + </tr> + <tr> + <td><code>… >>= …</code></td> + </tr> + <tr> + <td><code>… >>>= …</code></td> + </tr> + <tr> + <td><code>… &= …</code></td> + </tr> + <tr> + <td><code>… ^= …</code></td> + </tr> + <tr> + <td><code>… |= …</code></td> + </tr> + <tr> + <td colspan="1" rowspan="2">17</td> + <td><code><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/yield">yield</a></code></td> + <td>Droite à gauche</td> + <td><code>yield …</code></td> + </tr> + <tr> + <td><code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/yield*">yield*</a></code></td> + <td>Droite à gauche</td> + <td><code>yield* …</code></td> + </tr> + <tr> + <td>18</td> + <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateur_de_d%C3%A9composition">Décomposition</a></td> + <td>Non applicable</td> + <td><code>...</code> …</td> + </tr> + <tr> + <td>19</td> + <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_virgule">Virgule</a></td> + <td>Gauche à droite</td> + <td><code>… , …</code></td> + </tr> + </tbody> +</table> diff --git a/files/fr/web/javascript/reference/opérateurs/super/index.html b/files/fr/web/javascript/reference/opérateurs/super/index.html new file mode 100644 index 0000000000..05a40df1fc --- /dev/null +++ b/files/fr/web/javascript/reference/opérateurs/super/index.html @@ -0,0 +1,184 @@ +--- +title: super +slug: Web/JavaScript/Reference/Opérateurs/super +tags: + - Classes + - ECMAScript 2015 + - JavaScript + - Opérateur + - Reference +translation_of: Web/JavaScript/Reference/Operators/super +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Le mot-clé <code><strong>super</strong></code> est utilisé afin d'appeler ou d'accéder à des fonctions définies sur l'objet parent.</p> + +<p>Les expressions de la forme <code>super.propriété</code> et <code>super[expr]</code> sont valides pour n'importe quelle <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Définition_de_méthode">définition de méthode</a>, que ce soit au sein d'une <a href="/fr/docs/Web/JavaScript/Reference/Classes">classe</a> ou d'un <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Initialisateur_objet">littéral objet</a>.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">super([arguments]); // Le constructeur parent est appelé +super.functionOnParent([arguments]);</pre> + +<h2 id="Description">Description</h2> + +<p>Lorsqu'il est utilisé dans un constructeur, le mot-clé <code>super</code> est utilisé seul et doit apparaître avant le mot-clé <code>this</code>. Ce mot-clé peut également être utilisé afin d'appeler des fonctions sur un objet parent.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Utiliser_super_avec_les_classes">Utiliser <code>super</code> avec les classes</h3> + +<p>Ce fragment de code est tiré de <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">cet exemple</a> :</p> + +<pre class="brush: js">class Rectangle { + constructor(hauteur, largeur) { + this.name = 'Rectangle'; + this.hauteur = hauteur; + this.largeur = largeur; + } + coucou(){ + console.log('Coucou, je suis un ' + this.name + '.'); + } + get aire() { + return this.hauteur * this.largeur; + } + set aire(valeur) { + this.hauteur = Math.sqrt(valeur); + this.largeur = Math.sqrt(valeur); + } +} + +class Carré extends Rectangle { + constructor(longueur) { + + // Ici, on appelle le constructeur de Rectangle + // qui est l'objet « parent » de Carré + super(longueur, longueur); + + // Pour les classes dérivées, super() doit être appelé + // avant d'utiliser 'this' sinon cela entraînera une + // exception ReferenceError. + this.name = 'Carré'; + } +}</pre> + +<h3 id="Utiliser_super_pour_appeler_des_méthodes_statiques">Utiliser super pour appeler des méthodes statiques</h3> + +<p>Il est possible d'utiliser super pour invoquer des méthodes <a href="/fr/docs/Web/JavaScript/Reference/Classes/static">statiques</a> :</p> + +<pre class="brush: js">class Rectangle { + constructor() {} + static logNbCotes() { + return "J'ai 4 côtés"; + } +} + +class Carre extends Rectangle { + constructor(){} + static logDescription() { + return super.logNbCotes() + ' qui sont tous égaux'; + } +} +Carre.logDescription(); // "J'ai 4 côtés qui sont tous égaux" +</pre> + +<h3 id="Supprimer_des_propriétés_parentes_lèvera_une_exception">Supprimer des propriétés parentes lèvera une exception</h3> + +<p>Il n'est pas possible d'utiliser l'opérateur <code><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_delete">delete</a></code> sur <code>super.prop</code> ou <code>super[expr]</code> pour supprimer une propriété de la classe parente, cela renverra une exception {{jsxref("ReferenceError")}} :</p> + +<pre class="brush: js">class Base { + constructor() {} + toto() {} +} + +class Dérivée extends Base { + constructor() {} + delete() { + delete super.toto; + } +} + +new Dérivée().delete(); +// ReferenceError : suppression invalide avec 'super'</pre> + +<h3 id="Super.prop_ne_peut_pas_surcharger_les_propriétés_non_modifiables"><code>Super.prop</code> ne peut pas surcharger les propriétés non modifiables</h3> + +<p>Lorsque des propriétés sont définies sans accès en écriture (<em>non-writable</em>), par exemple avec {{jsxref("Object.defineProperty")}}, <code>super</code> ne peut pas surcharger les valeurs de ces propriétés.</p> + +<pre class="brush: js">class X { + constructor() { + Object.defineProperty(this, "prop", { + configurable: true, + writable: false, + value: 1 + }); + } +} +class Y extends X { + constructor() { + super(); + } + toto(){ + super.prop = 2; // Impossible de surcharger + } +} +var y = new Y(); +y.toto(); // TypeError "prop" is read-only +console.log(y.prop); // 1 +</pre> + +<h3 id="Utiliser_super.prop_sur_les_littéraux_objets">Utiliser <code>super.prop</code> sur les littéraux objets</h3> + +<p><code>super</code> peut également être utilisé avec la notation littérale. Dans l'exemple qui suit, deux objets définissent chacun une méthode. Le deuxième objet utilise <code>super</code> pour appeler la méthode du premier objet. Cela fonctionne grâce à {{jsxref("Object.setPrototypeOf()")}} avec lequel on définit que le prototype de <code>obj2</code> est <code>obj1</code>. De cette façon, super peut parcourir la chaîne de prototypes et trouver <code>méthode1</code> dans <code>obj1</code>.</p> + +<pre class="brush: js">var obj1 = { + méthode1() { + console.log("méthode 1"); + } +} + +var obj2 = { + méthode2() { + super.méthode1(); + } +} + +Object.setPrototypeOf(obj2, obj1); +obj2.méthode2(); // affiche "méthode 1" dans la console +</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ES2015', '#sec-super-keyword', 'super')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Définition initiale.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-super-keyword', 'super')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.operators.super")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/JavaScript/Reference/Classes">Les classes</a></li> +</ul> diff --git a/files/fr/web/javascript/reference/opérateurs/syntaxe_décomposition/index.html b/files/fr/web/javascript/reference/opérateurs/syntaxe_décomposition/index.html new file mode 100644 index 0000000000..75f97a972f --- /dev/null +++ b/files/fr/web/javascript/reference/opérateurs/syntaxe_décomposition/index.html @@ -0,0 +1,262 @@ +--- +title: Syntaxe de décomposition +slug: Web/JavaScript/Reference/Opérateurs/Syntaxe_décomposition +tags: + - ECMAScript 2015 + - ECMAScript6 + - JavaScript + - Reference + - Syntaxe +translation_of: Web/JavaScript/Reference/Operators/Spread_syntax +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>La <strong>syntaxe de décomposition</strong> permet d'étendre un itérable (par exemple une expression de tableau ou une chaîne de caractères) en lieu et place de plusieurs arguments (pour les appels de fonctions) ou de plusieurs éléments (pour les littéraux de tableaux) ou de paires clés-valeurs (pour les littéraux d'objets).</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-spreadsyntax.html")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<p>Pour l'utilisation de la décomposition dans les appels de fonction :</p> + +<pre class="syntaxbox notranslate">f(...objetIterable); +</pre> + +<p>Pour les littéraux de tableaux :</p> + +<pre class="syntaxbox notranslate">[...objetIterable, 4, 5, 6]</pre> + +<p>Pour les littéraux objets (nouvelle fonctionnalité pour ECMAScript, actuellement en proposition de niveau 4, finalisée) :</p> + +<pre class="syntaxbox notranslate">let objClone = { ...obj };</pre> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Utiliser_la_décomposition_dans_les_appels_de_fonction">Utiliser la décomposition dans les appels de fonction</h3> + +<h4 id="Améliorer_la_fonction_apply">Améliorer la fonction <code>apply()</code></h4> + +<p>Il arrive souvent qu'on veuille utiliser {{jsxref( "Function.prototype.apply")}} avec un tableau parmi les arguments de la fonction utilisée :</p> + +<pre class="brush: js notranslate">function f(x, y, z) { } +var args = [0, 1, 2]; +f.apply(null, args);</pre> + +<p>avec la décomposition, on peut désormais écrire :</p> + +<pre class="brush: js notranslate">function f(x, y, z) { } +var args = [0, 1, 2]; +f(...args);</pre> + +<p>Tout argument passé à une fonction peut être décomposé grâce à cette syntaxe et cette syntaxe peut être utilisée pour plusieurs arguments.</p> + +<pre class="brush: js notranslate">function f(v, w, x, y, z) { } +var args = [0, 1]; +f(-1, ...args, 2, ...[3]);</pre> + +<h4 id="Utiliser_apply_avec_lopérateur_new">Utiliser <code>apply()</code> avec l'opérateur <code>new</code></h4> + +<p>Avec ES5, il n'est pas possible d'utiliser <code>new</code> avec <code>apply</code> (selon ES5 <code>apply</code> effectue un appel <code>[[Call]]</code> et pas un appel <code>[[Construct]]</code>). Avec ES2015, la syntaxe de décomposition permet de le faire naturellement :</p> + +<pre class="brush: js notranslate">var champsDate = lireChampsDate(maBaseDeDonnées); +var d = new Date(...champsDate);</pre> + +<p>Afin d'utiliser <code>new</code> avec un tableau de paramètres, sans utiliser la décomposition, il faudrait l'employer indirectement grâce à une application partielle :</p> + +<pre class="brush: js notranslate">function applyAndNew(constructor, args) { + function partial () { + return constructor.apply(this, args); + }; + if (typeof constructor.prototype === "object") { + partial.prototype = Object.create(constructor.prototype); + } + return partial; +} + + +function monConstructeur () { + console.log("arguments.length: " + arguments.length); + console.log(arguments); + this.prop1="val1"; + this.prop2="val2"; +}; + +var mesArguments = ["bi", "bop", "bup", null]; +var monConstructeurAvecArguments = applyAndNew(monConstructor, mesArguments); + +console.log(new monConstructeurAvecArguments); +// (log fourni par monConstructeur): arguments.length: 4 +// (log fourni par monConstructeur): ["bi", "bop", "bup", null] +// (log fourni par "new monConstructeurAvecArguments"): {prop1: "val1", prop2: "val2"} +</pre> + +<h3 id="Utiliser_la_décomposition_dans_les_littéraux_de_tableau">Utiliser la décomposition dans les littéraux de tableau</h3> + +<h4 id="Améliorer_les_littéraux_de_tableau">Améliorer les littéraux de tableau</h4> + +<p>À l'heure actuelle, sans la décomposition, si on a un tableau et qu'on souhaite créer un nouveau tableau composé du premier, on ne peut pas utiliser un littéral de tableau et il faut utiliser des fonctions comme {{jsxref("Array.prototype.push", "push()")}}, {{jsxref("Array.prototype.splice", "splice()")}}, {{jsxref("Array.prototype.concat", "concat()")}}, etc. Avec la syntaxe de décomposition, cela devient plus succinct :</p> + +<pre class="brush: js notranslate">var articulations = ['épaules', 'genoux']; +var corps = ['têtes', ...articulations, 'bras', 'pieds']; +// ["têtes", "épaules", "genoux", "bras", "pieds"] +</pre> + +<p>Comme pour les fonctions, la syntaxe peut être utilisé plusieurs fois.</p> + +<h4 id="Copier_un_tableau">Copier un tableau</h4> + +<pre class="brush: js notranslate">var arr = [1, 2, 3]; +var arr2 = [...arr]; +arr2.push(4); + +console.log(arr2); // [1, 2, 3, 4] +console.log(arr); // [1, 2, 3] (inchangé) +</pre> + +<div class="note"> +<p><strong>Note :</strong> Lorsqu'on utilise la décomposition pour copier un tableau, celle-ci ne s'applique qu'au premier niveau de profondeur. Par conséquent, il peut ne pas convenir pour la copie des tableaux multidimensionnels (des tableaux imbriqués dans d'autres tableaux) comme le montre l’exemple suivant (il en va de même avec {{jsxref("Object.assign()")}} et la décomposition).</p> +</div> + +<pre class="brush: js notranslate">var a = [[1], [2], [3]]; +var b = [...a]; // b vaut [[1], [2], [3]] + +b.shift().shift(); // *a* vaut désormais [[], [2], [3]]; +</pre> + +<h4 id="Une_meilleure_façon_de_concaténer_des_tableaux">Une meilleure façon de concaténer des tableaux</h4> + +<p>{{jsxref("Array.prototype.concat", "concat")}} est souvent utilisé afin de concaténer un tableau à la suite d'une autre. Avec ES5, on aurait le code suivant :</p> + +<pre class="brush: js notranslate">var arr1 = [0, 1, 2]; +var arr2 = [3, 4, 5]; +// On ajoute les éléments de arr2 après ceux de arr1 +var nouveauTableau = arr1.concat(arr2);</pre> + +<p>Avec ES2015 et la décomposition, on peut écrire :</p> + +<pre class="brush: js notranslate">var arr1 = [0, 1, 2]; +var arr2 = [3, 4, 5]; +arr1 = [...arr1, ...arr2]; // arr1 vaut [0, 1, 2, 3, 4, 5] +</pre> + +<p>{{jsxref("Array.prototype.unshift", "unshift")}} est souvent utilisé afin d'insérer des valeurs d'un tableau au début d'un autre tableau. Avec ES5, on peut écrire :</p> + +<pre class="brush: js notranslate">var arr1 = [0, 1, 2]; +var arr2 = [3, 4, 5]; +// On ajoute tous les éléments +// de arr2 au début de arr1 +Array.prototype.unshift.apply(arr1, arr2) // arr1 vaut [3, 4, 5, 0, 1, 2]</pre> + +<p>Avec ES2015 et la décomposition, on peut écrire :</p> + +<pre class="brush: js notranslate">var arr1 = [4, 5, 6]; +var arr2 = [1, 2, 3]; +arr1 = [...arr2, ...arr1]; +// arr1 vaut désormais [1, 2, 3, 4, 5, 6] +</pre> + +<div class="note"> +<p><strong>Note :</strong> Il y a une différence avec <code>unshift()</code> : ici, on crée un nouveau tableau qui est affecté à <code>arr1</code>, le tableau original de <code>arr1</code> n'est pas modifié "sur place".</p> +</div> + +<h3 id="Utiliser_la_décomposition_avec_les_littéraux_objet">Utiliser la décomposition avec les littéraux objet</h3> + +<p><a href="https://github.com/tc39/proposal-object-rest-spread">La proposition relative à la décomposition des propriétés (actuellement au stade de proposition de niveau 4)</a> vise à ajouter la décomposition des propriétés pour <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Initialisateur_objet">les littéraux objets</a>. Cela permet de copier les propriétés énumérables directement rattachées à un objet source sur un nouvel objet.</p> + +<p>Le clonage superficiel (qui ne rattache pas le prototype) ou la fusion d'objets peut donc être obtenue avec une syntaxe plus concise que celle utilisant {{jsxref("Object.assign()")}}.</p> + +<pre class="brush: js notranslate">var profil = { prenom: 'Sarah', profilComplet: false }; +var profilMisAJour = { nom: 'Dupont', profilComplet: true }; + +var clone = { ...profil }; +// Object { prenom: 'Sarah', profilComplet: false } + +var fusion = { ...profil, ...profilMisAJour }; +// Object { prenom: 'Sarah', nom: 'Dupont', profilComplet: true };</pre> + +<p>On notera que {{jsxref("Object.assign()")}} déclenche <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/set">les mutateurs</a>, ce qui n'est pas le cas pour la syntaxe de décomposition.</p> + +<p>Il n'est pas possible de remplacer ou de recopier le comportement de la fonction {{jsxref("Object.assign()")}} :</p> + +<pre class="brush: js notranslate">var profil = { prenom: 'Sarah', profilComplet: false }; +var profilMisAJour = { nom: 'Dupont', profilComplet: true }; + +const fusionner = ( ...objets) => {...objets}; +var nouveauProfil = fusionner(profil, profilMisAJour); +// Object { 0: { prenom: 'Sarah', profilComplet: false }, 1: { nom: 'Dupont', profilComplet: true } } + +var autreNouveauProfil = fusion({}, obj1, obj2); +// Object { 0: {}, 1: { prenom: 'Sarah', profilComplet: false }, 2: { nom: 'Dupont', profilComplet: true } } +</pre> + +<p>Dans l'exemple précédent, la syntaxe de décomposition ne fonctionne pas comme on pourrait s'y attendre : il décompose les arguments en un tableau grâce au paramètre du reste.</p> + +<h3 id="La_décomposition_ne_sapplique_quaux_itérables">La décomposition ne s'applique qu'aux itérables</h3> + +<p>Pour rappel : la syntaxe de décomposition ne s'applique qu'<a href="/fr/docs/Web/JavaScript/Guide/iterable">aux objets itérables</a> :</p> + +<pre class="brush: js notranslate">var obj = {"clé1" : "valeur1"}; +function maFonction(x) { + console.log(x); // undefined +} +maFonction(...obj); +var args = [...obj]; +console.log(args, args.length) //[] 0</pre> + +<h3 id="Utiliser_la_décomposition_avec_de_nombreuses_valeurs">Utiliser la décomposition avec de nombreuses valeurs</h3> + +<p>Lorsqu'on utilise la décomposition (comme dans les exemples précédents), il faut faire attention à ne pas dépasser le nombre maximal d'arguments du moteur JavaScript. En effet, la décomposition place toutes les valeurs sources dans la pile. Pour plus d'informations, consulter {{jsxref( "Function.prototype.apply")}}.</p> + +<h2 id="Les_paramètres_du_reste">Les paramètres du reste</h2> + +<p>La syntaxe des paramètres du reste ressemble à la syntaxe de décomposition mais est utilisée afin de destructurer des tableaux et des objets. D'une certaine façon, la syntaxe du reste est l'opposée de la décomposition : la première collecte plusieurs éléments et les condense en un seul élément tandis que la seconde explose les éléments. Pour plus d'informations, voir la page sur <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/paramètres_du_reste">les paramètres du reste</a>.</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ES2015', '#sec-array-initializer')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Définie dans plusieurs sections de la spécification : <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-array-initializer">initialisateur de tableau</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-argument-lists">listes d'argument</a>.</td> + </tr> + <tr> + <td>{{SpecName('ES2018', '#sec-object-initializer')}}</td> + <td>{{Spec2('ES2018')}}</td> + <td>Définie dans la section sur les <a href="http://www.ecma-international.org/ecma-262/9.0/#sec-object-initializer">initialisateurs d'objet.</a></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array-initializer')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Aucune modification.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object-initializer')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Aucune modification.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.operators.spread")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/paramètres_du_reste">Paramètres du reste</a></li> + <li><a href="https://tech.mozfr.org/post/2015/06/05/ES6-en-details-%3A-la-decomposition">Le billet de ES6 en détails sur la décomposition</a></li> + <li>{{jsxref("Function.prototype.apply()")}}</li> +</ul> diff --git a/files/fr/web/javascript/reference/opérateurs/tube/index.html b/files/fr/web/javascript/reference/opérateurs/tube/index.html new file mode 100644 index 0000000000..2763987971 --- /dev/null +++ b/files/fr/web/javascript/reference/opérateurs/tube/index.html @@ -0,0 +1,72 @@ +--- +title: Tube +slug: Web/JavaScript/Reference/Opérateurs/Tube +tags: + - Experimental + - JavaScript + - Opérateur + - Reference +translation_of: Web/JavaScript/Reference/Operators/Pipeline_operator +--- +<div>{{jsSidebar("Operators")}} {{SeeCompatTable}}</div> + +<p>L'opérateur expérimental tube (ou <em>pipeline</em> en anglais) <strong><code>|></code></strong> (actuellement au niveau 1 des propositions) permet de créer des chaînes d'appel de fonctions de façon lisible. En fait, cet opérateur fournit un sucre syntaxique pour les appels de fonction avec un seul argument. On pourrait donc écrire :</p> + +<pre class="brush: js">let url = "%21%" |> decodeURI;</pre> + +<p>qui correspond exactement à :</p> + +<pre class="brush: js">let url = decodeURI("%21%");</pre> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">expression |> function</pre> + +<p>La valeur de <code>expression</code> est passé à <code>function</code> comme unique paramètre.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Enchaîner_des_appels_de_fonction">Enchaîner des appels de fonction</h3> + +<p>L'opérateur tube peut améliorer la lisibilité lorsqu'on enchaîne plusieurs fonctions.</p> + +<pre class="brush: js">const doubler = (n) => n * 2; +const incrementer = (n) => n + 1; + +// Sans l'opérateur tube +doubler(incrementer(doubler(10))); // 42 + +// Avec l'opérateur tube +10 |> doubler |> incrementer |> doubler; // 42 +</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="https://tc39.github.io/proposal-pipeline-operator/#sec-intro">Brouillon de spécification pour la proposition de l'opérateur tube</a></td> + <td>Niveau 1</td> + <td>Ne fait actuellement pas partie de la spécification ECMAScript.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.operators.pipeline")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="https://github.com/tc39/proposals">Les propositions au TC39</a></li> +</ul> diff --git a/files/fr/web/javascript/reference/opérateurs/yield/index.html b/files/fr/web/javascript/reference/opérateurs/yield/index.html new file mode 100644 index 0000000000..f6a5de53e6 --- /dev/null +++ b/files/fr/web/javascript/reference/opérateurs/yield/index.html @@ -0,0 +1,127 @@ +--- +title: yield +slug: Web/JavaScript/Reference/Opérateurs/yield +tags: + - ECMAScript 2015 + - Générateurs + - Itérateur + - JavaScript + - Opérateur +translation_of: Web/JavaScript/Reference/Operators/yield +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Le mot-clé <code>yield</code> est utilisé pour suspendre et reprendre une fonction génératrice ({{jsxref("Statements/function*", "function*")}} ou <a href="/fr/docs/Web/JavaScript/Reference/Statements/Legacy_generator_function">une fonction génératrice historique</a>).</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-yield.html")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox language-html"><em>[[rv =]]</em> yield [[<em>expression</em>]];</pre> + +<dl> + <dt><code>expression</code></dt> + <dd>Définit la valeur à retourner depuis la fonction génératrice via <a href="/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration#Le_protocole_«_itérateur_»">le protocole itérateur</a>. Si omise, <code>undefined</code> sera retournée à la place.</dd> + <dt><code>rv</code></dt> + <dd>Retourne la valeur optionnelle passée à la méthode <code>next()</code> pour reprendre son exécution.</dd> +</dl> + +<h2 id="Description">Description</h2> + +<p>Le mot-clé <code>yield</code> suspend une fonction génératrice et la valeur de l'expression suivant le mot-clé <code>yield</code> est retournée à l'appelant du générateur. Il peut être vu comme une version générateur du mot-clé <code>return</code>.</p> + +<p>Le mot-clé <code>yield</code> ne peut être appelé qu'à partir de la fonction génératrice qui le contient. Il ne peut pas être utilisé depuis des fonctions imbriquées ou avec des <em>callbacks</em>.</p> + +<p>Le mot-clé <code>yield</code> retourne en fait un objet <code>IteratorResult</code> ayant deux propriétés, <code>value</code> et <code>done.</code> La propriété <code>value</code> est le résultat de l'évaluation de l'expression <code>yield</code>, et <code>done</code> est <code>false</code>, indiquant que la fonction génératrice n'est pas complètement terminée.</p> + +<p>Une fois suspendue sur une expression <code>yield</code>, l'exécution du code du générateur reste suspendue jusqu'à ce que la méthode <code>next()</code> du générateur soit appelée. Chaque fois que la méthode <code>next()</code> du générateur est appelée, le générateur reprend l'exécution et s'exécute jusqu'à ce qu'elle atteigne l'une des situations suivantes :</p> + +<ul> + <li> + <p>un <code>yield</code>, ce qui provoque une nouvelle pause du générateur et retourne la nouvelle valeur du générateur ; la prochaine fois que <code>next()</code> sera appelé, l'exécution reprendra à l'instruction immédiatement après le <code>yield</code> ;</p> + </li> + <li> + <p>{{jsxref ("Statements/throw", "throw")}} est utilisé pour déclencher une exception depuis le générateur ; cela arrête entièrement l'exécution du générateur et l'exécution reprend dans l'appelant, comme c'est normalement le cas lorsqu'une exception est déclenchée ;</p> + </li> + <li> + <p>la fin de la fonction génératrice est atteinte ; dans ce cas, l'exécution du générateur se termine et un <code>IteratorResult</code> est retourné à l'appelant, dans lequel la valeur est {{jsxref ("undefined")}} et <code>done</code> est <code>true</code> ;</p> + </li> + <li> + <p>une instruction {{jsxref ("Statements/return", "return")}} est atteinte ; dans ce cas, l'exécution du générateur se termine et un <code>IteratorResult</code> est retourné à l'appelant dans lequel la <code>value</code> est la valeur spécifiée par l'instruction <code>return</code> et <code>done</code> vaut <code>true</code>.</p> + </li> +</ul> + +<p>Si une valeur optionnelle est passée à la méthode <code>next()</code> du générateur, cette valeur devient la valeur retournée par l'opération <code>yield</code> en cours du générateur.</p> + +<p>Entre le chemin de code du générateur, ses opérateurs <code>yield</code>, et la possibilité de spécifier une nouvelle valeur de départ en la passant à {{jsxref ("Generator.prototype.next()")}}, les générateurs offrent énormément de puissance et de contrôle.</p> + +<h2 id="Exemples">Exemples</h2> + +<p>Le code suivant est la déclaration d'un exemple de fonction génératrice :</p> + +<pre><code>function* compteVentesPommes () { + var listeVentes = [3, 7, 5]; + for (var i = 0; i < listeVentes.length; i++) { + yield listeVentes[i]; + } +}</code></pre> + +<p>Une fois qu'une fonction génératrice est définie, elle peut être utilisée en construisant un itérateur comme indiqué.</p> + +<pre><code>var magasinPommes = compteVentesPommes(); // Générateur { } +console.log(magasinPommes.next()); // { value: 3, done: false } +console.log(magasinPommes.next()); // { value: 7, done: false } +console.log(magasinPommes.next()); // { value: 5, done: false } +console.log(magasinPommes.next()); // { value: undefined, done: true }</code></pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ES2015', '#prod-YieldExpression', 'Yield')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Définition initiale.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#prod-YieldExpression', 'Yield')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, merci de regarder <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div> + +<p>{{Compat("javascript.operators.yield")}}</p> + +<h2 id="Notes_spécifiques_à_Firefox">Notes spécifiques à Firefox</h2> + +<ul> + <li>À partir de Gecko 29 {{geckoRelease(29)}}, une fonction génératrice terminée ne déclenche plus une {{jsxref("TypeError")}} "generator has already finished". À la place, elle renvoie un objet <code>IteratorResult</code> tel que <code>{ value: undefined, done: true }</code> ({{bug(958951)}}).</li> + <li>À partir de Gecko 33 {{geckoRelease(33)}}, l'analyse de l'expression <code>yield</code> a été mise à jour afin d'être conforme aux spécifications ES2015 ({{bug(981599)}}): + <ul> + <li>L'expression après le mot-clé <code>yield</code> est optionnelle et l'omettre ne déclenche plus une {{jsxref("SyntaxError")}} : <code>function* compteVentesPommes() { yield; }</code></li> + </ul> + </li> +</ul> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/JavaScript/Guide/Le_protocole_iterator">Le protocole itérateur</a></li> + <li>L'instruction {{jsxref("Instructions/function*", "function*")}}</li> + <li>L'expression {{jsxref("Opérateurs/function*", "function*")}}</li> + <li>L'opérateur {{jsxref("Opérateurs/yield*", "yield*")}}</li> +</ul> diff --git a/files/fr/web/javascript/reference/opérateurs/yield_star_/index.html b/files/fr/web/javascript/reference/opérateurs/yield_star_/index.html new file mode 100644 index 0000000000..3235d87dc1 --- /dev/null +++ b/files/fr/web/javascript/reference/opérateurs/yield_star_/index.html @@ -0,0 +1,162 @@ +--- +title: yield* +slug: Web/JavaScript/Reference/Opérateurs/yield* +tags: + - ECMAScript 2015 + - Generators + - Iterable + - Iterator + - JavaScript + - Operator + - Reference +translation_of: Web/JavaScript/Reference/Operators/yield* +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Une <strong>expression <code>yield*</code></strong> est utilisée afin de déléguer le mécanisme d'itération/génération à un autre {{jsxref("Instructions/function*", "générateur")}} ou à un autre objet itérable.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-yieldasterisk.html")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox language-html"> yield* [[expression]];</pre> + +<dl> + <dt><code>expression</code></dt> + <dd>L'expression qui renvoie un objet itérable.</dd> +</dl> + +<h2 id="Description">Description</h2> + +<p>L'expression <code>yield*</code> itère sur l'opérande et génère chaque valeur générée par l'opérande.</p> + +<p>La valeur de l'expression <code>yield*</code> est la valeur renvoyée par l'itérateur lorsque celui est terminé (la propriété <code>done</code> vaut <code>true</code>).</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Délégation_de_la_génération">Délégation de la génération</h3> + +<p>Dans le code suivant, les valeurs générées par <code>g1()</code> sont renvoyées grâce aux appels à la fonction <code>next()</code>, comme pour celles renvoyées par <code>g2()</code>.</p> + +<pre class="brush: js">function* g1() { + yield 2; + yield 3; + yield 4; +} +function* g2() { + yield 1; + yield* g1(); + yield 5; +} + +var iterator = g2(); + +console.log(iterator.next()); // { value: 1, done: false } +console.log(iterator.next()); // { value: 2, done: false } +console.log(iterator.next()); // { value: 3, done: false } +console.log(iterator.next()); // { value: 4, done: false } +console.log(iterator.next()); // { value: 5, done: false } +console.log(iterator.next()); // { value: undefined, done: true } +</pre> + +<h3 id="Les_autres_objets_itérables">Les autres objets itérables</h3> + +<p><code>yield*</code> peut également être utilisé avec d'autres sortes d'itérables (chaînes, tableaux ou arguments) :</p> + +<pre class="brush: js">function* g3() { + yield* [1, 2]; + yield* "34"; + yield* Array.from(arguments); +} + +var iterator = g3(5, 6); + +console.log(iterator.next()); // { value: 1, done: false } +console.log(iterator.next()); // { value: 2, done: false } +console.log(iterator.next()); // { value: "3", done: false } +console.log(iterator.next()); // { value: "4", done: false } +console.log(iterator.next()); // { value: 5, done: false } +console.log(iterator.next()); // { value: 6, done: false } +console.log(iterator.next()); // { value: undefined, done: true }</pre> + +<h3 id="La_valeur_de_l'expression_yield*">La valeur de l'expression <code>yield*</code></h3> + +<p><code>yield*</code> est une expression et non une instruction, elle est donc évaluée et fournit une valeur :</p> + +<pre class="brush: js">function* g4() { + yield* [1, 2, 3]; + return "toto"; +} + +var résultat; + +function* g5() { + résultat = yield* g4(); +} + +var iterator = g5(); + +console.log(iterator.next()); // { value: 1, done: false } +console.log(iterator.next()); // { value: 2, done: false } +console.log(iterator.next()); // { value: 3, done: false } +console.log(iterator.next()); // { value: undefined, done: true }, + // g4() renvoie{ value: "toto", done: true } at this point + +console.log(résultat); // "toto"</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ES2015', '#sec-generator-function-definitions-runtime-semantics-evaluation', 'Yield')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Définition initiale</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-generator-function-definitions-runtime-semantics-evaluation', 'Yield')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.operators.yield_star")}}</p> + +<h2 id="Notes_relatives_à_Firefox">Notes relatives à Firefox</h2> + +<ul> + <li>À partir de Gecko 33 {{geckoRelease(33)}}, l'analyse de l'expression <code>yield</code> a été mise à jour pour être conforme aux spécifications ES2015 ({{bug(981599)}}) : + + <ul> + <li>La restriction concernant les terminateurs de lignes est désormais implémentée. Il n'est pas autorisé d'avoir un terminateur de ligne entre "yield" et "*". Le code suivant lèvera une exception {{jsxref("SyntaxError")}}: + <pre class="brush: js">function* toto() { + yield + *[]; +}</pre> + </li> + </ul> + </li> +</ul> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/JavaScript/Guide/Le_protocole_iterator">Le protocole itérateur</a></li> + <li>L'instruction {{jsxref("Instruction/function*", "function*")}}</li> + <li>L'expression {{jsxref("Opérateurs/function*", "function*")}}</li> + <li>{{jsxref("Opérateurs/yield", "yield")}}</li> +</ul> |