Einführung in die Verwendung der destrukturierenden Zuweisung von Variablen in ES6 (mit Code)

Dieser Artikel bietet Ihnen eine Einführung in die Verwendung der Destrukturierung und Zuweisung von Variablen in ES6 (mit Code). Ich hoffe, dass er für Freunde hilfreich ist.

Destrukturierung der Zuweisung von Arrays

Grundlegende Verwendung

ES6 ermöglicht das Extrahieren von Werten aus Arrays und Objekten und das Zuweisen von Werten zu Variablen nach bestimmten Mustern, was als a bezeichnet wird Struktur.

Wenn Sie vor ES6 einer Variablen einen Wert zuweisen wollten, konnten Sie ihren Wert nur wie folgt angeben:

let a = 1;
let b = 2

In ES6 kann es wie folgt geschrieben werden:

let [a,b] = [1,2]
// a = 1, b = 2

Es ist erwähnenswert, dass die Werte auf beiden Seiten der Gleichung gleich sein müssen, damit der Variablen auf der linken Seite der entsprechende Wert auf der rechten Seite zugewiesen wird nicht gleich ist, wird undefiniert wie folgt angezeigt:

let [foo,[[bar],baz]] = [1,[[2],3]]
foo // 1
bar // 2
baz // 3

注意：只有左右两边的 格式一定要对等，数量可以不对等。

let [a,b,c] = [1,2]
a = 1, b = 2, c = undefined

let [a,,c] = [1,2,3]
a = 1, c = 3

let [a, ...b] = [1,2,3]
a = 1, b = [2,3]

let [a] = []
let [b,a] = [1]
a = undefined

Es gibt eine andere Situation, wenn die linke Seite des Gleichheitszeichens ein Array ist, die rechte Seite des Gleichheitszeichens jedoch ein Array Bei anderen Werten wird ein Fehler gemeldet. Wie folgt:

let [a] = 1;
let [a] = false;
let [a] = NaN;
let [a] = undefined;
let [a] = null;
let [a] = {};

以上都会报错

Aber wenn links ein Array und rechts ein String ist, wird der Wert des ersten Indexes des Strings genommen

let [a] = '121321'  a = '1'
let [a] = 'adgasg'  a = 'a'

Für die Set-Struktur können Sie Verwenden Sie auch die destrukturierende Zuweisung des Arrays.

let [x,y,z] = new Set([1,2,3])
x = 1, y = 2, z = 3

Standardwert

Destrukturierende Zuweisung ermöglicht die Angabe eines Standardwerts

let [a = 3] = []        // a:3
let [a = 3,b] = [,4]    // a:3 b:4
let [a = 3,b] = [5,4]   // a:5 b:4

Besonderes

let [a = 3] = [undefined]   // a:3
let [a = 3] = [null]        // a:null

Tipps: Verwenden Sie den strikten Gleichheitsoperator in es6, um Werte zuzuweisen ​zu Strukturen Wenn der Standardwert wirksam werden muss, wird der Standardwert nur verwendet, wenn der entsprechende Wert undefiniert ist, andernfalls wird die Zuweisung weiterhin verwendet. Im Obigen ist null nicht unbedingt gleich undefiniert++

Wenn die Zuweisung des Standardwerts ein Ausdruck ist, nur wenn die Zuweisung auf der rechten Seite des Gleichheitszeichens kein a hat Wenn der Wert undefiniert ist, wird der Wert im Ausdruck übernommen. Der Wert lautet wie folgt:

function demo(){
    console.log('demo')
}

let [a = demo()] = []   // a: demo
let [a = demo()] = [1]  // a : 1

Die destrukturierende Zuweisung eines Objekts

Der Unterschied zu einem Array besteht darin, dass die Elemente des Arrays müssen für eine korrekte Zuweisung an derselben Position wie die zugewiesenen Elemente sein, während die destrukturierende Zuweisung eines Objekts ist. Der korrekte Wert kann erhalten werden, wenn die Variablen und Attribute auf beiden Seiten des Gleichheitszeichens denselben Namen haben. Andernfalls ist der Wert undefiniert

let {a,b} = {a:'23',b:'3'}
let {a,b} = {b:'3',a:'23'}

// 上面两个的值 都是 a: 23 b: 3

let {a,b} = {a:'3',c:'d'}
//a: 3 b: undefined

Die destrukturierende Zuweisung des Objekts weist auch die Methode eines vorhandenen Objekts einer neuen Variablen zu, wie folgt:

let {sin,cos} = Math
// Math 中的sin cos 方法将赋值给变量 sin cos

let {log} = console
// log(2)  ===  console.log(2)

Wenn gleich sign Der Variablenname auf der linken Seite kann nicht mit dem Attributnamen des Objekts auf der rechten Seite des Gleichheitszeichens übereinstimmen und muss im folgenden Format geschrieben werden:

let {a:b} = {a:'ss'}     // b：ss
//a是属性名，b才是实际赋值的变量名

Die destrukturierende Zuweisung des Objekts kann auch verschachtelte Destrukturierung wie folgt:

第一种：

let obj = {
    p:[
        'Hello',
        {y:'world'}
    ]
}

let {p:[x,{y}]} = obj 
// x: Hello, y: world

这边的p只是属性不是变量，如果p想赋值可以写成：

let {p,:[x,{y}]} = obj

第二种：
const a = {
    loc: {
        t :1,
        b :{
            c:1,
            d:2    
        }
    }
}
let {loc:{t,b:{c,d}}} = a
或者
let {loc,loc:{t,b,b:{c,d}}} = a

Verschachtelte Zuweisung

let o = {}, arr = []

({foo:o.prop,bar: arr[0]} = {foo:123,bar:true})
//o: 123, arr = [true]

Wenn der Destrukturierungsmodus ein verschachteltes Objekt ist und die übergeordnete Eigenschaft des untergeordneten Objekts nicht vorhanden ist, wird ein Fehler gemeldet. wie folgt:

let {foo:{bar}} = {baz:'baz'} //报错

Standardwert

let {x = 3} = {}
// x: 3

let {x,y = 5} = {x : 1}
// x: 1, y: 5

let {x: y = 5} = {}
// y = 5

let {x: y = 5} = {x : 4}
// y = 4

let {x: y = 'hhhh'} = {}
//y = 'hhhh'

Tips:以上左边 x为属性名，y为变量


let {x = 5} = {x: undefined}
// x: 5

let {x = 4} = {x: null}
// x: null

同数组一样遵循 严格等于 
只有右边为undefined的时候默认值才会生效

Hinweise:

1) Deklarierte Variablen können nicht für die destrukturierende Zuweisung verwendet werden, da sie bereits ein Codeblock sind.

Zuweisung der Zeichenfolge zerstören

Wenn das Zuweisungsobjekt ein Array ist, wird die Zeichenfolge in das Format des Arrays aufgeteilt, das dem zugewiesenen Wert entspricht

let [a,b] = 'ha'
// a = h , b = a

同时可以获得字符串的长度：

let {length:len} = '12121'
// len = 5

Numerisch und Boolesche Werte Destrukturierungszuweisung

Wenn die rechte Seite des Gleichheitszeichens eine Zahl oder ein boolescher Wert ist, wird sie in ein Objekt konvertiert. Mit anderen Worten, außer Arrays und Objekten werden andere Werte konvertiert in Objekte, außer null und undefiniert. Wie folgt:

let {t:s} = 123
let {t: s} = true

Destrukturierende Zuweisung von Funktionsparametern

function add([x,y]){
    return x+y
}
add([3,5]) // 8

[[3,5],[6,7]].map(([a,b]) => a + b)
//8 , 13

function m({x=3, y=4} = {}){
    return [x,y]
}
m({x:33,y:8})     // [33,8]
m({x:32})         // [32,4]
m({})             // [3,4]
m()               // [3,4]

function m({x,y} = {x=0,y=0}){
    return [x,y]
}
m({x:33,y:8})     // [33,8]
// 代替右边的 x:0, y:0 所以是传值 33  8

m({x:32})         // [32,undefined]
//因为传值替代右边的赋值，但是只有x没有y
//所以y是取   左边y的默认值，因为你没有赋值 为undefined

m({})             // [undefined,undefined] 
// 取左边x,y的默认值，因为没有赋值 为undefined

m()               // [0,0]
// 没有传值，使用本身的赋值 都是0

Andere

Fall, in dem Klammern nicht verwendet werden können

1. Anweisung zur Variablendeklaration
2. Funktionsparameter
3. Muster der Zuweisungsanweisung

Fall, in dem Klammern verwendet werden können

1. Nicht-Musterteil der Zuweisungsanweisung, Klammern können verwendet werden

Der Zweck der Destrukturierungszuweisung

1. Austauschen des Werts einer Variablen
2. Mehrere Werte von einer Funktion zurückgeben
3. Definition von Funktionsparametern
4. JOSN-Daten extrahieren
5. Standardwerte von Funktionsparametern
6. Durchqueren der Kartenstruktur
7. Spezifikationsmethode des Eingabemoduls

Das obige ist der detaillierte Inhalt vonEinführung in die Verwendung der destrukturierenden Zuweisung von Variablen in ES6 (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!