ES6中let、const和var的區別

1、let

一、基本用法

ES6 新增了let命令，用來聲明變量。

let 的用法相似於 var，但所聲明的變量只在 let 命令所在的代碼塊內有效（一個「{}」至關於一個代碼塊）

{
  let a = 123;
  var b = 123;
}

a // ReferenceError: a is not defined.
b // 123

let 在 for 循環中的運用：生成十個按鈕，每一個按鈕點擊時依次彈出 1-10

for(let i=1;i<=10;i++){
    var btn=document.createElement('button');
    btn.innerText=i;
    btn.onclick=function(){
        alert(i)
    };
    document.body.appendChild(btn);
}

 

二、不存在變量提高

var 命令會發生「變量提高」現象，即變量能夠在聲明以前使用，值爲 undefined。

let 命令改變了語法行爲，它所聲明的變量必定要在聲明後使用，不然報錯。

// var 命令
console.log(a); // 輸出undefined
var a = 123;

// let 命令
console.log(b); // 報錯ReferenceError
let b = 123;

上面代碼中，

變量 a 用 var 命令聲明，會發生變量提高。腳本開始運行時，變量 a 已經存在了，可是沒有值，因此會輸出 undefined。

變量 b 用 let 命令聲明，不會發生變量提高。在聲明它以前，變量 b 是不存在的，這時若是用到它，就會拋出一個錯誤。

 

三、暫時性死區

只要塊級做用域內存在 let 命令，它所聲明的變量就「綁定」（binding）這個區域，再也不受外部的影響。

var c = 123;

if (true) {
  c = 'abc'; // 報錯ReferenceError
  let c;
}

上面代碼中，存在全局變量 c，可是塊級做用域內 let 又聲明瞭一個局部變量c，致使後者綁定這個塊級做用域，因此在 let 聲明變量前，對 c 賦值會報錯。

ES6 明確規定：若是區塊中存在 let 和 const 命令，這個區塊對這些命令聲明的變量，從一開始就造成了封閉做用域。凡是在聲明以前就使用這些變量，就會報錯。

因此在代碼塊內，使用 let 命令聲明變量以前，該變量都是不可用的。這在語法上，稱爲「暫時性死區」（temporal dead zone，簡稱 TDZ）。

 

四、不容許重複聲明

let 不容許在相同做用域內，重複聲明同一個變量。

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

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

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

所以，不能在函數內部從新聲明參數。

function func(b) {
  let b;
}
func() // 報錯

function func(b) {
  {
    let b;
  }
}
func() // 不報錯

 

2、const

一、基本用法

const 命令用來聲明一個只讀的常量（除了引用類型，一旦聲明該常量的值就不能改變）

const p = 3.14;
p // 3.14

p = 3;
// 報錯TypeError: Assignment to constant variable.

const 一旦聲明就必須當即初始化，不能留到之後賦值。

const a;
// 報錯SyntaxError: Missing initializer in const declaration

const 的做用域與 let 命令相同：只在當前所在的塊級做用域內有效。

if (true) {
  const b = 123;
}

b // 報錯Uncaught ReferenceError: MAX is not defined

 

二、不存在變量提高、暫時性死區

const 命令聲明的常量也是不提高，一樣存在暫時性死區，只能在聲明的位置後面使用。

if (true) {
  console.log(c); // 報錯ReferenceError
  const c = 5;
}

 

三、不容許重複聲明

const 聲明的常量，也與 let 同樣不可重複聲明。

// 報錯
function func() {
  const a = 1;
  var a = 2;
}

// 報錯
function func() {
  const a = 1;
  const a = 2;
}

// 報錯
function func() {
  var a = 1;
  const a = 2;
}

四、本質

const 並不是變量的值不能改，而是變量指向的那個內存地址所保存的數據不能改動。

對於簡單類型的數據（數值、字符串、布爾值），值就保存在變量指向的那個內存地址，所以等同於常量。

但對於複合類型的數據（主要是對象和數組），變量指向的內存地址，保存的只是一個指向實際數據的指針，const 只能保證這個指針是固定的，至於它指向的數據結構是否是可變的，就徹底不能控制了。

const a = {};

// 爲 a 添加一個屬性，能夠成功
a.num = 123;
a.num // 123

// 將 a 指向另外一個對象，就會報錯
a = {}; // TypeError: "foo" is read-only

下面是另外一個例子。

const b = [];
b.push('Hello'); // 可執行
b.length = 0;    // 可執行
b = ['123'];     // 報錯

若是想將對象凍結，應該使用 Object.freeze 方法。

const c = { num: '123' };
Object.freeze(c);      // 凍結
c.num = '321';
console.log(c.num);    // 123

上面代碼中，常量c指向一個凍結的對象，因此改變屬性不起做用，嚴格模式時還會報錯。

除了將對象自己凍結，對象的屬性也應該凍結。下面是一個將對象完全凍結的函數。

var constantize = (obj) => {
  Object.freeze(obj);
  Object.keys(obj).forEach( (key, i) => {
    if ( typeof obj[key] === 'object' ) {
      constantize( obj[key] );
    }
  });
};

  

3、let、const和var的區別總結

var	let	const
在當前做用域內有效	只在當前塊級做用域內有效	只在當前塊級做用域內有效
能重複聲明	不能重複聲明	不能重複聲明
存在變量提高	暫時性死區	暫時性死區
聲明變量時可不賦值	聲明變量時可不賦值	聲明常量時需賦值 （常量除非爲引用類型，不然不可修改）