Overview Destructuring assignment is an extension of the assignment operator. It is a kind of pattern matching against arrays or objects, and then assigning values to the variables. The code is concise and easy to read, and the semantics are clearer; it also facilitates the acquisition of data fields in complex objects. Deconstructing the model In deconstruction, the following two parts are involved: The source of destructuring, the right part of the destructuring assignment expression. The target of destructuring, the left part of the destructuring assignment expression. Destructuring of an array model ( Array) basic let [a, b, c] = [1, 2, 3]; // a = 1 // b = 2 // c = 3 Nestable let [a, [[b], c]] = [1, [[2], 3]]; // a = 1 // b = 2 // c = 3 Ignorable let [a, , b] = [1, 2, 3]; // a = 1 // b = 3 incomplete deconstruction let [a = 1, b] = []; // a = 1, b = undefined remainder operator let [a, ...b] = [1, 2, 3]; //a = 1 //b = [2, 3] string etc. In the destructuring of the array, if the target of the destructuring is a traversable object, the destructuring assignment can be performed. Traversable objects are implemented Iterator interface data. let [a, b, c, d, e] = 'hello'; // a = 'h' // b = 'e' // c = 'l' // d = 'l' // e = 'o' Destructuring default values let [a = 2] = [undefined]; // a = 2 When the destructuring pattern has a matching result, and the matching result is undefined When the default value is triggered as the return result. let [a = 3, b = a] = []; // a = 3, b = 3 let [a = 3, b = a] = [1]; // a = 1, b = 1 let [a = 3, b = a] = [1, 2]; // a = 1, b = 2 a and b The matching result is undefined ,Trigger defaults: a = 3; b = a =3 a Normal destructuring assignment, matching results: a = 1,b match result undefined ,Trigger defaults: b = a =1 a and b Normal destructuring assignment, matching results: a = 1,b = 2 Deconstruction of the object model ( Object) basic let { foo, bar } = { foo: 'aaa', bar: 'bbb' }; // foo = 'aaa' // bar = 'bbb' let { baz : foo } = { baz : 'ddd' }; // foo = 'ddd' Can be nested or ignored let obj = {p: ['hello', {y: 'world'}] }; let {p: [x, { y }] } = obj; // x = 'hello' // y = 'world' let obj = {p: ['hello', {y: 'world'}] }; let {p: [x, { }] } = obj; // x = 'hello' incomplete deconstruction let obj = {p: [{y: 'world'}] }; let {p: [{ y }, x ] } = obj; // x = undefined // y = 'world' remainder operator let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}; // a = 10 // b = 20 // rest = {c: 30, d: 40} Destructuring default values let {a = 10, b = 5} = {a: 3}; // a = 3; b = 5; let {a: aa = 10, b: bb = 5} = {a: 3}; // aa = 3; bb = 5;
Overview
Destructuring assignment is an extension of the assignment operator.
It is a kind of pattern matching against arrays or objects, and then assigning values to the variables.
The code is concise and easy to read, and the semantics are clearer; it also facilitates the acquisition of data fields in complex objects.
Deconstructing the model
In deconstruction, the following two parts are involved:
- The source of the destructuring, the right part of the destructuring assignment expression.
- The target of destructuring, the left part of the destructuring assignment expression.
Destructuring the Array Model (Array)
basic
Nestable
Ignorable
incomplete deconstruction
remainder operator
string etc.
In the destructuring of the array, if the target of the destructuring is a traversable object, the destructuring assignment can be performed. Traversable objects are data that implement the Iterator interface.
Destructuring default values
When the destructuring pattern has a matching result, and the matching result is undefined, the default value will be triggered as the return result.
- a matches b with undefined , triggering the default value: a = 3; b = a =3
- a normal destructuring assignment, match result: a = 1, b match result undefined , trigger default value: b = a =1
- Normal destructuring assignment of a and b, matching result: a = 1, b = 2
Destructuring the Object Model (Object)
basic
Can be nested or ignored
incomplete deconstruction
remainder operator
Destructuring default values