ES6提供了一些方法可以讓程式碼更簡潔的寫法，整理幾個常使用到的~

1. 箭頭函式 (arrow function)

箭頭函式一定要提到的！比起傳統函式變得更簡短，當函式只有一個參數或一行表達式時，還可以省略小括號()與大括號{}。

原本寫法：

function addNumber(a, b) {
    return a + b;
}

addNumber(5, 7); // 12

基本箭頭函式寫法

將原本function改成箭頭=>並放在參數後方，如果表達式只有一行可以省略 {} 和 return ：

const addNumber = (a, b) => a + b;
addNumber(5, 7); //12

如果只有一個參數還可以省略小括號，但如果有兩個(含)以上參數或是0個就不能省略：

//一個參數，省略小括號
const getData = name => "hello" +" "+ name;
console.log(getData("Peter")); //"hello Peter"

//2個參數或0個參數，不能省略小括號
const getData = (name, score) =>
  "hello" + " " + name + ":" + "你的分數" + score + "分";
console.log(getData("Peter", 98)); //"hello Peter:你的分數98分"

如果回傳的是物件，物件外需要再加上小括號()包著，否則會報錯，因為避免JavaScript誤認為是函式主體的區塊：

const data = (name, score) => ({ name: name, score: score });
console.log(data("Peter", 98));

箭頭函式沒有this

在this-下有提到箭頭函式沒有自己的this，簡單說，它會依照父層的this是什麼，箭頭函式的this就是什麼。

用傳統寫法：

var myName = "全域狗";
const doggy = {
  myName: "點點",
  age: 10,
  bark: function () {
    console.log(`${this.myName}汪汪叫`);
  }
};
doggy.bark(); //"點點汪汪叫"

這裡用物件方法綁定this，所以this會指向doggy物件而找到物件裡面的name:"點點"。

改成箭頭函式寫法：

var myName = "全域狗";
const doggy = {
  myName: "點點",
  age: 10,
  bark: () => {
    console.log(`${this.myName}汪汪叫`);
  }
};
doggy.bark(); //"全域狗汪汪叫"

因為箭頭函式的this不是依函式如何被呼叫決定的，而是根據它定義時來繼承this。

所以此範例來說，箭頭函式的父層就是window物件，因此指向會是window.myName，也就是"全域狗"。

2. 樣板字串(Template String)

剛剛可以看到上面範例，使用傳統字串需要一直 +，會很落落長...
現在只要加上兩個反引號(``)包裹字串即可，而且允許在裡面插入變數和表達式，也支援多行字串，程式碼就能乾淨很多~

過去寫法：

const oldString = (name, score) =>
  "hello" + " " + name + ":" + "你的分數" + score + "分";

console.log(oldString("Peter", 98)); 
//"hello Peter:你的分數98分"

樣板字串：

const newString = (name, score) => `hello ${name}:你的分數${score}分`;

console.log(newString("Peter", 98)); 
//"hello Peter:你的分數98分"

在樣板字串中，使用變數或表達式需要加上錢字號$和大括號{}包住。

3. 解構賦值(Destructuring Assignment)

解構賦值可以快速從陣列或物件中提取值，並賦值給變數。

陣列解構賦值

一般要取值透過索引值，並存在變數使用：

const colors = ["green", "red", "yellow"];
const one = colors[0]; 
const two = colors[1]; 
const three = colors[2]; 
console.log(one, two, three); //"green" "red" "yellow"

用陣列解構賦值：

const colors = ["green", "red", "yellow"];
const [one, two, three] = colors;
console.log(one, two, three); ////"green" "red" "yellow"

意思是把colors的第一個元素賦值給變數one，第二個元素賦值給變數two，第三個元素賦值給變數three。
透過陣列解構，提取出colors陣列的字串直接賦值給變數。

物件解構賦值

const { 屬性1, 屬性2... } = object;

其實跟陣列很像，差別在於物件解構用的變數名稱必須與物件屬性名稱一樣。

來看範例：

const doggy = {
  name: "點點",
  breed: "chiwawa",
  age: 10
};

這裡有三個屬性，分別為name、breed、age。過去要提取值的作法是用「點記法」或是「中括號」，然後存在變數後使用，如下寫法：

const name = doggy.name;
const breed = doggy.breed;
const age = doggy.age;

console.log(name, breed, age); //"點點" "chiwawa" 10

有了物件解構：

const { name, breed, age } = doggy;
console.log(name, breed, age); //"點點" "chiwawa" 10

剛剛要取三個屬性值就要寫三行，現在寫一行就完成了！

而且想要改成不同的變數名稱也是可以的！

解構與重新命名變數

const { name : doggyName } = doggy;
console.log(doggyName); //"點點"

我把name改成doggyName。作法是直接在name屬性加上冒號 + 新的變數名稱就完成了~

解構函式參數

當傳遞物件時，直接解構參數，提取所需要的屬性。

function dogData({ name, age }) {
  console.log(`狗狗名字叫做${name},今年${age}歲。`);
}

const doggy = {
  name: "點點",
  breed: "chiwawa",
  age: 10
};

dogData(doggy); //狗狗名字叫做點點,今年10歲。

在函式的參數中直接解構name和age屬性，當呼叫dogData(doggy)，傳入的doggy物件就會被解構。

當陣列當作引數傳遞時，也可以使用解構。

function printTwoNumber([first, second]) {
  console.log(first * second);
}
const numbers = [2, 4, 6, 8, 10];

printTwoNumber(numbers); //8

4. 其餘參數(Rest Parameters)

• 可以把函式剩餘的參數包裝成一個陣列。
• 函式最後一個參數才可以是其餘參數，如果不是放在參數最後，則會報錯。
• 以...為開頭，並會以「陣列」呈現。

範例：

function sum(first, second, ...numbers) {
  console.log(numbers); //[6,8,10]
  return first * numbers[2];
}
sum(2, 4, 6, 8, 10); //20

sum函式第一個引數2會指派給first，第二個引數4會指派給second，其餘的引數6,8,10則包裝成陣列。

印出來可以確認numbers是一個陣列，numbers[2]也就是10。
first * numbers[2]也就是2*10，結果為20。

5. 展開運算子(Spread Operator)

將陣列或物件「展開」為單獨的元素或屬性，用於複製或合併。展開運算子是淺拷貝(Shallow Copy)。

陣列展開

//陣列展開
const array1 = [1,2,3];
const array2 = [4,5,6];

const newArray = [...array1,...array2];
console.log(newArray); //[1, 2, 3, 4, 5, 6]

也可以把一個陣列內容插入到另一個陣列中：

const array1 = [1, 2, 3];
const array2 = [...array1, 4, 5, 6];

console.log(array2); //[1, 2, 3, 4, 5, 6]

物件展開

//物件展開
const song1 = {
    English:"10,000 Reasons",
    Japanese:"lemon"
}
const song2 = {
    Spanish:"Te Seguiré",
    Hebrew:"Shir Ahava"
}

const songList = {...song1,...song2};
console.log(songList); 
//{English: '10,000 Reasons', Japanese: 'lemon', Spanish: 'Te Seguiré', Hebrew: 'Shir Ahava'}

以上分享~謝謝！

參考資料

透過 ESLint 練習 JavaScript ES6