Deconstruct and assignment of learning variables in ES6

Sometimes it is really troublesome to write more variables, and a lot of tedious and similar repetitive work, es6 provides us with a variety of more convenient forms of declaring variables-deconstruct and assignment of variables. The following article describes the information about variable deconstruct assignment in ES6. For more information, see. Sometimes it is really troublesome to write more variables, and a lot of tedious and similar repetitive work, es6 provides us with a variety of more convenient forms of declaring variables-deconstruct and assignment of variables. The following article describes the information about variable deconstruct assignment in ES6. For more information, see.

Deconstruct and assignment of Variables

In ES6, variables can be extracted from arrays and objects in certain modes and assigned values.

Deconstruct and assignment of Arrays

var [a,b,c] = [1,2,3];a // 1;b // 2;c // 3;

The code above indicates that values can be extracted from the array and assigned values based on the corresponding positions.

Essentially, this method is "pattern matching". As long as the pattern on both sides of the equal sign is the same, the variable on the left will be assigned the corresponding value.

let [foo,[[bar],baz]] = [1,[[2],3]];foo //1;bar //2;baz //3;let [,,third] = ['foo','bar','baz'];third //'baz'let [head,...tail] = [1,2,3,4]head //1;tail //[2,3,4]

If the deconstruct fails, the value of the variable is undefined.

let [x,y,z] = ['a']x // 'a';y // undefinedz //[]

Incomplete deconstruct

If the pattern on the left of the equal sign matches only a part of the array on the right of the equal sign, deconstruct can still be successful, which is called incomplete deconstruct.

let [x,y] = [1,2,3]x //1y //2

If the right side of the equal sign is not an array, an error is returned. (Does not have a structure that can be traversed ).

As long as a data structure has an Iterator interface, values can be deconstruct in the form of arrays.

function* fibs(){ var a = 0; var b = 1; while(true){  yield a;  [a,b] = [b,a+b]; }}var [first,second,third,fourth,fifth,sixth] = fibs();sixth // 5

Fibs is a Generator function with the native Iterator interface. The deconstruct value assignment function obtains values from this interface in turn.

Default Value

Deconstruct value assignment allows you to specify the default value.

var [foo=true] = [];foo //true

ES6 uses strictly equal operators (=) to determine whether a position has a value. Therefore, if a group of several Members is not strictly equal to undefined, the default value will not take effect.

var [x = 1] = [undefined]x // 1var [x = 1] = [null]x // null

The expression can also be used as the default value. If the expression is used as the default value, the expression evaluates the value in inertia and is used only.

function f(){ console.log('aaa')}let [x = f()] = [1]

In the code above, function f is not executed because x can get the value.

The default value can reference other deconstruct values, but the variable must have been declared.

Deconstruct and assignment of Objects

Deconstruct assignment can be applied to arrays or objects.

 var {foo,bar} = {foo:'aaa',bar:'bbb'} foo // 'aaa' bar // 'bbb'

There is a difference between the deconstruct value assignment of an object and an array, that is, the elements of an array are sorted in order. The value of a variable is determined by its position, but the attributes of an object are unordered, the variable must have the same name as the attribute to get the correct value.

var {bar,foo} = {foo:'aaa',bar:'bbb'}foo //'aaa'bar //'bbb'var {baz} = {foo:'aaa',bar:'bbb'}baz //undefined

If the variable name is inconsistent with the attribute name, it must be written as follows:

var {foo:baz} = {foo:'aaa'}baz //'aaa'

In fact, the deconstruct value assignment of an object is abbreviated as follows:

var {foo:foo,bar:bar} = {foo:'aaa',bar:'bbb'}

The internal mechanism of the object's deconstruct and value assignment is to first find the attribute of the same name and then assign it to the corresponding variable. The latter is the true value, not the former.

However, when the preceding method is used, the declaration of the variable and the value assignment are the same. For let and const, the variable cannot be declared again. Therefore, once the variable to be assigned is previously declared, an error is reported.

Object deconstruct can also be used for nested objects.

var obj = { p: [  'hello' ,  {   y : 'world'  } ]}var {p:[x,{y}]} = objx //'hello'y //'world'

P is the mode, not a variable, so it is not assigned a value.

You can also specify the default value for the deconstruct value of an object. The effective condition of the default value is that the attribute value of an object is strictly equal to undefined.

var {x=3} = {x:undefined}x //3var {x=3} = {x:null}x //null

If the deconstruct mode is a nested object and the parent attribute of the sub-object does not exist, an error is returned.

var {foo:{bar}} = {baz:'baz'}

For more articles about the deconstruct and assignment of ES6 learning variables, please refer to PHP!