ES6+ 經常使用語法整理

• 箭頭函數

// 5
function greet (name) {
    return 'Hello, '+ name;
}
// 6
const greet = (name) => {
    return 'Hello, '+ name;
}
// 因爲函數內容只有一句，能夠去掉{}，而且省略return關鍵字
const greet = (name) => console.log('Hello, '+ name);
// 進一步簡化，因爲參數也只有一個，參數的括號也能夠省略。參數多於一個時必須用括號包裹
const greet = name => console.log('Hello, '+ name);
*因此當看到一句的函數若是不理解，能夠一步一步的反推，還原成你熟悉的代碼*

// 回調 5
const names = ['Tom','Jerry','Dog'];
names.map(function(name){
    console.log(name);
});
// 6
names.map(name=> console.log(name));
// 當須要直接返回一個對象怎麼辦？直接寫{}發現是錯的。這是須要把要返回的對象用()包裹。這個用法比較生僻，很差找。
const test = (a,b) => ({a,b});
test(1,2); // {a:1, b:2}

• 擴展運算符

// ...的一個通用的用法就是把對象展開
// 展開數組
console.log(...[1,2,3]) // 1 2 3
// 展開對象
const people = {name:'Tome', age: 18};
const coder = {...people, scope:'javascript'};
console.log(coder); // {name: "Tome", age: 18, scope: "javascript"}
// 展開字符串
console.log(...'hello'); // h e l l o

• 變量聲明

// 6中不建議繼續使用var來聲明變量，推薦使用let和const聲明，以此避免var聲明存在的弊端，看下例子
// 5, 不賣關子，輸出10個10
for (var i = 0; i < 10; i++) {
    setTimeout(() => console.log(i));
}
// 6, 輸出0 ... 9
for (let i = 0; i < 10; i++) {
    setTimeout(() => console.log(i));
}
// 差異一目瞭然，若是你不理解，簡單來說，let能避免var的一些沒必要要的麻煩

// const用來聲明常量，也就是聲明瞭以後不能再被賦值。底層的優勢不說了，用const能避免誤操做，以下這種誤操做會報錯，若是用var則不會。
const MAX = 20;
if(MAX = number){
    // ...
}
// 還有一些簡單的聲明方式，或者是語法糖
// 直接使用對象的屬性，簡化掉冗長的點調用
const student = { name: 'Tom', age: 18, grade: 3, score: 100 };
const {name, age, grade, score} = student;
console.log(name, age, grade, score); // Tom 18 3 100
// 若是是多層的嵌套的對象，好比http請求中的req對象
req={body:{name:'test name'},headers:{...}};
const {body:{name}}=req;
console.log(name); // 反向追蹤到要用的屬性便可得到
// 一次性聲明多個變量並賦值
let [x,y,z] = [1,2,3];
console.log(x,y,z); // 1 2 3

ES6+ 對於書寫來講提供了極大的方便，可能有些地方不那麼好理解，多練習就好！