ES6語法學習筆記之let const 解構賦值

梭梭醬加油鴨發表於2019-01-23
筆記賦值

let

let a=12;
function fn(){
    alert(a);//TDZ開始，暫時性死區
    let a=5;//TDZ結束
}
fn();
複製程式碼

let宣告的變數不會預解析或者變數提升，所以現在的結果是報錯，a沒有定義。

如果把alert(a)下移一行，得出的結果則是5。

注意：let宣告的變數一定要先定義再使用！且不能重複定義。

在for迴圈中，裡面是父級作用域，

for(let i=0;i<10;i++){
    console.log(i);//依次輸出從0到9
}
alert(i);//報錯，i未定義，因為不在i的作用域
複製程式碼
for(let i=0;i<3;i++){
    let i='abc';//這裡和括號裡是不同的作用域，因此這裡再次給i賦值，不算重複定義。
    console.log(i);//輸出3次abc
}
複製程式碼

const

const a;
a=12;
console.log(a);
複製程式碼

const定義完變數，必須有值，不能後賦值.

const a=12;
function show(){
    console.log(a);//TDZ開始，暫時性死區
    const a = 5;//TDZ結束
}
show();
複製程式碼

解構賦值

// let arr=[12,5,6];
let [a,b,c]=[12,5,6];

//console.log(arr[0],arr[1],arr[2]);
console.log(a,b,c);
複製程式碼
let json={
    name:"suosuo",
    age:"16",
    job:"machu"
};

let {name,age,job} = json;
console.log(name,age,job);
複製程式碼

如上程式碼還有如下寫法：

let json={
    name:"suosuo",
    age:"16",
    job:"machu"
};

let {name,age,job:a} = json;//給job換一個說法，並不是把"machu"換成a
console.log(name,age,a);
複製程式碼

解構時，可以給空資料預設值，但要注意，null表示空物件，也算是有值，不能給定預設值。

let [a,b,c="暫無資料"]=["aa","bb"];//可以給空資料給定預設值
console.log(a,b,c);
複製程式碼
let [a,b,c="暫無資料"]=["aa","bb"，null];//null表示有值，所以這裡不能給預設值
console.log(a,b,c);
複製程式碼
let {a,b}={a:'apple',b:'banana'};
console.log(a,b);
複製程式碼
let a;
{a}={a:'apple',b:'banana'};
console.log(a);
複製程式碼

如上程式碼會報錯，但如果將第二行改為如下就沒問題：

let a;
({a}={a:'apple',b:'banana'});
console.log(a);
複製程式碼

如何互換兩個let變數的值？

let a=12;
let b=5;
[a,b]=[b,a];
console.log(a,b);
複製程式碼

解構賦值還可用函式返回值：

function getPos(){
    //xxxxx
    return{
        left:10,
        top:20
    }
}
let{left,top:t}=getPos();
console.log(left,t);
複製程式碼

解構賦值可以用於函式傳參：

function show({a,b}){
    console.log(a,b);
}
show({
a:1,
b:2})
複製程式碼

如果用let宣告時未賦值，解構賦值時外邊要加（）。

let a;
let b;
({a,b}={a:'apple',b:'banana'});
console.log(a,b);
複製程式碼

相關文章