一、數組的解構賦值

數組解構賦值，索引很重要，即順序很重要

1、解構[1,2,3]

//把1,2,3分別賦值給a,b,c
        var [a,b,c]=[1,2,3];
        console.log(a+‘ | ‘+b+‘ | ‘+c);//1 | 2 | 3

2、更復雜，更強大的賦值,解構[1,[2,3]]

//把1,2,3分別賦值給a,b,c
        var [a,[b,c]]=[1,[2,3]];
        console.log(a+‘ | ‘+b+‘ | ‘+c);//1 | 2 | 3

3、跳著賦值

//把1賦值給a,3賦值給c
 

        var [a,,c]=[1,2,3];
        console.log(a+‘ | ‘+c);  //1 | 3

4、省略號

//把1賦值給a;2,3賦值給b
        var [a,...b]=[1,2,3];
        console.log(a+‘ | ‘+b);//1 | 2,3

5、指定默認值

//給c和d設置默認值為default
        var [a,b,c=‘default‘,d=‘default‘]=[1,2,3];
        console.log(a+‘ | ‘+b+‘ | ‘+c+‘ | ‘+d);//
 
1 | 2 | 3 | default

6、解構時未賦值的變量值為undefined

//給c和d設置默認值為default
        var [a,b,c]=[1,2];
        console.log(a+‘ | ‘+b+‘ | ‘+c);//1 | 2 | undefined

優點：代碼簡單，清晰

二、對象的解構賦值

對象解構賦值，順序不再重要，按名稱解構

1、把a和b提取出來變成變量

let obj={
            a:1,
            b:2
        }
        let {a,b}=obj;
        console.log(a
 
+" | "+b);//1 | 2

2、重命名，把obj.a重命名為A

let obj={
            a:1,
            b:2
        }
        let {a:A,b}=obj;
        console.log(A+" | "+b);//1 | 2
        console.log(a);//Uncaught ReferenceError: a is not defined

3、let聲明已經定義的變量會報錯

let obj={
            a:1,
            b:2
        }
        let a;//a已經定義了，後面再定義就會報錯
        let {a,b}=obj;//Uncaught SyntaxError: Identifier ‘a‘ has already been declared
        console.log(a+" | "+b);

4、如果給已經定義的變量，重新解構賦值？

如果只是如下賦值：會報錯，js解析器遇到{}會當成代碼塊，所以解構賦值時{不能出現在一行的最前面。

{a,b}=obj;//Uncaught SyntaxError: Unexpected token =

用小括號括起來

let obj={
            a:1,
            b:2
        }
        let a=0;//a已經定義
        console.log(a);
        ({a,b}=obj);//用小括號括起來告訴js解析器這是條語句
        console.log(a+" | "+b);//1 | 2

5、更復雜的情況

let obj={
            arr:[
                ‘lxy‘,
                {
                    a:1
                }
            ]
        }
        //復雜解構
        let {arr:[name,{a}]}=obj;

        console.log(name+" | "+a);//lxy | 1

6、對象解構默認值

let {a=1,b=2}={a:10};
        console.log(a+" | "+b);//10 | 2

7、a重命名之後指定默認值

let {a:A=1,b=2}={a:10};
        console.log(A+" | "+b);//10 | 2

8、項目中應用

 //假設res為一個請求返回的結果
        let res={
            status:200,
            id:12,
            data:[{name:‘Bob‘},{name:‘Shuang Dan‘}]
        }

        //es6一行搞定
        let {status,id,data}=res;
        //es5
        var status=res.status;
        var id=res.id;
        var data=res.data;

9、解構函數，即解構對象的方法

比如Math對象裏面有方法

let {floor,pow}=Math;//把Math裏的方法提取出來變成一個變量
        let a=1.1;
        console.log(floor(a));//1
        console.log(pow(2,3));//8

三、其他

1、用解構的方式獲取到字符串的長度

【想不到】

var {length}=‘lxy‘;
        console.log(length);//3

2、把字符串解構成數組

var [a,b,c]=‘lxy‘;
        console.log(a+"|"+b+"|"+c);//l|x|y

3、對函數的傳參進行解構

//數組形式
 var arr=[1,2];
        function fun([a,b]){
            console.log("a:"+a);
            console.log("b:"+b);
        }
        fun(arr);
        //a:1
        //b:2

//解構對象
var obj={a:1,b:2};
        function fun({a,b}){
            console.log("a:"+a);
            console.log("b:"+b);
        }
        fun(obj);
        //a:1
        //b:2

4、簡化默認值

a=a||10;

var obj={b:2};
        function fun({a=10,b}){
            //a=a||10; //es5默認值寫法
            console.log("a:"+a);
            console.log("b:"+b);
        }
        fun(obj);
        //a:10
        //b:2

本文作者starof,因知識本身在變化，作者也在不斷學習成長，文章內容也不定時更新，為避免誤導讀者，方便追根溯源，請諸位轉載註明出處：http://www.cnblogs.com/starof/p/6919627.html有問題歡迎與我討論，共同進步。

es6 變量的解構賦值