ES6的介紹和let的使用|-ES6連載1

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');

總結

用let聲明變量只在塊級做用域起做用，適合在for循環使用，也不會出現變量提高現象。同一個代碼塊內，不可重複聲明的相同變量，不可重複聲明函數內的參數。