ES6 Deconstruct assignment parsing
Description:
Deconstructing assignment is an extension of the assignment operator.
It is a method of pattern matching for arrays or objects, and then assigning values to the variables in them.
Concise and easy to read in code writing, more clear semantics; It also facilitates data field retrieval in complex objects.
The destruct assignment syntax is a Javascript expression. By deconstructing assignments, attributes/values can be taken from objects/arrays and assigned to other variables.
Deconstruction model:
In the process of deconstruction, two parts are involved:
- The source of the deconstruction, the right side of the deconstruction assignment expression.
- The goal of deconstruction is to deconstruct the left side of the assignment expression.
In ES5, developers wrote a lot of seemingly homogeneous code to get specific data from objects and arrays and assign values to variables
let options = { age: 12, sex: 'boy' }; Age = options.age, sex = options.sex;Copy the code
This code extracts the values of repeat and save from the Options object and stores them as local variables of the same name, in a very similar process
If you want to extract more variables, you must write similar code in turn to assign values to the variables. If there are nested structures, you cannot find the real information only by traversing. You must dig deep into the entire data structure to find the required data
So ES6 adds a deconstruction feature that makes it easier to break up data structures and get information from smaller pieces
Object structure
1. General object structure assignment
The syntactic form of an object literal is to place an object literal to the left of an assignment operator;
let node = {
type: "Identifier",
name: "foo"
};
let { type, name } = node;
console.log(type); // "Identifier"
console.log(name); // "foo"
Copy the code
In this code, the value of Node. type is stored in a variable named type; The value of Node. name is stored in a variable named name.
2. Undeclared assignment
A variable can be destructively assigned independently of its declaration.
var a, b;
({a, b} = {a: 1, b: 2});
Copy the code
Note the parentheses around the assignment statement (…) This is required when undeclared destructuring assignments using object literals.
{a, b} = {a: 1, b: 2} is not a valid independent syntax because {a, b} on the left is considered a block rather than an object literal.
However, (= {a, b} {a: 1, b: 2}) are effective, as var = {a, b} {a: 1, b: 2}
Your (…) The expression needs to be preceded by a semicolon, otherwise it might be executed as if it were a function on the previous line.
Assign a value to the new variable name
Variables can be extracted from an object and assigned to new variable names that are different from the object property names.
var o = {p: 42, q: true};
var {p: foo, q: bar} = o;
console.log(foo); // 42
console.log(bar); // true
Copy the code
4. Structure defaults
Variables can be assigned default values first. When the property of the object to be extracted resolves to undefined, the variable is given a default value.
var {a = 10, b = 5} = {a: 3}; console.log(a); // 3 console.log(b); / / 5Copy the code
5, name new variables and provide default values]
An attribute can be simultaneously 1) deconstructed from an object and assigned to a variable with a different name and 2) assigned to a default value in case the undeconstructed value is' undefined '. var {a:aa = 10, b:bb = 5} = {a: 3}; console.log(aa); // 3 console.log(bb); / / 5Copy the code
6, can be nested can be 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'
Copy the code
7. Incomplete deconstruction
let obj = {p: [{y: 'world'}] };
let {p: [{ y }, x ] } = obj;
// x = undefined // y = 'world'
Copy the code
8. Residual operators
let {a, b, ... res} = {a: 10, b: 20, c: 30, d: 40}; // a = 10 // b = 20 // res = {c: 30, d: 40};Copy the code
9. Object attribute calculation names and destructions
Computed attribute names, such as Object Literals, can be deconstructed.
let key = "z";
let { [key]: foo } = { z: "bar" };
console.log(foo); // "bar"
Copy the code
Destructuring can be used with property names that are not valid JavaScript identifiers by providing valid alternative identifiers.
const foos = { 'kk-b': true };
const { 'kk-b': kkb } = foos;
console.log(kkb); // "true"
Copy the code
11. When deconstructing an object, look up the prototype chain (if the attribute is not in the object itself, look up the prototype chain)
Var obj = {self: 'hello'}; // Define a property in the prototype chain prot obj.__proto__. Prot = 'word'; // test const {self, prot} = obj; // self "hello" // prot "word"Copy the code
Array structure
Object – and array-by-object expressions, or object literals and array literals, provide a simple way to define a particular set of data.
var x = [1, 2, 3, 4, 5];
Copy the code
Destruct assignment uses the same syntax, except that the left side of the expression defines what variables to extract from the original.
var x = [1, 2, 3, 4, 5]; var [y, z] = x; console.log(y); // 1 console.log(z); / / 2Copy the code
2. Basic array structures
let [a, b, c] = [1, 2, 3];
// a = 1 // b = 2 // c = 3
Copy the code
3. Deconstruction of variable declarations and assignments
var foo2 = ["aa", "bb", "cc"];
var [aa, bb, cc] = foo2;
console.log(aa); // "aa"
console.log(bb); // "bb"
console.log(cc); // "cc"
Copy the code
4. Deconstruction of variables when they are first declared and then assigned
You can assign a value to a variable by deconstructing the declaration of separating variables.
var a, b; [a, b] = [1, 2]; console.log(a); // 1 console.log(b); / / 2Copy the code
5. Default values
To prevent fetching an object with a value of undefined from the array, you can set the default value for any object in the array to the left of the expression.
var a, b; [a=2, b=3] = [1]; console.log(a); // 1 console.log(b); / / 3Copy the code
6. Swap variables
You can swap the values of two variables in a destructed expression.
Swapping two variables without destructing assignment requires a temporary variable
var a = 1; var b = 2; [a, b] = [b, a]; console.log(a); // 2 console.log(b); / / 1Copy the code
Parse an array returned from a function
It is quite common to return an array from a function. Deconstruction makes it easier to deal with arrays of return values.
Below, to make [1, 2] the output of the function f(), you can use deconstruction to do the parsing on one line.
function f() { return [1, 2]; } var a, b; [a, b] = f(); console.log(a); // 1 console.log(b); / / 2Copy the code
Ignore some return values
function f() { return [1, 2, 3]; } var [a, , b] = f(); console.log(a); // 1 console.log(b); / / 3Copy the code
All return values
[,,] = f();
Copy the code
9. Assign the remaining array to a variable
When deconstructing an array, you can use the remainder pattern to assign the remainder of the array to a variable.
var [a5, ...b5] = [1, 2, 3]; console.log(a5); // 1 console.log(b5); / / [2, 3]Copy the code
10. Nesting
let [a, [[b], c]] = [1, [[2], 3]];
// a = 1 // b = 2 // c = 3
Copy the code
11. Incomplete deconstruction
let [a = 1, b] = [];
// a = 1, b = undefined
Copy the code