物件的縮寫

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

const Frieza = '弗利沙';
const GinyuTeam = {
  Ginyu: '基紐',
  Jeice: '吉斯',
  burter: '巴特',
};

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

const newTeam = {
  GinyuTeam: GinyuTeam,
  Frieza: Frieza,
};

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

const newTeam = {
  GinyuTeam,
  Frieza,
};
console.log(newTeam);

使用案例:Vue CLI 常見情境

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

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

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

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 這個變數名稱。

物件函式的縮寫

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

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

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

const newTeam = {
  // ...
  showPosture() {
    console.log('我們是 基紐特戰隊');
  },
};
// 呼叫函式
newTeam.showPosture();

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

搭配解構賦值使用縮寫

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

複習:物件傳參考

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

const GinyuTeam = {
  Ginyu: {
    name: '基紐',
  },
  Jeice: {
    name: '吉斯',
  },
  burter: {
    name: '巴特',
  },
};

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

const newTeam = GinyuTeam;
newTeam.ming = '小明';
console.log(GinyuTeam);
console.log(newTeam);

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

複習:物件縮寫

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

const newTeam = {
  GinyuTeam, // GinyuTeam: GinyuTeam,
};
newTeam.ming = '小明';
console.log(GinyuTeam);
console.log(newTeam);

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

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

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

Imgur

使用 "解構賦值" 概念

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

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

const newTeam = {
  ...GinyuTeam,
};
newTeam.ming = '小明';
console.log(GinyuTeam);
console.log(newTeam);

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

最後的結構長這樣:

Imgur

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