Deconstruction assignment

Destruct assignment is an extension of the assignment operator. It usually operates on array objects and has the advantage of being concise and readable

Array destruct assignment

Es5 assigns values to variables, only individually

var a = 1;
var b = 2;
var c = 3;
Copy the code

Es6 allows us to write this

let [a,b,c] = [1.2.3];
Copy the code

If the deconstruction fails, the variable and the value cannot correspond, and the value of the variable is equal to undefined

let [b] = [];
let [a,b] = [1];
console.log(b) // undefined
Copy the code

Object destruct assignment

Deconstruction can be applied to objects, and the assignment of structural objects is one-to-one corresponding to the properties in the object

For example, retrieving json object data from the back end, this method can be very simple to retrieve data from JSON with the same property name, or to deconstruct the data

let node = {
    type:'identifier'.name:'foo'
}
/ / es5 writing
var type = node.type;
var name = node.name;
// Es6 object deconstruction
let {type,name} = node;
console.log(type,name)// identifier foo
Copy the code

When assigning a deconstructed object, you can ignore attributes that do not need to be deconstructed, and use residual operators for deconstruction

The residual operators are used to deconstruct objects rather than arrays

let obj = {
    a: 'Max'.b: [].c: 'hellow world'
}
// let { a } = obj; // The attributes of b and C can be ignored for deconstruction
let{ a, ... x } = obj;// Assign attributes after a to a new object using the remainder operator
console.log(a);// Max
console.log(x);//{b: Array(0), c: "hellow world"}
console.log(x.c);//hellow world
Copy the code
Extracting JSON data

Deconstructing assignments is especially useful for extracting data from JSON objects

let jsonData = {
    id: 42.status: 'ok'.data: [867.6543]}let { id, status } = jsonData; // Only the names of the attributes to be extracted need to be placed in {}
console.log(id); / / 42
let { data: number } = jsonData; 
// If you need to rename an attribute in jsonData, you can assign the value of the attribute to the following attribute
console.log(number); / / [867, 6543]
Copy the code
Specifies the method of input module

When loading a module, you usually only need to specify which methods to input, and destructing assignment makes the input statements very clear

const= {getJson, getBoolean}require('xxx');
Copy the code

The function deconstructs the assignment

Es5 functions can only return one value. If you want to return multiple values, you must return them in arrays or objects

function fn1() {
    let a = 1, b = 2, c = 3;
    return arr = [a, b, c];
}
fn1();
console.log(arr[1]); / / 2
//---------------------------------------------
function fn2() {
    let x = 1, y = 2, z = 3;
    return book = {
        x: x,
        y: y,
        z: z
    }
}
fn2();
console.log(book.y);/ / 2
Copy the code

In ES6, with deconstructed assignments, it is very easy to retrieve these attributes and their assignments individually

// The function returns an array
function fn1() {
    let a = 1, b = 2, c = 3;
    return [a, b, c];
}
let [a, b, c] = fn1();
console.log(a); / / 1
console.log(b); / / 2
console.log(c); / / 3
//-------------------------------------------------
// The function returns an object, which is destructed by the function
function fn2() {
    let x = 1, y = 2, z = 3;
    return {
        x: x,
        y: y,
        z: z
    }
}
let { x, y, z } = fn2()
console.log(x); / / 1
console.log(y); / / 2
console.log(z); / / 3
Copy the code

Destruct assignment makes it easy to assign an array or object to a function

// Arguments are an ordered array
let arr = [1.2.3];
let q = 3,
    w = 4;
function fn1(q, [x, y, z], w) {
    return q + x + y + z + w;
}
console.log(fn1(q, arr, w));/ / 13

// The argument is an unordered object
let obj = {
    a: 1.b: 2.c: 3
};
let q = 3,
    w = 4;
function fn2(q, { b, a, c }, w) {
    return q + a + b + c + w;
}
console.log(fn2(q, obj, w));/ / 13
Copy the code