JavaScript ES6 課程筆記-01

接續上一篇JavaScript ES6 課程筆記的內容，繼續記錄。

縮寫

物件縮寫

若新物件的屬性名稱跟被賦值的屬性名稱相同的話，就可以不用重複寫屬性名稱了。
ex: (傳統寫法)

let lee = '力宏';
let family = {
    ming: '小明',
    mom: '老媽'
}
let newObj = {
    family = family,
    lee = lee
}
console.log(newObj);

以上這個範例，可以看到newObj的屬性名稱，跟被賦予的內容名稱相同。
所以，我們可以省略其中一個，改寫成
ex:

let lee = '力宏';
let family = {
    ming: '小明',
    mom: '老媽'
}
let newObj = {
    family,
    lee
}
console.log(newObj);

只要寫該屬性名稱就可以囉，編譯器會自動為你賦予，跟你屬性名稱一樣的內容了。

在 Vue Cli 的情境中

ex:(傳統寫法)

import Vue from 'vue'
import App from './App'
import router from './router'
// 將套件由 './App' 路徑載入，並使用 App 這個變數名稱
new Vue({
  el: '#app',
  router:router,
  template: '<App/>',
  components: { App }
});

以上範例，我們利用 router 載入外部的東西，而 router 的名稱又剛好跟 Vue 物件中的
屬性 router 名稱一模一樣，所以，我們可以直接省略其中一個不寫，
改寫成下面這樣
ex:(縮寫寫法)

import Vue from 'vue'
import App from './App'
import router from './router'
// 將套件由 './App' 路徑載入，並使用 App 這個變數名稱
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
});

物件函式的縮寫

ex:(傳統寫法)

let obj = {
    display: function(){
        console.lig('Hi'); 
    }
}
obj.display() // Hi

改成縮寫的寫法，就把冒號和function這些拿掉
ex:

let obj = {
    display (){
        console.log('Hi'); // Hi
    }
}
obj.display() // Hi

函式縮寫不要跟箭頭函式搞混

注意~~~~~這邊的函式縮寫看起來跟箭頭函式很像，但是，它們兩個作用起來是完全不一樣的喔，這邊不要搞混了，因為，箭頭函式是用在其他場合中的，不是用在這邊的。

縮寫搭配解構賦值的使用

ex:

let GokuTeam = {
  ming:{
    name: '小明'
  },
  mom:{
    name: '老媽'
  },
  father:{
    name: '老爸'
  }
}
let newTeam = {GokuTeam}
console.log(newTeam.GokuTeam.ming.name) // 小明

以上這個範例，在等號的右邊，我們用一個物件將GokuTeam包在裡面，當成這個新物件的其中一個屬性，而將這個新物件存入變數newTeam中，
此時，你會看到newTeam的屬性裡面，除了包裹ming的新屬性以外，還包裹了物件GokuTeam。
但是，如果，我們只是想要單純複製GokuTeam裡面的屬性的話，
要改成以下這樣
ex:

let GokuTeam = {
  ming:{
    name: '小明'
  },
  mom:{
    name: '老媽'
  },
  father:{
    name: '老爸'
  }
}
let newTeam = {...GokuTeam}
console.log(newTeam.ming.name) // 小明

如此，透過...只將GokuTeam的元素提取出來並return回去，
這樣的淺複製，就可以讓newTeam只有塞入GokuTeam中各元素的複製內容，
而沒有包含GokuTeam本身囉。