Es6使用心得（持續更新）

變量聲明

let 和const

1. let 允許創建塊級作用域，ES6 推薦在函數中使用 let 定義變量，而非 var：
2. 同樣在塊級作用域有效的另一個變量聲明方式是 const，它可以聲明一個常量。ES6 中，const 聲明的常量類似於指針，它指向某個引用，也就是說這個「常量」並非一成不變的
3. 需要注意的地方
   3.1. 當使用常量 const 聲明時，請使用大寫變量，如：CAPITAL_CASING
   3.2. const 在聲明時必須被賦值

箭頭函數

引入箭頭函數有兩個方面的作用：更簡短的函數並且不綁定this。

1. 更簡短的函數

var elements = [
  'Hydrogen',
  'Helium',
  'Lithium',
  'Beryllium'
];

elements.map(function(element) { 
  return element.length; 
}); // 返回數組：[8, 6, 7, 9]

// 上面的普通函數可以改寫成如下的箭頭函數
elements.map((element) => {
  return element.length;
}); // [8, 6, 7, 9]

// 當箭頭函數只有一個參數時，可以省略參數的圓括號
elements.map(element => {
 return element.length;
}); // [8, 6, 7, 9]

// 當箭頭函數的函數體只有一個 `return` 語句時，可以省略 `return` 關鍵字和方法體的花括號
elements.map(element => element.length); // [8, 6, 7, 9]

// 在這個例子中，因爲我們只需要 `length` 屬性，所以可以使用參數解構
// 需要注意的是字符串 `"length"` 是我們想要獲得的屬性的名稱，而 `lengthFooBArX` 則只是個變量名，
// 可以替換成任意合法的變量名
elements.map(({ "length": lengthFooBArX }) => lengthFooBArX); // [8, 6, 7, 9]

2. 不綁定this
   2.1. 在箭頭函數出現之前，每個新定義的函數都有它自己的 this值（在構造函數的情況下是一個新對象，在嚴格模式的函數調用中爲 undefined，如果該函數被作爲“對象方法”調用則爲基礎對象等）。This被證明是令人厭煩的面向對象風格的編程。
   2.2. 在全局環境下，this 始終指向全局對象（window）, 無論是否嚴格模式；
   2.3. 對象中的this，對象內部方法的this指向調用這些方法的對象，函數的定義位置不影響其this指向，this指向只和調用函數的對象有關。多層嵌套的對象，內部方法的this指向離被調用函數最近的對象（window也是對象，其內部對象調用方法的this指向內部對象， 而非window）。
   2.4.箭頭函數中的 this，由於箭頭函數不綁定this， 它會捕獲其所在（即定義的位置）上下文的this值， 作爲自己的this值，所以 call() / apply() / bind() 方法對於箭頭函數來說只是傳入參數，對它的 this 毫無影響。考慮到 this 是詞法層面上的，嚴格模式中與 this 相關的規則都將被忽略。（可以忽略是否在嚴格模式下的影響）
   因爲箭頭函數可以捕獲其所在上下文的this值

模板字符串(template string)

在ES6之前，我們往往這麼處理模板字符串：
通過“\”和“+”來構建模板
而對ES6來說
基本的字符串格式化。將表達式嵌入字符串中進行拼接。用${}來界定；
ES6反引號(``)直接搞定；

$("body").html(`This demonstrates the output of HTML content to the page, 
including student's ${name}, ${seatNumber}, ${sex} and so on.`);

解構賦值

// 對象
const student = {
    name: 'James',
    age: 24,
    sex: '男'
}
// 數組
// const student = ['James', 24, '男'];

// ES5；
const name = student.name;
const age = student.age;
const sex = student.sex;
console.log(name + ' --- ' + age + ' --- ' + sex);

// ES6
const { name, age, sex } = student;
console.log(name + ' --- ' + age + ' --- ' + sex);

函數的參數默認值

在ES6之前，我們往往這樣定義參數的默認值：

// ES6之前，當未傳入參數時，text = 'default'；
function printText(text) {
    text = text || 'default';
    console.log(text);
}

// ES6；
function printText(text = 'default') {
    console.log(text);
}

printText('hello'); // hello
printText();// default

Spread / Rest 操作符

Spread / Rest 操作符指的是 …，具體是 Spread 還是 Rest 需要看上下文語境。
當被用於迭代器中時，它是一個 Spread 操作符：

function foo(x,y,z) {
  console.log(x,y,z);
}
 
let arr = [1,2,3];
foo(...arr); // 1 2 3

當被用於函數傳參時，是一個 Rest 操作符：當被用於函數傳參時，是一個 Rest 操作符：

function foo(...args) {
  console.log(args);
}
foo( 1, 2, 3, 4, 5); // [1, 2, 3, 4, 5]

for…of 和 for…in

for…of 用於遍歷一個迭代器，如數組：

let letter = ['a', 'b', 'c'];
letter.size = 3;
for (let letter of letters) {
  console.log(letter);
}
// 結果: a, b, c

for…of 也可用於遍歷一個對象，

let letter = {name: 'james', age: '21'}
for (let letter of letters) {
  console.log(letter);
}
// 結果:name age

for…in 用來遍歷對象中的屬性：

let stu = ['Sam', '22', '男'];
stu.size = 3;
for (let stu in stus) {
  console.log(stu);
}
// 結果: Sam, 22, 男

模塊化 export 和 import

import 導入模塊、export 導出模塊

可以直接在任何變量或者函數前面加上一個 export 關鍵字，就可以將它導出。

在一個文件中：

 export const sqrt = Math.sqrt;
 export function square(x) {
    return x * x;
 }
 export function diag(x, y) {
      return sqrt(square(x) + square(y));
 }

Promise

在promise之前代碼過多的回調或者嵌套，可讀性差、耦合度高、擴展性低。通過Promise機制，扁平化的代碼機構，大大提高了代碼可讀性；用同步編程的方式來編寫異步代碼，保存線性的代碼邏輯，極大的降低了代碼耦合性而提高了程序的可擴展性。

就是用同步的方式去寫異步代碼。

//Promise對象 ---> 用來傳遞異步操作過來的數據的
//Pending(等待、處理中) ---> Resolve(完成，fullFilled)   ---> Reject(拒絕，失敗)
//這裏只是定義，還沒開始執行
var p1 = new Promise(function(resolve,reject){
    resolve(1); // 成功了，返回一個promise對象1
    // reject(2); // 失敗了
});

// 接收成功和失敗的數據，通過then來傳遞
// then也是返回一個promise對象，會繼續往下傳遞數據,傳遞給下一個then
p1.then(function(value){
    // resolve
    console.log(value); //執行打印1
    return value + 1; // 1
    alert(`成功了：${value}`);
},function(value){
    // reject
    alert(`失敗了：${value}`);
}).then(function(value){
    console.log(value); // 2
});

//catch捕獲異常錯誤
var p1 = new Promise(function(resolve,reject){
    resolve('成功了'); //返回一個promise對象“成功了”
});
//then也是返回一個promise對象，會繼續往下傳遞數據
p1.then(function(value){
    console.log(value); //打印“成功了”
    // throw是用來拋錯誤的
    throw '發生了點小意外';
}).catch(function(e){
    // catch用來捕獲這個錯誤的 ---> 追蹤
    console.log(e);
});

//all ---> 全部，用於將多個promise對象，組合，包裝成
//Promise.all([p1,p2,p3,...]); 所有的promise對象，都正確，才走成功
//否則，只要有一個錯誤，就走失敗
var p1 = Promise.resolve(1);
var p2 = Promise.reject(0);
Promise.all([true,p1,p2]).then(function(obj){
    console.log(`成功了：${obj}`);
},function(obj){
    console.log(`失敗了：${obj}`);
});

// race ---> 返回的也是一個promise對象
//最先執行的的promise結果，哪個最快我用哪個，所以下面打印的是one
var p1 = new Promise(function(resolve,reject){
    setTimeout(resolve,50,'one');
});
var p2 = new Promise(function(resolve,reject){
    setTimeout(resolve,100,'two');
});
Promise.race([p1,p2]).then(function(val){
    console.log(val);
});

//resolve ---> 生成一個成功的promise對象
//語法規則：Promise.resolve(val); // 普通值
// Promise.resolve(arr); // 數組之類
//Promise.resolve(promise); // 傳遞另一個promise對象
//傳遞普通值
Promise.resolve('success').then(function(val){
    // 注意resolve，走得是這裏
    console.log(val); // success
},function(err){
    console.log("err:"+ err);
});
//傳遞數組
Promise.resolve([1,2,3]).then(function(val){
    // 注意resolve，走得是這裏
    console.log(val); // [1,2,3]
},function(err){
    console.log(err);
});
//傳遞一個promise對象
var p1 = Promise.resolve(520);
var p2 = Promise.resolve(p1);
p2.then(function(val){
    //從p1那邊傳遞過來的
    console.log(val); // 520
});