[JS] 語法糖

TL;DR

語法糖主要是提供另外一種撰寫形式，可以讓程式碼看起來比較精簡。在程式運作邏輯上完全相同。 但是像是箭頭函示，雖然看起來有比較精簡，但是在程式碼的運作上會有不同的地方（例如，箭頭函示沒有自己的this） 所以箭頭函示就不是語法糖。

以下介紹各種語法糖，作為學習Vue之前的預備知識。

參考資料

• ES6的語法糖 & 新增語法(@Zihyin) | HackMD
• [JavaScript] Javascript ES6 中的展開/其餘運算子(Spread operator/Rest operator)(itsems) | Medium

物件字面值

函式縮寫形式

原始物件如下：

const obj = {
  myName: '物件',
  fn: function() {
    return this.myName;
  }
}

console.log(obj.fn());

可以縮寫成以下形式，得到的結果會完全相同。

const obj = {
  myName: '物件',
  fn() {
    return this.myName;
  }
}

console.log(obj.fn());

變數名稱同名可省略

以下分別定義一個person以及people變數，並且在people內帶入person的資料：

const person = {
  name: '小明'
};

const people = {
  person: person
}

因為我們在定義people內屬性名稱與變數名稱相同,所以可以直接省略如下：

const person = {
  name: '小明'
};
const people = {
  person
}

展開運算符(spread operator)

這邊僅簡單介紹展開運算符常用的功能。

陣列的組和

我們平常要組合兩個陣列的時候通常會使用concat語法：

const groupA = ['小明', '杰倫', '阿姨'];
const groupB = ['老媽', '老爸'];
const groupAll = groupA.concat(groupB);

使用展開運算符可以達到一樣的效果，而且比較好記憶：

const groupA = ['小明', '杰倫', '阿姨'];
const groupB = ['老媽', '老爸'];
const groupAll = [...groupA,...groupB];

物件的擴展

在開發上很常會在物件內定義許多方法，如果今天要定義一個新的物件，裡面需要包含原有物件的所有方法時，就可以使用展開運算符。

const methods = {
  fn1() {
    console.log(1);
  },
  fn2() {
    console.log(1);
  },
}

const newMethods = {
  fn() {
    console.log(1);
  },
  ...methods
}

這邊同時複習前面提到的，物件內函式的縮寫形式

類陣列轉陣列

const doms = document.querySelectorAll('li');
console.log(doms); 

此時的doms會輸出一個類陣列NodeList，類陣列預設是沒有那麼多陣列(Array)所提供的方法可以使用的。 我們可以透過展開運算符轉換成陣列：

const doms = document.querySelectorAll('li');
console.log(doms); 
const newDoms = [...doms];
console.log(newDoms);

展開運算符

符號與其餘運算子長得一模一樣，但是用途其實不同。
展開運算符常運用在陣列的組合、淺拷貝、類陣列轉陣列等等

函式預設值

在傳送參數到韓式內時，為了避免錯誤我們通常需要額外處理：

function sum(a, b) {
  if(!b){b=2};
  return a + b;
}
console.log(sum(1));

我們可以使用以下方式改寫：

function sum(a, b=2) {
  return a + b;
}
console.log(sum(1));

如果b有傳入參數，就會以傳入的參數為主。反之，如果沒有傳入的參數，就會帶入預設值2。