计算属性名

东明兄 2019-09-17
0条评论 1,235 次浏览
东明兄 2019-09-170条评论 1,235 次浏览

计算属性名就是用[]将属性名包起来,[]内可以是各种表达式
使用es6的属性简洁表示法 声明的 函数 无法直接使用字面量,如下方的 say 方法:

const user = {
  name: "crazyming",
  "sayOk": function () {
    console.log("ok")
  },//正确
  "say"() {
    console.log("say")
  },//错误
}

改成这样就可以了:

const user = {
  name: "crazyming",
  ["say"]() {
   console.log("ok")
  },
}

有时候可能属性名来自于某个表达式,也需要计算属性名:

const who = "xiaoming";
const user = {
  [who+"Say"]() {
   console.log("ok")
  },
}

//{name: "crazyming", xiaomingSay: ƒ}

在多人合作的项目中,要保证命名的可读性和可维护性,这时定义一个模块专门用来存放方法名就很方便:

//constant.js
export const FnName ={
  TEST1:"TEST1",
  TEST2:"TEST3",
  TEST3:"TEST3"
}

import {FnName} from "./test/constant";

const fn = {

  [FnName.TEST1]() {
    console.log("test");
  },

  [FnName.TEST2]() {
    console.log("test");
  },

  [FnName.TEST3]() {
    console.log("test");
  },


}

vuex文档中有类似描述,参考vuex:使用常量替代 Mutation 事件类型 https://vuex.vuejs.org/zh/guide/mutations.html

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注