ES6 let和const命令

Zingiber發表於2019-08-31

1.1 let和const

1.1.1 let基本用法

用法類似var，表示常量，只在let命令所在程式碼塊內有效。

1.1.2 const基本用法

const宣告只讀常量。一旦宣告常量的志不能變。一旦宣告，必須立即賦初始值，不能留到以後賦值。

const foo = {};

// 為 foo 新增一個屬性，可以成功
foo.prop = 123;
foo.prop // 123

// 將 foo 指向另一個物件，就會報錯
foo = {}; // TypeError: "foo" is read-only
複製程式碼

本質：const實際上保證的，並不是變數的值不得改動，而是變數指向的那個記憶體地址所儲存的資料不得改動。

1.2.3 let和const共同點

1.不存在變數提升

變數提升：var命令會發生“變數提升”現象，即變數可以在宣告之前使用，值為undefined

// var 的情況
console.log(foo); // 輸出undefined
var foo = 2;

// let或const 的情況
console.log(bar1); // 報錯ReferenceError
console.log(bar2)
let bar1 = 2;
const bar2 = 3;
複製程式碼

2.暫時性死區

只要塊級作用域內，存在let或const命令，它所宣告的變數就繫結這個區域，不再受外部的影響。

var tmp = 123;

if (true) {
  tmp = 'abc'; // ReferenceError
  let tmp;
}
複製程式碼

在程式碼塊內，使用let或const命令宣告變數之前，該變數都是不可用的。這在語法上，稱為“暫時性死區”。

ES6 規定暫時性死區和let、const語句不出現變數提升，主要是為了減少執行時錯誤，防止在變數宣告前就使用這個變數，從而導致意料之外的行為。

3.不允許重複宣告

let和const不允許在相同作用域內重複宣告一個變數。

// 報錯
function func() {
  let a = 10;
  var a = 1;
}

// 報錯
function func() {
  var a = 10;
  let a = 1;
}

// 報錯
function func(){
    let a = 10;
    let a = 1;
}

// 不報錯
function func(){
    var a = 10;
    var a = 1;
}
複製程式碼

1.2塊級作用域

好處

1.外層程式碼塊不受內層程式碼塊影響，外層作用域無法讀取內層作用域的變數，內層作用域可以定義外層作用域的同名變數而不受影響。

// ES6
function foo(){
    let a = 0;
    if(true){
        let a = 1;
    }
    console.log(a); // 0
}

// ES5
function foo(){
    var a = 0;
    if(true){
        var a = 1;
    }
    console.log(a); // 1
}
複製程式碼

2.迴圈變數不會洩漏為全域性變數

// ES6
let s = 'hello';
for(let i = 0;i<s.length;i++){
  console.log(s[i]);
}
console.log(i); // 報錯， i is not defined

// ES5
var s = 'hello';
for(var i = 0;i<s.length;i++){
  console.log(s[i]);
}
console.log(i); // 5
複製程式碼

3.函式執行更簡潔

// ES6
{
    ...;
}

// 匿名立即執行函式表示式
(function(){
    ...;
}());
複製程式碼

1.3ES6六種宣告變數的方法

  • var(ES5)
  • function(ES5)
  • let(ES6)
  • const(ES6)
  • import(ES6)
  • class(ES6)

摘自阮一峰

相關文章