Les nouveaux opérateurs ES6 incluent : 1. Opérateur de chaîne facultatif "?.", qui peut déterminer si les propriétés précédant l'opérateur sont valides, lisant ainsi les propriétés de l'objet dans une chaîne ou renvoyant un élément non défini 2. Opérateur exponentiel "** ; ", opérateur infixe utilisé pour les opérations exponentielles, syntaxe "x ** y"; 3. Opérateur de fusion de valeurs nulles "??"; 4. Opérateurs d'affectation logique "&&=", "||=", " ??=", principalement après avoir effectué des opérations logiques sur lui-même, puis lui avoir attribué des valeurs ultérieures ; 5. Opérateur d'extension "...".
L'environnement d'exploitation de ce tutoriel : système Windows 7, ECMAScript version 6, ordinateur Dell G3.
Question
Intervieweur : Pouvez-vous nous parler des nouveaux opérateurs dans es6 ?
Intervieweur : Euh. . .
Intervieweur : Vous aimez l'opérateur de chaînage optionnel ?
Intervieweur : Euh. . .
Intervieweur : D’accord, c’est tout pour l’interview d’aujourd’hui.
Intervieweur : Euh. . .
Les scènes ci-dessus sont purement fictives et il peut y avoir des similitudes, hahaha ?.
Aujourd'hui, apprenons plusieurs nouveaux opérateurs dans es6 et consolidons-les.
Operator
Opérateur de chaîne facultatif
Une propriété d'un objet si cette propriété est un objet, elle a également des sous-propriétés, telles que
var obj = {a: {key: 'val'}}
console.log(obj.a.key) // val
Copier après la connexion
Si la propriété ne le fait pas. exister, une erreur peut être signalée.
var obj = {key: 'val'}
console.log(obj.a.key) // error: Cannot read properties of undefined (reading 'key')
Copier après la connexion
Si vous voulez être compatible avec cette situation, vous devez ajouter la valeur par défaut pour être compatible
var obj = {key: 'val'}
console.log((obj.a || {}).key) // undefined
Copier après la connexion
Si le niveau est trop profond, il sera difficile à lire.
var a = '' ?? 'default'
console.log(a) // ''
var a = 0 ?? 'default'
console.log(a) // 0
var a = 123 ?? 'default'
console.log(a) // 123
var a = undefined ?? 'default'
console.log(a) // default
var a = undefined ?? 'default'
console.log(a) // default
Copier après la connexion
如果和&&或者||混用的时候,需要加上()显示表明优先级,不然会报错。
var a = undefined ?? 'default' && 'a' // error
Copier après la connexion
逻辑赋值运算符
有三种逻辑赋值运算符:
逻辑并赋值运算符(&&=)
逻辑或赋值运算符(||=)
空值合并赋值运算符(??=)
主要是对本身进行逻辑操作后,然后对它赋值后面的值。
通过例子来看一下:
var a,b,c
a &&= 1 // undefined
//等同于
a && (a = 1)
b ||= 1 // 1
//等同于
b || (b = 1)
c ??= 1 // 1
//等同于
c ?? (c = 1)
L'effet est le même. Augmente-t-il la lisibilité et enregistre-t-il le code ?
S'il s'avère qu'un tel attribut n'existe pas, les opérations de points suivantes ne seront pas effectuées.
🎜Il peut également être écrit lorsque la fonction est exécutée. Compatible avec les cas où la fonction peut ne pas être une fonction. 🎜Dans ce cas, le nom de la fonction doit d'abord être défini ou avoir une valeur, sinon une erreur sera quand même signalée. 🎜🎜
🎜Le chaînage facultatif ne peut pas être utilisé sur le super mot-clé, les chaînes de modèles, les constructeurs d'instanciation, le côté gauche des opérateurs d'affectation, etc. 🎜
🎜Maintenant, cela peut être calculé via l'opérateur exposant, utilisez **< / code> signifie que 🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">const sum = (num1, num2) => num1 + num2;
console.log(sum(...[6, 7])); // 13
console.log(sum(...[6, 7, 8])); // 13</pre><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div>🎜 peut également être écrit en conjonction avec 🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">const arrayNumbers = [1, 5, 9, 3, 5, 7, 10];
const min = Math.min(...arrayNumbers);
const max = Math.max(...arrayNumbers);
console.log(min); // 1
console.log(max); // 10</pre><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div>🎜 Vous vous demandez peut-être pourquoi il est si gros, car il est calculé à partir de la droite. Équivalent à <code>2**(3 ** 3). 🎜
🎜Opérateur de fusion de valeurs nulles (également appelé opérateur de jugement nul)🎜🎜🎜Cet opérateur est représenté par ??. La valeur par défaut ne sera exécutée que lorsque la valeur de gauche est undefined ou null. 🎜🎜Jetons un coup d'oeil avec des exemples : 🎜
🎜Opérateurs d'affectation logique🎜🎜🎜Il existe trois opérateurs d'affectation logique : 🎜
Opérateur d'affectation d'union logique (&&=)
< li> Opérateur d'affectation OU logique (||=)
Opérateur d'affectation de fusion de valeurs nulles (??=)
🎜 Effectue principalement des opérations logiques sur lui-même, puis attribue la valeur suivante. 🎜🎜Regardons cela à travers un exemple : 🎜
const title = "china";
const short = [...title];
short.length = 2;
console.log(short.join("")); // ch
Copier après la connexion
Copier après la connexion
opérateur d'expansion… 🎜🎜L'opérateur d'extension… est introduit dans ES6, qui développe l'objet itérable en ses éléments séparés. L'objet dit itérable est tout objet qui peut être. utilisé Les objets traversés par la boucle for of, tels que les tableaux, les chaînes, les cartes, les ensembles, les nœuds DOM, etc. 🎜🎜🎜1. Copier des objets de tableau🎜🎜🎜Utiliser l'extenseur pour copier un tableau est une opération couramment utilisée dans ES6 : 🎜
🎜L'opérateur d'expansion copie le tableau, seule la 🎜première couche est une copie complète🎜, c'est-à-dire que en utilisant l'opération d'expansion pour les tableaux unidimensionnels La copie de symbole est une copie complète, regardez le code suivant : 🎜
🎜copyArray< /code>🎜🎜<code >[ 2021, [ 0, 2, 3, 4, 5, 6, 7, 8 ], 2 ]🎜🎜1. à 0; 2. Ajoutez un élément 8 au deuxième élément du tableau; 3. Réaffectez le troisième élément du tableau à 2🎜🎜
🎜miniCalendar🎜🎜[ 2021, [ 0, 2 , 3, 4, 5, 6, 7, 8 ], 1 ]🎜🎜D'après les résultats, le deuxième élément du tableau est un tableau plus grand que 1 dimension. les éléments à l'intérieur feront que la variable d'origine changera la valeur en conséquence🎜🎜🎜🎜
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn