你須要瞭解的ES6的新特性（前沿技術）

ES6新特性

最近在項目中遇到了不少ES6的語法，遇到了很多坑坑窪窪，所以，在這裏就簡單介紹一下ES6中的一些新特性

• 若是想真正的瞭解ES6和ES5有什麼不一樣，這裏推薦看一下阮一峯的一本《ECMAScript 6 入門》
• 在我下面，主要介紹一下ES6標準下的let, const, "=>", "..."的介紹和用法

ES6背景介紹

ECMAScript 6.0（如下簡稱 ES6）是 JavaScript 語言的下一代標準，已經在2015年6月正式發佈了。它的目標，是使得 JavaScript 語言能夠用來編寫複雜的大型應用程序，成爲企業級開發語言。

---

那麼，ECMAScript 和 JavaScript 究竟是什麼關係？

要講清楚這個問題，須要回顧歷史。1996年11月，JavaScript 的創造者 Netscape 公司，決定將 JavaScript 提交給國際標準化組織ECMA，但願這種語言可以成爲國際標準。次年，ECMA 發佈262號標準文件（ECMA-262）的初版，規定了瀏覽器腳本語言的標準，並將這種語言稱爲 ECMAScript，這個版本就是1.0版

let命令

基本用法

ES6 新增了let命令，用來聲明變量。它的用法相似於var，可是所聲明的變量，只在let命令所在的代碼塊內有效。

{
  let a = 10;
  var b = 1;
}

a // ReferenceError: a is not defined.
b // 1

上面代碼在代碼塊之中，分別用let和var聲明瞭兩個變量。而後在代碼塊以外調用這兩個變量，結果let聲明的變量報錯，var聲明的變量返回了正確的值。這代表，let聲明的變量只在它所在的代碼塊有效。看到這裏，是否是以爲let和C語言還有其餘語言的語言很像了呢，確實，其實原理基本都差很少。

使用注意

1. 不存在變量提高：var命令會發生」變量提高「現象，即變量能夠在聲明以前使用，值爲undefined。這種現象多多少少是有些奇怪的，按照通常的邏輯，變量應該在聲明語句以後纔可使用。爲了糾正這種現象，let命令改變了語法行爲，它所聲明的變量必定要在聲明後使用，不然報錯。

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

// let 的狀況
console.log(bar); // 報錯ReferenceError
let bar = 2;

1. 暫時性死區：只要塊級做用域內存在let命令，它所聲明的變量就「綁定」（binding）這個區域，再也不受外部的影響。

var tmp = 123;

if (true) {
  tmp = 'abc'; // ReferenceError
  let tmp;
}

1. 不容許重複聲明：let不容許在相同做用域內，重複聲明同一個變量。

// 報錯
function () {
  let a = 10;
  var a = 1;
}

// 報錯
function () {
  let a = 10;
  let a = 1;
}

1. 快級做用域：這個特性是我以爲最奇怪的，本來javascript是做用域鏈的形式，爲何平白無故要忽然改變了本身以前的主意呢。不過這個也很容易理解，有過C語言和C++等語言基礎的就會很瞭解快級做用域

function f1() {
  let n = 5;
  if (true) {
    let n = 10;
  }
  console.log(n); // 5
}

上面的函數有兩個代碼塊，都聲明瞭變量n，運行後輸出5。這表示外層代碼塊不受內層代碼塊的影響。若是兩次都使用var定義變量n，最後輸出的值纔是10。

---

const命令

基本用法

const聲明一個只讀的常量。一旦聲明，常量的值就不能改變。const聲明的變量不得改變值，這意味着，const一旦聲明變量，就必須當即初始化，不能留到之後賦值。

const PI = 3.1415;
PI // 3.1415

PI = 3;
// TypeError: Assignment to constant variable.

使用注意

1. 僅僅保證地址不變const實際上保證的，並非變量的值不得改動，而是變量指向的那個內存地址不得改動。對於簡單類型的數據（數值、字符串、布爾值），值就保存在變量指向的那個內存地址，所以等同於常量。

const a = [];
a.push('Hello'); // 可執行
a.length = 0;    // 可執行
a = ['Dave'];    // 報錯

---

箭頭函數"=>"

基本用法

ES6 容許使用「箭頭」（=>）定義函數

var f = v => v;

//等同於
var f = function(v) {
  return v;
};

使用注意

1. 函數體內的this對象，就是定義時所在的對象，而不是使用時所在的對象。
2. 不能夠看成構造函數，也就是說，不可使用new命令，不然會拋出一個錯誤。
3. 不可使用arguments對象，該對象在函數體內不存在。若是要用，能夠用 rest 參數代替。
4. 不可使用yield命令，所以箭頭函數不能用做 Generator 函數。

這裏說一下最重要的第一點吧

function foo() {
  setTimeout(() => {
    console.log('id:', this.id);
  }, 100);
}

var id = 21;

foo.call({ id: 42 });
// id: 42

上面代碼中，setTimeout的參數是一個箭頭函數，這個箭頭函數的定義生效是在foo函數生成時，而它的真正執行要等到100毫秒後。若是是普通函數，執行時this應該指向全局對象window，這時應該輸出21。可是，箭頭函數致使this老是指向函數定義生效時所在的對象（本例是{id: 42}），因此輸出的是42。

---

數組拓展運算符"..." rest 參數

基本用法

擴展運算符（spread）是三個點（...）。它比如 rest 參數的逆運算，將一個數組轉爲用逗號分隔的參數序列。

console.log(...[1, 2, 3])
// 1 2 3

console.log(1, ...[2, 3, 4], 5)
// 1 2 3 4 5

[...document.querySelectorAll('div')]
// [<div>, <div>, <div>]

也能夠運用於函數及其餘

function add(...values) {
  let sum = 0;

  for (var val of values) {
    sum += val;
  }

  return sum;
}

add(2, 5, 3) // 10

---

文中就簡單介紹這麼多，想更加了解ES6新特性的能夠自尋查看一下阮一峯的一本《ECMAScript 6 入門》