JavaScript中通过变量设置对象键名

技术背景

在JavaScript中，有时需要动态地为对象设置键名，即键名由变量决定。在不同的JavaScript版本（如ES5和ES6及以后）有不同的实现方式。

实现步骤

ES5实现

在ES5中，需要先创建一个空对象，然后使用方括号 [] 来设置对象的键值对。

var yourObject = {};
var yourKey = "yourKey";
yourObject[yourKey] = "yourValue";
console.log(yourObject);

ES6实现

ES6引入了计算属性名（Computed property names）特性，允许在对象字面量表示法中动态计算对象属性的名称。

const yourKeyVariable = "happyCount";
const someValueArray = [1, 2, 3];
const obj = {
    [yourKeyVariable]: someValueArray,
};

核心代码

ES5版本示例

var person = {};
var key = "name";
person[key] = "John";
console.log(person); 

ES6版本示例

const key = "Name";
const values = "RJK";
const obj = {
    [key]: values,
};

键名添加前缀或后缀示例

var key = "happyCount";
const someValueArray = [1, 3, 5, 7];
const myArray = [];
myArray.push({
  [`${key}Array`]: someValueArray
});

TypeScript示例

let title = "Current User";
type User = {
  [key: string | number | symbol]: any
};
let myVar: User = {};
myVar[title] = "App Developer";
console.log(myVar);

最佳实践

• 在现代JavaScript开发中，优先使用ES6及以上的语法，因为计算属性名使代码更简洁易读。
• 尽量使用 const 或 let 代替 var 来声明变量，避免变量提升带来的问题。

常见问题

未使用方括号

如果直接使用变量作为键名而不使用方括号，JavaScript会将变量名作为字符串键名，而不是变量的值。

var key = "name";
var person = {key: "John"};
console.log(person); 

上述代码输出的对象键名是 "key" 而不是 "name"。正确的做法是使用方括号：

var key = "name";
var person = {[key]: "John"};
console.log(person);