###### tags: ` JavaScript`

# ES6 JS 常見縮寫

本篇筆記是參考六角學院的教學影片作紀錄。

[六角學院 - JS 常見縮寫](https://courses.hexschool.com/courses/vue-20211/lectures/30451586)

## 語法糖與新增語法
:::info
語法糖不會影響 JS 運作，邏輯是跟一般當前 JS 一樣
但是 新增語法會影響 (ex 箭頭函式)
:::

### 一般寫法

const obj = {
    myname: "我是物件",
    fn: function(){
        return this.myname;
    }
}

console.log(obj.fn()); // 我是物件

### 語法糖 ( ES6 縮寫形式)

const obj = {
    myname: "我是物件",
    fn(){
        return this.myname;
    }
}

console.log(obj.fn()); // 我是物件

### 新增語法 ( ES6 箭頭函式 )

const obj = {
    myname: "我是物件",
    fn: () =>　{
        return this.myname;
    }
}

console.log(obj.fn()); // undefined

因為箭頭函式的關係，會造成 this 的指向不同

---

## 物件內的變數

:::info
物件內變數可以省去同名的部份
:::

### 一般寫法

const person = {
    name: "Tom"
}

const people = {
    person: person
}

### 語法糖

const person = {
    name: "Tom"
}

const people = {
    person
}

---

## 展開

### 1.陣列的合併

### 一般寫法

const a = [1,2,3];
const b = [4,5];
const all = a.concat(b);

### 語法糖

const a = [1,2,3];
const b = [4,5];
const all = [...a,...b];

### 2.物件的擴展

const methods = {
    fn1(){ 
    
    },
    fn2(){
    
    }
}

const newMethods = {
    fn3(){
    
    },
    ...methods
}

這麼一來，新的物件 newMethods 除了有自己的 function ，還包含了 methods 中的 fn1(), fn2()

### 3.轉成純陣列

const doms = document.querySelectorAll('li'); // __proto__ 的可用方法少了很多一般純陣列可使用的方法

const newdoms = [...doms]; // __proto__ 就有正常純陣列可使用的方法

---

## 預設值

### 一般寫法

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

### 語法糖

function sum(a = 2,b = 3){
    return a + b ;
}

可以在宣告函式時直接幫參數設定預設值，可以都給預設值，或是只有某個參數給預設值