Welche Rolle spielt die Destrukturierungszuweisung in es6?

Funktion: 1. Tauschen Sie die Werte zweier Variablen aus, die Syntax „[x,y] = [y,x];“ 2. Zerlegen Sie die Zeichenfolge und übergeben Sie die Zeichen an die Variable, die Syntax „[variable list]=string“ ; 3. Mehrere Werte aus der Funktion zurückgeben, die Syntax ist „[Variablenliste] = Funktion“; 4. JSON-Daten extrahieren, die Syntax ist „{Variablenliste} = JSON-Variable“ und so weiter .

Die Betriebsumgebung dieses Tutorials: Windows 7-System, ECMAScript Version 6, Dell G3-Computer.

es6 Destrukturierende Zuweisung

es6 ermöglicht das Extrahieren von Werten aus Arrays oder Objekten und das Zuweisen von Werten zu Variablen nach einem bestimmten Muster, das als destrukturierende Zuweisung bezeichnet wird.

Die Destrukturierungszuweisung ist beim Schreiben von Code einfach und leicht zu verstehen und verfügt über eine klare Semantik, sodass Datenfelder in komplexen Objekten bequem abgerufen werden können.

Destrukturierungsmodell

Bei der Destrukturierung befindet sich die Quelle der Destrukturierung auf der rechten Seite des Destrukturierungszuweisungsausdrucks und das Ziel der Destrukturierung befindet sich auf der linken Seite des Destrukturierungsausdrucks.

Die Rolle der Destrukturierungszuweisung

1. Tauschen Sie die Werte von x- und y-Variablen aus.

Verwenden Sie die Destrukturierungszuweisung, um die Werte von zwei Variablen auszutauschen, ohne eine dritte Variable zu verwenden 2. Zerlegen Sie eine Zeichenfolge und übergeben Sie die Zeichen an die Variable in einem Array oder Objekt und geben sie zurück.

    let x = 1;
    let y = 2;
    console.log('x:'+x, 'y:'+y);   //x:1 y:2
    //结构赋值  
    [x,y] = [y,x];
    console.log('x:'+x, 'y:'+y);   //x:2 y:1

4. Definition von Funktionsparametern

var [a,b,c,d,e] = "hello";
console.log(a); // h
console.log(b); // e
console.log(c); // l
console.log(d); // l
console.log(e); // o

5. JSON-Daten extrahieren (müssen in der Projektentwicklung verwendet werden)

  function example(){
        //返回一个数组
        return [1,2,3]
    }
    let [a,b,c]= example();
    console.log('a:'+a,'b:'+b,'c:'+c);  //a:1 b:2 c:3
    
    
    function example2(){
        //返回一个对象
        return {
            name:'kang+',
            age:20
        }
    }
    let {name,age} = example2();
    console.log('name:'+name,'age:'+age);  //name:kang+ age:20

6. Standardwerte von Funktionsparametern (ich persönlich denke, dass dies der Fall ist). nicht nützlich) Groß)

 //参数是一组有次序的值
         function f([x,y,z]){
             console.log('x:'+x);
             console.log('y:'+y);
             console.log('z:'+z);
         }

         f([1,2,3]);


        //参数是一组没有次序的值
         function f({x,y,z}){
             console.log('x:'+x);
             console.log('y:'+y);
             console.log('z:'+z);
         }
         f({z:3, x:2, y:1});

7. Durchqueren Sie die Kartenstruktur

    let jsonData = {
        number:01,
        status:'200',
         data:[{person:'kang+',age:20}]

     }
    // 获取json数据

     let {number,status,data,data:[{person,age}]} = jsonData;
     console.log('number:'+number);   //number:1
     console.log('status:'+status);   //status:200 
     console.log(data)                // [{…}]
     console.log('person:'+person);   //person:kang+
     console.log('age:'+age);         //age:20

[Verwandte Empfehlungen: Javascript-Video-Tutorial,
Web-Frontend

]

Das obige ist der detaillierte Inhalt vonWelche Rolle spielt die Destrukturierungszuweisung in es6?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!