---
# System prepended metadata

title: JS 常見縮寫

---

# JS 常見縮寫

整理一下一些Javascript常用的縮寫們～

### 什麼是語法糖？
語法糖是由英國電腦科學家彼得·蘭丁發明的一個術語，意指這種語法對語言的功能沒有影響，但是更方便程式設計師使用。


### **物件中的函式**
```javascript=
const obj = {
    myName: "Ashley",
    fn(): function(){
        return this.myName
    }
}

console.log(obj.fn()) //Ashley
```

ES6物件下的函式縮寫形式：去除: function()
```javascript=
const obj = {
    myName: "Ashley",
    fn(){
        return this.myName
    }
}

console.log(obj.fn()) //Ashley
```
### **物件中的變數**
```javascript=
const person = {
    name:"小美人魚"
}

const  people = {
    person: person
}

console.log(people) //小美人魚
```

```javascript=
const person = {
    name:"小美人魚"
}

//屬性與值的名字相同，可省略屬性
const  people = {
    person
}

console.log(people) //小美人魚
```
### **展開**
不同陣列合併
```javascript=
const groupA = ["小美人魚", "艾瑞克"];
const groupB = ["小比目魚"];
const groupAll = groupA.concat(groupB) //["小美人魚", "艾瑞克", "小比目魚"]
```
不同陣列展開
```javascript=
const groupA = ["小美人魚", "艾瑞克"];
const groupB = ["小比目魚"];
const groupAll = [...groupA, ...groupB] //["小美人魚", "艾瑞克", "小比目魚"]
```

物件的展開
```javascript=
const obj = {
    fn(){
        console.log("我是fn()")
    },
    fn1(){
       console.log("我是fn1()") 
    }
}

//將obj內的方法加入到newObj
const newObj = {
    fn2(){
        console.log("我是fn2()") 
    },
    ...obj
}
```
轉成純陣列
用querySelectorAll取出的陣列不是純陣列，方法不齊全
```javascript=
const doms = document.querySelectorAll("li")
console.log(doms) //Nodelist 類陣列 ...
```

```javascript=
const doms = document.querySelectorAll("li")
const NewDoms = [...doms]
console.log(NewDoms)
```
### **預設值**
加入預設值避免出錯
```javascript=
function fn(a, b){
    if(!b) = { b = 2 } //若b不存在，預設為2(沒有這行，console.log()會出現NaN)
    return a + b;
}

console.log(fn(1)) // 3
```
```javascript=
function fn(a, b = 3){//若b不存在，預設為2(沒有這行，console.log()會出現NaN)

    return a + b;
}

console.log(fn(1)) // 4
```

