如何用字符串数组中的值替换JavaScript对象名midgard？

首先得明确：JavaScript里对象的属性名如果是动态的（比如来自数组、变量），不能直接写scene[0]当属性名——这么写会把字符串"scene[0]"当成属性名，而不是取数组对应索引的值。要实现动态属性名，得用计算属性名语法。

两种常见场景的实现： #

1. 新建对象时用数组值作为属性名 #

如果是要创建一个新对象，把属性名设为数组里的值，直接用方括号把数组表达式包起来就行：

const scene = ["midgard", "asgard"];
// 用计算属性名，scene[0]会被求值为"midgard"
const obj = {
  [scene[0]]: {
    description: "人类的领域",
    level: 1
  }
};
console.log(obj); // 输出: { midgard: { description: "人类的领域", level: 1 } }

2. 修改已有对象的属性名 #

如果已经有一个带"midgard"属性的对象，要把这个属性名换成数组里的新值（比如scene[1]），需要先删除旧属性，再添加新属性：

const scene = ["midgard", "asgard"];
let obj = {
  midgard: { description: "人类的领域" }
};

// 步骤1：取出旧属性的值
const midgardValue = obj.midgard;
// 步骤2：删除旧属性
delete obj.midgard;
// 步骤3：用计算属性名添加新属性，值为原来的内容
obj[scene[1]] = midgardValue;

console.log(obj); // 输出: { asgard: { description: "人类的领域" } }

为啥你之前写scene[0]无效？ #

因为在对象字面量里直接写scene[0]: ...，JavaScript会把scene[0]当成一个固定字符串属性名，而不是去计算它的值。比如你写：

const obj = { scene[0]: 'test' };

实际生成的对象是{ "scene[0]": "test" }，这显然不是你要的结果——用方括号包裹后，JavaScript才会把里面的表达式求值，用结果作为属性名。

内容的提问来源于stack exchange，提问作者Soma Juice