Aujourd'hui, dans la septième partie de la traduction du manuel JavaScript, nous parlerons de l'exécution de code en mode strict, des fonctionnalités du mot-clé this, des événements, des modules et des calculs mathématiques. Ici, nous aborderons les sujets de l'utilisation des minuteries et de la programmation asynchrone.
→
Partie 1: premier programme, fonctionnalités linguistiques, normes→
Partie 2: style de code et structure du programme→
Partie 3: variables, types de données, expressions, objets→
Partie 4: caractéristiques→
Partie 5: tableaux et boucles→
Partie 6: exceptions, points-virgules, littéraux génériques→
Partie 7: mode strict, ce mot-clé, événements, modules, calculs mathématiques→
Partie 8: Présentation des fonctionnalités d'ES6→
Partie 9: Présentation des normes ES7, ES8 et ES9
Mode strict
Le mode strict est apparu dans la norme ES5. Dans ce mode, la sémantique du changement de langage, il vise à améliorer le comportement de JavaScript, ce qui conduit au fait que le code dans ce mode se comporte différemment de la normale. En fait, nous parlons du fait que dans ce mode, les lacunes, les ambiguïtés du langage, les fonctionnalités obsolètes qui y sont stockées pour des raisons de compatibilité sont éliminées.
â–ŤActivation du mode strict
Pour utiliser le mode strict dans certains codes, il doit être explicitement activé. Autrement dit, nous ne parlons pas du fait que ce mode est utilisé par défaut. Une telle approche perturberait le travail d'innombrables programmes existants basés sur les mécanismes linguistiques qui y sont présents depuis le tout début, depuis 1996. En fait, les efforts importants de ceux qui développent des normes JavaScript visent spécifiquement à assurer la compatibilité, afin que le code écrit basé sur les anciennes versions des normes puisse être exécuté sur les moteurs JS d'aujourd'hui. Cette approche peut être considérée comme l'une des clés du succès de JavaScript en tant que langage de développement Web.
Afin d'activer le mode strict, une directive spéciale est utilisée qui ressemble à ceci.
'use strict'
La directive Ă©crite sous la forme
"use strict" et la même directive après laquelle un point-virgule (
'use strict'; et
"use strict"; ) conduit au même effet. Cette directive (comme ça, avec des guillemets), afin que tout le code d'un certain fichier soit exécuté en mode strict, est placée au début de ce fichier.
'use strict' const name = 'Flavio' const hello = () => 'hey'
Le mode strict peut être activé au niveau d'une fonction distincte. Pour ce faire, la directive correspondante doit être placée au début du code du corps de la fonction.
function hello() { 'use strict' return 'hey' }
Cela peut s'avérer utile si le mode strict doit être utilisé dans la base de code existante et en même temps, l'activer au niveau du fichier n'est pas pratique en raison du manque de temps pour un test approfondi du code pour l'ensemble de ce fichier.
Il convient de noter que si le mode strict est activé, vous ne pouvez pas le désactiver pendant l'exécution du programme.
Considérez certaines fonctionnalités du mode strict.
▍ Lutte contre l'initialisation aléatoire des variables globales
Nous avons déjà dit que si vous affectez accidentellement une certaine valeur à une variable non déclarée, même si vous le faites dans le code de fonction, une telle variable sera rendue globale par défaut (appartenant à l'objet global). Cela peut entraîner des surprises.
Par exemple, le code suivant crée exactement une telle variable.
;(function() { variable = 'hey' })()
La
variable sera disponible dans le périmètre global après l'exécution de IIFE.
Si le mode strict est activé au niveau de cette fonction, le même code provoquera une erreur.
;(function() { 'use strict' variable = 'hey' })()
▍ Erreurs survenant lors des opérations d'affectation
JavaScript, en mode normal, ne signale aucune erreur qui se produit lors des opérations d'affectation.
Par exemple, dans JS, il existe une valeur
non définie , qui est l'une des valeurs primitives du langage et est représentée par la propriété d'un objet global
undefined . Dans JS normal, une telle commande est tout Ă fait possible.
undefined = 1
Cela ressemble à l'écriture d'une unité dans une certaine variable avec le nom
undefined , mais en fait c'est une tentative d'écrire une nouvelle valeur dans une propriété d'un objet global, qui, en passant, conformément à la norme, ne peut pas être écrasée. En mode normal, bien qu'une telle commande soit possible, elle ne mènera à rien - c'est-à -dire que la valeur
undefined ne sera pas modifiée et aucun message d'erreur n'apparaîtra. En mode strict, cela provoquera une erreur. Afin de voir ce message d'erreur, et en même temps assurez-vous que la valeur
undefined n'est pas remplacée en mode normal, essayez d'exécuter le code suivant dans un navigateur ou dans Node.js.
undefined = 1 console.log('This is '+undefined) ;(() => { 'use strict' undefined = 1 })()
Le même comportement du système est également caractéristique lorsque vous travaillez avec des entités telles que les
NaN Infinity et
NaN , ainsi qu'avec d'autres entités similaires. Le mode strict vous permet d'éviter tout cela.
En JavaScript, vous pouvez définir les propriétés des objets à l'aide de la méthode
Object.defineProperty () . En particulier, en utilisant cette méthode, vous pouvez définir des propriétés qui ne peuvent pas être modifiées.
const car = {} Object.defineProperty(car, 'color', { value: 'blue', writable: false }) console.log(car.color) car.color = 'yellow' console.log(car.color)
Notez l'attribut
writable: false utilisé lors de la définition de la propriété
color .
Le code ci-dessus, exécuté en mode normal, ne conduira ni à une modification de la propriété de l'objet
color , ni à la sortie d'une erreur. Une tentative de modification de cette propriété en mode strict entraînera une erreur.
;(() => { 'use strict' car.color = 'red' })()
Il en va de même pour les getters. Ce code s'exécutera, mais en vain.
const car = { get color() { return 'blue' } } console.log(car.color) car.color = 'red' console.log(car.color)
Et une tentative de faire la même chose en mode strict provoquera une erreur signalant une tentative de définir la propriété d'un objet qui n'a qu'un getter.
;(() => { 'use strict' car.color = 'yellow' } )()
JavaScript a une méthode
Object.preventExtensions () qui rend un objet non extensible, c'est-à -dire auquel aucune nouvelle propriété ne peut être ajoutée. Lorsque vous travaillez avec de tels objets dans le mode habituel, les mêmes caractéristiques du langage que nous avons examinées ci-dessus se manifestent.
const car = { color: 'blue' } Object.preventExtensions(car) console.log(car.model) car.model = 'Fiesta' console.log(car.model)
Ici, les deux tentatives pour dériver une propriété de l'objet
model entraîneront l'apparition d'une valeur
undefined dans la console. Il n'y avait pas une telle propriété dans l'objet; une tentative de le créer après que l'objet a été rendu non extensible n'a mené à rien. La même action en mode strict entraîne un message d'erreur.
;(() => { 'use strict' car.owner = 'Flavio' } )()
Dans la même catégorie d'actions qui n'entraînent pas de modifications, attendues éventuellement par le programmeur, mais ne provoquent pas non plus d'erreurs, les opérations tombent au cours desquelles des tentatives sont faites pour affecter certaines propriétés à des valeurs primitives. Par exemple, un tel code, en mode normal, ne provoquera pas d'erreur, mais ne produira aucun résultat.
let one = 1 one.prop = 2 console.log(one.prop)
La même chose en mode strict entraînera un message d'erreur indiquant que la propriété
prop ne peut pas être créée sur le numéro
1 . De la même manière, le système se comporte lorsqu'il travaille avec d'autres types de données primitifs.
▍ Erreurs de suppression d'entité
En mode normal, si vous essayez de supprimer, à l'aide de l'opérateur de
suppression , une propriété d'objet qui ne peut pas être supprimée, la
delete renverra simplement
false et tout Ă©chouera silencieusement.
delete Object.prototype
En mode strict, une erreur sera générée ici.
â–Ť Arguments de fonction portant le mĂŞme nom
Les fonctions peuvent avoir des paramètres avec le même nom, cela ne provoque pas d'erreurs (bien que cela ressemble à une erreur de celui qui a créé une telle fonction).
;(function(a, a, b) { console.log(a, b) })(1, 2, 3)
Ce code affiche normalement
2 3 dans la console. En mode strict, cela provoquera une erreur.
Par ailleurs, si lors de la déclaration de la fonction flèche, ses paramètres auront le même nom, cela, en mode normal, conduira à la sortie d'un message d'erreur.
â–Ť Valeurs octales
En JavaScript normal, vous pouvez utiliser des valeurs octales en ajoutant
0 au début.
;(() => { console.log(010) })()
Ici, la représentation décimale du nombre octal
10 , c'est-Ă -dire
8 entrera dans la console. Ce
0 avant le nombre peut être mis au hasard. En mode strict, vous ne pouvez pas travailler avec des nombres octaux spécifiés dans ce format. Mais si vous devez utiliser le mode strict et travailler avec des nombres octaux, vous pouvez les écrire au format
0oXX . Le code suivant affichera Ă©galement
8 .
;(() => { 'use strict' console.log(0o10) })()
▍Opérateur avec
L'instruction
with , qui peut prêter à confusion, n'est pas autorisée en mode strict.
Changer le comportement du code en mode strict n'est pas limité à ceux dont nous avons discuté ci-dessus. En particulier, dans ce mode, le mot-clé this se comporte différemment, ce que nous avons déjà rencontré et dont nous parlerons plus en détail maintenant.
Caractéristiques de ce mot clé
Le
this , ou le contexte d'exécution, vous permet de décrire l'environnement dans lequel le code JS est exécuté. Sa signification dépend du lieu d'utilisation et de l'activation ou non du mode strict.
▍ Mot-clé ceci en mode strict
En mode strict, la valeur
this transmise à la fonction n'est pas convertie en objet. Cette conversion nécessite non seulement des ressources, mais donne également aux fonctions l'accès à l'objet global si elles sont appelées avec
this ensemble Ă
undefined ou
null . Ce comportement signifie que la fonction peut obtenir un accès non autorisé à l'objet global. En mode strict, la conversion de
this passé à la fonction n'est pas effectuée. Afin de voir la différence entre le comportement de
this dans les fonctions dans différents modes, essayez ce code en utilisant la directive
'use strict' et sans elle.
;(function() { console.log(this) })()
▍Le ce mot-clé dans les méthodes objet
Une méthode est une fonction référencée dans une propriété d'objet. Le
this dans une telle fonction fait référence à cet objet. Cette déclaration peut être illustrée par l'exemple suivant.
const car = { maker: 'Ford', model: 'Fiesta', drive() { console.log(`Driving a ${this.maker} ${this.model} car!`) } } car.drive()
Dans ce cas, nous utilisons la fonction habituelle (et non la flèche - c'est important), le mot-clé this utilisé dans lequel est automatiquement lié à l'objet contenant cette fonction.
Notez que la méthode ci-dessus de déclaration d'une méthode objet est similaire à ceci:
const car = { maker: 'Ford', model: 'Fiesta', drive: function() { console.log(`Driving a ${this.maker} ${this.model} car!`) } }
Le mĂŞme comportement du
this dans une méthode objet peut également être observé en utilisant la construction suivante.
const car = { maker: 'Ford', model: 'Fiesta' } car.drive = function() { console.log(`Driving a ${this.maker} ${this.model} car!`) } car.drive()
▍ Mot-clé et fonctions fléchées
Essayons de réécrire l'exemple ci-dessus en utilisant, comme méthode d'objet, une fonction de flèche.
const car = { maker: 'Ford', model: 'Fiesta', drive: () => { console.log(`Driving a ${this.maker} ${this.model} car!`) } } car.drive()
Apparemment, ici, au lieu des noms du constructeur automobile et de son modèle, des valeurs
undefined sont affichées. Le fait est que, comme nous l'avons déjà dit,
this dans la fonction flèche contient un lien vers le contexte qui inclut la fonction.
Cette flèche ne peut pas être liée à une fonction de flèche, mais vous pouvez
â–ŤLier ceci
JavaScript a un concept comme
this liaison. Vous pouvez le faire de plusieurs manières. Par exemple, lors de la déclaration d'une fonction, vous pouvez lier son mot-clé this à un objet à l'aide de la méthode
bind() .
const car = { maker: 'Ford', model: 'Fiesta' } const drive = function() { console.log(`Driving a ${this.maker} ${this.model} car!`) }.bind(car) drive()
En utilisant la même méthode, vous pouvez lier un autre objet à la méthode d'un objet, comme
this .
const car = { maker: 'Ford', model: 'Fiesta', drive() { console.log(`Driving a ${this.maker} ${this.model} car!`) } } const anotherCar = { maker: 'Audi', model: 'A4' } car.drive.bind(anotherCar)()
Cette liaison peut également être organisée au stade de l'appel de la fonction à l'aide des méthodes
call() et
apply() .
const car = { maker: 'Ford', model: 'Fiesta' } const drive = function(kmh) { console.log(`Driving a ${this.maker} ${this.model} car at ${kmh} km/h!`) } drive.call(car, 100)
this lié à ce qui est passé à ces méthodes comme premier argument. La différence entre ces méthodes est que
apply() , comme deuxième argument, prend un tableau avec les arguments passés à la fonction, et
call() prend une liste d'arguments.
À propos de cette liaison dans les gestionnaires d'événements du navigateur
Dans les rappels d'événement,
this pointe vers l'élément HTML avec lequel l'événement s'est produit. Afin de se lier à un rappel, comme
this , autre chose, vous pouvez utiliser la méthode
bind() . Voici un exemple pour illustrer cela.
<!DOCTYPE html> <html> <body> <button id="el">Element (this)</button> <button id="win">Window (this</button> <script> const el = document.getElementById("el") el.addEventListener('click', function () { alert(this) </script> </body> </html>
Les événements
JavaScript dans le navigateur utilise un modèle de programmation piloté par les événements. Ces actions ou d'autres sont exécutées par le code en réponse à des événements. Dans cette section, nous parlerons des événements et comment les gérer.
Un événement peut être, par exemple, la fin du chargement du DOM, la réception de données à la suite d'une demande asynchrone, le clic sur un élément de page, le défilement d'une page, la saisie d'un certain caractère à partir du clavier. En fait, il existe de nombreux événements qui, une fois traités, le code JS de la page vous permettent de résoudre un large éventail de problèmes dans l'interaction de l'application avec les utilisateurs, avec les éléments de la page, avec l'environnement dans lequel le code fonctionne.
â–ŤEvent handlers
Vous pouvez répondre aux événements à l'aide de gestionnaires d'événements, qui sont des fonctions appelées lorsque les événements se produisent.
Si nécessaire, pour traiter le même événement, vous pouvez enregistrer plusieurs gestionnaires qui seront appelés si cet événement se produit. Les gestionnaires d'événements peuvent être enregistrés de différentes manières. Considérez trois de ces méthodes.
▍ Gestionnaires d'événements intégrés
De nos jours, les gestionnaires d'événements intégrés sont rarement utilisés en raison de leurs limites. Auparavant, ils étaient utilisés beaucoup plus souvent. Pour définir un tel gestionnaire d'événements, son code est ajouté au balisage HTML de l'élément en tant qu'attribut spécial. Dans l'exemple suivant, un tel gestionnaire simple pour l'événement
onclick qui se produit lorsqu'un bouton est cliqué est affecté à un bouton intitulé
Button 1 .
<!DOCTYPE html> <html> <body> <button onclick="alert('Button 1!')">Button 1</button> <button onclick="doSomething()">Button 2</button> <script> function doSomething(){ const str = 'Button 2!' console.log(str) alert(str) } </script> </body> </html>
Le code HTML du
Button 2 utilise une approche similaire, mais il indique une fonction dont le code est exécuté en réponse à un clic de bouton. Ce code génère la chaîne donnée dans la console et affiche une fenêtre avec le même texte.
▍ Affectation d'un gestionnaire à une propriété d'élément HTML
Cette méthode d'affectation de gestionnaires d'événements convient aux cas où un certain événement d'un élément ne doit avoir qu'un seul gestionnaire. Elle consiste à affecter la fonction à la propriété correspondante de l'élément.
Par exemple, l'objet
window a un
onload , qui est appelé après le chargement du code HTML de la page et de toutes les ressources supplémentaires dont il a besoin, par exemple, les styles et les images. Si vous affectez un gestionnaire à cet événement, lorsque vous l'appelez, vous pouvez être sûr que le navigateur a chargé tout le contenu de la page, avec lequel vous pouvez désormais travailler par programmation, sans craindre que certains éléments de la page n'aient pas encore été chargés.
window.onload = () => { alert('Hi!')
Cette approche est souvent utilisée lors du traitement des demandes XHR. Ainsi, au cours de la configuration d'une demande, vous pouvez spécifier un gestionnaire pour son événement
onreadystatechange , qui sera appelé lorsque sa propriété
readyState change d'état. Voici un exemple d'utilisation de cette approche pour charger des données JSON à partir d'une API publique.
<!DOCTYPE html> <html> <body> <button onclick="loadData()">Start</button> <script> function loadData (){ const xhr = new XMLHttpRequest() const method = 'GET' const url = 'https://jsonplaceholder.typicode.com/todos/1' xhr.open(method, url, true) xhr.onreadystatechange = function () { if(xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) { console.log(xhr.responseText) } } xhr.send() } </script> </body> </html>
Pour vérifier si un gestionnaire est affecté à un certain événement, vous pouvez le faire.
if (window.onload){}
▍Utilisation de la méthode addEventListener ()
La méthode
addEventListener() , que nous avons déjà vue, est un mécanisme moderne pour attribuer des gestionnaires d'événements. Il vous permet d'enregistrer plusieurs gestionnaires pour un seul événement.
window.addEventListener('load', () => {
Notez que le navigateur IE8 (et ses anciennes versions) ne prend pas en charge la méthode
addEventListener() . Il utilise une méthode
attachEvent() similaire. Cela doit être pris en compte si votre programme doit prendre en charge les navigateurs obsolètes.
▍A propos de l'attribution de gestionnaires d'événements à divers éléments
Vous pouvez connecter des gestionnaires d'événements à l'objet
window pour gérer des événements «globaux», comme appuyer sur des boutons du clavier. Dans le même temps, les gestionnaires d'événements sont affectés à des éléments HTML individuels, qui répondent à ce qui arrive à ces éléments, par exemple en cliquant dessus avec la souris. Par conséquent, la méthode
addEventListener() est utilisée à la fois avec l'objet
window et avec les éléments ordinaires.
▍ Objet d'événement
En tant que premier paramètre, le gestionnaire d'événements peut prendre un objet
Event -
Event . L'ensemble des propriétés de cet objet dépend de l'événement qu'il décrit. Voici, par exemple, du code qui illustre la gestion des événements de frappe de clavier à l'aide de l'événement
keydown d'un objet
keydown .
<!DOCTYPE html> <html> <body> <script> window.addEventListener('keydown', event => { </script> </body> </html>
Comme vous pouvez le voir, ici, pour afficher des informations sur la touche enfoncée dans la console, la propriété de l'objet
key est utilisée. La propriété
type est également utilisée ici, indiquant le type d'événement. Dans cet exemple, nous travaillons actuellement avec un objet
KeyboardEvent , qui est utilisé pour décrire les événements liés au clavier. Cet objet est le descendant de l'objet
Event . Les objets conçus pour gérer une variété d'événements étendent les capacités d'un objet événement standard.
Dans le mĂŞme exemple, l'objet
MouseEvent est utilisé pour traiter les événements de souris. Dans le
mousedown événements
mousedown , nous imprimons sur la console le type d'événement, le numéro du
button (propriété du
button ) et les coordonnées du pointeur au moment du clic (
clientY clientX et
clientY ).
L'objet
DragEvent est utilisé pour gérer les événements qui se produisent lorsque vous
faites glisser des éléments de page.
Parmi les propriétés de l'objet
Event disponibles dans d'autres objets événement, nous pouvons mentionner la propriété
type déjà mentionnée et la propriété
target , qui pointe vers l'élément DOM sur lequel l'événement s'est produit. Un objet
Event a des méthodes. Par exemple, la méthode
createEvent() vous permet de créer de nouveaux événements.
▍ Revêtement d'événement
Prenons l'exemple suivant.
<!DOCTYPE html> <html> <head> <style> #container { height: 100px; width: 200px; background-color: blue; } #child { height: 50px; width: 100px; background-color: green; } </style> </head> <body> <div id="container"> <div id="child"> </div> </div> <script> const contDiv = document.getElementById('container') contDiv.addEventListener('click', event => { console.log('container') }) const chDiv = document.getElementById('child') chDiv.addEventListener('click', event => { console.log('child') }) window.addEventListener('click', event => { console.log('window') }) </script> </body> </html>
Si vous ouvrez la page avec ce code dans le navigateur, ouvrez la console et cliquez d'abord sur la souris dans la zone libre de la page, puis dans le rectangle bleu, puis en vert, puis ce qui suit apparaîtra dans la console:
window container window child container window
Bulle d'événementCe qui peut être observé ici s'appelle le bouillonnement d'événements. À savoir, l'événement qui se produit au niveau de l'élément enfant s'étend à l'élément parent. Ce processus se poursuit jusqu'à ce que l'événement atteigne l'élément «supérieur». Si les éléments le long desquels l'événement contextuel passe ont des gestionnaires correspondants définis, ils seront appelés conformément à l'ordre de la distribution d'événements.
La
stopPropagation() événements peut être arrêtée à l'aide de la méthode
stopPropagation() de l'objet
stopPropagation() . Par exemple, s'il est nécessaire qu'après avoir cliqué sur l'élément
child , l'événement correspondant ne se propage plus, nous devons réécrire le code dans lequel nous lui attribuons le gestionnaire d'événements
click comme suit.
chDiv.addEventListener('click', event => { console.log('child') event.stopPropagation() })
, , — , —
container , —
child , .
window container window child
â–Ť
, .
load
load window . , , HTML-
body .
click .
dblclick — .
click dblclick ,
click , —
dblclick .
mousedown ,
mousemove ,
mouseup , . ,
mousemove , , , . , - , . .
keydown . , . —
keyup .
scroll
scroll window . , , ,
window.scrollY .
, ,
mousemove , .
mousemove scroll . - . . «» (throttling),
Lodash . , , , , . .
let cached = null window.addEventListener('mousemove', event => { if (!cached) { setTimeout(() => {
,
mousemove , 100 .
ES-
ES6 , ES-. , , -, , Node.js, .
, . , , . , , .
Node.js CommonJS. , ES-, , . , , ES-, , , , . ,
caniuse.com , 2018 ES- 80%.
ES-
Node.js.
â–Ť ES-
Node.js ES- .
import package from 'module-name'
CommonJS- .
const package = require('module-name')
, JavaScript-, - . Cela se fait à l'aide du mot-clé d'
export . , , , ,
uppercase.js . .
export default str => str.toUpperCase()
, . .
( , ) .
HTML- ,
<script> type="module" .
<script type="module" src="index.js"></script>
,
(defer) . , ,
uppercase.js , , , . -. , -. , VSCode, Live Server ( — ritwickdey.liveserver).
<!DOCTYPE html> <html> <head> </head> <body> <script type="module"> import toUpperCase from './uppercase.js' console.log(toUpperCase('hello')) </script> </body> </html>
HELLO .
URL.
import toUpperCase from 'https://flavio-es-modules-example.glitch.me/uppercase.js'
, ,
./ / .
â–Ť
, .
export default str => str.toUpperCase()
.
const a = 1 const b = 2 const c = 3 export { a, b, c }
module.js , , , .
<html> <head> </head> <body> <script type="module"> import * as m from './module.js' console.log(ma, mb, mc) </script> </body> </html>
1 2 3 .
, , .
import { a } from './module.js' import { a, b } from './module.js'
, , .
console.log(a)
:
import { a, b as two } from './module.js'
, , , , .
module.js .
const a = 1 const b = 2 const c = 3 export { a, b, c } export default () => console.log('hi')
.
import sayHi, { a } from './module.js' console.log(a) sayHi()
.
â–ŤCORS
CORS . , CORS, (
Access-Control-Allow-Origin: * ).
â–Ť nomodule
, , ,
script ,
nomodule . , , .
<script type="module" src="module.js"></script> <script nomodule src="fallback.js"></script>
â–Ť ES6 WebPack
ES6 — , , ECMAScript. , , , , . ,
WebPack, , , .
â–Ť CommonJS
, Node.js CommonJS. , . CommonJS npm.
CommonJS-, , . ,
up-node.js .
exports.uppercase = str => str.toUpperCase()
, .
const up = require('./up-node.js') console.log(up.uppercase('hello'))
HELLO .
, npm, , .
const package = require('module-name')
CommonJS , . .
CommonJS- .
exports.a = 1 exports.b = 2 exports.c = 3
, .
const { a, b, c } = require('./up-node.js')
, JavaScript — .
Math , . , , JS- .
â–Ť
(+)
+ . :
const three = 1 + 2
, , , .
'three' + 1
(-)
const two = 4 - 2
(/)
.
20 / 5
0, .
Infinity ( ) -
Infinity ( ).
1 / 0
(%)
% , .
20 % 5
0
NaN (Not a Number — ).
1 % 0
(*)
1 * 2
(**)
, .
1 ** 2
â–Ť
(++)
++ 1 . .
—
1 , .
let x = 0 ++x
— , .
let x = 0 x++
(--)
-- ++ ,
1 , .
let x = 0 x--
(-)
.
let x = 2 -x
(+)
, , . — .
let x = 2 +x
â–Ť
JavaScript, (
= ), , . , ,
+= .
let x = 2 x += 3 x
: « , , , , ». , .
let x = 2 x = x + 3 x
:
â–Ť
. , .
const a = 1 * 2 + 5 / 2 % 2
2.5 . , . , .
- + ++ -- — ,/ % — , ,+ - —= += -= *= /= %= **= —
, , . , .
const a = 1 * 2 + 5 / 2 % 2 const a = 2 + 2.5 % 2 const a = 2 + 0.5 const a = 2.5
. .
const a = 1 * (2 + 5) / 2 % 2
1.5 .
â–Ť Math
Math , .
. , .
, ,
Math.E — , e,
Math.PI — , π.
Math.E
.
Math.abs() —Math.ceil() — , ,Math.cos() — ,Math.floor() — , ,Math.max() —Math.min() —Math.random() — [0, 1) ( 1)Math.round() —Math.sqrt() —
â–Ť
JavaScript , .
, . , , , .
.
< — «»> — «».<= — « ».>= — « ».
, .
1 === true
, ,
1 true .
1 true ,
1 true .
, , . Node.js. , :
PDF- Node.js.
Résumé
, this, , , . , ES6.
Chers lecteurs! , JavaScript?
