[js高手之路] es6系列教程 - 解構詳解

解構通俗點說，就是經過一種特定格式，快捷的讀取對象/數組中的數據的方法,

es6以前，咱們經過對象名稱[鍵] 讀取數據

1         var User = {
2             'name' : 'ghostwu',
3             'age' : 22            
4         };
5         console.log( User.name, User.age ); //ghostwu, 22

1         var User = {
2             'name' : 'ghostwu',
3             'age' : 22            
4         };
5         let { name, age } = User;
6         console.log( name, age ); //ghostwu 22

上面第5行就是一個簡單的數據解構過程:

1,右邊若是是對象,左邊解構的語法也要用對象格式, 若是解構的數據是數組，左邊就用數組格式

2,name, age是局部變量

3,解構出來的變量 必定要是 對象中可以查找到的屬性名

4,若是解構出來的屬性在對象中查找不到，值爲undefined

1         var User = {
2             'name' : 'ghostwu',
3             'age' : 22            
4         };
5         let { name1, age1 } = User;
6         console.log( name1, age1 ); //undefined, undefined

解構出來的變量雖然是跟屬性名稱相同，可是他再也不是屬性，而是外部的變量，這個變量名也能夠被修改， 不必定要跟屬性同名

1         var User = {
2             'name' : 'ghostwu',
3             'age' : 22            
4         };
5         //解構出來的變量能夠更更名稱
6         let { name : name1, age : age1 } = User;
7         // console.log( name, age ); //報錯, 由於name和age的名稱已經被改了
8         console.log( name1, age1 ); //ghost, 22

更改解構出來的變量名稱的語法：  舊的名稱 : 新的名稱

1         var User = {
2             'name': 'ghostwu',
3             'age': 22
4         };
5 
6         let { name, age, sex } = User;
7         // 解構出來的屬性，若是不存在，默認值爲undefined
8         console.log( name, age, sex ); //ghost 22 undefined

1        var User = {
2             'name': 'ghostwu',
3             'age': 22
4         };
5         // 解構出來的值 能夠賦值 一個默認的值
6         let { name, age, sex = 'man' } = User;
7         console.log( name, age, sex );

上述實例，爲sex賦值了一個默認值 'man';

解構數組

1         let arr = [ 10, 20, 30, 40 ];
2 
3         // 數組用[]解構
4         let [ one, two ] = arr;
5         console.log( one, two ); //10 20

1 let arr = [ 10, 20, 30, 40 ];
2 // 對於不須要解構的值，能夠用逗號佔位
3 let [ , , , a ] = arr; 
4 console.log( a ); //40

解構嵌套數組

1         let arr = [ 10, [ 20, 30 ], 40 ];
2         console.log( arr[1][1] ); //30
3         let [ one, two, three, four ] = arr;
4         console.log( one, two, three, four ); //10 [20, 30] 40 undefined
5         [ one, [ two, three ], four ] = arr; //前面不要let,不然會報重定義錯誤
6         console.log( one, two, three, four ); //10 20 30 40

在之前，咱們交換變量，通常的作法是藉助第三個變量， 而如今有了解構以後，咱們能夠直接交換

1         /*
2             交換兩個變量的值
3         */
4         let a = 10, b = 20;
5         [ a, b ] = [ b, a ]; //前面不要加let,不然會報 重定義錯誤
6         console.log( a, b ); //20, 10

利用解構出來的值，修改局部變量的值

 1         let User = {
 2             name : 'ghostwu',
 3             age : 22
 4         },
 5         name = 'zhangsan',
 6         age = 30;
 7 
 8         //小括號： 把下面這個 轉成解構表達式, 若是不用小括號會報錯
 9         ({ name, age } = User);
10         console.log( name, age ); //ghostwu, 22

1         let name = 'zhangsan', age = 40;
2         ({ name, age } = {
3             name,
4             age
5         });
6 
7         console.log( name, age ); //zhangsan 40

上述實例，是一個對象賦值的簡寫語法，你還記得嗎？

1         let User = {
2             name : 'ghostwu',
3             age : 22
4         };
5 
6         //重命名局部變量，mySex:賦初始值
7         let { name : myName, age : myAge, sex : mySex = 'man' } = User;
8         console.log( myName, myAge, mySex ); //ghostwu 22 man

解構表達式傳參

 1         let User = {
 2             name : 'ghostwu',
 3             age : 22
 4         };
 5 
 6         function show( obj ){
 7             console.log( obj ); //obj其實就是User對象
 8             console.log( obj === User ); //true
 9             //函數中能夠訪問在參數中解構出來的變量
10             console.log( name, age ); //ghostwu, 22
11         } 
12         show( { name, age } = User ); //表達式傳值，整個表達式的值 取決於右邊，因此把User傳給了obj
13         console.log( name, age ); //ghostwu, 22

嵌套對象的解構

 1         let User = {
 2             name : 'ghostwu',
 3             age : 22,
 4             class : {
 5                 group1 : {
 6                     one : '王超',
 7                     two : '馬漢'
 8                 },
 9                 group2 : {
10                     one : '張龍',
11                     two : '趙虎'
12                 }
13             }
14         };
15         //在User對象解構class, 在class中解構group1
16         let { class : { group1 } } = User;
17         console.log( group1.one ); //王超
18         console.log( group1.two ); //馬漢
19 
20         //在User對象解構class, 在class中解構group1, 在group1中解構one, two
21         ({ class : { group1 : { one, two } } } = User);
22         console.log( one, two ); //王超, 馬漢
23 
24         //重命名group1 爲 diyizu
25         ({ class : { group1 : diyizu } } = User);
26         console.log( diyizu.one ); //王超
27         console.log( diyizu.two ); //馬漢
28 
29         //three 賦默認值
30         ({ class : { group1 : { one, two, three = '展昭' } } } = User);
31         console.log( one, two, three );//王超,馬漢,展昭

解構中的不定參數(...)

        let arr = [ 10, 20, 30 ];
        let [ one, ...others ] = arr; 
        console.log( others.length ); //2
        console.log( one ); //10
        console.log( others[0] ); //20
        console.log( others[1] ); //30

1         //es6以前，用concat複製數組
2         let arr = [ 10, 20, 30 ];
3         let newArr = arr.concat();
4         console.log( newArr );

1         //用解構與不定參數結合 複製 數組
2         let arr = [ 10, 20, 30 ];
3         let [ ...newArr ] = arr;
4         console.log( newArr );

最後一道綜合練習題：　對象與數組的混合解構，能看懂，基本就算掌握了

 1         let User = {
 2             name : 'ghostwu',
 3             age : 22,
 4             class : {
 5                 group1 : {
 6                     one : '王超',
 7                     two : '馬漢'
 8                 },
 9                 group2 : {
10                     one : '張龍',
11                     two : '趙虎'
12                 }
13             },
14             arr : [ 10, 20, 30 ]
15         };
16 
17         // let { name, age, class : { group1 }, arr } = User;
18         let { name, age, class : { group1, group2 }, arr : [ one, two, three ] } = User;
19         // console.log( name, age, group1.one, group1.two, arr );
20         console.log( name, age, group1.one, group1.two, group2.one, group2.two, one, two, three );