ES6的动态属性名称(dynamic classnames)

在学习classnames这个库的时候顺便复习了一下。

https://github.com/JedWatson/classnames

let buttonType = 'primary';
classNames({ [`btn-${buttonType}`]: true });

动态属性名称:

使用字面量方式定义对象（使用大括号），在 ES5 中只能使用标识符定义属性。ES6 允许字面量定义对象时，用表达式作为对象的属性名，即把表达式放在方括号内。

基本用法：

// 标识符用法
var obj = {
  foo: true,
  abc: 123
};

// 表达式的用法1
let propKey = 'foo';

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

obj.propKey === undefined
obj.foo === true

// 表达式的用法2
let lastWord = 'last word';

const 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

注意：属性名表达式与简洁表示法，不能同时使用，会报错。

// 报错
const foo = 'bar';
const bar = 'abc';
const baz = { [foo] };

// 正确
const foo = 'bar';
const baz = { [foo]: 'abc'};

注意: 属性名表达式如果是一个对象，默认情况下会自动将对象转为字符串[object Object]，这一点要特别小心。

const keyA = {a: 1};
const keyB = {b: 2};

const myObject = {
  [keyA]: 'valueA',
  [keyB]: 'valueB'
};

myObject // Object {[object Object]: "valueB"}

上面代码中，[keyA]和[keyB]得到的都是[object Object]，所以[keyB]会把[keyA]覆盖掉，而myObject最后只有一个[object Object]属性。