I am small and live in Wuhan, do two years of new media, ready to use 6 months time to switch to the front end of the industry.

Lesson Objective for today

Yesterday was based on search to learn strictly. So today starts the basic learning deconstruction, is also suitable for learning a day, come on, small and ！！！！

Today, in an article, I learned a simple method to call console.log, before the example article used a lot, feel a lot of code, feel the article this use, also quite good ~~~~

string

Convert to array deconstruction

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

(function (log) {
    const [a, b, c, d, e] = 'hello';
    log(a); // "h"
    log(b); // "e"
    log(c); // "l"
 log(d); // "l"  log(e); // "o"  }) (console.log) Copy the code

It feels amazing ~~~~~, which means that the String data structure I learned earlier can also be converted to an array like this

Deconstructing string length

Array-like objects have a length attribute, so you can also deconstruct and assign to this attribute.

(function (log) {
    const {
        length: len
    } = 'hello';
    log(len); / / 5
 }) (console.log) Copy the code

It feels amazing ~~~~~, which means that the String data structure I learned before can also be turned into an object like this

Values and Booleans

When deconstructing an assignment, if the value and Boolean are to the right of the equals sign, the object is converted first.

(function (log) {
    const {
        toString: s1
    } = 123;
    log(s1 === Number.prototype.toString); // true
  const {  toString: s2  } = true;  log(s2 === Boolean.prototype.toString); // true }) (console.log) Copy the code

In the code above, both the numeric and booleans wrapper objects have toString attributes, so both s1 and s2 can take values.

Numeric data types have been studied. Boolean data types have not been studied

An array of

Basic usage

Completely deconstruction

(function (log) {
    // Basic array deconstruction
    const [a, b, c] = [1.2.3];
    log(a); / / 1
    log(b); / / 2
 log(c); / / 3   // Destruct nested arrays  const [foo, [[bar], baz]] = [1The [[2].3]]. log(foo); / / 1  log(bar); / / 2  log(baz); / / 3   // specify index destruct  const [ , , third] = ["foo"."bar"."baz"];  log(third); // "baz"   const [x, , y] = [1.2.3];  log(x); / / 1  log(y); / / 3   const [head, ...tail] = [1.2.3.4];  log(head); / / 1  log(tail); / / [2, 3, 4]   const [e, f, ...g] = ['a'];  log(e); // "a"  log(f); // undefined  log(g); / / [] }) (console.log) Copy the code

There seems to be another… , I feel I need to find time to study

Incomplete deconstruction

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

(function (log) {
    const [x, y] = [1.2.3];
    log(x); / / 1
    log(y); / / 2

 const [a, [b], d] = [1[2.3].4];  log(a); / / 1  log(b); / / 2  log(d); / / 4 }) (console.log) Copy the code

The above two examples, both incomplete deconstruction, can be successful.

Therefore, incomplete deconstruction means that the number of variables on the left is different from that on the right ~~~~

Setting defaults

Based on using

Destruct assignment allows you to specify default values.

(function (log) {
    const [foo = true] = [];
    log(foo); // true

    const [x, y = 'b'] = ['a'];
 log(x);// 'a'  log(y);// 'b'   const [a, b = 'b'] = ['a'.undefined];  log(a);// 'a'  log(b);// 'b' }) (console.log) Copy the code

It’s not clear how this default is used

Using expressions

If the default value is an expression, the expression is lazy, that is, evaluated only when it is used.

(function (log) {
    function f() {
        console.log('aaa');
    }

 const [x = f()] = [1];  log(x);/ / 1 }) (console.log) Copy the code

In the above code, f will not be executed at all because x can be evaluated. The code above is equivalent to the code below.

(function (log) {
    let x;
    if ([1] [0= = =undefined) {
        x = f();
    } else {
 x = [1] [0];  }  log(x);/ / 1 }) (console.log) Copy the code

This explanation some do not quite understand ~~~~

References other variable values

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

(function (log) {
    const [x1 = 1, y1 = x1] = [];
    log(x1);/ / 1
    log(y1);/ / 1

 const [x2 = 1, y2 = x2] = [2];  log(x2);/ / 2  log(y2);/ / 3   const [x3 = 1, y3 = x3] = [1.2];  log(x3);/ / 1  log(y3);/ / 2   const [x4 = y4, y4 = 1] = []; // Cannot access 'y4' before initialization }) (console.log) Copy the code

The last expression above fails because y4 has not been declared when x4 defaults to y4.

Feel this should pay attention to ~~~

Matters needing attention

Deconstruction not successful

If the deconstruction fails, the value of the variable is equal to undefined.


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

In both cases, the deconstruction fails and the value of foo is equal to undefined.

Cannot traverse the structure

If the right-hand side of the equals sign is not an array (or, strictly speaking, not a traversable structure), an error will be reported.

(function (log) {
    / / an error
    const [foo1] = 1;// TypeError: 1 is not iterable
    const [foo2] = false;// TypeError: false is not iterable
    const [foo3] = NaN;// TypeError: NaN is not iterable
 const [foo4] = undefined;// TypeError: undefined is not iterable  const [foo5] = null;// TypeError: null is not iterable  const [foo6] = {};// TypeError: {} is not iterable }) (console.log) Copy the code

All of the above statements will fail because the values to the right of the equals sign will either have no Iterator interface when converted to an object (the first five expressions) or will have no Iterator interface (the last expression).

function

Basic usage

Based on using

Function arguments can also be destructively assigned.

(function (log) {
    function add([x, y]) {
        return x + y;
    }

 log(add([1.2])); / / 3 }) (console.log) Copy the code

In the above code, the arguments to the function add are ostensibly an array, but the moment they are passed in, the array arguments are resolved to form variables X and y. For the code inside the function, the arguments it senses are x and y.

Used in conjunction with the arrow function

Function arguments can also be destructively assigned.

(function (log) {
    const arr = [
        [1.2].        [3.4]
    ].map(([a, b]) = > a + b);
 log(arr); // [3, 7] }) (console.log) Copy the code

Setting defaults

Function arguments can also be destructed using default values.

Function object parameter properties use default values

(function (log) {
    function move({
        x = 0. y = 0  } = {}) {
 return [x, y];  }   log(move({  x: 3. y: 8  })); / / [3, 8]  log(move({  x: 3  })); / / [3, 0]  log(move({})); / / [0, 0]  log(move()); / / [0, 0] }) (console.log) Copy the code

In the above code, the function move takes an object, which is deconstructed to get the values of the variables x and y. If deconstruction fails, x and y are equal to the default values.

Use default values for function object arguments

(function (log) {
    function move({
        x,
 y  } = {  x: 0. y: 0  }) {  return [x, y];  }   log(move({  x: 3. y: 8  })); / / [3, 8]  log(move({  x: 3  })); // [3, undefined]  log(move({})); // [undefined, undefined]  log(move()); / / [0, 0] }) (console.log) Copy the code

The above code specifies default values for the arguments to move, not for the variables x and y, so the result is different from the previous one.

Matters needing attention

Undefined triggers the default values of function arguments.

(function (log) {
    const arr = [1.undefined.3].map((x = 'yes') = > x);
    log(arr); // [ 1, 'yes', 3 ]
}) (console.log)
Copy the code

Summary of today’s lesson


Today the mood

Today is mainly based on search to basic learning deconstruction, this hope to learn more tomorrow ~~~~


This article is formatted using MDNICE