---
title: ES6的語法糖 & 新增語法
tags: 前端沒有盡頭的牆外調查, 六角
date: 20220423
image:
---

# ES6的語法糖 & 新增語法

## 什麼是語法糖?

語法糖 : 語法糖意指更加簡潔流暢、更好理解的語法，不會影響運作，邏輯與當前JS一致。

參考資料 : [Day20【ES6 小筆記】什麼是「語法糖」哩？](https://ithelp.ithome.com.tw/articles/10218664)

---
> Q : **請問箭頭函式是縮寫嗎?**[color=green]
>
> A : 箭頭函式不是語法糖，而是新增語法。

傳統函式 :

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

箭頭函式:

tips : 但其實如果有用到this就不能用箭頭函式

const obj={
    myName:'物件',
    fn : ()=> {
        return this.myName;
    }
}
console.log(obj.fn()) //undefined

> Q : **請問let,const是語法糖還是新增語法?**[color=green]
>
> A : let , const是新增語法。

因為 `let` 的作用域只存在於 block 之中，超出 block 之外就等於沒有宣告這個變數。反之， `var` 的作用域則不在 block 的限制內，而是在 function 裡面。

{
    let a = 0;
    var b = 0;
};

console.log(b) // 0
console.log(a) // is not defined

### 物件字面值

物件內的函式( **縮寫形式** ):

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

物件內的變數:

const myName = '小明';
const person = {
    //縮寫前
    myName='小明';
    
    //縮寫後
    myName : myName;(x)
    myName (o)
}
consoel.log(person)

### 展開

不同陣列合併

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

//合併前
const groupAll = groupA.concat(groupB);

//合併後
const groupAll = [...groupA,...groupB]

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

物件擴展 : 新增一個物件包含新方法，同時加入原有的方法。
> Q : **請問 methods.fn3();可以動嗎?**[color=green]
> A : 可以動。

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

const methods2 = methods;

//在 methods2 新增一個fn3
methods2.fn3 = function(){
    console.log(3);
}

methods.fn3();

console.log(methods === methods2)//true

那如果我希望 `methods2` 的變動不要影響 `methods`呢?

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

const methods2 = {
    ...methods,
    
    //在 methods2 新增一個fn3
    fn3(){
        console.log(3)
    }
} 
console.log(methods === methods2)//false

### 解構 ( 把值取出重新組合並解開，便於把內容拆解出來 )

// 原始
const casper = people.casper;

// 解構
const { casper } = people;

// 取多筆變數
const { casper , ray } = people;

console.log(casper,ray)


## 什麼是新增語法? (箭頭函式、let & const)

與語法糖相反，新增語法會影響當前JS的運作。

以下這篇文章也有提到「箭頭函式」不是語法糖，以及使用 debounce 時使用箭頭函式觸發的雷點 XD
- [Vue 中使用 debounce 防止前端瘋狂發送請求](https://khiav223577.github.io/blog/2018/04/09/Vue-%E4%B8%AD%E4%BD%BF%E7%94%A8-debounce-%E9%98%B2%E6%AD%A2%E5%89%8D%E7%AB%AF%E7%98%8B%E7%8B%82%E7%99%BC%E9%80%81%E8%AB%8B%E6%B1%82/)
### 避免值不存在

以範例而言，people.jay不在物件裡面，所以會跳紅字錯誤。


這時可以利用 `?.` ( **可選串連運算子** ) 來避免console中跳紅字錯誤，回傳出 `undefined` 的結果。


people.jay是undefined

### 類陣列轉純陣列，用...展開

類陣列，類似陣列的結構，比起純陣列會少很多方法

如範例所示，在我們取出所有的p之後，如果我們用console.log去看p，就會變成 **類陣列** 。此時如果直接用 `map()` 會報錯。


因此我們可以透過 `[...]` 將他轉成純陣列，這樣才不會報錯。


### 預設值
我們在做這類計算函式時，需要加入預設值避免錯誤。

原始函式:

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

如果console.log沒有輸入b值，b的預設值就會是2;如果有輸入b值，就會以新輸入的值做計算。

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

#### 參考資料

[JS 語法糖整理](https://codingsnorlax.github.io/2021/12/28/2021-12-2021-12-JS-%E7%B0%A1%E5%AF%AB%E5%BD%99%E6%95%B4/)