Deconstruction and Assignment of Variables in ES6 Learning

Deconstruction and assignment of variables

In ES 6, variables are allowed to be extracted from arrays and objects according to the 1-determined pattern.

Deconstruction and assignment of arrays

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

The above code indicates that you can extract values from the array and assign values to variables according to the corresponding relationship of positions.

In essence, this writing is "pattern matching", so long as the patterns on both sides of the equal sign are the same, the variables on the left will be given corresponding values.

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 deconstruction 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 to the left of the equal sign matches only one part of the array to the right of the equal sign, deconstruction can still succeed. This situation is called incomplete deconstruction.

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

If an array is not to the right of the equal sign, an error will be reported. (There is no structure that can be traversed).

As long as a certain data structure has Iterator interface, it can be deconstructed and assigned in the form of array

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 an Generator function that is native to the Iterator interface from which deconstruction assignments get values in turn.

Default value

Deconstruction assignments allow you to specify default values.

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

ES6 internally uses the strict equivalence operator (= = =) to determine whether a position has a value. Therefore, if one 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

The expression can also be used as the default value. If the expression is used as the default value, the expression is evaluated lazily and will only be evaluated when it is used.

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

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

In the above code, the function f does not execute because x can get a value.

The default value can refer to other variables assigned by deconstruction, but the variable must have been declared.

Deconstruction and assignment of objects

Deconstruction assignments can be applied to arrays as well as objects.

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

There is one difference between deconstruction assignment of objects and array, that is, the elements of array are sorted in order, the values of variables are determined by their positions, while the attributes of objects have no order, and variables must have the same name as attributes in order to get the correct values.

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


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

If the variable name does not match the attribute name, it must be written as follows:

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]

0

In fact, the deconstruction assignment of objects is the following formal abbreviation:

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]

1

The internal mechanism of deconstruction and assignment of objects is to find the attributes with the same name first, and then assign them to the corresponding variables. The latter is really assigned, not the former.

However, when the above writing is adopted, the declaration and assignment of variables start from 1. For let and const, variables cannot be re-declared, so once the assigned variables have been declared before, errors will be reported.

Deconstruction of objects can also be used for nested objects.

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]

2

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

The deconstruction assignment of an object can also specify a default value, which takes effect if the property 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 deconstruction mode is a nested object and the parent property of the child object does not exist, an error will be reported.

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]

4

Summarize

The above is the whole content of this article. I hope the content of this article can help you learn or use ES6. If you have any questions, you can leave a message for communication.