隨著ES6規(guī)范的到來，Js中定義變量的方法已經(jīng)由單一的 var 方式發(fā)展到了 var、let、const 三種之多。var 眾所周知，可那倆新來的貨到底有啥新特性呢？到底該啥時(shí)候用呢？下面就是小編總結(jié)出的關(guān)于javascript中var與ES6規(guī)范中l(wèi)et、const區(qū)別詳解

我們先來絮叨絮叨 var 方式定義變量有啥 bug ？

Js沒有塊級(jí)作用域

請(qǐng)看這樣一條規(guī)則：在JS函數(shù)中的var聲明，其作用域是函數(shù)體的全部。

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

明明已經(jīng)跳出 for 循環(huán)了，卻還可以訪問到 for 循環(huán)內(nèi)定義的變量 a ，甚至連 i 都可以被放訪問到，尷尬~

2.** 循環(huán)內(nèi)變量過度共享 **

你可以猜一下當(dāng)執(zhí)行以下這段代碼時(shí)會(huì)發(fā)生什么

for (var i = 0; i < 3; i++) {
   setTimeout(function () {
    console.log(i)
   }, 1000);
 }

在瀏覽器里運(yùn)行一下，看看和你預(yù)想的結(jié)果是否相同？

沒錯(cuò)，控制臺(tái)輸出了3個(gè)3，而不是預(yù)想的 0、1、2。

事實(shí)上，這個(gè)問題的答案是，循環(huán)本身及三次 timeout 回調(diào)均共享唯一的變量 ** i 。當(dāng)循環(huán)結(jié)束執(zhí)行時(shí)，i 的值為3。所以當(dāng)?shù)谝粋€(gè) timeout 執(zhí)行時(shí)，調(diào)用的 i 當(dāng)讓也為 3 了。

話說到這兒，想必客官已經(jīng)猜到 let 是干嘛用的。

你沒猜錯(cuò)，就是解決這兩個(gè)bug的。你盡可以把上述的兩個(gè)例子中的 var 替代成 let 再運(yùn)行一次。

注意：必須聲明 'use strict' 后才能使用let聲明變量，否則瀏覽并不能顯示結(jié)果

let是更完美的var

let聲明的變量擁有塊級(jí)作用域。 也就是說用let聲明的變量的作用域只是外層塊，而不是整個(gè)外層函數(shù)。let 聲明仍然保留了提升特性，但不會(huì)盲目提升，在示例一中，通過將var替換為let可以快速修復(fù)問題，如果你處處使用let進(jìn)行聲明，就不會(huì)遇到類似的bug。

let聲明的全局變量不是全局對(duì)象的屬性。這就意味著，你不可以通過window.變量名的方式訪問這些變量。它們只存在于一個(gè)不可見的塊的作用域中，這個(gè)塊理論上是Web頁(yè)面中運(yùn)行的所有JS代碼的外層塊。

形如for (let x...)的循環(huán)在每次迭代時(shí)都為x創(chuàng)建新的綁定。

這是一個(gè)非常微妙的區(qū)別，拿示例二來說，如果一個(gè)for (let...)循環(huán)執(zhí)行多次并且循環(huán)保持了一個(gè)閉包，那么每個(gè)閉包將捕捉一個(gè)循環(huán)變量的不同值作為副本，而不是所有閉包都捕捉循環(huán)變量的同一個(gè)值。

所以示例二中，也以通過將var替換為let修復(fù)bug。

這種情況適用于現(xiàn)有的三種循環(huán)方式：for-of、for-in、以及傳統(tǒng)的用分號(hào)分隔的類C循環(huán)。

用let重定義變量會(huì)拋出一個(gè)語法錯(cuò)誤（SyntaxError）。

這個(gè)很好理解，用代碼說話

let a = 'a';
let a = 'b';

上述寫法是不允許的，瀏覽器會(huì)報(bào)錯(cuò)，因?yàn)橹貜?fù)定義了。

** 在這些不同之外，let和var幾乎很相似了。舉個(gè)例子，它們都支持使用逗號(hào)分隔聲明多重變量，它們也都支持解構(gòu)特性。 **

ES6引入的第三個(gè)聲明類關(guān)鍵詞：const

一句話說明白，const 就是用來定義常量的！任何腦洞(fei)大(zhu)開(liu)的寫法都是非法的

比如這樣：

//只聲明變量不賦值
const a
這樣：
//重復(fù)聲明變量
const a = 'a';
const a = 'b';

還有這樣：

//給變量重新賦值
const a = 'a';
a = 'b'

再來個(gè)黑科技：

//不過不推薦這么干，實(shí)在沒啥意思，常量常量，不變的才叫常量嘛~
const a = {a:'a'};
//重新賦值當(dāng)然是行不通的了
a = {a:'b'};
//嘿嘿嘿科技
a.a = 'b'

const 確實(shí)沒啥說的，普通用戶使用完全沒問題，高(dou)端(bi)用戶咋用都是問題。

以上就是小編對(duì) var、let、const 用法的一些總結(jié)，有不當(dāng)之處，還請(qǐng)大大們指出。

更多關(guān)于Javascript ES6規(guī)范詳解請(qǐng)查看下面的相關(guān)文章

最新評(píng)論