[ JS 觀念 ] ES6 縮寫

什麼是語法糖?
語法糖讓程式更加簡潔，有更高的可讀性。語法糖不會影響程式運作，邏輯與當前 JS 一致。

物件字面值 Object literals

• 物件內的函式

const apple = {
  name: '蘋果',
  fn: function() {
    return this.name;
  }
}
console.log(apple.fn());

直接將 fn: function() {} 改為 fn() {} 即可

• 物件內的變數

const person = {
  name: '阿肥'
};
const people = {
  person: person
};
console.log(people);

當名稱跟值同名，可以省略名稱。直接將 person: person 縮寫為 person 即可

展開

• 不同陣列合併

const groupA = ['阿肥', '小胖', '大摳呆'];
const groupB = ['蘋果', '香蕉'];
const groupAll = groupA.concat(groupB);

console.log(groupAll);

直接使用…展開即可，const groupAll = [...groupA, ...groupB]

• 物件擴展

新增一個物件包含新方法，同時加入原有的方法

const methods = {
  fn1() {
    console.log(1);
  },
  fn2() {
    console.log(1);
  },
}
const newMethods = {
  fn() {
    console.log(1);
  },
   ...methods
   
  // 加入原有的方法
  // 使用 ... 也可以展開 function
}
console.log(newMethods);

• 轉成純陣列

將類陣列轉為純陣列

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<script>
    const doms = document.querySelectorAll('li');
    console.log(doms);
</script>

(類陣列)

將類陣列使用 … 可以轉為純陣列

(純陣列)

預設值

console.log(sum(1));
// sun(1) 只有帶入一筆資料，會顯示 NaN
console.log(sum(1));  // 6 ，資料找不到 ，直接套用預設值 5
console.log(sum(1,3)) // 4 ，料有正常傳入，不會套用預設值