计算属性名

chat

计算属性名就是用[]将属性名包起来,[]内可以是各种表达式
使用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

版权声明:
作者:东明兄
链接:https://blog.crazyming.com/note/1987/
来源:CrazyMing
文章版权归作者所有,未经允许请勿转载。

THE END
分享
二维码
海报
计算属性名
计算属性名 JavaScript es6
<<上一篇
下一篇>>
chat