ES6新特性整理，你須要瞭解的ES6知識

ES6是新版本JavaScript語言的標準，上一次標準的制訂仍是2009年出臺的ES5。目前ES6的標準化工做已經完成，14年12月份放出了正式版本。
目前主流的瀏覽器都支持運行ES6代碼，若是你的不支持，還等什麼呢，換瀏覽器啊~
潮流雖然太快，但咱們不停下學習的步伐，就不會被潮流丟下的，下面來領略下ES6中新特性，一堵新生代JS的風采。

箭頭操做符

若是你會Python或者Java，你確定知道lambda表達式，ES6中新增的箭頭操做符=>便有殊途同歸之妙。它簡化了函數的書寫。操做符左邊爲輸入的參數，而右邊則是進行的操做以及返回的值Inputs=>outputs。

咱們知道在JS中回調是常常的事，而通常回調又以匿名函數的形式出現，每次都須要寫一個function，甚是繁瑣。當引入箭頭操做符後能夠方便地寫回調了。請看下面的例子。

var array = [1, 2, 3];
//傳統寫法
array.forEach(function(element, index, self) {
    console.log(element);
});
//ES6
array.forEach(value => console.log(value));

//注意1 箭頭函數若是隻包含一個表達式,能夠省略return，下面例子是數據去重
let arr = [5, 2, 3, 6, 8, 6, 5, 4, 7, 1, 9];
let arr2 = arr.filter((element, index, self) => self.indexOf(element) === index);

// 這至關於
let arr = [5, 2, 3, 6, 8, 6, 5, 4, 7, 1, 9];
let arr2 = arr.filter(function (element,index,self) {
    return self.indexOf(element) === index
})

//注意2 若是要返回一個對象，剛好是單表達式的話，這麼寫會報錯：

// SyntaxError:
x => { foo: x }
// 由於和函數體的{ ... }有語法衝突，因此要改成：

// ok:
x => ({ foo: x })

箭頭函數不僅是寫法上更簡單了，更重要的是它修改了this的指代問題（即修改了this的做用域），具體案例我找找補充上哈哈
補充上了 關於箭頭函數的this指向問題

你們可使用node環境使用WebStorm輸入代碼，在控制檯查看結果。(沒錯，我是JetBrians腦殘粉~)

類的支持

ES6中添加了對類的支持，引入了class關鍵字（其實class在JavaScript中一直是保留字，目的就是考慮到可能在之後的新版本中會用到，如今終於派上用場了）。JS自己就是面向對象的，ES6中提供的類實際上只是JS原型模式的包裝。如今提供原生的class支持後，對象的建立，繼承更加直觀了，而且父類方法的調用，實例化，靜態方法和構造函數等概念都更加形象化。

PS:在ES5中 你想實現一個繼承關係，須要寫幾十行代碼，徹底崩潰在廁全部木有，自從有了類（麻蛋的等了你多少年了），麻麻不再用擔憂我不會寫原型繼承了~

下面代碼展現了類在ES6中的使用。再次囉嗦一句，你能夠將代碼在node環境中運行並查看結果。

//類的定義
class Animal {
    //ES6中新型構造器
    constructor(name) {
        this.name = name;
    }
    //實例方法
    sayName() {
        console.log('My name is '+this.name);
    }
}
//類的繼承
class Programmer extends Animal {
    constructor(name) {
        //直接調用父類構造器進行初始化
        super(name);
    }
    program() {
        console.log("I'm coding...");
    }
}
//測試咱們的類
var animal=new Animal('dummy'),
wayou=new Programmer('wayou');
animal.sayName();//輸出 ‘My name is dummy’
wayou.sayName();//輸出 ‘My name is wayou’
wayou.program();//輸出 ‘I'm coding...’

加強的對象字面量

對象字面量被加強了，寫法更加簡潔與靈活，同時在定義對象的時候可以作的事情更多了。具體表如今：

• 能夠在對象字面量裏面定義原型
• 定義方法能夠不用function關鍵字
• 直接調用父類方法

這樣一來，對象字面量與前面提到的類概念更加吻合，在編寫面向對象的JavaScript時更加輕鬆方便了。

//經過對象字面量建立對象
var human = {
    breathe() {
        console.log('breathing...');
    }
};
var worker = {
    __proto__: human, //設置此對象的原型爲human,至關於繼承human
    company: 'freelancer',
    work() {
        console.log('working...');
    }
};
human.breathe();//輸出 ‘breathing...’
//調用繼承來的breathe方法
worker.breathe();//輸出 ‘breathing...’

字符串模板

字符串模板相對簡單易懂些。ES6中容許使用反引號 ` 來建立字符串，此種方法建立的字符串裏面能夠包含由美圓符號加花括號包裹的變量${vraible}。若是你使用過像C#等後端強類型語言的話，對此功能應該不會陌生。

//產生一個隨機數
var num=Math.random();
//將這個數字輸出到console
console.log(`your num is ${num}`);

解構

自動解析數組或對象中的值。好比若一個函數要返回多個值，常規的作法是返回一個對象，將每一個值作爲這個對象的屬性返回。但在ES6中，利用解構這一特性，能夠直接返回一個數組，而後數組中的值會自動被解析到對應接收該值的變量中。

var [x,y]=getVal(),//函數返回值的解構
    [name,,age]=['wayou','male','secrect'];//數組解構

function getVal() {
    return [ 1, 2 ];
}

console.log('x:'+x+', y:'+y);//輸出：x:1, y:2 
console.log('name:'+name+', age:'+age);//輸出： name:wayou, age:secrect

參數默認值，不定參數，拓展參數

默認參數值

如今能夠在定義函數的時候指定參數的默認值了，而不用像之前那樣經過邏輯或操做符來達到目的了。

// 之前須要這樣寫，有木有很智障的感受
function sayHello(name){
    //傳統的指定默認參數的方式
    var name=name||'dude';
    console.log('Hello '+name);
}
//運用ES6的默認參數以後，麻蛋的好像python呀
function sayHello2(name='dude'){
    console.log(`Hello ${name}`);
}
sayHello();//輸出：Hello dude
sayHello('Wayou');//輸出：Hello Wayou
sayHello2();//輸出：Hello dude
sayHello2('Wayou');//輸出：Hello Wayou

不定參數

不定參數是在函數中使用命名參數同時接收不定數量的未命名參數。這只是一種語法糖，在之前的JavaScript代碼中咱們能夠經過arguments變量來達到這一目的。不定參數的格式是三個句點後跟表明全部不定參數的變量名。好比下面這個例子中，…x表明了全部傳入add函數的參數。

//將全部參數相加的函數
function add(...x){
    return x.reduce((m,n)=>m+n);
}
//傳遞任意個數的參數
console.log(add(1,2,3));//輸出：6
console.log(add(1,2,3,4,5));//輸出：15

拓展參數（拓展運算符）

拓展參數則是另外一種形式的語法糖，它容許傳遞數組或者類數組直接作爲函數的參數而不用經過apply。

var people=['Wayou','John','Sherlock'];
//sayHello函數原本接收三個單獨的參數人妖，人二和人三
function sayHello(people1,people2,people3){
    console.log(`Hello ${people1},${people2},${people3}`);
}
//可是咱們將一個數組以拓展參數的形式傳遞，它能很好地映射到每一個單獨的參數
sayHello(...people);//輸出：Hello Wayou,John,Sherlock 

//而在之前，若是須要傳遞數組當參數，咱們須要使用函數的apply方法
sayHello.apply(null,people);//輸出：Hello Wayou,John,Sherlock 

// 有一個很經常使用的場景，把數組對象（僞數組）變成一個真正的數組，你只須要這樣作：
[...arryObj]

let與const 關鍵字

能夠把let當作var，只是它定義的變量被限定在了特定範圍內才能使用，而離開這個範圍則無效。const則很直觀，用來定義常量，即沒法被更改值的變量。

for (let i=0;i<2;i++)console.log(i);//輸出: 0,1
console.log(i);//輸出：undefined,嚴格模式下會報錯

for of 值遍歷

咱們都知道for in 循環用於遍歷數組，類數組或對象，ES6中新引入的for of循環功能類似，不一樣的是每次循環它提供的不是序號而是值。

聽說，for of 比 for in 遍歷效率高哦~，，敲黑板！！由於for of 實現的是對象的迭代器方法

var someArray = [ "a", "b", "c" ];
 
for (v of someArray) {
    console.log(v);//輸出 a,b,c
}

注意，此功能google traceur並未實現，因此沒法模擬調試,下面有些功能也是如此

iterator, generator

這一部分的內容有點生澀，詳情能夠參見這裏。如下是些基本概念。

• iterator:它是這麼一個對象，擁有一個next方法，這個方法返回一個對象{done,value}，這個對象包含兩個屬性，一個布爾類型的done和包含任意值的value
• iterable: 這是這麼一個對象，擁有一個obj[@@iterator]方法，這個方法返回一個iterator
• generator: 它是一種特殊的iterator。反的next方法能夠接收一個參數而且返回值取決與它的構造函數（generator function）。generator同時擁有一個throw方法
• generator 函數: 即generator的構造函數。此函數內可使用yield關鍵字。在yield出現的地方能夠經過generator的next或throw方法向外界傳遞值。generator 函數是經過function*來聲明的
• yield 關鍵字：它能夠暫停函數的執行，隨後能夠再進進入函數繼續執行

模塊

在ES6標準中，JavaScript原生支持module了。這種將JS代碼分割成不一樣功能的小塊進行模塊化的概念是在一些三方規範中流行起來的，好比CommonJS和AMD模式。

將不一樣功能的代碼分別寫在不一樣文件中，各模塊只需導出公共接口部分，而後經過模塊的導入的方式能夠在其餘地方使用。下面的例子來自tutsplus:

（這個我沒咋用過）

// point.js
module "point" {
    export class Point {
        constructor (x, y) {
            public x = x;
            public y = y;
        }
    }
}
 
// myapp.js
//聲明引用的模塊
module point from "/point.js";
//這裏能夠看出，儘管聲明瞭引用的模塊，仍是能夠經過指定須要的部分進行導入
import Point from "point";
 
var origin = new Point(0, 0);
console.log(origin);

Map 和 Set

ES6提供了新的數據結構Set。它相似於數組，可是成員的值都是惟一的，沒有重複的值。

Set函數能夠接受一個數組（或相似數組的對象）做爲參數，用來初始化。。

// 例一
var set = new Set([1, 2, 3, 4, 4]);
[...set]
// [1, 2, 3, 4]

var s = new Set();

[2, 3, 5, 4, 5, 2, 2].map(x => s.add(x));

for (let i of s) {
  console.log(i);
}
// 2 3 5 4
/*
四個操做方法：

add(value)：添加某個值，返回Set結構自己。
delete(value)：刪除某個值，返回一個布爾值，表示刪除是否成功。
has(value)：返回一個布爾值，表示該值是否爲Set的成員。
clear()：清除全部成員，沒有返回值
set內部的元素能夠遍歷for...of...
*/

Map結構提供了「值—值」的對應，是一種更完善的Hash結構實現。若是你須要「鍵值對」的數據結構，Map比Object更合適。它相似於對象，也是鍵值對的集合，可是「鍵」的範圍不限於字符串，各類類型的值（包括對象）均可以看成鍵。

var m = new Map();
var o = {p: "Hello World"};

m.set(o, "content")
m.get(o) // "content"

m.has(o) // true
m.delete(o) // true
m.has(o) // false

注意，只有對同一個對象的引用，Map結構纔將其視爲同一個鍵。這一點要很是當心。

var map = new Map();

map.set(['a'], 555);
map.get(['a']) // undefined
上面代碼的set和get方法，表面是針對同一個鍵，但實際上這是兩個值，內存地址是不同的，所以get方法沒法讀取該鍵，返回undefined。

若是Map的鍵是一個簡單類型的值（數字、字符串、布爾值），則只要兩個值嚴格相等，Map將其視爲一個鍵，包括0和-0。另外，雖然NaN不嚴格相等於自身，但Map將其視爲同一個鍵。

實例屬性和方法：size、set、get、has、delete、clear

遍歷方法：keys（）、values（）、entries（）、forEach（）

Proxies

Proxy能夠監聽對象身上發生了什麼事情，並在這些事情發生後執行一些相應的操做。一會兒讓咱們對一個對象有了很強的追蹤能力，同時在數據綁定方面也頗有用處。

如下例子借用自這裏。``

//定義被偵聽的目標對象
var engineer = { name: 'Joe Sixpack', salary: 50 };
//定義處理程序
var interceptor = {
  set: function (receiver, property, value) {
    console.log(property, 'is changed to', value);
    receiver[property] = value;
  }
};
//建立代理以進行偵聽
engineer = Proxy(engineer, interceptor);
//作一些改動來觸發代理
engineer.salary = 60;//控制檯輸出：salary is changed to 60

上面代碼我已加了註釋，這裏進一步解釋。對於處理程序，是在被偵聽的對象身上發生了相應事件以後，處理程序裏面的方法就會被調用，上面例子中咱們設置了set的處理函數，代表，若是咱們偵聽的對象的屬性被更改，也就是被set了，那這個處理程序就會被調用，同時經過參數可以得知是哪一個屬性被更改，更改成了什麼值。

Symbols

咱們知道對象實際上是鍵值對的集合，而鍵一般來講是字符串。而如今除了字符串外，咱們還能夠用symbol這種值來作爲對象的鍵。Symbol是一種基本類型，像數字，字符串還有布爾同樣，它不是一個對象。Symbol 經過調用symbol函數產生，它接收一個可選的名字參數，該函數返回的symbol是惟一的。以後就能夠用這個返回值作爲對象的鍵了。Symbol還能夠用來建立私有屬性，外部沒法直接訪問由symbol作爲鍵的屬性值。

如下例子來自es6features

(function() {

  // 建立symbol
  var key = Symbol("key");

  function MyClass(privateData) {
    this[key] = privateData;
  }

  MyClass.prototype = {
    doStuff: function() {
      ... this[key] ...
    }
  };

})();

var c = new MyClass("hello")
c["key"] === undefined//沒法訪問該屬性，由於是私有的

Math，Number，String，Object 的新API

對Math,Number,String還有Object等添加了許多新的API。下面代碼一樣來自es6features，對這些新API進行了簡單展現。

Number.EPSILON
Number.isInteger(Infinity) // false
Number.isNaN("NaN") // false

Math.acosh(3) // 1.762747174039086
Math.hypot(3, 4) // 5
Math.imul(Math.pow(2, 32) - 1, Math.pow(2, 32) - 2) // 2

"abcde".contains("cd") // true
"abc".repeat(3) // "abcabcabc"

Array.from(document.querySelectorAll('*')) // Returns a real Array
Array.of(1, 2, 3) // Similar to new Array(...), but without special one-arg behavior
[0, 0, 0].fill(7, 1) // [0,7,7]
[1,2,3].findIndex(x => x == 2) // 1
["a", "b", "c"].entries() // iterator [0, "a"], [1,"b"], [2,"c"]
["a", "b", "c"].keys() // iterator 0, 1, 2
["a", "b", "c"].values() // iterator "a", "b", "c"

Object.assign(Point, { origin: new Point(0,0) })

Promises

這個我專門寫過一篇文章 Promise的前世此生

Promises是處理異步操做的一種模式，以前在不少三方庫中有實現，好比jQuery的deferred 對象。當你發起一個異步請求，並綁定了.when(), .done()等事件處理程序時，其實就是在應用promise模式。

//建立promise
var promise = new Promise(function(resolve, reject) {
    // 進行一些異步或耗時操做
    if ( /*若是成功 */ ) {
        resolve("Stuff worked!");
    } else {
        reject(Error("It broke"));
    }
});
//綁定處理程序
promise.then(function(result) {
    //promise成功的話會執行這裏
    console.log(result); // "Stuff worked!"
}, function(err) {
    //promise失敗會執行這裏
    console.log(err); // Error: "It broke"
});

總結

ES6語法如今愈來愈普及，在vue項目中基本能用ES6的都用上了ES6，它不只讓你的代碼更優雅（更裝逼？），也讓JS變得更加像一門後端語言，若是想詳細學習ES6，移步到阮一峯大佬的-ECMAScript 6 入門。