var和const和let的區別

簡述：

1.前端的變量申明,能夠用到var,ES6的const(衡量)/let(變量) 

2.在ES5用的都是var,到ES6以後,也就是2015年開始出現const/let.

var 不會報錯，有聲明提高，會顯示undefined（一個變量未初始化）；

function show(falg){
 //	    var a;//**聲明提高，初始化爲undefined,函數體（做用域）的最前排
     	console.log(a);//undefined
    	if(falg){
    		var a ="111";
    		console.log(a);	//111
    	}else{
    		console.log(a);//undefined
    	}
    	
    }
    show(true);
    show(false);
    var a = "123";
    var a = "456";//覆蓋，同名，let不會，要報錯Identifier 'a' has already been declared(已被聲明)。
    console.log(a);

const/let訪問範圍

function show(falg){                          // JavaScript引擎在掃描代碼發現變量               TDZ暫時性死區(有let申明)
  	console.log(a);//報錯: a is not defined              //a                              放入（未申明引用報錯）       
    	if(falg){//在第134行和第137行的大括號之間，
    		let a="111";
    		console.log(a);	// 111                      //a                               移除（已申明引用移除）
    	}else{
    		console.log(a);//報錯: a is not defined     //a                               放入（未申明引用報錯）
    	}
    	
    }
    show(true);
    show(false);

const/let不一樣做用於可同名，同一做用於不可同名；

function show(falg){
    		let a="222";
//    		let a="333";//Identifier 'a' has already been declared
  	console.log(a);// 222
    	if(falg){
    		let a="111";
    		console.log(a);	// 111
    	}else{
    		console.log(a);// a is not defined
    	}
    	
    }
    show(true);
//    show(false);

二.var 和 const/let 的區別

1.const/let：聲明變量，聲明的是局部變量

用途及區別：ES6新增了let命令，用來聲明變量，相似於var ，可是聲明的變量只在let所在的代碼塊的內部有效

let不存在變量提高，這個要注意喲

• 暫時性的死區(Temporal Dead Zone)，簡寫爲 TDZ：

只要塊級做用域裏存在let命令，它所聲明的變量就綁定這個區域，不在受外部的影響

let 和 const 聲明的變量不會被提高到做用域頂部，若是在聲明以前訪問這些變量，會致使報錯：

console.log(typeof value); // Uncaught ReferenceError: value is not defined
let value = 1;

複製代碼這是由於 JavaScript 引擎在掃描代碼發現變量聲明時，要麼將它們提高到做用域頂部(遇到 var 聲明)，要麼將聲明放在 TDZ 中(遇到 let 和 const 聲明)。訪問 TDZ 中的變量會觸發運行時錯誤。只有執行過變量聲明語句後，變量纔會從 TDZ 中移出，而後方可訪問。

• 不容許重複聲明

內部的數據有了let聲明過以後不容許重複聲明

for循環的處理

var funcs = [];
for (var i = 0; i < 3; i++) {
//for (let i = 0; i < 3; i++) {
	console.log(i);
  funcs[i] = (function(i){
      return function() {
          console.log(i);
      }
  }(i))
}
funcs[0](); // let輸出的結果是0；var輸出的結果是3

---

for (var i = 0; i < 3; i++) {
     var c = "123";//一次123
//   let c = "123";//三次123

     console.log(c);
}

使用let

var funcs = [];
for (let i = 0; i < 3; i++) {
  funcs[i] = function () {
      console.log(i);
  };
}
funcs[0](); // 0
funcs[1](); // 1
funcs[2](); // 2

分解：

(let i = 0) {
  funcs[0] = function() {
      console.log(i)
  };
}

(let i = 1) {
  funcs[1] = function() {
      console.log(i)
  };
}

(let i = 2) {
  funcs[2] = function() {
      console.log(i)
  };
};

let value = 1;
console.log(window.value); //undefined

再比較const和let的區別:

1.const定義衡量: 不能夠從新賦值,可是能夠給對象的屬相從新賦值.

const data = {
  value: 1
}
// 沒有問題
data.value = 2;
data.num = 3;
 報錯
data = {}; // X   Uncaught TypeError: Assignment to constant variable.（分配恆定的變量）

優勢:const 意味着該標識符不能被從新賦值。 讓它在代碼中的使用盡量的清晰。使用一個變量對應表明一個東西.

2.let 在定義後可能還會修改,可變,愈來愈多的被使用在循環和算法上面。

ES6兼容性問題?bable轉義成ES5,用例:

須要安裝 ES5的bable: npm install babel-core@5

C:\Users\Administrator\node_modules\babel-core

目錄裏面咱們找到babel的瀏覽器版本browser.js(未壓縮版)和browser.min.js(壓縮版) 咱們把browser.min.js引入（文件位置的路徑要確保正確）。而且設置第二個script標籤的type爲」text/babel」。

babel轉義具體實現：

if (false) {
  let a = 1;
//  var a=1;//若是直接將let改爲var，直接編譯成 var，打印的結果確定是 undefined
  var _a = 1;//然而 Babel 很聰明，它編譯成了內層變量名不一致
}
console.log(a); // Uncaught ReferenceError: a is not defined

// const 的修改值時報錯，以及重複聲明報錯怎麼實現的呢？
// 其實就是在編譯的時候直接給你報錯