《ECMAScript 6 入門》【一、let、const命令】

前言：

我們在ES5都使用var來聲明常量跟變量，ES6使用了最新的語法，使用let跟const分別聲明。

一、let命令：

let命令是用于聲明變量

塊級作用域

1、

    {
      let a = 10;
      var b = 10;
    }
    console.log(a); // ReferenceError: a is not defined.
    console.log(b); // 10

a未定義，是因為let只是在它所在的塊作用域執(zhí)行。{}為塊作用域。而b沒有影響。

2、

   for (let i = 0; i < 3; i++) { 
        let i='abc' ; 
        console.log(i); 
    }

會打印三個abc,因為循環(huán)條件上i是使用let定義的，循環(huán)體內(nèi)的i也是let定義的。這兩處的i處在各自獨立的作用域里，互不影響。

   for (var i = 0; i < 3; i++) { 
        var i='abc' ; 
        console.log(i); 
    }

而這個用var聲明的只打印一次abc，是因為這個循環(huán)體里的i跟外部的i是存在于同一個作用域，相當于在全局定義了一次i。

   for (var  i = 0; i < 3; i++) { 
        let i='abc' ; 
        console.log(i); 
    }

這里我在內(nèi)部使用let聲明的，雖然外部是用var聲明的，但是這樣也把兩個變量劃分成了兩個不同的作用域。同樣打印出三次abc。
3、

var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 10

我們先來看這個，這個大家肯定很熟悉，a[6]輸出的是10。是因為變量i是var命令聲明的，在全局范圍內(nèi)都有效。a[i]中的i和console.log(i)都是指向全局變量的i。所以a[6]輸出的是循環(huán)后最后一輪的值。不管a[i]中i取得什么值，都會輸出的是10，

var a = [];
var i;
for (i = 0; i < 10; i++) { 
    a[i]=function () { console.log(i); }; 
} 
a[6](); // 10

就相當于在上面的代碼，在全局聲明一個i，

var a = [];
var j;
for (i = 0; i < 10; i++) { 
    a[j]=function () { console.log(i); }; 
} 
a[j](); // 10

一定要記住調(diào)用的一定是具體的值或者變量。

var a = [];
var i;
for (i = 0; i < 10; i++) { 
    a[i]=function () { console.log(i); }; 
} 
a[i](); // Uncaught TypeError: a[i] is not a function

比如像這樣，就報錯了。

不存在變量提升

1、

 console.log(i); // undefined
 var i = 0

當使用var聲明的話，是存在變量提升的。即變量在定義之前可以使用，只是沒有定義罷了。

 console.log(i); // Uncaught ReferenceError: Cannot access 'i' before initialization
 let i = 0

當使用let聲明的時候，不存在變量提升。打印會出現(xiàn)錯誤，這樣非常好，避免了我們犯下不必要的錯誤。

暫時性死區(qū)

1、
我們來結(jié)合塊級作用域與不允許變量提升提出了暫時性死區(qū)的概念。

if (true) {
i = 'i'; // ReferenceError
let i;
}

{}中包裹的就是塊級作用域，而i在沒有let聲明之前不能賦值，在沒有let聲明之前這塊區(qū)域被叫做暫時性死區(qū)。
這里let有暫時性死區(qū)，const同樣有。

不允許重復聲明

1、

function a() {
    var i = 0;
    var i = 1;
}

我們在函數(shù)作用域內(nèi)可以重復聲明變量，不報錯。

function a() {
    var i = 0;
    let i = 1;   // Uncaught SyntaxError: Identifier 'i' has already been declared
}

但是我們用let聲明的時候就會報錯。不論let在var之后還是之前都會報錯。

2、

function a(b) {
    var b = 1;
    console.log(b);
}
a(2) // 1

我們之前使用var我們可以重復定義參數(shù)。

function a(b) {
    let b = 1;
    console.log(b);
}
a(2) // Uncaught SyntaxError: Identifier 'b' has already been declared

但是我們使用let重新定義參數(shù)的時候就不行哦！

二、const命令

const聲明一個只讀的常量。一旦聲明，常量的值就不能改變。
1、

const a = '我是常量，不能再定義我嘍'
a = 1; // Uncaught TypeError: Assignment to constant variable.

這里我們看到我們再定義的時候就會報錯。

2、

const a = {};
a.name='maomin';
a.age='23';
console.log(a); // {name: "maomin", age: "23"}

上面的代碼可以執(zhí)行。

 const a = {};
 a.name='maomin';
 a.age='23';
 console.log(a); // {name: "maomin", age: "23"}
 a={} // Uncaught TypeError: Assignment to constant variable.

但是只要再重新定義的話，就會報錯，所以在使用const聲明常量的時候一定要注意這點。

const a = [];
a.push('1');  
console.log(a); // ['1']
a.length = 0; 
console.log(a); // []
a = ['2']; // index.html:18 Uncaught TypeError: Assignment to constant variable.

同樣數(shù)組也是如此。

結(jié)語：

下面我總結(jié)下：






































作者：Vam的金豆之路

主要領(lǐng)域：前端開發(fā)

我的微信：maomin9761

微信公眾號：前端歷劫之路