ES6:變數的結構賦值

weixin_34249678發表於2018-04-19
變數賦值

A.陣列的結構賦值

普通賦值 VS 結構賦值
let a = 1, b = 2, c = 3;//普通
複製程式碼
let [a, b, c] = [1, 2, 3]；//結構
複製程式碼
1.結構賦值的本質: 模式的匹配
let [a, [b, [c]]] = [1, [2, [3]]]    
//a -> 1  b->2  c-> 3
複製程式碼
let [a, b] = [2]    
//a->2  b->undefined (解構失敗)
複製程式碼
let [a, b] = [4, 5, 6]    
//a->4 b->5（不完全解構）
複製程式碼
let [a] = 7    
//TypeError:7 is not iterable
複製程式碼
2.支援預設值：當右值是undefined或者為[]時取預設值
let [a = 10] = []              //a-->10
let [b = 10] = [undefined]     //b-->10
let [c = 10] = [null]          //c-->null
let [d = 10] = [20]            //d-->20
複製程式碼
3.惰性取值，先找匹配，找不到匹配才看預設值
function fn(){
     console.log('find me')
     return 2;
}
let [a = fn()]=[3]    //找到匹配值3 ，a-->3 fn() 不執行 
let [b = fn()]=[]     //find me ,b-->2
複製程式碼

B.物件的結構賦值

1.物件的賦值沒有順序
let {bar, foo} = {foo:234, bar:123};
console.log(bar, foo);    //123 234
複製程式碼
2.物件中的模式匹配
let {aa, bb} = {aa : 123, bb : 234}
//等同於
//let {aa : aa , bb : bb} = {aa : 123, bb : 234}
console.log('aa'+aa, 'bb'+bb)    //aa123 bb234
複製程式碼
{aa:aa} 可以簡寫為 {aa}
列子
let obj = {
    x : [
        'hello',
        {y :123}
    ]
}
複製程式碼
let {x : [h, {y: y}]} = obj
//x is not defined  h-->hello  y-->123
複製程式碼
let {x : [h, {y}]} = obj
//x is not defined  h-->hello  y-->123
複製程式碼
let {x : x, x : [h, {y}]} = obj
//["hello", {y :123}] "hello" 123
複製程式碼
小結：陣列的結構賦值的模式匹配是對應的位置是有序的，物件是模式依據是key值，是無序的。

C.函式引數的預設值應用

基本使用
//ES5
function Person(name, age){
    if(typeof(age) == 'undefined'){
        age = 18;
    }
    console.log(name, age)
}
//ES6
function Person(name, age = 18){
    console.log(name, age)
}
Person('kiwi');            //kiwi 18
Person('sasa', 12);        //sasa 12
Person('alice', 0);        //alice 0
Person('joe', null);       //joe null
Person('jerry', false);    //jerry false
複製程式碼
引數作用域
function test(x, x){//var x, var x
    console.log(x)
}
test(3, 4)//4
//新增預設值會自動識別為ES6，形參變為塊級作用域
function test1(x, x, z = 4){//let x, let x
    console.log(x)
}
test1(3, 4)//Error
複製程式碼
注意事項
let a = 10
function fa(b = a){
    console.log(b)
}
fa()//10

function fb(b = a){
    let a = 11;
    console.log(b);
}
fb()//10

function fc(b = c){//這裡的 c 全域性上沒有找到
    let c = 11;
    console.log(b);
}
fc()//c is not defined

function fd(c = c){//let c = c,就是相當於未定義就使用
    let c = 11;
    console.log(c);
}
fd()//SyntaxError
複製程式碼

D.其他

字串被解構為字串型別的物件，轉化為類陣列
let [a,b,c,d] = 'love'
console.log(a,b,c,d) //l o v e
複製程式碼
let {length} = '123'
//等同於let {length : length} = '123'
console.log(length) //3 （length指後面的那個）
複製程式碼
let {toString} = 123
console.log(toString == Number.prototype.toString)//true
複製程式碼
應用：資料交換
let ff = 1, gg = 2;
[ff, gg] = [gg, ff];
console.log(ff, gg);    //2 1
複製程式碼

相關文章