对象属性定义方式 中括号的妙用

之前一直以为obj.属性名和obj[属性名]效果完全一致，直到我遇到 属性名 是不定的情况，这才发现[]的奇妙之处

总结

• 中括号的妙用：
  • obj.属性名 里属性名是写死的
  • obj[属性名] 里属性名可以是变量名

问题描述

• 封了个dialog组件，点击不同的下拉框选项时都弹出该组件
• 后端有个请求的属性名要求是变化的，点击不同选项时传递的属性名是不同的
• 即接口接收的参数params={固定属性名：参数值，可变属性名：参数值}
• 此时使用obj.属性名来定义可变参数名显然不可行，这是直接写死的

解决方法

• 改用obj[属性名]来定义，此时属性名可以是变量名，比如:

  let a = "diffAttributeName";
  obj[a] = 123; // 相当于obj.diffAttributeName = 123;

拓展1

• 同样的，在vue中，动态属性是个对象时，对象属性可以使用[]用变量来定义，比如：<p :class="{ [mutableClassName]: true, 'immutableClassName': true }"></p>
• vue中用class，react才用className，以及用.获取属性时用className (可见《JS Web API 面试题》-“property的操作”)

拓展2

• 定义时就可以使用：

const symbolKey1 = 'key1';
const symbolKey2 = 'key2';

const obj = {
  stringKey1: 'value1',
  [symbolKey1]: 'value2',
  stringKey2: 'value3',
  [symbolKey2]: 'value4',
};