let var const
var關鍵字
var關鍵字的用法
js中宣告變數的關鍵字，
var num = 1;
如果在函式作用域中宣告，為區域變數；如果在全域中宣告，則為全域變數，
num = 2;
這種寫法實際上是賦值，如果在函式作用域中賦值就會去找當前函式作用域中的num，如果當前作用域中沒有這個變數就會接著去上一個作用域中尋找，直到找到全域，在全域中如果也并沒有宣告過這個變數，就會給全域物件window強行添加一個num屬性進行賦值，
var關鍵字的缺點
1） var會被宣告提前，會打亂程式原本的執行順序（變數提升傳送門）
2） 在ES6之前，js中沒有塊級作用域，代碼塊內的變數，極有可能影響到外部的變數，
let關鍵字
ES6中新增的專門代替var用來宣告變數的關鍵詞，
優點：
-
不會宣告提前
-
將js中的程式塊變成了一級作用域
原理：
-
從let位置開始，到當前代碼塊底部，自動建立了匿名函式自調
-
let在底層還悄悄的修改了內部的變數名: 比如:
let t->let _t
注意：
-
相同作用域中不能
let兩個同名的變數 -
let之前不允許提前使用該同名變數
let生成匿名函式自調是從let位置才開始包裹，let之前的代碼不屬于匿名函式自調內部，所以無法訪問匿名函式內的變數；
ES6中明確規定如果塊級中存在let和const命令時，則這個區塊對這些命令宣告的變數從一開始就形成封閉的區域，在代碼塊內，使用let命令前，該變數都是不可用的，這塊區域在語法上稱為“暫時性死區“
- 即使在全域
let的變數，也不會保存在window中
實際上保存在了let原理中提到的立即執行匿名函式自調函式的函式作用域中；
ES6在這方面也有規定：var，function命令宣告的全域變數依舊是頂層物件的屬性，而let，const，class命令宣告的全域變數不屬于頂層物件的屬性；也就是說從ES6開始，全域變數逐步于頂層物件的屬性隔離，
let和for回圈的化學反應
//1.
for(var i = 0; i < 5 ;i++){
setTimeout(function(){
console.log(i)
},500)
}
//55555
//2.
for(let i=0; i < 5 ;i++){
setTimeout(function(){
console.log(i)
},500)
}
//01234
第一題因為定時器是異步任務，會加入到任務佇列等待主程式執行完畢在執行，主程式執行回圈，當i等于5時，回圈條件不滿足退出回圈，主程式結束，開始執行任務佇列中的定時器物件，定時器物件中沒有自己區域的i就會去上級作用域中拿，而上級的i主程式結束后就變成了5，所以會輸出55555
實際上第二題在程式中可以看成下面這樣運行的（看上邊所說的let的原理）：
for(var i=0; i < 5 ;i++){
(function(i){//外層函式 i為要保護的變數
setTimeout(function(){//內層函式
console.log(i)
},500)
})(i)
}
看以上代碼，其實就是一個閉包（閉包傳送門），每回圈執行一次就會生成一個定時器物件并且匿名函式自調中的區域變數 i 都會因為被內層函式中連著無法釋放，每次都會生出一個閉包保存當次的 i 的值，當主程式執行結束后，執行任務佇列中的定時器物件，定時器物件中沒有自己的區域 i 就會去上層找，找到的就是每次匿名函式生成的作用域物件中的 i ，所以輸出是01234
const關鍵字
ES6中新增的專門用來宣告常量的關鍵詞，
let的特性const都有，不能反復宣告，存在塊級作用域，不存在變數提升，也有暫時性死域的特點，
與let區別在于：
const一旦宣告就必須賦值；
const宣告如果是一個原始型別的常量，一旦宣告就無法修改；
const宣告如果是一個參考型別的常量，一旦宣告，保存在const中的地址值（指標）就無法修改，但是通過地址值指向的物件的屬性還是能夠修改的，
const PI;
//報錯 const一旦宣告就必須賦值
const PI=3.1415926;
PI = 3.14;
//報錯 const一旦宣告如果值是原始型別的值，值不能改變
const obj = {a:1,b:2}
obj = {};
//報錯 const一旦宣告如果值是參考型別的值，地址值不能改變
var let const 對比總結：
3個方向：1值是否能改變，2作用域在哪，3是否存在變數提升
-
使用var宣告的變數，其作用域為該陳述句所在的函式內，且存在變數提升現象，
-
使用let宣告的變數，起作用域為該陳述句的代碼塊內，不存在變數提升，
-
使用const宣告的是常量，在后邊出現的代碼中不能再去修改該常量的值（原始型別的值和記憶體地址值），
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/235501.html
標籤：其他
上一篇：WEBPACK+ES6+REACT入門(1/7)-創建webpack4.x專案
下一篇：vue計算屬性與監視屬性