JavaScript ES6 - 縮寫 (Shorthand)

物件的縮寫算是 Vue 滿常用到的技巧,紀錄一下!

物件的縮寫

將以下兩個合併至一個物件上

1
2
3
4
5
6
const Frieza = '弗利沙';
const GinyuTeam = {
Ginyu: '基紐',
Jeice: '吉斯',
burter: '巴特',
};

做法:名稱不變: 指向外面的變數

1
2
3
4
const newTeam = {
GinyuTeam: GinyuTeam,
Frieza: Frieza,
};

如果 “名稱” 跟 “新的屬性” 的名稱一致,可縮寫只寫一個。

1
2
3
4
5
const newTeam = {
GinyuTeam,
Frieza,
};
console.log(newTeam);

使用案例:Vue CLI 常見情境

使用 Vue CLI 時,我們常會透過 import 將外面的元件給載入。

載入後就可以直接注入 Vue 實體裡,寫法是 屬性名稱: 來源變數名稱

同樣地,這邊的 router 因為前後兩個名稱相同,所以可以縮寫只寫一個。

1
2
3
4
5
6
7
8
9
import Vue from 'vue';
import App from './App';
import router from './router';
new Vue({
el: '#app',
router, // router: router,
template: '<App/>',
components: { App },
});

上面的 import App from './App' 是指:
將套件由 ./App 路徑載入,並使用 App 這個變數名稱。

物件函式的縮寫

一般在物件裡寫的函式會長以下這樣:

1
2
3
4
5
6
const newTeam = {
// ...
showPosture: function () {
console.log('我們是 基紐特戰隊');
},
};

如果要縮寫,可以省略 : function,直接寫 showPosture(){...}

1
2
3
4
5
6
7
8
const newTeam = {
// ...
showPosture() {
console.log('我們是 基紐特戰隊');
},
};
// 呼叫函式
newTeam.showPosture();

這個跟「箭頭函式」長得有點類似,不過結果並不一樣,別搞混囉!
省略後的語意是沒有變化的,並沒有轉而使用箭頭函式。

搭配解構賦值使用縮寫

之前解構賦值的章節有提到,如何將一個物件指向、賦予到另一個物件上,並且避免參考。

複習:物件傳參考

我們先來回憶一下什麼是 “傳參考” 的特性好了。
首先,這是我們要複製的物件 GinyuTeam

1
2
3
4
5
6
7
8
9
10
11
const GinyuTeam = {
Ginyu: {
name: '基紐',
},
Jeice: {
name: '吉斯',
},
burter: {
name: '巴特',
},
};

我們要把 GinyuTeam 指向一個 newTeam
接著在 newTeam 新增一個名為 ming 的值為 '小明'

1
2
3
4
const newTeam = GinyuTeam;
newTeam.ming = '小明';
console.log(GinyuTeam);
console.log(newTeam);

結果,GinyuTeam 的內容也被更改到了,這就是因為物件是傳參考的特性。

複習:物件縮寫

這邊就能用一開始提到的,使用 “物件縮寫” 的寫法。

1
2
3
4
5
6
const newTeam = {
GinyuTeam, // GinyuTeam: GinyuTeam,
};
newTeam.ming = '小明';
console.log(GinyuTeam);
console.log(newTeam);

原本的 GinyuTeam 就不會被更改了。

不過這並不是我們想要的結果!
目前的 newTeam 是包著 GinyuTeam,而 GinyuTeam 裡面才是我們想複製的值。

我們希望舊物件的值,可以直接拿過來,而不是目前如下圖所示的結構:

Imgur

使用 “解構賦值” 概念

這時候我們知道是 “結構” 不太一樣!

因此,我們可以使用 “解構” 的方式,把 GinyuTeam 裡面的值(一個一個的物件)取出來,再重新放到新的物件上。

1
2
3
4
5
6
const newTeam = {
...GinyuTeam,
};
newTeam.ming = '小明';
console.log(GinyuTeam);
console.log(newTeam);

當然,因為這是 “傳值” 的做法了,所以我們再加上 “小明” 也不會影響到結構。

最後的結構長這樣:

Imgur

以上資源是我自己整理過後的筆記,若有錯誤歡迎隨時和我聯繫。