什麼是語法糖?
語法糖讓程式更加簡潔，有更高的可讀性。語法糖不會影響程式運作，邏輯與當前 JS 一致。
物件字面值 Object literals
1
2
3
4
5
6
7
8
| const apple = {
name: '蘋果',
fn: function() {
return this.name;
}
}
console.log(apple.fn());
|
直接將 fn: function() {} 改為 fn() {} 即可
1
2
3
4
5
6
7
8
9
| const person = {
name: '阿肥'
};
const people = {
person: person
};
console.log(people);
|
當名稱跟值同名，可以省略名稱。直接將 person: person 縮寫為 person 即可
展開
1
2
3
4
5
6
| const groupA = ['阿肥', '小胖', '大摳呆'];
const groupB = ['蘋果', '香蕉'];
const groupAll = groupA.concat(groupB);
console.log(groupAll);
|
直接使用…展開即可，const groupAll = [...groupA, ...groupB]
新增一個物件包含新方法，同時加入原有的方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| const methods = {
fn1() {
console.log(1);
},
fn2() {
console.log(1);
},
}
const newMethods = {
fn() {
console.log(1);
},
...methods
}
console.log(newMethods);
|
1
2
3
4
5
| <ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
|
1
2
| const doms = document.querySelectorAll('li');
console.log(doms);
|
雖然 querySelectorAll 會取到所有 li ，但並非純陣列
(類陣列)
將類陣列使用 … 可以轉為純陣列
(純陣列)
預設值
1
2
3
4
5
6
7
| function sum(a, b) {
return a + b;
}
console.log(sum(1));
|
如果有預設值，當資料找不到時，就會套用預設值
若資料有正常傳入就不會套用預設值
1
2
3
4
5
6
| function sum(a, b = 5) {
return a + b;
}
console.log(sum(1));
console.log(sum(1,3))
|
![Vuex 基本核心概念筆記 [02]](https://i.imgur.com/S66mEH4.jpg)
![Vuex 基本核心概念筆記 [01]](https://i.imgur.com/CtpNltq.jpg)
