var和let/const的區(qū)別

1. 塊級(jí)作用域
2. 不存在變量提升
3. 暫時(shí)性死區(qū)
4. 不可重復(fù)聲明
5. let、const聲明的全局變量不會(huì)掛在頂層對(duì)象下面

const命令兩個(gè)注意點(diǎn):

1. const 聲明之后必須馬上賦值塌忽，否則會(huì)報(bào)錯(cuò)

2. const 簡(jiǎn)單類(lèi)型一旦聲明就不能再更改院仿，復(fù)雜類(lèi)型(數(shù)組、對(duì)象等)指針指向的地址不能更改豌蟋，內(nèi)部數(shù)據(jù)可以更改廊散。

為什么需要塊級(jí)作用域?

ES5只有全局作用域和函數(shù)作用域，沒(méi)有塊級(jí)作用域梧疲。

這帶來(lái)很多不合理的場(chǎng)景:

1. 內(nèi)層變量可能覆蓋外層變量
2. 用來(lái)計(jì)數(shù)的循環(huán)變量泄露為全局變量

var tmp = new Date();
function f() {
  console.log(tmp); // 想打印外層的時(shí)間作用域
  if (false) {
    var tmp = 'hello world'; // 這里聲明的作用域?yàn)檎麄€(gè)函數(shù)
  }
}
f(); // undefined

var s = 'hello';
for (var i = 0; i < s.length; i++) {
  console.log(s[i]); // i應(yīng)該為此次for循環(huán)使用的變量
}
console.log(i); // 5 全局范圍都可以讀到

區(qū)別1：塊級(jí)作用域

1. 作用域

function f1() {
  let n = 5;
  if (true) {
    let n = 10;
    console.log(n); // 10 內(nèi)層的n
  }
  console.log(n); // 5 當(dāng)前層的n
}

2. 塊級(jí)作用域任意嵌套

{{{{
  {let insane = 'Hello World'}
  console.log(insane); // 報(bào)錯(cuò) 讀不到子作用域的變量
}}}};

3. 塊級(jí)作用域真正使代碼分割成塊了

{
let a = ...;
...
}
{
let a = ...;
...
}
復(fù)制代碼

以上形式允睹，可以用于測(cè)試一些想法，不用擔(dān)心變量重名幌氮，也不用擔(dān)心外界干擾

塊級(jí)作用域聲明函數(shù)：

在塊級(jí)作用域聲明函數(shù)缭受，因?yàn)闉g覽器的要兼容老代碼，會(huì)產(chǎn)生一些問(wèn)題该互！

在塊級(jí)作用域聲明函數(shù)贯涎，最好使用匿名函數(shù)的形式。

if(true){
  let a = function () {}; // 作用域?yàn)閴K級(jí) 令聲明的函數(shù)作用域范圍更清晰
}

ES6 的塊級(jí)作用域允許聲明函數(shù)的規(guī)則慢洋，只在使用大括號(hào)的情況下成立塘雳，如果沒(méi)有使用大括號(hào)，就會(huì)報(bào)錯(cuò)普筹。

// 報(bào)錯(cuò)
'use strict';
if (true)
  function f() {} // 我們需要給if加個(gè){}

區(qū)別2：不存在變量提升

變量提升的現(xiàn)象：在同一作用域下败明，變量可以在聲明之前使用，值為 undefined

ES5 時(shí)使用var聲明變量太防，經(jīng)常會(huì)出現(xiàn)變量提升的現(xiàn)象妻顶。

// var 的情況
console.log(foo); // 輸出undefined
var foo = 2;

// let 的情況
console.log(bar); // 報(bào)錯(cuò)ReferenceError
let bar = 2;

區(qū)別3：暫時(shí)性死區(qū)：

只要一進(jìn)入當(dāng)前作用域揍鸟，所要使用的變量就已經(jīng)存在了乒验，但是不可獲取篮昧，只有等到聲明變量的那一行代碼出現(xiàn)矛绘，才可以獲取和使用該變量

var tmp = 123; // 聲明
if (true) {
  tmp = 'abc'; // 報(bào)錯(cuò) 因?yàn)楸緟^(qū)域有tmp聲明變量
  let tmp; // 綁定if這個(gè)塊級(jí)的作用域 不能出現(xiàn)tmp變量
}

暫時(shí)性死區(qū)和不能變量提升的意義在于:

為了減少運(yùn)行時(shí)錯(cuò)誤蛆楞，防止在變量聲明前就使用這個(gè)變量屯换，從而導(dǎo)致意料之外的行為明郭。

區(qū)別4： 不允許重復(fù)聲明變量

在測(cè)試時(shí)出現(xiàn)這種情況:var a= '聲明';const a = '不報(bào)錯(cuò)'其徙，這種情況是因?yàn)閎abel在轉(zhuǎn)化的時(shí)候嬉挡，做了一些處理钝鸽，在瀏覽器的控制臺(tái)中測(cè)試，就成功報(bào)錯(cuò)

let庞钢、const不允許在相同作用域內(nèi)拔恰，重復(fù)聲明同一個(gè)變量

function func(arg) {
  let arg; // 報(bào)錯(cuò)
}

function func(arg) {
  {
    let arg; // 不報(bào)錯(cuò)
  }
}
:

區(qū)別5： let、const聲明的全局變量不會(huì)掛在頂層對(duì)象下面

1. 瀏覽器環(huán)境頂層對(duì)象是: window
2. node環(huán)境頂層對(duì)象是: global
3. var聲明的全局變量會(huì)掛在頂層對(duì)象下面基括，而let颜懊、const不會(huì)掛在頂層對(duì)象下面。如下面這個(gè)栗子

var a = 1;
// 如果在 Node環(huán)境，可以寫(xiě)成 global.a
// 或者采用通用方法河爹，寫(xiě)成 this.a
window.a // 1

let b = 1;
window.b // undefined
復(fù)制代碼

const命令

1. 一旦聲明使鹅，必須馬上賦值

   let p; var p1; // 不報(bào)錯(cuò)
   const p3 = '馬上賦值'
   const p3; // 報(bào)錯(cuò) 沒(méi)有賦值
   復(fù)制代碼
   

2. const一旦聲明值就不能改變

   簡(jiǎn)單類(lèi)型:不能改動(dòng)

   const p = '不能改變';
   p = '報(bào)錯(cuò)'
   復(fù)制代碼
   

   復(fù)雜類(lèi)型:變量指針不能變

   考慮如下情況：

   const p = ['不能改動(dòng)']
   const p2 = {
     name: 'OBKoro1'
   }
   p[0] = '不報(bào)錯(cuò)'
   p2.name = '不報(bào)錯(cuò)'
   p = ['報(bào)錯(cuò)']
   p2 = {
     name: '報(bào)錯(cuò)'
   }
   復(fù)制代碼
   

   const所說(shuō)的一旦聲明值就不能改變，實(shí)際上指的是：變量指向的那個(gè)內(nèi)存地址所保存的數(shù)據(jù)不得改動(dòng)

   • 簡(jiǎn)單類(lèi)型(number昌抠、string患朱、boolean)：內(nèi)存地址就是值,即常量(一變就報(bào)錯(cuò)).

   • 復(fù)雜類(lèi)型(對(duì)象、數(shù)組等)：地址保存的是一個(gè)指針炊苫，const只能保證指針是固定的(總是指向同一個(gè)地址),它內(nèi)部的值是可以改變的(不要以為const就安全了裁厅！)

     所以只要不重新賦值整個(gè)數(shù)組/對(duì)象， 因?yàn)楸４娴氖且粋€(gè)指針侨艾，所以對(duì)數(shù)組使用的push执虹、shift、splice等方法也是允許的唠梨，你就是把值一個(gè)一個(gè)全都刪光了都不會(huì)報(bào)錯(cuò)袋励。

   復(fù)雜類(lèi)型還有函數(shù)，正則等当叭，這點(diǎn)也要注意一下茬故。

總結(jié):

再總結(jié)一下，看到這些名詞蚁鳖，腦子里應(yīng)該會(huì)有對(duì)應(yīng)的理解磺芭，如果沒(méi)有的話(huà)，那可以再看看對(duì)應(yīng)的內(nèi)容醉箕。

var和let/const的區(qū)別:

1. 塊級(jí)作用域
2. 不存在變量提升
3. 暫時(shí)性死區(qū)
4. 不可重復(fù)聲明
5. let钾腺、const聲明的全局變量不會(huì)掛在頂層對(duì)象下面

const命令兩個(gè)注意點(diǎn):

1. let可以先聲明稍后再賦值,而const在 聲明之后必須馬上賦值，否則會(huì)報(bào)錯(cuò)

2. const 簡(jiǎn)單類(lèi)型一旦聲明就不能再更改讥裤，復(fù)雜類(lèi)型(數(shù)組放棒、對(duì)象等)指針指向的地址不能更改，內(nèi)部數(shù)據(jù)可以更改己英。

let间螟、const使用場(chǎng)景:

1. let使用場(chǎng)景：變量，用以替代var剧辐。
2. const使用場(chǎng)景：常量寒亥、聲明匿名函數(shù)、箭頭函數(shù)的時(shí)候荧关。

參考鏈接：https://juejin.im/post/6844903752139276301