---
# System prepended metadata

title: ES6語法糖：常見縮寫

---

**物件字面值**
1. 物件內函式縮寫
    ```
    const product = {
        name: '商品',
        fn: function() {
        return this.name;
          }
        }
    console.log(product.fn());
    ``` 
    物件中的 fn:function()
    可簡寫為 fn()
    ```
    const product = {
        name: '商品',
        fn() {
        return this.name;
          }
        }
    console.log(product.fn());
    ``` 
    上述兩種寫法得到相同的結果
    補充：箭頭函式為新增語法，this指向不同，會影響運作，語法糖則不影響運作，邏輯與當前JavaScript一致。
    
2. 物件內變數
    Key與Value名稱相同時
    ```
    const man = {
        name: 小明
    }
    const people = {
        man: man
    }
    ```
    可省去同名的部分，簡寫為下方的方式：
    ```
    const man = {
        name: 小明
    }
    const people = {
        man
    }
    ```
    結果如下：
    ![image](https://hackmd.io/_uploads/S1u_w-g9T.png)


**展開**
1. 陣列串接
    使用concact語法將兩個陣列串接起來：
    ```
    const groupA = ['蘋果','梨子','橘子']
    const groupB = ['香蕉','柳丁']
    const groupAll = groupA.concact(groupB)
    console.log(groupAll)
    ```
    使用「展開」來串接
    ```
    const groupA = ['蘋果','梨子','橘子']
    const groupB = ['香蕉','柳丁']
    const groupAll = [...groupA, ...groupB]
    console.log(groupAll)
    ```
    得到相同結果：
    ![image](https://hackmd.io/_uploads/BydBwbe96.png)
    
2. 物件串接
    ```
    const methods = {
      fn1() {
        console.log(1);
     },
      fn2() {
        console.log(1);
      },
    }

    const newMethods = {
      ...methods,
      fn3() {
        console.log(1);
      }
    }
    console.log(newMethods);
    ```
    得到以下結果：
    ![image](https://hackmd.io/_uploads/B1VT8-g9T.png)


3. 轉成純陣列
    ```
    const doms = document.querySelectorAll('li');
    console.log(doms);
    ```
    印出後得到以下結果：
    ![image](https://hackmd.io/_uploads/Hyaqdbec6.png)
    並非一般純陣列，此時，如要得到純陣列，同樣可以使用展開方法
    
    ```
    const doms = document.querySelectorAll('li');
    const newDoms = [...doms]
    console.log(newDoms);
    ```
    印出後即可得到純陣列：
    ![image](https://hackmd.io/_uploads/H15xFWeqp.png)

**預設值**

如參數b不存在，會回傳NaN，使用if設定預設值為0，無參數b時，b=0，有參數則使用參數值
    ```
    function sum(a, b) {
      if(!b) { b = 0}
      return a + b;
    }
    console.log(sum(1));
    ```
    此時得到結果為「1」
    
    ES6語法糖則可直接將預設值寫在參數的位置：
    ```
    function sum(a, b = 0) { 
      return a + b;
    }
    console.log(sum(1));
    ```
    即可得到同樣的結果：1