[JS] 語法糖
TL;DR
語法 糖主要是提供另外一種撰寫形式,可以讓程式碼看起來比較精簡。在程式運作邏輯上完全相同。 但是像是箭頭函示,雖然看起來有比較精簡,但是在程式碼的運作上會有不同的地方(例如,箭頭函示沒有自己的this) 所以箭頭函示就不是語法糖。
以下介紹各種語法糖,作為學習Vue之前的預備知識。
參考資料
- ES6的語法糖 & 新增語法(@Zihyin) | HackMD
- [JavaScript] Javascript ES6 中的展開/其餘運算子(Spread operator/Rest operator)(itsems) | Medium
物件字面值
函式縮寫形式
原始物件如下:
const obj = {
myName: '物件',
fn: function() {
return this.myName;
}
}
console.log(obj.fn());
可以縮寫成以下形式,得到的結果會完全相同。
const obj = {
myName: '物件',
fn() {
return this.myName;
}
}
console.log(obj.fn());
變數名稱同名可省略
以下分別定義一個person
以及people
變數,並且在people
內帶入person
的資 料:
const person = {
name: '小明'
};
const people = {
person: person
}
因為我們在定義people內屬性名稱與變數名稱相同,所以可以直接省略如下:
const person = {
name: '小明'
};
const people = {
person
}
展開運算符(spread operator)
這邊僅簡單介紹展開運算符常用的功能。
陣列的組和
我們平常要組合兩個陣列的時候通常會使用concat
語法:
const groupA = ['小明', '杰倫', '阿姨'];
const groupB = ['老媽', '老爸'];
const groupAll = groupA.concat(groupB);
使用展開運算符可以達到一樣的效果,而且比較好記憶:
const groupA = ['小明', '杰倫', '阿姨'];
const groupB = ['老媽', '老爸'];
const groupAll = [...groupA,...groupB];
物件的擴展
在開發上很常會在物件內定義許多方法,如果今天要定義一個新的物件,裡面需要包含原有物件的所有方法時,就可以使用展開運算符。
const methods = {
fn1() {
console.log(1);
},
fn2() {
console.log(1);
},
}
const newMethods = {
fn() {
console.log(1);
},
...methods
}
這邊同時複習前面提到的,物件內函式的縮寫形式
類陣列轉陣列
const doms = document.querySelectorAll('li');
console.log(doms);
此時的doms會輸出一個類陣列NodeList
,類陣列預設是沒有那麼多陣列(Array)
所提供的方法可以使用的。
我們可以透過展開運算符轉換成陣列:
const doms = document.querySelectorAll('li');
console.log(doms);
const newDoms = [...doms];
console.log(newDoms);
展開運算符
符號與其餘運算子長得一模一樣,但是用途其實不同。
展開運算符常運用在陣列的組合、淺拷貝、類陣列轉陣列等等
函式預設值
在傳送參數到韓式內時,為了避免錯誤我們通常需要額外處理:
function sum(a, b) {
if(!b){b=2};
return a + b;
}
console.log(sum(1));
我們可以使用以下方式改寫:
function sum(a, b=2) {
return a + b;
}
console.log(sum(1));
如果b有傳入參數,就會以傳入的參數為主。反之,如果沒有傳入的參數,就會帶入預設值2。