###### tags: `學習` `JS縮寫` `JavaScript`
{%hackmd BJrTq20hE %}
# JS 常見縮寫

## 物件下的縮寫

### 1.物件內函式的縮寫

原始物件內函式的寫法

const obj = {
  name: "小明",
  fn: function () {
    return this.name;
  }
};
console.log(obj.fn())//"小明"

縮寫後
#### 1.1把: fnuction都去除

const obj = {
  name: "小明",
  fn () {
    return this.name;
  }
};
console.log(obj.fn())//"小明"

#### 1.2箭頭函式，但是會出事喔!

const obj = {
  name:"小明",
  fn:()=>this.name
}
console.log(obj.fn());//undifined

在使用箭頭函式的時候要注意"this"，因為箭頭函式沒有自己的this，所以this會指向window，window中沒有name:"小明"所以會產生undifined
[箭頭函式this的指向差異 (見範例7.)](https://hackmd.io/uwnd2kuWQSqXw7J_Z4W8YA)

### 2.物件字面值

#### 2.1函式

原始物件內函式的寫法

const obj = {
  name: "小明",
  fn: function () {
    return this.name;
  }
};
console.log(obj.fn())//"小明"

縮寫後
把: fnuction都去除

const obj = {
  name: "小明",
  fn () {
    return this.name;
  }
};
console.log(obj.fn())//"小明"

#### 2.2變數
原始寫法

const person = {
  name: "小明",
};

const people = {
    person:person
}

console.log(people)//{name: "小明"}

縮寫後

const person = {
  name: "小明",
};
const people = {
    person
}
console.log(people)//{name: "小明"}

屬性(person這個物件內的屬性)與變數相同的時候只要寫一次就行。

### 3.展開

#### 3.1 陣列的展開
原始的陣列展開

const a = [1,2,3];
const b = [4,5,6];
const c = a.concat(b);
console.log(c)//[1,2,3,4,5,6]

縮寫的陣列展開

const a = [1,2,3];
const b = [4,5,6];
const c = [...a,...b];
console.log(c)//[1,2,3,4,5,6]

#### 3.2 物件的展開

const obj = {
fna(){console.log('a')},
fnb(){console.log('b')}
};

const newObj = {
...obj,
fnc(){console.loc('c')}
};
console.log(newObj)//{fna:f,fnb:f,fnc:f}

#### 3.3 轉成純陣列

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>

const list = document.querySelectorAll('li')
console.log(list)//[object NodeList] (3)["<li/>","<li/>","<li/>"]會得到類陣列，無法使用全部陣列的功能
const newlist = [...list]
//使用...轉化為純陣列
// [object Array] (3)
console.log(newlist)[<li>1</li>,<li>2</li>,<li>3</li>]

### 4.預設值
原始預設值寫法

function plus(a,b){
if(!b){b=2}
//如果b沒有傳入參數預設值為2
return  a+b
}
console.log(plus(1))///3

縮寫後

function plus(a,b=2){
return  a+b
}
console.log(plus(1))///3