iT邦幫忙

第 11 屆 iThome 鐵人賽

0
自我挑戰組

新手初探 Vue系列 第 23

鐵人賽Day24 - ES6 之縮寫

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

在以往如果我們要將上面兩個變數合併的時候,會這樣寫:

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

ES6 如果屬性名稱跟變數名字一樣時,我們就可以縮寫成如下:

const newTeam = {
    GinyuTeam,
    Frieza
}

在物件屬性的函式,我們也可以使用縮寫,以往會如下:

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

縮寫的話會變成如下:

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

若搭配解構使用的話,原先我們把新的變數 newTeam 指向 GinyuTeam 這個物件,再對 newTeam 變數新增一個 ming 屬性並賦予值小明,這時候原來的 GinyuTeam 物件也會跟著改動,因為物件是傳參考特性,如下:

const GinyuTeam = {
  Ginyu: {
    name: '基紐'
  },
  Jeice: {
    name: '吉斯'
  },
  burter: { 
    name: '巴特'
  },
}
const newTeam = GinyuTeam
newTeam.ming = '小明';

我們可以跟解構搭配使用,不去更動原本的 GinyuTeam 物件,並新增一個 ming 屬性,寫法如下:

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

這時候如果用 console 來比較兩者,就會發現其中的差異性了


上一篇
鐵人賽Day23 - ES6 之解構賦值
下一篇
鐵人賽Day25 - ES6 之箭頭函式
系列文
新手初探 Vue30

尚未有邦友留言

立即登入留言