Heim > Web-Frontend > js-Tutorial > Hauptteil

Welche Destrukturierungsmethoden gibt es in es6?

php中世界最好的语言
Freigeben: 2018-04-18 15:14:20
Original
1525 Leute haben es durchsucht

Dieses Mal werde ich Ihnen die Methoden der ES6-Dekonstruktion und die Vorsichtsmaßnahmen für die ES6-Dekonstruktion vorstellen. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Seien Sie sehr vorsichtig, wenn Sie eine deklarierte Variable für die Destrukturierung von Zuweisungen verwenden möchten.

// 错误的写法
let x;
{x} = {x: 1};
// SyntaxError: syntax error
Nach dem Login kopieren

Der obige Code meldet einen Fehler, da die JavaScript-Engine {x} als Codeblock versteht, was zu einem Syntaxfehler führt. Dieses Problem kann nur dadurch gelöst werden, dass die geschweifte Klammer nicht am Anfang der Zeile steht, um zu verhindern, dass JavaScript sie als Codeblock interpretiert.

// 正确的写法
let x;
({x} = {x: 1});
Nach dem Login kopieren

Wenn der Variablenname nicht mit dem Attributnamen übereinstimmt, muss er wie folgt geschrieben werden.

var { foo: baz } = { foo: 'aaa', bar: 'bbb' };
baz // "aaa"
let obj = { first: 'hello', last: 'world' };
let { first: f, last: l } = obj;
f // 'hello'
l // 'world'
//这实际上说明,对象的解构赋值是下面形式的简写
let { foo: foo, bar: bar } = { foo: "aaa", bar: "bbb" };
Nach dem Login kopieren

Mit anderen Worten: Der interne Mechanismus der Objektdestrukturierung und -zuweisung besteht darin, zunächst das gleichnamige Attribut zu finden und es dann der entsprechenden Variablen zuzuweisen. Was wirklich zugewiesen wird, ist Letzteres, nicht Ersteres.

let { foo: baz } = { foo: "aaa", bar: "bbb" };
baz // "aaa"
foo // error: foo is not defined
Nach dem Login kopieren
let obj = {
 p: [
 'Hello',
 { y: 'World' }
 ]
};
let { p: [x, { y }] } = obj;
x // "Hello"
y // "World"
Nach dem Login kopieren

Hinweis: p ist derzeit ein Muster und keine Variable, daher wird ihm kein Wert zugewiesen. Wenn p auch als Variable zugewiesen werden muss, kann es wie folgt geschrieben werden.

let obj = {
 p: [
 'Hello',
 { y: 'World' }
 ]
};
let { p, p: [x, { y }] } = obj;
x // "Hello"
y // "World"
p // ["Hello", {y: "World"}]
Nach dem Login kopieren

Wenn bei der Destrukturierung der Zuweisung die rechte Seite des Gleichheitszeichens ein numerischer Wert oder ein boolescher Wert ist, wird dieser zuerst in ein Objekt umgewandelt

let {toString: s} = 123;
s === Number.prototype.toString // true
let {toString: s} = true;
s === Boolean.prototype.toString // true
Nach dem Login kopieren

Funktionsparameter können auch durch Destrukturierung zugewiesen werden.

function add([x, y]){
 return x + y;
}
add([1, 2]); // 3
Nach dem Login kopieren

Im obigen Code ist der Parameter der Funktion add ein Array auf der Oberfläche, aber in dem Moment, in dem der Parameter übergeben wird, wird der Array-Parameter in die Variablen x und y zerlegt. Für den Code innerhalb der Funktion sind die Parameter x und y

, die sie fühlen können undefiniert löst den Standardwert des Funktionsparameters aus.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

HTML-Tags mit DOM-Knoten kombinieren

js verbietet Browser-Back-Events

Das obige ist der detaillierte Inhalt vonWelche Destrukturierungsmethoden gibt es in es6?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser 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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!