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