說在系列之前

想要在自己電腦上執行起來es6，請自行配置好環境，這裡就不說明怎麼配置了，如果有不會的可以百度，百度上很多教程
關於es6是什麼，ECMA是什麼，這種問題這裡不會去說明，想要了解的也請百度
如果對文中出現的任何問題，不管是討論，指錯等等都可以直接在下面留言
廢話不多說，開始正文

在es6之前，我們定義變數使用 命令var；

//基本都是如下這樣去定義
var x,y,z = 1;
var a = 10;
var b = 20;
var c = function(){};
var d = {};
var e = [];
//相信上面大家是沒有異議的，如果有的話，那麼建議百度一下var的使用方式;
 

//或者再看看《前端--從var入門到徹底放棄》這本書 0.0 (๑˃∀˂๑);

es6新增了兩種定義變數的命令let 和 const，首先我們來看let;

let

let 命令使用方式和var命令一模一樣，我們把上面的例子改成這樣：

let x,y,z = 1;
let a = 10;
let b = 20;
let c = function(){};
let d = {};
let e = [];

完全是成立的，沒有任何毛病，當然僅僅是使用方法一模一樣，下面分析let有哪些方面是和var有區別的；

從變數提升說起

//示例一 
let a1 = 10; 
var b1 = 10; 
console.
 
log(a1); // 10
console.log(b1); // 10

//示例二 
console.log(a2); // 報錯 : a is not defined
console.log(b2); // undefined
let a2 = 10; 
var b2 = 10; 

從上面示例看來，var 和 let 宣告的變數，在宣告之後呼叫完全沒問題，但是如果在定義之前呼叫處理的情況就不一樣了；
這是因為：var 定義出來的變數是存在變數提升的，但是let定義的變數是不存在變數提升的
所以在之前呼叫就會報錯

從作用域來說

//示例一
var a = 10;
let b = 20;
function f1(){
    var
 
 a = 11;
    let b = 21;
    console.log(a); // 11
    console.log(b); //21
}
f1();
console.log(a); // 10
console.log(b); // 20

//示例二
var a = 10;
let b = 20;
function f1(){
    console.log(a); // undefined
    console.log(b); //報錯 ：b is not defined
    var a = 11;
    let b = 20;
}
f1();
console.log(a); //10
console.log(b); //20

//示例三
if(true){
    var a = 10;
    let b = 20;
}
console.log(a) // 10;
console.log(b) // 報錯:b is not defined

for(var i=0;i<3;i++){
    var a = i;
    let b = i;
}
console.log(a) //2
console.log(b) //報錯:b is not defined

示例一：說明let定義的變數和var定義的一樣，都會在函式形成的作用域內繫結，不受函式之外定義的變數影響；同樣也影響不到外界的變數；
示例二：說明，不管是在全域性作用和區域性作用域let 都不會存在變數提升
示例三：可以看出，var的作用範圍完全取決於作用域塊的範圍(說明一下：能夠形成作用域塊的只有全域性作用域和函式作用域)，但是let的作用範圍取決於是否在{ }區塊內定義的變數，如果是隻在該區塊內定義，該區塊內呼叫有效，否在就會報錯；

從多次申明來看

//示例一
var a = 10;
var a = 11;
let b = 20;
let b = 21;

console.log(a); // 11
console.log(b); // 報錯: Identifier 'b' has already been declared

示例一說明：
var 定義出來的變數可以覆蓋前面定義的變數，而let定義出來的變數在同一區塊內也就是{}是不能重複宣告的否則就會報錯；

const

其實const與let很相似，同樣沒有變數提升，同樣以花括號{ }作為作用範圍，同樣不能多次宣告
let 和 const 的區別就在於

//示例一
let a = 10;
    a = 20;
const b = 30;
      b = 35;   
console.log(a) //20
console.log(b) //報錯: Assignment to constant variable    

從示例一可以看出來：const申明的變數，一旦申明瞭，他的值就能再改變，否則就會報錯

最後一點

全域性作用域中賦值，let 和 const的頂級物件都不是window ，而var 是（假定是在瀏覽器環境中）

var a = 10;
let b = 20;
const c = 30;
console.log(window.a) // 10
console.log(window.b) // undefined
console.log(window.c) // undefined

好了，關於變數的定義就講到這裡了，感謝大家的閱讀，還是那句話，如果大家有任何疑問或者指錯，請在下方留言；

微信搜尋關注公眾號 【大前端js】，回覆vue教程，react教程，webpack實戰等等，獲得不同的視訊教程，大量視訊教程等你來拿；

原創不易，總結不易，手打不易，轉載時請註明出處，謝謝