ES6的集成比較

如果你仍然在用 ES5 (同樣也可以稱之為 ECMAScript 5)寫JavaScript代碼，并且希望能夠用ES6 (ES2015)編寫代碼，但是卻又有點擔心寫不好。那么我們詳細介紹幾種較為合理的方法，以使你們能夠立即在自己的代碼中開始使用這樣新的像糖一樣的語 法。我們將會討論并且檢查語法中幾種比較集中的特征的使用方法，比如let 和 const 的比較，再加上 var 和 let 的對抗，最后理解什么時候去使用這些散用操作符。所以不要多想，讓我們開始吧。

簡短的回顧

對于從來沒有使用過 ES6 的人，請繼續閱讀。其他人可以跳過這部分開始下一部分的術語部分。還在讀這部分的人，現在是時候快速回顧一下使如何用ECMAScript 2015寫代碼的。

在我們寫代碼的過程中，為了使用 ES6，你們需要一個對我們開發者來說都知道的工具 Babel; 一個JavaScript編輯器。這是一個很好的工具，它可以重新把開發者的代碼編譯成瀏覽器可識別的代碼。你可以在這個網站上閱讀這個系列的其他部分，在那里我分享了一些關于 Preparing for ES6 的有用的建議。

術語

如果我們不復習一些術語就開始的話會是非常不明智的，所以就讓我們先學習一些術語的解釋來幫助我們更好的理解它。

let

在 ES2015 中， let 就是一個新的 var and 并且我們都知道它是一個 結構綁定的塊級作用域 變量. 關鍵字 let 和 const 也同樣是規格說明書 “聲明和變量語句”部分的一部分。

let 語句聲明了一個本地的塊狀作用域變量,可初始化一個值。它可以在塊狀作用域，語句，或者使用within的表達式中聲明變量。這不像 var 關鍵字，它聲明一個全局變量，或者在本地的整個函數中起作用而不是在塊狀作用域。同樣這也可以當做一個信號，當這個變量分配在一個循環中，或者在一個算法中來回轉換的時候。

const

關鍵字 const 聲明了一個值不可以更改的標識符，不像 let 和 var 一樣，它們是可以修改的。這個關鍵字是單賦值的，然而let 可以被定義 多次。熟悉PHP的人可能已經理解了這類標識符. 一個 const 對象的屬性可以變化而對應的標識符不可以被重新賦值。const的靜態約束特性可以防止在賦值前使用。

散布操作符 (…)

就像我們經常使用的那樣，散布操作符是一種通過單值代替多參數的一種方法。這就允許當一個表達式有多個函數參數，或者多值元素（數組迭代）或者多變量（解構賦值）時，可以以一種適當的方法進行擴展。 (來源: MDN).

例子

既然你決定盡快能夠使用 ES2015, 但是我們如何知道什么時候用let 還是 var 更合適呢? 我們應該如何決定什么時候使用 const 或者散布操作符呢?

如何使用 let

當你需要賦值一個變量或者保護塊狀區域的值的時候就使用 let。 一般用 let 的時候往往是在一個循環中或者數學的算法中。關鍵字let同樣表明變量只會作用于它定義的塊狀區域中; 不要提升它的作用范圍。如果你想要重新用let分配變量，那么請一定不要使用 let關鍵字，并且使用已經分配過的。比如…

Incorrect

 let window_width = window.innerWidth;
let window_width = 'string';

Correct

 let window_width = window.innerWidth;
window_width = 'string';

關鍵字 let 同樣可以在一個函數塊狀作用域內使用。

 function windowSize() {
  let window_width = window.innerWidth;
}

windowSize();

window.onresize = function() {
  windowSize();
};

console.log(window_width) // reports undefined

在用例中為了檢測出窗口的resize事件中窗口的寬度，我們只在使用它的作用域內定義了window_width。記住window_width 在 windowSize 函數外是永遠不可訪問的。

如何使用 const

恒量是塊狀作用與的,和用let關鍵字定義的變量很像。恒量的值在整個過程中都是不可變的,也不能被重新聲明。想象一下 “constant”作為“one-time assignment”的意思。

 `const window_width = window.innerWidth;`

如果我們試圖重新分配一個標識符我們將會在控制臺得到一個警告:

 const window_width = window.screen.width;
window_width = 'string'; // Uncaught TypeError: Assignment to constant variable.

當一個值在你的應用中就像在這個例子中數學中的紙一樣不會改變的時候，你就可以用恒量修飾。

 `const pi = Math.PI;`

這里我們創建了一個只讀的參考，我們不能再重新分配它，就像我們之前說明的那樣。

在一個文字描述的對象上，我們可以圍繞不變的規則來定義我們的值。全局配置是一個很好地使用 const 的例子，想下面這樣使用就是一種潮流:

 const config = {
    url: window.location.origin,
    width: window.screen.width,
    path: window.location.pathname
};

// The object's properties can be mutated so we can reassign values.
config.url = "https://codepen.io";

console.log(config)

Object {url: "https://codepen.io", width: 1440, path: "/index.html"} // url key reports reassigned value

這里我們創建了一個只讀的參考，我們只可以讀取 (config)的值，但是就像之前說的不能重新對它進行分配。基本上 config 標識符就是一個恒量并且不能被重載，但是就像我們展示的那樣，我們可以改變他的屬性。

如何使用 (…) : 散布操作符

散布操作符給我們之前在ES5\遇到的冗長的上下文參數的處理添加了更多的能力。散布操作符可以接受帶有這樣參數的數組;比如:

 function spreadReporter(...values) {
  let object = [...values];
  return object[0].length;
}

var items = ['one', 'two', 'three'];

console.log(spreadReporter(items)); // reports the numerical value 3

這些包含多個值的參數可以是你希望事。它可以是一個表示對象字面量的值或者數組的值的標識符。

你可以在一個基于事件的電子商務的環境中使用散布操作符，比如添加物品到購物車中。

 let dairy = [];
let store = {
  add: function(category, ...items) {
    category.push(...items);
  }
};

store.add(dairy, 'milk', 'sour cream');
store.add(dairy, 'ice cream', 'yogurt', 'cheese');
console.log(dairy);

// outputs ["milk", "sour cream", "ice cream", "yogurt", "cheese"]

事件也是一個很好用的例子來表明發生的類型是否是點擊，觸摸或者一些其他的姿勢。我會把這個問題留給你們作為一個你們的挑戰，所以在下面自己的發表你們的解法方法吧。

總結

隨著事務的發展，可能會有很多種方法去解決問題。這些例子只是作為建議來進行討論 ，并且例子展示了ES6\ 中新特性的力量。如果你有其他的上面沒有提到的例子，建議。請讓我們在評論區知道。快樂編碼，并且享受你的新的ES6知識。更進一步，分享，討論然后變得優秀。

 

來自：http://www.zcfy.cc/article/integration-and-comparison-for-es6-1024.html