ES6 计算属性名

Dear 丶 2023-06-07 10:45 17阅读 0赞

## 语法应用 ##

JavaScript语言定义对象的属性，有两种方法。

// 方法一
    obj.foo = true;
    
    // 方法二
    obj['a' + 'bc'] = 123;

上面代码的方法一是直接用标识符作为属性名，方法二是用表达式作为属性名，这时要将表达式放在方括号之内。  
ES6 允许字面量定义对象时，用方法二（表达式）作为对象的属性名，即把表达式放在方括号内。

let propKey = 'foo';
    
    let obj = { 
      [propKey]: true,
      ['a' + 'bc']: 123
    };

下面是另一个例子。

var lastWord = 'last word';
    
    var a = { 
      'first word': 'hello',
      [lastWord]: 'world'
    };
    
    a['first word'] // "hello"
    a[lastWord] // "world"
    a['last word'] // "world"

表达式还可以用于定义方法名。

let obj = { 
      ['h' + 'ello']() { 
        return 'hi';
      }
    };
    
    obj.hello() // hi

## 应用场景 ##

当我们进行一个项目开发时（特别是多人项目），要保证命名的可读性和可维护性，这时往往需要进行统一的管理

现在一个常用的方法是使用模块化方法（如ES6模块化规范，CommonJS规范，AMD规范，CMD规范），在一个模块中定义一些常量，并进行统一的导出使用，从而保证变量名良好的维护性

//types.js
    export const SOME_MUTATION = 'SOME_MUTATION'
    // store.js
    import Vuex from 'vuex'
    import {  SOME_MUTATION } from './mutation-types'
    
    const store = new Vuex.Store({ 
      state: {  ... },
      mutations: { 
        // 我们可以使用 ES2015 风格的计算属性命名功能来使用一个常量作为函数名
        [SOME_MUTATION] (state) { 
          // mutate state
        }
      }
    })

发表评论取消回复

表情：

评论列表（有 0 条评论，17人围观）

还没有评论，来说两句吧...

相关阅读

相关 ES6新增基本属性内容详解

ES6新增的内容之前的都是 ES5 的内容接下来我们聊一下 ES6 的内容 let 和 const 关键字我们以前都是使用 var 关键字

布满荆棘的人生/ 2023年10月06日 15:47/ 0 赞/ 28 阅读

相关 es6函数rest参数详解（....变量名）

ES6 引入 rest 参数（形式为…变量名），用于获取函数的多余参数，这样就不需要使用arguments对象了。rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组

谁借莪１个温暖的怀抱￠/ 2023年07月12日 11:53/ 0 赞/ 36 阅读

相关 ES6的计算属性名语法

为什么要用\[ \]去包裹变量计算属性名在JavaScript中，我们定义属性时，有两种方式：中括号\[\]或.的方式： // 方法一 obj

约定不等于承诺〃/ 2023年06月16日 12:58/ 0 赞/ 17 阅读

相关 ES6 计算属性名

语法应用 JavaScript语言定义对象的属性，有两种方法。 // 方法一 obj.foo = true; // 方法二 o

Dear 丶/ 2023年06月07日 10:45/ 0 赞/ 18 阅读

相关 ES6--Symbol属性

Symbol:ES6中添加了一种原始数据类型symbol(已有的原始数据类型： String,Number,Boolean,undefined,null,对象) Sym

系统管理员/ 2022年12月06日 05:23/ 0 赞/ 236 阅读

相关 ES6 callee属性与 "..." 运算符详解

`callee` 是 `arguments` 的一个属性，是一个指针指向拥有这个 arguments 对象的函数（arguments 用于保存函数参数，是一个类数组对象，

亦凉/ 2021年12月05日 15:15/ 0 赞/ 196 阅读

相关 ES6-属性名表达式

1.直接用标识符作为属性名： obj.fo = true 2.用表达式作为属性名： obj['a'+'bc'] = 123 //相当于

短命女/ 2021年10月12日 19:46/ 0 赞/ 376 阅读

相关 JavaScript（ES6）动态变量方法名（函数名）或动态变量属性名支持表达式运算！

//ES6中的函数名也支持表达式运算！ let aa = "method"; let bb = "Test"; let P

古城微笑少年丶/ 2021年09月17日 13:20/ 0 赞/ 742 阅读

相关 es6 Symbol属性

ES6 Symbol数据类型 1、Symbol属性对应的值是唯一的,解决命名冲突问题 2、不能参与其他数据运算，包括字符串拼接

古城微笑少年丶/ 2021年07月24日 16:42/ 0 赞/ 502 阅读

相关 ES6 属性的遍历

ES6一共有5种方法可以遍历对象的属性。、 for…in for…in循环遍历对象自身的和继承的可枚举属性（不含Symbol属性）。 Object.keys(obj

我不是女神ヾ/ 2021年06月24日 16:12/ 0 赞/ 558 阅读