ES6 learning variable destructuring and assignment

Sometimes it is really troublesome to write too many variables, and there is a lot of tedious and similar repetitive work. es6 provides us with a variety of more convenient ways to declare variables - destructuring and assigning variables. The following article mainly introduces the relevant information on variable destructuring and assignment in ES6. Friends in need can refer to it.

Destructuring assignment of variables

ES6 allows you to extract values ​​from arrays and objects and assign values ​​to variables according to a certain pattern.

Destructuring assignment of array

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

The above code indicates that values ​​can be extracted from the array and assigned to variables according to the corresponding position.

Essentially, this writing method belongs to "pattern matching". As long as the patterns on both sides of the equal sign are 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 destructuring is unsuccessful, the value of the variable is equal to undefined.

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

Incomplete deconstruction

If the pattern on the left side of the equal sign only matches part of the array on the right side of the equal sign, destructuring It can still be successful. This situation is called incomplete deconstruction.

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

If the right side of the equal sign is not an array, an error will be reported. (Does not have a traversable structure).

As long as a certain data structure has an Iterator interface, destructuring assignment in the form of an array can be used

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 that natively has Iterator interface, destructuring assignment will obtain values ​​from this interface in turn.

Default value

Destructuring assignment allows default values ​​to be specified.

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

ES6 internally uses the strict equality operator (===) to determine whether a position has a value. Therefore, if an array member is not strictly equal to undefined, the default value will not take effect.

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

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

An expression can also be used as a default value. If an expression is used as a default value, the expression is lazily evaluated and will only be used when The value will be evaluated when the time comes.

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

let [x = f()] = [1]

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

The default value can refer to other variables of destructuring assignment, but the variable must have been declared.

Destructuring assignment of objects

Destructuring assignment can be applied to arrays, and it can also be used for objects.

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

One difference between object destructuring assignment and array is that the elements of the array are sorted in order, and the value of the variable is determined by its position. The properties of an object are not in order, and the variable must have the same name as the property 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 like this:

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

Actually, the destructuring assignment of an object is the abbreviation of the following form:

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

The internal mechanism of the destructuring assignment of an object is to first find the attribute with the same name, and then assign it to For the corresponding variable, it is the latter, not the former, that is actually assigned a value.

However, when using the above writing method, the declaration and assignment of variables are together. For let and const, variables cannot be re-declared, so once the assigned variable has been declared before, an error will be reported.

Destructuring of objects can also be used for objects with nested structures.

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

var {p:[x,{y}]} = obj

x //'hello'
y //'world'

At this time p is a pattern, not a variable, so it will not be assigned.

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

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

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

If the destructuring mode is a nested object and the parent property where the child object is located does not exist, an error will be reported.

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

For more articles related to the deconstruction and assignment of variables in ES6 learning, please pay attention to the PHP Chinese website!