前端入門21-JavaScript的ES6新特性
宣告
本篇內容全部摘自阮一峰的：ECMAScript 6 入門
阮一峰的這本書，我個人覺得寫得挺好的，不管是描述方面，還是例子，都講得挺通俗易懂，每個新特性基本都還會跟 ES5 舊標準做比較，說明為什麼會有這個新特性，這更於理解。
所以，後續不會再寫個關於 ES6 系列的文章了，就在這篇裡大概的列舉一下，大體清楚都有哪些新特性就好了，以後需要用時再去翻一翻阮一峰的書。
正文-ES6新特性
ES6 新標準規範相比於 ES5 舊標準規範中，無非就三個方面的改動：新增、更新、廢棄。
由於更新和廢棄需要考慮到相容性問題，所以這兩方面的內容應該並不多，那麼大部分基本都是新增的特性。對於新增的特性來說，大體上也還可以再分兩類：完全新增的特性和基於舊標準擴充套件的特性。
下面就大概來過一下，ES6 中新增的特性。
Symbol
這是新增的一種原始資料型別，ES5 中原始型別有 5 種，在 ES6 中新引入了一種後，現在就是有 6 種原始資料型別了：Number、String、Boolean、null、undefined、Symbol
這個單詞中文直譯是：符號、標誌等，但好像並沒有在書中有這種叫法，書中都是直接使用 Symbol 來描述，可能中文翻譯不能夠很好的表示出這種原始資料型別的含義吧。
背景
之所以新增了這種原始資料型別，是為了解決：
ES5 的物件屬性名都是字串，這容易造成屬性名的衝突。比如，你使用了一個他人提供的物件，但又想為這個物件新增新的方法（mixin 模式），新方法的名字就有可能與現有方法產生衝突。如果有一種機制，保證每個屬性的名字都是獨一無二的就好了，這樣就從根本上防止屬性名的衝突。這就是 ES6 引入
Symbol的原因。
基礎用法
var s1 = Symbol('s1'); //引數只是用來描述當前 s1 變數，跟其他 Symbol 資料型別的變數相區分，在呼叫 toString 或 typeOf 時會輸出當前資料型別跟描述資訊
//第一種
var o = {};
o[s1] = "dasu";
//第二種
var o = {
[s1]: "dasu"
};
//第三種
var o = {}
Object.defineProperty(o, s1, {value: "dasu"});給一個物件定義一個屬性名用 Symbol 資料型別來表述的方法有上述三種，如果使用 o.s1 = "dasu"
其他內容，包括關於 Symbol 屬性的遍歷、Symbol 自帶的方法、Symbol 應用場景等見：Symbol
塊作用域 let 和 const
背景
ES5 中變數的作用域只分全域性作用域和函式內作用域，且全域性變數本質上是全域性物件的屬性，書中是這麼評價的：
頂層物件的屬性與全域性變數掛鉤，被認為是 JavaScript 語言最大的設計敗筆之一。這樣的設計帶來了幾個很大的問題，首先是沒法在編譯時就報出變數未宣告的錯誤，只有執行時才能知道（因為全域性變數可能是頂層物件的屬性創造的，而屬性的創造是動態的）；其次，程式設計師很容易不知不覺地就建立了全域性變數（比如打字出錯）；最後，頂層物件的屬性是到處可以讀寫的，這非常不利於模組化程式設計。另一方面，
window物件有實體含義，指的是瀏覽器的視窗物件，頂層物件是一個有實體含義的物件，也是不合適的。
為了解決這些問題，ES6 中新增了塊級作用域的變數，通過關鍵字：let 和 const 宣告的變數，作用域是塊級作用域，同時，這些變數不屬於頂層物件的屬性。
const 定義的變數是常量，除此外，這個變數跟用 let 定義的變數沒有其他方面的區別了。而通過 let 和 const 定義的變數行為、作用域類似於 Java 語言中定義的變數行為。
換句話說，let 和 const 定義的變數已經不包含 var 定義的變數的各種特性行為了，比如：沒有變數的宣告提前特性、存在暫時性死區（在定義之前不能使用，只能在定義變數位置之後使用）、不允許重複宣告、作用域只有塊級作用域等。
更多的參考：let 和 const 命令
Module 模組機制
背景
ES5 中並沒有模組機制，常見的方式是：前端裡通過 <script> 載入各種不同的 js 檔案程式碼，在 js 檔案程式碼內部中提供一些全域性變數或全域性函式供其他 <script> 使用。
說白了，就是不同 js 檔案通過全域性物件作為通訊的橋樑來相互訪問。而為了解決不同 js 檔案共享全域性物件造成的變數衝突問題，通常作為模組的 js 裡的程式碼都會放在一個立即執行的函式內。
而 ES6 中，引入了模組的機制。
基本使用
當在 HTML 文件中，通過指定 <script> 標籤的 type 屬性為 module 時，如：
<script type="module" src="./foo.js"></script>瀏覽器會按照模組的處理方式來載入這份 js 檔案，與模組指令碼的處理方式與正常 js 指令碼檔案處理方式最不同的地方在於，模組內的程式碼都是在模組作用域中執行，也就是在模組 js 檔案中的全域性變數這些並不會被新增到全域性物件的屬性中，其他 js 檔案無法訪問。
那麼，其他 js 檔案如何使用這份模組 js 檔案呢？
有三點要求：
- 模組 js 檔案內，需要通過 export 宣告該模組對外開放的介面
- 當前 js 檔案內，需要通過 import 來引入模組對外開放的介面，想使用哪些介面，就需要引入哪些
- 當前 js 也必須是模組指令碼檔案，即 type=module 才行
import 命令和 export 命令是模組機制的關鍵，但只兩個命令只能在 type=module 的 js 檔案內生效，如果某個 js 檔案聲明瞭 type=text/javascript，然後程式碼裡又使用到 import 或 export，那麼執行期間會報錯。
- 對外提供功能的模組
//module.js
//...
//以上省略模組內部功能程式碼
//一般對外的介面可放在檔案底部，方便一覽無餘
//第一種：
export var name = "dasu";
export function getName() {return "dasuAndroidTv"};
//第二種：
var name = "dasu"
var getName = function() {return "dasuAndroidTv"};
export {name, getName}- 使用其他模組功能的當前指令碼
//第一種：from後跟js的相對路徑或絕對路徑
import {name, getName} from 'module.js'
//第二種：
import * as Module from 'module.js'
//使用
Module.name;
Module.getName();
//...最後，記住，模組指令碼檔案中，自動以嚴格模式執行，限制也很多，更多用法、細節說明參考：
變數解構
ES6 允許按照一定模式，從陣列和物件中提取值，對變數進行賦值，這被稱為解構（Destructuring）。
以前，為變數賦值，只能直接指定值。
var a = 1;
var b = 2;
var c = 3;ES6 允許寫成下面這樣。
var [a, b, c] = [1, 2, 3];上面程式碼表示，可以從陣列中提取值，按照對應位置，對變數賦值。
本質上，這種寫法屬於“模式匹配”，只要等號兩邊的模式相同，左邊的變數就會被賦予對應的值。
這種特性可以帶來很多便捷：
- 函式可以返回多個值
// 返回一個數組
function example() {
return [1, 2, 3];
}
let [a, b, c] = example();
// 返回一個物件
function example() {
return {
foo: 1,
bar: 2
};
}
let { foo, bar } = example();- 物件取值時很方便
//解析服務端返回的資料物件，提取其中的各欄位值
var o = {
code: 1,
msg: "success",
content: {...}
};
var {code, msg, content} = o;解構時，還可以設定預設值，更多用法，參考：變數的解構賦值
字串的擴充套件
ES6 中對字串的處理擴充套件了很多新特性，讓字串的處理更加強大，下面看一個很強大的特性：
模板字串
傳統的 JavaScript 語言，輸出模板通常是這樣寫的（下面使用了 jQuery 的方法）。
$('#result').append(
'There are <b>' + basket.count + '</b> ' +
'items in your basket, ' +
'<em>' + basket.onSale +
'</em> are on sale!'
);上面這種寫法相當繁瑣不方便，ES6 引入了模板字串解決這個問題。
$('#result').append(`
There are <b>${basket.count}</b> items
in your basket, <em>${basket.onSale}</em>
are on sale!
`);模板字串（template string）是增強版的字串，用反引號（`）標識。它可以當作普通字串使用，也可以用來定義多行字串，或者在字串中嵌入變數。
更多字串擴充套件的特性介紹參見：字串的擴充套件
函式的擴充套件
ES6 中，對於函式的處理也增加了很多新特性，讓函式變得更強大。
引數預設值
ES6 之前，不能直接為函式的引數指定預設值，只能採用變通的方法。
function log(x, y) {
x = x || 'dasu';
y = y || 'Android';
console.log(x, y);
}ES6 允許為函式的引數設定預設值，即直接寫在引數定義的後面。
function log(x="dasu", y="Android") {
console.log(x, y);
}當然，引數預設值還有更多細節，比如預設引數的作用域是單獨的、有預設引數值的函式 length 屬性含義會變化等等。
剩餘引數 reset
ES6 引入 rest 引數（形式為...變數名），用於獲取函式的多餘引數，這樣就不需要使用arguments物件了。rest 引數搭配的變數是一個數組，該變數將多餘的引數放入陣列中。
function add(...values) {
let sum = 0;
for (var val of values) {
sum += val;
}
return sum;
}
add(2, 5, 3) // 10箭頭函式
ES6 允許使用“箭頭”（=>）定義函式。
var f = v => v;
// 等同於
var f = function (v) {
return v;
};箭頭前面是引數，後面的函式體，如果超過 1 個引數，那麼用圓括號將多個引數圈起，如果沒有引數，就用一個空圓括號 () 表示，如果函式體超過 1 行語句，那麼用 {} 大括號包住。
var f = () => 5;
// 等同於
var f = function () { return 5 };
var sum = (num1, num2) => num1 + num2;
// 等同於
var sum = function(num1, num2) {
return num1 + num2;
};當函式作為另一個函式的引數時，箭頭函式的寫法會讓程式碼變得很便捷，如：
- 箭頭函式的一個用處是簡化回撥函式。
// 正常函式寫法
[1,2,3].map(function (x) {
return x * x;
});
// 箭頭函式寫法
[1,2,3].map(x => x * x);- 巢狀的箭頭函式
箭頭函式內部，還可以再使用箭頭函式。下面是一個 ES5 語法的多重巢狀函式。
function insert(value) {
return {into: function (array) {
return {after: function (afterValue) {
array.splice(array.indexOf(afterValue) + 1, 0, value);
return array;
}};
}};
}
insert(2).into([1, 3]).after(1); //[1, 2, 3]上面這個函式，可以使用箭頭函式改寫。
let insert = (value) => ({into: (array) => ({after: (afterValue) => {
array.splice(array.indexOf(afterValue) + 1, 0, value);
return array;
}})});
insert(2).into([1, 3]).after(1); //[1, 2, 3]但使用箭頭函式有一些注意點：
- 函式體內的
this的指向，就是定義時所在的物件，而不是使用時所在的物件。 - 不可以當作建構函式，也就是說，不可以使用
new命令，否則會丟擲一個錯誤。 - 不可以使用
arguments物件，該物件在函式體內不存在。如果要用，可以用 rest 引數代替。 - 不可以使用
yield命令，因此箭頭函式不能用作 Generator 函式。
其他還有很多擴充套件，包括在 ES5 中，函式有個 name 屬性並在標準規範中，但在 ES6 中加入了標準規範中，還有其他新增的一些特性，具體參考：函式的擴充套件
class 類
JavaScript 語言中，生成例項物件的傳統方法是通過建構函式。下面是一個例子。
function Point(x, y) {
this.x = x;
this.y = y;
}
Point.prototype.toString = function () {
return '(' + this.x + ', ' + this.y + ')';
};
var p = new Point(1, 2);上面這種寫法跟傳統的面嚮物件語言（比如 C++ 和 Java）差異很大，很容易讓新學習這門語言的程式設計師感到困惑。
ES6 提供了更接近傳統語言的寫法，引入了 Class（類）這個概念，作為物件的模板。通過class關鍵字，可以定義類。
基本上，ES6 的class可以看作只是一個語法糖，它的絕大部分功能，ES5 都可以做到，新的class寫法只是讓物件原型的寫法更加清晰、更像面向物件程式設計的語法而已。上面的程式碼用 ES6 的class改寫，就是下面這樣。
//定義類
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
toString() {
return '(' + this.x + ', ' + this.y + ')';
}
}
var p = new Point();上面程式碼定義了一個“類”，可以看到裡面有一個constructor方法，這就是構造方法，而this關鍵字則代表例項物件。也就是說，ES5 的建構函式Point，對應 ES6 的Point類的構造方法。
Point類除了構造方法，還定義了一個toString方法。注意，定義“類”的方法的時候，前面不需要加上function這個關鍵字，直接把函式定義放進去了就可以了。另外，方法之間不需要逗號分隔，加了會報錯。
ES6 的類，完全可以看作建構函式的另一種寫法。
class Point {
// ...
}
typeof Point // "function"
Point === Point.prototype.constructor // true上面程式碼表明，類的資料型別就是函式，類本身就指向建構函式。
使用的時候，也是直接對類使用new命令，跟建構函式的用法完全一致。
class Bar {
doStuff() {
console.log('stuff');
}
}
var b = new Bar();
b.doStuff() // "stuff"建構函式的prototype屬性，在 ES6 的“類”上面繼續存在。事實上，類的所有方法都定義在類的prototype屬性上面。
class Point {
constructor() {
// ...
}
toString() {
// ...
}
toValue() {
// ...
}
}
// 等同於
Point.prototype = {
constructor() {},
toString() {},
toValue() {},
};在類的例項上面呼叫方法，其實就是呼叫原型上的方法。
class B {}
let b = new B();
b.constructor === B.prototype.constructor // true更多細節內容參考：
其他
阮一峰好歹專門為 ES6 新增的特性寫了一整本書，想用一個章節來介紹太不可能了，很多我也沒有去細看。
本篇的主旨就在於大體上列出一些新特性，知道原來 ES6 新增了這些東西，後續有時間再去細看這本書，或者當用到的時候再去查。
最後，就列舉下，其他上面沒有講到的特性吧：
- ArrayBuffer：大概同於操作二進位制資料
- set 和 map：新增是資料結構，類似於陣列，可以類比 Java 中的 Set 和 Map
- Proxy：修改某些預設行為，等同於在語言層面做出修改，所以屬於"超程式設計"，即對程式語言進行程式設計。
- Reflect：同樣是用於操作物件，修改預設行為。Proxy 更多是在原本行為上增加新的行為，而 Reflect 則是直接修改原本行為。
- Iterator 和 for..of 迴圈：為不同的資料結構提供各自的遍歷訪問操作
- Promise：非同步程式設計的解決方案，比傳統的解決方案（回撥和事件）更合理強大
- Generator 函式：非同步程式設計的解決方案
- async：Generator 函式的語法糖
- 正則的擴充套件、陣列的擴充套件、數值的擴充套件、物件的擴充套件等
function A(x) {
A.prototype.x = x;
A.prototype.y = 1;
}
function B() {}
B.prototype = new A();
var b = new B();
b.y; //1
=
大家好，我是 dasu，歡迎關注我的公眾號（dasuAndroidTv），公眾號中有我的聯絡方式，歡迎有事沒事來嘮嗑一下，如果你覺得本篇內容有幫助到你，可以轉載但記得要關注，要標明原文哦，謝謝支援~
