1. 程式人生 > >ES6解構

ES6解構

1、解構表示式傳參

let User = {
            name : 'ghostwu',
            age : 22
        };

        function show( obj ){
            console.log( obj ); //obj其實就是User物件
            console.log( obj === User ); //true
            //函式中可以訪問在引數中解構出來的變數
            console.log( name, age ); //ghostwu, 22
        } 
        show( { name, age } = User ); //表示式傳值,整個表示式的值 取決於右邊,所以把User傳給了obj
        console.log( name, age ); //ghostwu, 22

2、解構陣列

let arr = [ 10, 20, 30, 40 ];
// 陣列用[]解構
 let [ one, two ] = arr;
 console.log( one, two ); //10 20

3、解構巢狀陣列 

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

 

4、解構中的不定引數(...)

   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

 5、巢狀物件解構

let User = {
            name : 'ghostwu',
            age : 22,
            class : {
                group1 : {
                    one : '王超',
                    two : '馬漢'
                },
                group2 : {
                    one : '張龍',
                    two : '趙虎'
                }
            }
        };
        //在User物件解構class, 在class中解構group1
        let { class : { group1 } } = User;
        console.log( group1.one ); //王超
        console.log( group1.two ); //馬漢

        //在User物件解構class, 在class中解構group1, 在group1中解構one, two
        ({ class : { group1 : { one, two } } } = User);
        console.log( one, two ); //王超, 馬漢

        //重新命名group1 為 diyizu
        ({ class : { group1 : diyizu } } = User);
        console.log( diyizu.one ); //王超
        console.log( diyizu.two ); //馬漢

        //three 賦預設值
        ({ class : { group1 : { one, two, three = '展昭' } } } = User);
        console.log( one, two, three );//王超,馬漢,展昭