如何动态分配对象中键的名称？

Question

const key = 'name'const tempObj = {key: 'shiyuq'}console.log(tempObj)// {key: 'shiyuq'}// but I want a object like this  {name: 'shiyuq'}最后我找到了一种修改对象键值的新方法，代码如下：const tempObj = {[key]: 'shiyuq'}console.log(tempObj)我想知道为什么这会起作用，在这种情况下[ ]是什么意思？谢谢！

Answer 1

计算属性名称

从 ECMAScript 2015 开始，对象初始值设定项语法也支持计算属性名称。这允许您将表达式放在括号[]中，该表达式将被计算并用作属性名称。这让人想起属性访问器语法的括号表示法，您可能已经用它来读取和设置属性。

现在你也可以在对象字面量中使用类似的语法：

// Computed property names (ES2015)

let i = 0

let a = {

  ['foo' + ++i]: i,

  ['foo' + ++i]: i,

  ['foo' + ++i]: i

}

console.log(a.foo1) // 1

console.log(a.foo2) // 2

console.log(a.foo3) // 3

let param = 'size'

let config = {

  [param]: 12,

  ['mobile' + param.charAt(0).toUpperCase() + param.slice(1)]: 4

}

console.log(config) // {size: 12, mobileSize: 4}

从 -> 对象初始化器复制和粘贴- JavaScript | MDN

Answer 2

它被称为Computed Property Names，它使用括号表示法（方括号）[]实现

例子：{ [variableName] : someValue }

从 ECMAScript 2015 开始，对象初始值设定项语法也支持计算属性名称。这允许您将表达式放在括号 [] 中，该表达式将被计算并用作属性名称。

对于 ES5，试试这样的

var yourObject = {};

yourObject[yourKey] = "yourValue";

console.log(yourObject );

例子：

var person = {};

var key = "name";

person[key] /* this is same as person.name */ = "John";

console.log(person); // should print  Object { name="John"}

Answer 3

伟大的。希望您清楚使用[ ]表示法。但是要在实时场景中工作，我们可以获得大量动态格式的对象数据，而不是一次一个键。

我创建了一个代码片段，它基本上以更高级的方式扩展了您的答案，其中包含一组对象数据。

示例：-

第 1 步：让我们创建一个键的对象，即keysObj

第 2 步：让我们创建一个临时对象，即tempObj

Step-3 : 最后创建变量函数，即mainObj

const keysObj = {key1: "firstName", key2: "lastName"}; 

const tempObj = {key1: "Naheed", key2: "Shareef"};

const mainObj = Object.keys(tempObj).reduce((obj,k) => Object.assign(obj, { [keysObj[k]]: tempObj[k]  }),{});

console.log(mainObj);

网址： https ://es6console.com/kc652vic/