Reading Notes: in-depth understanding ES6 (V)

Chapter V Deconstruction: make data access more convenient

Section 1 Why deconstruction function?

　　, Developers get in the ES5 from the object, an array of specific data and assigned to the variable, write a lot of code that looks homogenization. E.g:

. 1 the let Options = {
 2      REPEAT: to true ,
 . 3      Save: to false 
. 4  };
 . 5  
. 6  // extracted from the data in the object 
. 7 the let REPEAT = options.repeat,
 . 8      Save = options.save;

　　The purpose is to deconstruct functions simplify the process of obtaining information .

 

Section 2 objects deconstruction

　　1. Object deconstruction syntax is left in an assignment operator, set an object literal . For example:

1 let node = {
2     type: "Identifier",
3     name: "foo"
4 }

5 let {type, name} = node;
6 
7 console.log(type); // "Identifier"
8 console.log();    //"foo"

　　2. defaults.

　　Deconstruction assignment nonexistent property can define a default value. For example:

1 let node = {
2     type: "Identifier",
3     name: "foo"
4 }

5 let {type, name, value=true} = node;

6 console.log(type); //"Identifier"
7 console.log(name); //"foo"
8 console.log(value); //true

　　3. The non-local variable with the same name.

　　　　If you want to use different nomenclature local variable to store the value of object properties, it can be used to achieve such an extension syntax. For example:

1 let node = {
2     type: "Identifier",
3     name: "foo"
4 }
5 
6 let {type:localType, name:localName} = node;
7 
8 console.log(localType); //"Identifier"
9 console.log(localName); //"foo"

　　4. nested objects deconstruction.

　　Deconstruction nested objects and similar grammatical object literal. It can be disassembled to get the desired information. For example:

 1 let node = {
 2     type: "Identifier",
 3     name: "foo",
 4     loc: {
 5         start: {
 6             line: 1,
 7             column: 1
 8         },
 9         end: {
10             line: 1,
11             column: 4
12         }
13     }
14 };
15 
16 let { loc: {start} } = node;
17 
18 console.log(start.line); //1
19 console.log(start.column); // 1

 

Section 3 array deconstruction

　　1. Data objects deconstruction deconstruction and the like , see an example:

1 let colors = [ "red", "green", "blue" ];
2 let [firstColor, secondColor] = colors;
3 console.log(firstColor); //"red"
4 console.log(secondColor); // "green"

　　2. destructuring assignment . For example:

1 let colors = [ "red", "green", "blue" ],
2     firstColor = "black";
3     secondColor = "purple";
4 
5 let [firstColor, secondColor] = colors;
6 
7 console.log( firstColor ); //"red"

　　3. Set the default values.

　　That is, you can add default values ​​for properties that do not exist. For example:

1 let colors = ["red"];
2 let [firstColor, secondColor="green"] = colors;
3 
4 console.log(firstColor); //"red"
5 console.log(secondColor); //"green"

　　4. nested class data deconstruction.

　　Deconstruction and nested objects such as syntax, insert another array pattern in the original array mode. For example:

1 let colors = [ "red", ["green", "lightgreen"], "blue" ];
2 let [firstColor, [secondColor]] = colors;
3 
4 console.log(firstColor); //"red"
5 console.log(secondColor); //"green"

　　5. uncertain elements.

　　In the array, through a particular variable "..." syntax, assign the array element to rest. For example:

1 let colors = [ "red", "green", "blue" ]；
2 let [firstColor, ...restColors] = colors;
3 
4 console.log(firstColor); //"red"
5 console.log(restColors.length); //2
6 console.log(restColors[0]); //"green"
7 console.log(restColors[1]); //"blue"

 

Section 4 mixed deconstruction

　　The method of mixing the deconstruction deconstruction objects and arrays deconstruction. The method generally similar to the above objects, and an array of deconstruction deconstruction. For more information, see the book P.101.

 

Section 5 deconstruction parameters

　　1 . Deconstruction parameters, i.e. parameters, in particular object data type parameter deconstructed into a more readable code. For example:

　　There is a function of the beginning, as follows:

. 1  function the setCookie (name, value, Options) {
 2      Options Options || = {};
 . 3  
. 4      the let Secure = options.secure,
 . 5          path = options.path,
 . 6          Domain = options.domain,
 . 7          Expires = options.expires
 . 8  
9      // set the cookie codes 
10  }
 . 11  
12 is  // third parameter is mapped to the options 
13 is the setCookie ( "type", "JS" , {
 14      Secure: to true ,
 15      Expires: 60000
 16 });

　　If we deconstruct the parameters, you can write:

1 function setCookie(name, value, {secure, path, domain, expires}) {
2     //设置cookie代码
3 }
4 setCookie("type", "js", {
5     secure: true,
6     expires: 60000
7 });

　　But in this case, if you do not pass parameters will complain, so we can be optimized for:

1 function setCookie( name, value, {secure, path, domain, expires} = {} ) {
2     //设置cookie代码
3 }
4 setCookie("type", "js", {
5     secure: true,
6     expires: 60000
7 });

　　Thus, even if does not pass parameters, then there is a default empty object for use, the program will not throw an error.

 

　　2. In order to prevent deconstruction parameter error, can also be used to assign the default parameter values deconstruction practices, but where the actual application process may not be used too much. Interested readers can refer to the book P.104, P105.

 

(End of this section)