-

ES6語法總結

功能整理

回撥函式：

  //ES6
  array.forEach(v = > console.log(v));

重寫父類構造方法(功能複用)：

//通過物件字面量建立物件
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...'

自動解析陣列：

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

引數值：

• 1.預設引數

 function sayHello(name){
   //傳統的指定預設引數的方式
   var name=name||'dude';
   console.log('Hello '+name);
}
//運用ES6的預設引數
function sayHello2(name='dude'){
  console.log(`Hello ${name}`);
}
sayHello();//輸出：Hello dude
sayHello('Wayou');//輸出：Hello Wayou
sayHello2();//輸出：Hello dude
 

sayHello2('Wayou');//輸出：Hello Wayou

• 2.不定引數

//將所有引數相加的函式
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 

• 3.擴充套件引數

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 

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迴圈功能相似，
不同的是每次迴圈它提供的不是序號而是值。

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了

// 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 和 WeakMap，WeakSet：

這些是新加的集合型別，提供了更加方便的獲取屬性值的方法，不用像以前一樣用hasOwnProperty來檢查某個屬性是屬於原型鏈上的呢還是當前物件的。同時，在進行屬性值新增與獲取時有專門的get，set 方法。
// Sets
var s = new Set();
s.add("hello").add("goodbye").add("hello");
s.size === 2;
s.has("hello") === true;

// Maps
var m = new Map();
m.set("hello", 42);
m.set(s, 34);
m.get(s) == 34;

有時候我們會把物件作為一個物件的鍵用來存放屬性值，普通集合型別比如簡單物件會阻止垃圾回收器對這些作為屬性鍵存在的物件的回收，有造成記憶體洩漏的危險。而WeakMap,WeakSet則更加安全些，這些作為屬性鍵的物件如果沒有別的變數在引用它們，則會被回收釋放掉，具體還看下面的例子。
// Weak Maps
var wm = new WeakMap();
wm.set(s, { extra: 42 });
wm.size === undefined

// Weak Sets
var ws = new WeakSet();
ws.add({ data: 42 });//因為新增到ws的這個臨時物件沒有其他變數引用它，所以ws不會儲存它的值，也就是說這次新增其實沒有意思

Proxies：

Proxy可以監聽物件身上發生了什麼事情，並在這些事情發生後執行一些相應的操作。一下子讓我們對一個物件有了很強的追蹤能力，同時在資料繫結方面也很有用處
eg:
//定義被偵聽的目標物件
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做為鍵的屬性值

Math，Number，String，Object 的新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：

 是處理非同步操作的一種模式，之前在很多三方庫中有實現，比如jQuery的deferred 物件。當你發起一個非同步請求，並綁定了.when(), .done()等事件處理程式時，其實就是在應用promise模式。