Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

The road is difficult, the road is difficult, sweat, full of long. A hundred miles under foot, a sunny day overhead. Firm as a rock, faith like fire. Good boy, people poor ambition is not lack, the way of Heaven also pay frequently. Walk everywhere, walk everywhere, be bold and bold. The bumpy road ahead is hard to stop. If the heart has a bright light, the body is like prajna. My hero, aim high, everywhere is home.

What is the decoupled assignment

ECMAScript 6 allows you to extract values from arrays or objects and assign values to variables in a pattern. This method of assignment is called “Destructuring assignment”.

  • ECMAScript 5 assigns values to variables as follows:
var a = 10;
var b = 11;
var c = 12;
Copy the code
  • ECMAScript 6 assigns values to variables as follows:
let [a, b, c] =[10.11.12];
Copy the code

ECMAScript 6’s “decoupled assignment” is essentially “pattern matching.” The assignment operator has the same pattern on both sides, and the variable on the left is assigned the value of its position.

Decoupling assignment failed

If the decoupling assignment fails, the value of the variable is undefined. In the following code example, decoupling assignment fails:

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

In the following code example, decoupling assignment fails:

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

Incomplete decoupled assignment

Incomplete assignment is decoupled if the pattern of the variable to the left of the assignment operator matches only part of the array to the right of the assignment operator. But in this case, decoupling assignment can still succeed.

let [x,y]=[1.2.3];
console.log(x, y);
let [a, [b],d]=[1[2.3].4];
console.log(a, b, d);
Copy the code

The default value

Decoupled assignment allows you to specify default values. The following code looks like this:

let [a = true] = [];
console.log(a);// true
​
let [m,n = 100] = [10];
console.log(m, n);/ / 10, 100
​
let [x, y = 100] = [10.undefined];
console.log(x,v):/ / 10, 100
Copy the code

It is worth noting that ECMAScript 6 internally uses the full equality operator to determine whether a value exists at a given location. So the default value only works if the value of the array member is equal to undefined.

Object decoupling assignment

Decoupled assignment of an object is achieved by the variable name and the attribute name of the object — corresponding.

let {name, addr}={
 name: Spongebob Squarepants.addr:"Sea"
}
// SpongeBob squarepants
console.log(name, addr);
Copy the code

Decoupled assignment of strings

The decoupled assignment of a string is converted to an array-like object.

let [a, b, c, d, e,f]= 'wolong';
console.log(a);// w
console.log(b):// o
console.log(c)://l
console.log(d):// o
console.log(e);//n
console.log(f):// g
Copy the code

A decoupled assignment of a value to a Boolean value

A decoupled assignment is converted to an object first if the assignment operator has a numeric or Boolean value to its right.

let {toString: m}= 123;
console.log(m === Number.prototype.toString);// true
let {toString: n} = true;
console.log(n === Boolean.prototype.toString);// true
Copy the code

The rule for decoupling assignment is that any value to the right of the assignment operator that is not an object or array is converted to an object first. Because undefined and NULL cannot be converted to objects, decoupling assignments will result in an error.

// TypeError: Cannot destructure property 'prop`of 'undefined" or 'null".
let { prop: x }= undefined;
let { prop: y }= null;
Copy the code

Decoupled assignment of function parameters

When declaring a function, the parameters of the function can also be assigned using decoupling.

function fn([a, b]){
 console.log(a, b):/ / 12
}
fn([1.2]);
Copy the code

Swap the values of variables

Decoupled assignment can be used to swap values between two variables.

let x = 1;
let y = 2;
[x, y]=[y, x];
console.log(x,y):1 / / 2
Copy the code

Returns multiple values from a function

Functions generally return only one value. If you want to return multiple values, you can only place multiple values in arrays or objects. If you use decoupled assignment, you can easily implement functions that return multiple values.

// Return an array
function example() {
 return [1.2.3];
}
let [a, b, c] = example();
​
// Return an object
function example(){
return {
  foo: 1.bar: 2
 };
}
let { foo, bar } = example();
Copy the code