ES6 縮寫

Photo by Yancy Min on Unsplash

這邊介紹開發中，常見的 ES6 縮寫語法

# 物件內的函式

const obj = {
  myName: "Abby",
  fn: function(){ return this.myName },  // 傳統寫法
  fn() { return this.myName },  // 縮寫寫法
}

console.log(obj.fn());  // "Abby"

# 物件字面值 Object literals

/* 物件內的變數，如果名稱是一樣的狀況，可以只寫屬性 */
const person = {
  name: "Abby"
};
const people = {
  person: person,  // 傳統寫法
  person // 縮寫寫法
}

console.log(people);  // person: {name: 'Abby'}

# 展開 — 淺層複製

/* 1. 不同陣列合併 */
const groupA = ['小明', '杰倫', '阿姨'];
const groupB = ['老媽', '老爸'];
const groupAll = groupA.concat(groupB);  // 傳統寫法
const groupAll2 = [...groupA, ...groupB];  // 縮寫寫法

console.log(groupAll); // ['小明', '杰倫', '阿姨', '老媽', '老爸']
console.log(groupAll2); // ['小明', '杰倫', '阿姨', '老媽', '老爸']


/* 2. 物件的展開 - 淺層複製 */
const methods = {
  fn1() {console.log(1)},
  fn2() {console.log(2)}
}
const new_methods = {
  fn() {console.log(0)},
  ...methods  // 縮寫寫法
}

console.log(new_methods);  // {fn: ƒ, fn1: ƒ, fn2: ƒ}


/* 3. NodeList 轉成 array */
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>
const doms = document.querySelectorAll('li');
const new_doms = [...doms];  // 縮寫寫法

console.log(doms);  // NodeList
console.log(new_doms);  // 純陣列 array

這裡的第三個案例在開發中經常使用：使用展開，讓 NodeList 轉成 array

會這麼做的原因是：
NodeList 長得像是陣列，但本質還是物件，還是可以用 forEach 跑回圈，但是無法使用一般陣列取值、新增、刪除的方式來操作。

# 預設值

/*. 傳統寫法*/
function sum(a, b) {
  if(!b){ b = 2; };  // 傳統寫法，如果少了參數，就用 if 去判斷。
  return a + b;
}
console.log(sum(1));  // 3


/* 使用預設值 */
function sum(a, b = 2) {  // 這裡用 = 去設定預設值。
  return a + b;
}
console.log(sum(1));  // 3，因為 b 沒有參數，所以使用“預設值”運算。
console.log(sum(1, 5));  // 6，因為 b 有參數，所以就用“參數”運算。