ES6中let怎么用

這篇文章給大家分享的是有關ES6中let怎么用的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

ECMAScript是什么？

很多人都很困惑，哪怕是工作3至5年前端工程師也困惑，ECMAScript是什么？它跟JavaScript有什么關系？

題目：JavaScript由3部分組成，分別是：ECMAScript，BOM和（？）。

從題目中我們就可以看出來了，ECMAScript是JavaScript的組成部分。

ECMAScript就是JavaScript中的語法規范！ECMAScript是屬于國際標準化的語言，所有瀏覽器開發商都要按照它制定的標準來開發瀏覽器。開發者也一樣，按照它的規定來編程代碼。

ECMAScript的作用

• 語法 – 解析規則，關鍵字，語句，聲明，操作等

• 類型 – 布爾型，數字，字符串，對象等

• 原型和繼承

• 內置對象和函數的標準庫 – JSON，數字（Math），數組方法，對象內省的方法等等。

了解了ECMAScript之后，那什么是ES6呢？

ES6是ECMAScript 6的縮寫簡稱，這個好理解。顧名思義，它是ECMAScript的第6個版本，也就是說它有更早的版本，以后還會有更多版本。

ECMAScript 的歷史

• 1996 年 11 月，Netscape 公司，決定將 JavaScript 提交給國際標準化組織 ECMA。次年，ECMA發布 ECMAScript。這個版本就是 ECMAScript 1.0 版。

• 1998 年 6 月，ECMAScript 2.0 版發布。

• 1999 年 12 月，ECMAScript3.0 版發布，成為 JavaScript 的通行標準，得到了廣泛支持。

• 2007 年10 月，ECMAScript4.0 版草案發布，對 3.0 版做了大幅升級，但是，以 Yahoo、Microsoft、Google為首的大公司，反對 JavaScript 的大幅升級，主張小幅改動，各方分歧太大，爭論過于激進，ECMA 開會決定，中止 ECMAScript 4.0 的開發

• 2009 年 12 月，ECMAScript5.0 版正式發布。

• 2015 年 6 月，ECMAScript 6 正式通過，成為國際標準。

ES6 為什么受歡迎

• 確實是這樣的，對于很多開發者來說，ES6帶來的新功能涵蓋面很廣，還有很多很便利的功能等（如：箭頭的功能和簡單的字符串插值，不懂沒關系，后續陸續介紹），確實令人興奮。

• 綜合上述ECMAScritpt的介紹，我們認識到了，要學好JavaScript，就必須先學好ECMAScritpt，而且是最新的版本ECMAScritpt 6。

let 的用途

• ES6 給開發者帶來很多令人激動的特性，其中let關鍵字就是其中之一。

• 我們平時在寫代碼的時候，用var來聲明一個變量，除此之外，好像也沒用其他的關鍵字了，不管我們聲明的是字符串類型、數組類型還是數字類型等，都用一個var 搞點（因為JavaScript擁有動態類型），很方便。但現在，ES6告訴你，除了var，不妨試試用let來聲明變量試試看。

• 咦，這么說，let關鍵字是用了聲明變量的咯？是的，let的用途就是用來聲明變量的。

• 好端端的用var聲明就可以了，為什么要用新的let關鍵字來聲明??？難道用var有什么不足的地方嗎？是的，還真有。

var 的不足之處一

• 如下代碼

var arr = [ ];
for(var i=0;  i<10;  i++){
    arr [i] = function(){
         alert(i)
    }
}
arr [8](); //結果：10

• 用let替換var后，我們再看看：

var arr = [ ];
for(let i=0;  i<10;  i++){
  arr[i] = function(){
    alert(i)
  }
}
arr[8](); //結果：8

• 因為let聲明的變量僅僅在自己的塊級作用域起作用，出了這個塊級作用域就不起作用。就好比，小明在國內考的“高級程序員”證，去到國外應聘，別人就不承認你的文憑了，小明只能乖乖待在國內持證上崗。而let聲明的變量也一樣，出不了自己的塊級作用域。

那么，什么是塊級作用域，怎么才算一個塊級作用域？

任何一對花括號（這玩意：{ }）中的語句都屬于一個塊，在花括號里面用let定義的所有變量在花括號外都是不可見的，我們稱之為塊級作用域。

• 代碼中，for循環含有有{ }，也就是含有了塊級作用域，每個變量 i 都只是在自己的作用域起作用，例如：第10次循環中的 i 的值不會影響到到第9次循環。

• 如果用var聲明的變量，就不是這種情況了，i 的值會影響到各個塊里面的 i，等循環完后 i 等于10，所有塊的i都變成了10了。這就是為什么第一段代碼運行后會彈出數字10了，這并不是我們想要的。

• 就好比小明陸陸續續去了10個國家玩，每到一個國家都給自己弄了一個不同的身份，但是小明被告知以后只能用在第10個國家取得的那個身份，那么之前9個國家認識小明的朋友都會不認識他的，小明當場就懵逼了。

var 的不足之處二

• 用var 聲明變量的時候會出現“變量提升“的現象

var a = 1;
function show(){
  alert(a);
  var a = 2;
}
show();//結果：undefined

• 原因就在于我們在代碼塊（函數內）里面還聲明并定義了一個變量a，導致變量提升了，實際的代碼執行順序是這樣的，仔細看完你就知道什么叫變量提升了。

var a = 1;
function show(){
  var a;
  alert(a);
  var a = 2;
}
show();//結果：undefined

• 如果你用let這樣重寫剛剛那段代碼的話

var a = 1;
function show(){
  alert(a);
  let a = 2;
}
show();// 結果：報錯a is not defined

用let關鍵字來定義a；這樣a在代碼塊內就不會提升了。

那為什么又報錯了呢，因為用let聲明的變量，在其塊級作用域內是封閉的，是不會受到外面的全局變量a影響的，并且要先聲明再使用，所以a的值即不是1（因為不受外面的影響），也不是undefined（因為先聲明后使用），更不是2，未聲明定義就使用，報錯。

• 用let關鍵字也算是提醒我們，平時記得先聲明定義再使用的好習慣。

let使用注意點

注意1：同一個塊級作用域內，不允許重復聲明同一個變量。

{
  var a =1;
  let a =2;  //報錯，因為a已經用var聲明過
}

{
  let a =1;
  let a= 2; //還是報錯，a已經用let聲明過。
}

注意2：函數內不能用let重新聲明函數的參數

function say(word){
  let word = 'hello Jack';  //報錯：用let重新聲明word參數
  alert(word)
}
say('hello Lili');

感謝各位的閱讀！關于“ES6中let怎么用”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！