es6 變量的解構賦值

解構賦值本質上是“模式匹配”，只要等號兩邊的模式相同，左邊的變量就會被賦予對應的值。

解構規則：只要等號右邊的值不少對象，就先將其轉為對象。

一、數組的解構賦值

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

原理：等號右邊數據結構要有Iterator接口，比如數組，Set。【update20170605】

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、省略號

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

ES6中，提供了一種將右側多余的值以數組的形式賦值給左側變量的語法—"rest模式"。

所以有省略號時變量一定是數組類型的。

注意：【update20170605】

z的值是空數組。

 let [x,y,...z]=['a'];
    console.log("x=",x);   //x= a
    console.log("y=",y);    //y= undefined
    console.log("z=",z);    //z= []

 

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

優點：代碼簡單，清晰 

7、ES6內部使用嚴格等於（===）判斷一個位置是否有值

所以，如果一個數組成員不嚴格等於undefined，默認值是不會生效的。

//數組成員不嚴格等於undefined，默認值不會生效
   var [x=1,y=2,z=3]=[undefined,"undefined",null];
   console.log("x: "+x);//x: 1
   console.log("y: "+y);//y: undefined
   console.log("x: "+z);//x: null

8、默認值是表達式，表達式惰性求值

只有在用到的時候才會求值。

function f(){
    console.log("aaa");
}
let[x=f()]=[1];//x能取到值，f根本不會執行

相當於

let x;
if([1][0]===undefined){
    f();
}else{
    x=[1][0];
}
console.log(x);

 

 

二、對象的解構賦值

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

 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、解構函數，即解構對象的方法

比如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

四、應用

1、交換變量的值

[x,y]=[y,x];簡潔易懂

let x= 1,y=2;
[x,y]=[y,x];
console.log("x: "+x);//x: 2
console.log("y: "+y);//y: 1

2、從函數返回多個值

function example(){
    return [1,2,3];
}
var [a,b,c]=example();

3、提取JSON數據

解構賦值對提取JSON數據尤其有用

 //假設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;

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有問題歡迎與我討論，共同進步。