> 如果有記憶吐司就好了...
# 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
```