es6 -- 基本用法
一、let 命令 -基本用法
1、塊及作用域
var d = 1;
if(true){
var d = 4; // 6之前的js作用域有 1、全域性作用域 2、函式級作用域 3、eval作用域
}
console.log(d) -> 4 d被覆蓋
let c = 2;
if (true) {
let c = 7;
}
console.log(c) -> 2
上面的程式碼中 分別用 var 和 let 聲明瞭兩個變數 。var 宣告的即使在作用域的也可以覆蓋之前宣告 。 let 宣告的變數不會被覆蓋,這表明 let 宣告的變數在塊級作用域外無效。
// for 迴圈的計數器就很適合使用 let 命令。
for (let i = 0; i < 10; i++){
// .....
}
console.log(i)
//ReferenceError: i is not defined
上面程式碼中 計數器 i 只在 for 迴圈體內部有效,在迴圈體外引用就回報錯。 如果用 var 宣告變數 i 的話,那麼 i 在全域性作用域內全都有效,所以全域性只有一個變數 i。
2、不存在變數提升
console.log(a) -> undefined var a = 9; console.log(b) -> ReferenceError let b = 10;
在上面程式碼中, 表明了 var 存在變數提升 let 不存在變數提升(也稱 預解釋)。"變數提升"的現象,既變數可以在宣告之前使用,值為 undefined 。一般邏輯上,變數應該在宣告語句之後才可以被使用。而 let 糾正了這一現象,它所宣告的變數一定要在聲明後才可以使用否則報錯。
3、暫時性死區
var a = 124;
if(true){
a = 'abc'; -> ReferenceError
let a
}
在上面的程式碼中,存在全域性變數 a 但在塊級作用域內 let 又聲明瞭一個區域性變數 a ,導致後者繫結這個塊級作用域,所以在let宣告變數前,對 a 賦值會報錯。
也就是說,在區塊中有 let 和 const 命令 ,則這個區塊對當前宣告的變數,形成一個封閉作用域。只要在宣告前就是用這些變數,就回報錯。
總之在程式碼塊內,使用 let 宣告變數之前,該變數都是不可使用的。這在語法上成為 "暫時性死區"(temporal dead zone) 簡稱TDZ。
4、不允許重複宣告
function () {
let a = 3;
let a = 5; // ->報錯
}
5、結構賦值
let cat = 'maomao';
let dog = 'gougou';
let zoo = {cat, dog}
console.log(zoo) // -> {cat: "maomao", dog: "gougou"}
6、 拼接字串
var string = document.getElementById("string");
var as = "3";
var ex = "4";
string.innerHTML = (`
There are <b>${as}</b>items
in your basket,<em>${ex}</em>
are on sale;
`)
二、const 命令
1、基本用法
const 用來宣告一個只讀的常量。而且常量一旦宣告,常量的值就不能被改變。
const a = 3.14;
console.log(a); //-> 3.14
a = 4.21;
console.log(a) //-> TypeError: Assignment to constant variable.
在上面程式碼中 改變常量 a 的值會報錯。
const foo ; //-> SyntaxError: Missing initializer in const declaration
在上面程式碼中 const 只宣告不賦值會報錯。這就意味著,const 一旦宣告常量就立即初始化,不能以後在賦值。
const 同 let 一樣不存在常量提升,存在暫時性死區。
2、本質
實際上const保證的並不是常量的值不可被改動,而是變數指向的那個記憶體地址不能改動。常量指向的記憶體地址只是一個指標,const只能保證這個指標是固定的,至於它的資料結構是否可變就不一定了。
const foo = {};
foo.value = 'hello'; // 給 foo 新增一個屬性可以實現
console.log(foo.value) // -> hello
foo = {}; //把 foo 指向另一個物件 就會報錯
在上面程式碼中 常量 foo 存貯的是一個地址,這個地址是不可變 ,所以報錯。但是物件本身是可以變得,所以我們可以為其新增新屬性。
再來看一個數組
const arr = [];
arr.push('1');
console.log(arr.length); // -> 1
arr = ['die'] // ->將arr重新賦值 報錯
在上面程式碼中 arr 這個陣列本身是可寫的,但是將另一個賦給 arr 就會報錯。
因此 當我們宣告常量遇到陣列、物件時要小心。
ps: 將物件凍結方法 Object.feeeze => const foo = Object.feeeze ( {} );
end: 本人接觸es6 有段時間了,最近又在看阮一峰es6 所以就當一個小結好啦。 有問題,多多指教。