Heim Web-Frontend js-Tutorial Detaillierte Erläuterung der Beispiele für destrukturierende Aufgaben für das ES6-Lernen

Detaillierte Erläuterung der Beispiele für destrukturierende Aufgaben für das ES6-Lernen

Jun 26, 2017 pm 02:51 PM
学习 Serie 赋值

1. Die Definition der destrukturierenden Zuweisung

Ein einfaches Verständnis ist, dass die linke und rechte Seite des Zuweisungszeichens die gleiche Struktur haben, um eine Eins-zu- eine Zuweisungsanweisungen

2. Klassifizierung der Destrukturierungszuweisung

Array-Destrukturierungszuweisung Objekt-Destrukturierungszuweisung String-Destrukturierungszuweisung Boolescher Wert-Destrukturierungszuweisung Funktionsparameter-Destrukturierungszuweisung Numerische Destrukturierungsaufgabe ( Konzentrieren Sie sich nur auf das Verständnis der ersten beiden )

3. Erklären Sie jede Kategorie einzeln

1. Zuweisung zur Array-Destrukturierung (der Code wird unten angezeigt und zum besseren Verständnis werden die erforderlichen Kommentare hinzugefügt)

1

2

3

4

{

  let a,b,rest;

  [a,b]=[1,2];

  console.log(a,b);//输出1,2 直接将1和2解构到a和b}

Nach dem Login kopieren

 Sie können auch Standardwerte für Variablen festlegen . Im folgenden Code ist beispielsweise c Der Standardwert ist 3. Wenn bei der Destrukturierung beispielsweise [a,b,c]=[1,2] c nicht dekonstruiert wird, ist c undefiniert

1

2

3

4

{

  let a,b,c,rest;

  [a,b,c=3]=[1,2];

  console.log(a,b);}

Nach dem Login kopieren

 Szenario 1 verwenden

 ①, variabler Austausch 

1

2

3

4

5

6

{

  let a=1;

  let b=2;

  [a,b]=[b,a];

  console.log(a,b);

}

Nach dem Login kopieren

 ②, direkte Extraktion des Funktionsrückgabewerts (Ohne die Zuweisung zu zerstören, müssen Sie zuerst das Ergebnis und dann über den Index abrufen)

1

2

3

4

5

6

{  function f(){return [1,2]

  }

  let a,b;

  [a,b]=f();

  console.log(a,b);

}

Nach dem Login kopieren

 ③ Rufen Sie nur einige erforderliche Werte des zurückgegebenen Ergebnisses ab

1

2

3

4

5

6

{  function f(){return [1,2,3,4,5]

  }

  let a,b,c;

  [a,,,b]=f();

  console.log(a,b); // 输出1 4

}

Nach dem Login kopieren

 ④ Die Inhaltslänge des Arrays ist egal

1

2

3

4

5

6

{  function f(){return [1,2,3,4,5]

  }

  let a,b,c;

  [a,...b]=f();

  console.log(a,b);//输出1,[2,3,4,5]

}

Nach dem Login kopieren

 2. Objektdestrukturierung und -zuweisung

1

2

3

4

5

{

  let o={p:42,q:true};

  let {p,q}=o;

  console.log(p,q);

}

Nach dem Login kopieren

 Objektdestrukturierungszuweisung legt den Standardwert fest

1

2

3

4

{

  let {a=10,b=5}={a:3};

  console.log(a,b);//输出3 5

}

Nach dem Login kopieren

 Destrukturierende Zuordnung leicht komplexer Objekte 

1

2

3

4

5

6

7

8

9

10

{

  let metaData={

    title:'abc',

    test:[{

      title:'test',

      desc:'description'}]

  }

  let {title:esTitle,test:[{title:cnTitle}]}=metaData;

  console.log(esTitle,cnTitle);//abc test (相当于esTitle和cnTitle分别对应metaData里面的abc和test)

}

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Beispiele für destrukturierende Aufgaben für das ES6-Lernen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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

Heiße Artikel -Tags

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

So aktivieren Sie Kopieren und Einfügen für virtuelle VMware-Maschinen So aktivieren Sie Kopieren und Einfügen für virtuelle VMware-Maschinen Feb 21, 2024 am 10:09 AM

So aktivieren Sie Kopieren und Einfügen für virtuelle VMware-Maschinen

So kopieren Sie eine Seite in Word So kopieren Sie eine Seite in Word Feb 20, 2024 am 10:09 AM

So kopieren Sie eine Seite in Word

Erfahren Sie, wie Sie pip vollständig deinstallieren und Python effizienter nutzen Erfahren Sie, wie Sie pip vollständig deinstallieren und Python effizienter nutzen Jan 16, 2024 am 09:01 AM

Erfahren Sie, wie Sie pip vollständig deinstallieren und Python effizienter nutzen

Ein tiefer Einblick in die Farbkarte von Matplotlib Ein tiefer Einblick in die Farbkarte von Matplotlib Jan 09, 2024 pm 03:51 PM

Ein tiefer Einblick in die Farbkarte von Matplotlib

Die Attraktivität der C-Sprache enthüllen: Das Potenzial von Programmierern aufdecken Die Attraktivität der C-Sprache enthüllen: Das Potenzial von Programmierern aufdecken Feb 24, 2024 pm 11:21 PM

Die Attraktivität der C-Sprache enthüllen: Das Potenzial von Programmierern aufdecken

Vollständige Codenamen der Xiaomi 15-Serie enthüllt: Dada, Haotian, Xuanyuan Vollständige Codenamen der Xiaomi 15-Serie enthüllt: Dada, Haotian, Xuanyuan Aug 22, 2024 pm 06:47 PM

Vollständige Codenamen der Xiaomi 15-Serie enthüllt: Dada, Haotian, Xuanyuan

Erste Schritte mit Pygame: Umfassendes Installations- und Konfigurations-Tutorial Erste Schritte mit Pygame: Umfassendes Installations- und Konfigurations-Tutorial Feb 19, 2024 pm 10:10 PM

Erste Schritte mit Pygame: Umfassendes Installations- und Konfigurations-Tutorial

Lassen Sie uns gemeinsam lernen, wie Sie die Stammzahl in Word eingeben Lassen Sie uns gemeinsam lernen, wie Sie die Stammzahl in Word eingeben Mar 19, 2024 pm 08:52 PM

Lassen Sie uns gemeinsam lernen, wie Sie die Stammzahl in Word eingeben

See all articles