ES6 - 縮寫

發表於 | 更新於: | 分類於 ， |

先宣告等等會用到的變數

1
2
3
4
5
6
const kakashi = '卡卡西'
const team = {
    naruto: '鳴人',
    sasuke: '佐助',
    sakura: '小櫻'
}

多個物件或值，合併至一個物件。

ES5

1
2
3
4
const newTeam = {
    kakashi: kakashi,
    team: team 
}

ES6
適用在屬性和來源變數名稱一樣的時候 ( kakashi： kakashi, team： team )

1
2
3
4
const newTeam = {
    kakashi,
    team
}

Vue 常見的縮寫應用

1
2
3
4
5
6
7
8
9
10
import Vue from 'vue'
import App from './App' 
import router from './router' // 將套件由 './router' 路徑載入，並使用 router 這個變數名稱

new Vue({
    el: '#app',
    router, // ES5是 router: router
    template: '<App/>',
    components: { App }
});

物件內的函式縮寫

ES5

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

ES6

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

練習

將以下物件指向賦予到另一個物件上，並且避免傳參考

1
2
3
4
5
6
7
8
9
10
11
12
const team = {
  naruto: {
    name: '鳴人'
  },
  sasuke: {
    name: '佐助'
  },
  sakura: { 
    name: '小櫻'
  },
  // ...
}

解答

1
2
3
4
5
6
7
8
// ES5
const newTeam = {
    team: team
}
// ES6縮寫
const newTeam = {
    team
}

輸出結果：newTeam的結構多包了一層物件，和原來的team有點不一樣，這不是我們要的結果。

搭配前面章節的展開 ... 使用

1
2
3
const newTeam = {
    ...team
}

輸出結果結構正確

資料來源

六角學院 - Vue出一個電商網站