This article mainly introduces the content of structural assignment, often see the content of deconstruction assignment, will have a little understanding, but there is little opportunity to learn all the knowledge of deconstruction assignment, so let me take you to deconstruction assignment knowledge (I all want ~)

This article mainly refers to ES6 standard introduction (Ruan Yifeng)

Array destruct assignment

Basic usage

// Assign a value to a variable
let [a,b,c] = [1.2.3];
a / / 1
b / / 2
c / / 3-- -- -- -- -- -- -- -- -- -- -- -- -- --// Destruct assignment using nested arrays
let [foo,[[bar],baz]] = [1The [[2].3]];
foo / / 1
bar / / 2
baz / / 3-- -- -- -- -- -- -- -- -- -- -- -- -- --// The structure is not successful
let [foo] = [];
let [bar,foo] = [1];
// Foo equals undefined in both cases
Copy the code

Incomplete deconstruction

That is, the pattern to the left of the equals sign matches only part of the array to the right. In this case, deconstruction can still succeed.

// Not completely deconstructed
let [x,y,z] = [1.2.3];
x / / 1
y / / 2
Copy the code

An error is reported

An error is reported if the right-hand side of the equals sign is not an array (or, strictly speaking, not a traversable structure)

/ / an error
let [foo] = 1;
let [foo] = false;
let [foo] = NaN;
let [foo] = undefined;
let [foo] = null;
let [foo] = {};
// The error occurs because the value to the right of the equals sign does not have an Iterator interface either by itself or after being converted to an object
Copy the code

In fact, any data structure that has an Iterator interface can be destructively assigned in the form of an array, such as a Set structure, Generator functions, etc.

The default value

// Destruct assignment allows you to specify default values
let [foo = true] = [];
foo // true
[x,y = 'b'] = ['a'];
// x= 'a',y = 'b'-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --/* ES6 internally determines whether a position has a value based on '=== ='. If an array member is not strictly equal to undefined, the default value will not take effect. * /
let [x=1] = [null];
x // null
// If an array member is null, the default value does not take effect.-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --// The default value can refer to other variables of the deconstructed assignment, but the variables must already be declared.
let [x = 1, y = x] = []; // x=1; y=1
let [x = 1, y = x] = [2]; // x=2; y=2
Copy the code

2. Object deconstruction assignment

Basic usage

let {x , y} = {x:"aaa".y:"bbb"};
x // "aaa"
y // "bbb"
Copy the code

Object deconstruction differs from arrays in one important way. In an array, the value of a variable is determined by its position; in an object, a variable must have the same name as an attribute.

// If the variable name does not match the attribute name, it must be written as follows.
let {x:z} = {x:"aaa".y:"bbb"};
z // "aaa"
/* The variable is declared and assigned in the same way. For lets and const, variables cannot be redeclared, so an error will be reported if the copied variable has been declared before
let foo;
let {foo}={foo:1};
/ * because JavaScript engine will {foo} as a block of code to syntax errors occur, so the error, the solution is not speak write at the beginning of * / braces
({foo}={foo:1})
Copy the code

The default value

// Object destructions can also specify default values
let {x = 3} = {};
x / / 3
let {x,y =5} = {x:1};
x / / 1
y / / 5
Copy the code

String deconstruction assignment

Strings can also deconstruct assignments because strings are converted to an array-like object.

Basic usage

const [a,b,c,d,e,f] = 'juejin';
a // 'j'
b // 'u'
c // 'e'
d // 'j'
e // 'i'
f // 'n'-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --// The length of the string can also be destructively assigned
let {length: len} = 'juejin';
len / / 6
Copy the code

4. Deconstruction of values and Boolean values

When deconstructing an assignment, if there is a value or Boolean to the right of the equals sign, it is converted to an object first.

Basic usage

let {toString:s} = 123;
s === Number.prototyupe.toString // true
/* If the value to the right of the equals sign is not an object, it will be converted to an object first. * /
Copy the code

5. Deconstruction assignment of function parameters

Function arguments can also be destructively assigned.

Basic usage

function add([x,y]){
    return x + y;
}
add([1.2]) / / 3
// In the above code, the arguments to the function add are not actually an array, but rather the assigned variables x and y.
Copy the code

The default value

Function arguments can also be destructed using default values.

function move({x = 0, y = 0}) = {
        return [x,y];
}
move({x:3.y:8}); / / [3]
move(); / / [0, 0]
// If the deconstruction assignment fails, x and y are equal to the default values.
Copy the code

Deconstruct the purpose of assignment

Knock on the blackboard ~ learned knowledge to be able to use oh. There are many uses for destructuring variable assignment, but the main ones are listed below.

Swap the values of variables

[x,y] = [y,x]
// It is not necessary to write temporary variables
Copy the code

Returns multiple values from a function

// Return an array
function example() {
    return [1.2.3];
}
let [a,b,c] = example();
Copy the code

Extracting JSON data

Deconstructing assignments is especially useful for extracting data from JSON objects.

let jsonData = {
    id:43.status:"OK".data: ["loveyou"."juejin"]}let {id,status,data:string} = jsonData;
console.log(id,status,string);
// 43 "OK" ["loveyou", "juejin"]
Copy the code

Traverse the Map structure

Map structure native support Iterator interface, with variable deconstruction assignment, obtain key names and key values very convenient.

let map = new Map(a); map.set('first'.'loveyou')
map.set('first'.'juejin')
// Get the key name
for (let [key] of map){
    / /...
}
// Get the key value
for (let [,value] of map){
    / /...
}
Copy the code

The last

⚽ this article summarizes the syntax and purpose of deconstructing assignment ~ ⚾ If this article helped you, please like it ~ πŸ€GitHub blog address: github.com/Awu1227. πŸ‰ I have other columns, please read ~ 🎱Vue from giving up to starting 🏐 playing with the beauty of CSS