Destruct assignment of arrays

ES6 allows you to extract values from an array or object in a certain pattern and then assign values to variables, called destructuring. As long as the patterns on both sides of the equals sign are the same, the variables on the left are assigned the corresponding values, which is known as “pattern matching.” Collectively, this is called “deconstructive assignment.”

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

Define multiple variables at the same time. A matches 1, B matches 2, and C matches 3

Destructible assignments allow you to specify default values, i.e. the left variable specifies the default value, and the right variable has no corresponding value, and the default value is printed first.

let [x, y = 'b'] = ['a'] // x = 'a', y = 'b'
Copy the code

X matches character a and y matches character B by default. If no corresponding character is displayed on the right, character B is displayed by default.

Object

Deconstruction can be used not only for arrays, but also for objects. Object deconstruction differs from array in one important way: the elements of an array are arranged in order, and the values of variables are determined by their positions; The properties of an object have no order, and the variable must have the same name as the property to get the correct value.

let {
    name,
    age,
    hobbies: [one, two]
} = {
    name: 'shiramashiro'.age: 21.hobbies: ['ride'.'anime']}Copy the code

Let’s say I take the value of age, and I take the value of ABC, and since it doesn’t correspond to the property name in the object, it doesn’t correspond to the assignment, so it’s undefined.

Deconstruct the use of assignment

Swap the values of variables

The normal way to think about swapping values of variables

let x = 1,
    y = 2,
    temp = 0

temp = x // x = 1 = temp
x = y // y = 2 = x
y = temp // temp = 1 = y

console.log('x => ', x)
console.log('y => ', y)
Copy the code

Swap variables with deconstructive assignments

let x = 1;
let y = 2;
[x, y] = [y, x];

console.log('x => ', x)
console.log('y => ', y) 
Copy the code

In this way, the values of x and y are exchanged, and the writing method is not only concise, but also easy to read, and the semantics are very clear.

Returns multiple values from a function

Functions can only return one value. If you want to return multiple values, you can only return them in an array or object. Destructuring assignments makes it easier.

Extract the second value from the hobbies array

function getArray() {
    return {
        name: 'kongsam'.age: 21.hobbies: ['ride'.'anime'.'Badminton']}}console.log(getArray().name + 'like' + getArray().hobbies[1]) / / anime
Copy the code

Gets the second value in the hobbies array using the destruct assignment

let {name, age, hobbies} = getArray()
console.log(name + 'like' + hobbies[1]) / / anime
Copy the code

Traverse the Map structure

For the for… The of loop always says that the value iterated over is an array, and the destruct assignment can be “pattern matched” to the array, which quickly retrieves the key-value.

for… The of loop traversal is very convenient when combined with deconstructing an assignment to get key-value.

for (let [key, value] of map) {
    console.log("key => ", key)
    console.log("value => ", value)
}
Copy the code

Deconstruction and assignment of function parameters

// let { x = 10, y = 5 } = {}

function f({ x = 10, y = 5 } = {}) {
    return [x, y]
}

console.log(f({ x: 100.y: 50 })) / / [100, 50]
console.log(f({ x: 3 })) / / [3, 5]
console.log(f({})) / / [10, 5]
console.log(f()) / / [10, 5]
Copy the code

You can pass an object as an argument to a function, and you can set default values for the object passed in. It’s going to be deconstructed and used inside the function, if you like.

function f(x = 10, y = 5) {
    return [x, y]
}

console.log(f(100.50)) / / [100, 50]
console.log(f(3)) / / [3, 5]
console.log(f()) / / [10, 5]
Copy the code

If I write it differently, I’ll get a different result

function f({ x, y } = { x: 10, y: 5 }) {
    return [x, y]
}

console.log(f({ x: 100.y: 50 })) / / [100, 50]
console.log(f({ x: 3 })) // [3, undefined]
console.log(f({})) // [undefined, undefined]
console.log(f()) / / [10, 5]
Copy the code

The third and fourth prints will have undefined because the x or y passed in does not correspond to the value in the object property, resulting in an unsuccessful match.