---
# System prepended metadata

title: JS縮寫-語法糖

---

> 如果有記憶吐司就好了...
# JS縮寫-語法糖

不會影響原本的JS運作，邏輯與當前的JS相同，使你的程式碼更加簡潔，可讀性更高。

## 物件字面值

### 1.物件內的function

```js=
let a ={
    myName: "Jasper",
    method: function(){
        return this.myName
    }
}

console.log(a.method()) // 回傳"Jasper"

let a ={
    myName: "Jasper",
	//省略了:及function
    method(){
        return this.myName
    }
}

console.log(a.method()) // 回傳"Jasper"
```

### 2.物件內的變數
```js=
let person = {
    name: "Jasper"
}

let people = {
    person: person
    (屬性) (上面宣告的變數a)
}
等同於
let people = {
    person
	//當屬性與變數相同時可以指輸入一個
}
console.log(people) 

//回傳
{
person: {
name:"Jasper"
        }
}

```
## 展開
### 1.不同陣列合併
```js=
let aryA = ["a","b","c"]
let aryB = ["d","e","f"]

let aryTotal = aryA.concat(aryB);
等同於
let artTotal = ...aryA, ...aryB;

console.log(aryTotal)
// 回傳 [a,b,c,d,e,f]
```

### 2.物件擴展
```js=
const a = {
    hello(){
        console.log(1)
    },
    hi(){
        console.log(2)
    }
}

const b = {
    "你好"(){
	console.log(3)
	}
}
// 此時我要將a的function加入到b的物件內
const b = {
    "你好"(){
	console.log(3)
	},
    ...a //語法在這
}

console(b)
{
   "你好"(),hello(),hi()
}
```
請注意!!只能把前面已經先宣告的加入到後面新宣告的裡面哦,不然會報錯喔，如下:

```js=
const a = {
    hello(){
        console.log(1)
    },
    hi(){
        console.log(2)
    }
}

const b = {
    "你好"(){
	console.log(3)
	}
}
---
// 此時如果想把b加入到a
const a = {
    hello(){
        console.log(1)
    },
    hi(){
        console.log(2)
    },
    ...b // 語法在這
}
console(a)
// 因為程式碼讀到a的時候b變數還沒被存取，所以會報錯喔!
```
### 3. 將類陣列轉成純陣列
```htmlembedded=
<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
</ul>
```
```js=
// 選取上方的li形成一個陣列
let doms = document.querySelectorAll('li')
```
這裡用querySelectorAll產生的陣列為類陣列與一般陣列不同，能使用的陣列方法有限，ex:filter、map...等都無法使用，此時我們就可以將它轉換成純陣列。
```js=
let newDoms = [...doms]
```
此時newDoms的陣列為純陣列，可以使用所有陣列能用的方法。

## 預設值
下方為一般的函式
```js=
function sum(a,b){
  return a + b;
}
console.log(sum(1,2)) //回傳 3
```
此時，若將帶入b的參數2拿掉會發生什麼事呢?
```js=
function sum(a,b){
  return a + b;
}
console.log(sum(1)) //回傳 NaN
```
通常這樣的狀況，為了讓函式順利執行，我們會用if判斷，如下:
```js=
function sum(a,b){
// 判斷如果b不存在的話，b等於2
// 反之b如果有帶入值，就會相加回傳該值
  if(!b){
    b = 2
  }
  return a + b;
}
console.log(sum(1)) //回傳 3
```
我們也可以用預設值的方式來寫，邏輯同上，使你的程式碼更加簡潔。
```js=
             (預設b=2)
function sum(a,b = 2){
  return a + b;
}
console.log(sum(1)) //回傳 3

若b有帶入值，則會以帶入的為主，預設b=2就會忽略
console.log(sum(1,3)) // 回傳4
```