Zu den neuen ES6-Operatoren gehören: 1. Optionaler Kettenoperator „?“, der bestimmen kann, ob die Eigenschaften vor dem Operator gültig sind, wodurch die Eigenschaften des Objekts in einer Kette gelesen oder undefiniert zurückgegeben werden. 2. Exponentialoperator „**; ", Infix-Operator für Exponentialoperationen, Syntax "x ** y"; 3. Nullwert-Zusammenführungsoperator "??"; 4. Logische Zuweisungsoperatoren "&&=", "||=", " ??=", hauptsächlich nach der Durchführung logischer Operationen an sich selbst und der anschließenden Zuweisung von Folgewerten; 5. Erweiterungsoperator „…“.
Die Betriebsumgebung dieses Tutorials: Windows 7-System, ECMAScript Version 6, Dell G3-Computer.
Frage
Interviewer: Können Sie uns etwas über die neuen Operatoren in es6 erzählen?
Interviewer: Äh. . .
Interviewer: Gefällt Ihnen der optionale Verkettungsoperator?
Interviewer: Äh. . .
Interviewer: Okay, das war's für das heutige Interview.
Interviewer: Ähm. . .
Die obigen Szenen sind rein fiktiv und es kann Ähnlichkeiten geben, hahaha?.
Heute lernen wir einige neue Operatoren in es6 kennen und konsolidieren sie.
Operator
Optionaler Kettenoperator
Wenn diese Eigenschaft ein Objekt ist, verfügt sie auch über Untereigenschaften, z. B.
var obj = {a: {key: 'val'}}
console.log(obj.a.key) // val
Nach dem Login kopieren
Wenn die Eigenschaft nicht vorhanden ist vorhanden, möglicherweise wird ein Fehler gemeldet.
var obj = {key: 'val'}
console.log(obj.a.key) // error: Cannot read properties of undefined (reading 'key')
Nach dem Login kopieren
Wenn Sie mit dieser Situation kompatibel sein möchten, müssen Sie den Standardwert hinzufügen, um kompatibel zu sein
var obj = {key: 'val'}
console.log((obj.a || {}).key) // undefined
Nach dem Login kopieren
Wenn die Ebene zu tief ist, ist sie schwer zu lesen.
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
Nach dem Login kopieren
如果和&&或者||混用的时候,需要加上()显示表明优先级,不然会报错。
var a = undefined ?? 'default' && 'a' // error
Nach dem Login kopieren
逻辑赋值运算符
有三种逻辑赋值运算符:
逻辑并赋值运算符(&&=)
逻辑或赋值运算符(||=)
空值合并赋值运算符(??=)
主要是对本身进行逻辑操作后,然后对它赋值后面的值。
通过例子来看一下:
var a,b,c
a &&= 1 // undefined
//等同于
a && (a = 1)
b ||= 1 // 1
//等同于
b || (b = 1)
c ??= 1 // 1
//等同于
c ?? (c = 1)
Der Effekt ist der gleiche. Erhöht es die Lesbarkeit und spart Code?
Wenn festgestellt wird, dass kein solches Attribut vorhanden ist, werden nachfolgende Punktoperationen nicht ausgeführt.
🎜Es kann auch geschrieben werden, wenn die Funktion ausgeführt wird. Kompatibel mit Fällen, in denen die Funktion möglicherweise keine Funktion ist. 🎜In diesem Fall muss zuerst der Funktionsname definiert werden oder einen Wert haben, sonst wird trotzdem ein Fehler gemeldet. 🎜🎜
🎜Optionale Verkettung kann nicht für das Schlüsselwort super, Vorlagenzeichenfolgen, Instanziierungskonstruktoren, die linke Seite von Zuweisungsoperatoren usw. verwendet werden. 🎜
🎜Jetzt kann es mit dem Exponentenoperator berechnet werden, mit **< / Code> bedeutet, dass 🎜<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">Nach dem Login kopieren</div></div><div class="contentsignin">Nach dem Login kopieren</div></div>🎜 auch in Verbindung mit 🎜<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">Nach dem Login kopieren</div></div><div class="contentsignin">Nach dem Login kopieren</div></div>🎜 geschrieben werden kann. Vielleicht fragen Sie sich, warum es so groß ist, weil es von rechts aus berechnet wird. Entspricht <code>2**(3 ** 3). 🎜
🎜Nullwert-Zusammenführungsoperator (auch Nullurteilsoperator genannt)🎜🎜🎜Dieser Operator wird durch ?? dargestellt. Der Standardwert wird nur ausgeführt, wenn der Wert auf der linken Seite undefiniert oder null ist. 🎜🎜Sehen wir uns anhand von Beispielen einen Blick darauf: 🎜
🎜Logische Zuweisungsoperatoren🎜🎜🎜Es gibt drei logische Zuweisungsoperatoren: 🎜
Logischer Vereinigungszuweisungsoperator (&&=)
< li> Logischer ODER-Zuweisungsoperator (||=)
Nullwert-Zusammenführungszuweisungsoperator (??=)
🎜 Führt hauptsächlich logische Operationen an sich selbst durch und weist dann den folgenden Wert zu. 🎜🎜Sehen wir uns das anhand eines Beispiels an: 🎜
const title = "china";
const short = [...title];
short.length = 2;
console.log(short.join("")); // ch
Nach dem Login kopieren
Nach dem Login kopieren
-Erweiterungsoperator … 🎜🎜Erweiterungsoperator … wird in ES6 eingeführt, der das iterierbare Objekt in seine einzelnen Elemente erweitert. Das sogenannte iterierbare Objekt ist jedes Objekt, das sein kann verwendet Die von der for-of-Schleife durchlaufenen Objekte, wie Arrays, Strings, Maps, Sets, DOM-Knoten usw. 🎜🎜🎜1. Array-Objekte kopieren🎜🎜🎜Die Verwendung des Expanders zum Kopieren eines Arrays ist eine häufig verwendete Operation in ES6: 🎜
🎜Der Erweiterungsoperator kopiert das Array, nur die 🎜erste Ebene ist eine tiefe Kopie🎜, d. h. Verwenden Sie die Erweiterungsoperation für eindimensionale Arrays. Symbolkopie ist eine tiefe Kopie. Schauen Sie sich den folgenden Code an: 🎜
🎜copyArray< /code>🎜🎜<code >[ 2021, [ 0, 2, 3, 4, 5, 6, 7, 8 ], 2 ]🎜🎜1 Ordnen Sie das erste Element dem zweiten Element des Arrays neu zu zu 0; 2. Fügen Sie ein Element 8 zum zweiten Element des Arrays hinzu. 3. Weisen Sie das dritte Element des Arrays zu 2 zu. [ 0, 2 , 3, 4, 5, 6, 7, 8 ], 1 ]🎜🎜Aus den Ergebnissen geht hervor, dass das zweite Element des Arrays ein Array ist, das größer als eine Dimension ist Die darin enthaltenen Elemente bewirken, dass sich der Wert der ursprünglichen Variablen entsprechend ändert🎜🎜🎜🎜
Das obige ist der detaillierte Inhalt vonWas sind die neuen Operatoren in es6?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn