Destruct assignment of arrays

Basic usage

let [a, b, c] = [1, 2, 3];
Copy the code

The above code shows that you can extract values from an array and assign values to variables in their respective positions (one-to-one correspondence).

let [foo] = [];
let [bar, foo] = [1];
Copy the code

If the deconstruction fails, the value of the variable is undefined, as in foo.

The other case is incomplete deconstruction.

let [x, y] = [1, 2, 3];
x // 1
y // 2
Copy the code

If the right-hand side of the equals sign is not an array, an error will be reported.

// let [foo] = 1; let [foo] = false; let [foo] = NaN; let [foo] = undefined; let [foo] = null; let [foo] = {};Copy the code

In fact, any data structure that has an Iterator interface can be destructively assigned in the form of an array.

The default value

Destruct assignment allows you to specify default values.

The default is valid only if an array member is strictly equal to undefined

let [x = 1] = [undefined];
x // 1

let [x = 1] = [null];
x // null
Copy the code

In the above code, if an array member is null, the default value does not take effect because NULL is not exactly equal to undefined.

The default value can refer to another variable of the deconstructed assignment, but that variable must already be declared.

let [x = 1, y = x] = [];     // x=1; y=1
let [x = 1, y = x] = [2];    // x=2; y=2
let [x = 1, y = x] = [1, 2]; // x=1; y=2
let [x = y, y = 1] = [];     // ReferenceError: y is not defined
Copy the code

The last expression above fails because y has not yet been declared when x uses y as the default.

Object destructuring assignment

Deconstruction can be applied to objects as well as arrays. Objects are destructed similarly to arrays.

Object deconstruction differs from arrays in one important way. The elements of an array are arranged in order, and the value of a variable is determined by its position. The attributes of an object have no order, and variables must have the same name as the attributes to get the correct value.

let { bar, foo } = { foo: 'aaa', bar: 'bbb' };
foo // "aaa"
bar // "bbb"
Copy the code

Object deconstruction assignment, it is very convenient to assign the method of an existing object to a variable.

const { log } = console;
log('hello') // hello
Copy the code

The internal mechanism for deconstructing assignment of an object is to find the property of the same name and then assign it to the corresponding variable. It is the latter, not the former, that is really assigned.

let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
baz // "aaa"
foo // error: foo is not defined
Copy the code

In the code above, foo is the matching pattern and Baz is the variable. It is the variable baz that is actually assigned, not the pattern foo.

The default value

Object deconstruction can also specify default values, which are valid only if the object’s property value is strictly equal to undefined.

let {x, y = 5} = {x: 1};
x // 1
y // 5
Copy the code

Destruct assignment of a string

Strings can also deconstruct assignments. This is because at this point, the string is converted to an array-like object.

let [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"
Copy the code

use

(1) Exchange the values of variables

let x = 1;
let y = 2;

[x, y] = [y, x];
Copy the code

This is a concise and readable way of writing

(2) Return multiple values from the function

function example() {
  return [1, 2, 3];
}
let [a, b, c] = example();
Copy the code

(3) Extract JSON data

Let jsonData = {name: "jsonData ", year: 18}; let {name,year} = jsonData; console.log(name,year); // "zhang SANCopy the code