ES6計算屬性名-代碼優化利器

ES6計算屬性名-代碼優化利器

雖然現在已經是2019年4月了（馬上就是5月），ES10的草案也已經誕生很久了，但是 ES6 還是有很多沒有研究到的地方，本文就是對 ES6 計算屬性名的一個簡單梳理

本文主要內容：

• ES6 計算屬性名
• 計算屬性名的應用場景
• 閒話

什麼是計算屬性名

計算屬性名是 ES6 的一個很大的增強，事實上可計算屬性不是一個很新鮮的東西

在 ES5 版本中我們也可以通過計算屬性來進行取值：

let name = "first name";
let person = {};

person[name] = "Raaa";
console.log(person[name]); // Raaa
console.log(person["first name"]); // Raaa

但是我們並不能在字面量聲明的時候就使用這樣的計算屬性：

// 錯誤示範
let name = "first name";
let person = {
    name: "Raaa", // 錯誤
    "last name": "bbit" // 正確
};

重點來啦！！！

在 ES6 的語法中，我們可以直接在字面量定義中使用計算屬性，只要使用[]即可，我們甚至可以在[]中書寫表達式：

let name = "first name"

let person = {
    [name]:"Raaa",
    ["last"+" name"]:"bbit",
    // 方法也可以用這樣的方式定義
    ["say"+"Hello"](){
        console.log("hello");
    }
}
console.log(person["first name"]); // Raaa

新特性要有適合的應用場景纔有意義，那麼接下來就是我們計算屬性的應用！

使用計算屬性名優化我們的代碼

這個詞彙不止一次提到了，下面我們說說爲什麼需要使用計算屬性名

當我們進行一個項目開發時（特別是多人項目），要保證命名的可讀性和可維護性，這時往往需要進行統一的管理

現在一個常用的方法是使用模塊化方法（如ES6模塊化規範，CommonJS規範，AMD規範，CMD規範），在一個模塊中定義一些常量，並進行統一的導出使用，從而保證變量名良好的維護性

// states.js
export const states = {
    states1:"start",
    states2:"doing",
    states3:"end"
}

import STATES from 'states.js'
let obj = {
    [STATES.states1](){
        console.log("start~~")
    }
}
obj[STATES.states1]();

我們可以在使用vuex這樣的工具的時候採用上面的這種模式

//store.js
import Vuex from 'vuex'
import STATES from 'states.js'

const store = new Vuex.Store({
    mutations:{
        [STATES.doing](state){
            // to do
        }
    }
})