Zusammenfassung der 7 Hauptverwendungen der variablen Destrukturierungszuweisung

1: Tauschen Sie die Werte zweier Variablen aus

 let a = 12;
 let b = 32;
 [a,b] = [b,a];
 console.log(a,b)

Vor ES6 müssen wir beim Austausch der Werte zweier Variablen häufig eine Zwischenvariable deklarieren. In ES6 kann dies durch Destrukturierung der Zuweisung erreicht werden. Diese Schreibweise: prägnant, leicht zu lesen und in der Semantik klar

2: Die Funktion gibt mehrere Werte zurück

Ein Array zurückgeben:

function exampleArr() {
    
    
    return [1,2,3];
}
var [a,b,c] = exampleArr();
console.log([a,b,c]);

Objekt zurückgeben:

function exampleObj() {
    
    
    return {
    
    
        foo : 1,
        bar : 2,
        baz : 3
    }
}
var {
    
    foo ,bar ,baz} = exampleObj();
console.log(foo,bar,baz);

Im Wesentlichen kann eine Funktion nur einen Wert zurückgeben, sie kann jedoch in einem Array oder Objekt platziert werden, um mehrere Werte zurückzugeben

3: Definition der Funktionsparameter:

Bestellte Parameter:

function f([x,y,z]){
    
    
    console.log([x,y,z])
}
f([1,2,3]);

Ungeordnete Parameter:

function f({
    
    x,y,z}){
    
    
    console.log({
    
    x,z,y})
}
f({
    
    z:3,x:22,y:31});

Das Prinzip ist, dass die Destrukturierungszuweisung eine Reihe von Parametern mit Variablennamen verknüpfen kann

4: JSON-Daten extrahieren

 var jsonData = {
    
    
     id:404,
     name:"tianqin",
     data : [13134,15331],
     status :'OK'
 }
 let {
    
    id, status, data:number, name} = jsonData
console.log(id,status,number,name);

5: Geben Sie den Standardwert des Funktionsparameters an

function foo({
    
    x, y = 5}) {
    
    
    console.log(x, y);
  }
  
  foo({
    
    }) // undefined 5
  foo({
    
    x: 1}) // 1 5
  foo({
    
    x: 1, y: 2}) // 1 2
  foo() // TypeError: Cannot read property 'x' of undefined

6: Durchqueren Sie die Dekonstruktion der Karte

 var map = new Map();
  map.set('first' ,'hello');
  map.set('second' ,'world');
  for(let [key,value] of map){
    
    
      console.log(key + "is" + value);
  }

Es ist sehr praktisch, den Schlüsselnamen und den Schlüsselwert zu erhalten

7: Angabe der Methode des Eingabemoduls

const {
    
    first,second} = require('xxx');

Beim Laden des Moduls müssen Sie die Eingabemethoden angeben, und die Zuordnung der Destrukturierung kann den Eingabesatz sehr deutlich machen

Verweise:

[1] Ruan Yifeng. "Einführung in den ES6-Standard (zweite Ausgabe)" [M]. Peking. Verlag für Elektronikindustrie. 2015: 26-28