如何将 Javascript Object 键设置为另一个对象的值

Question

I have an Javascript object called person with various properties such as id , name , phone , etc.

I want to create a new Javascript object called roster that is just the name. Something like this:

let person = { name: "Hilda", "id": 123, "phone": 000-000-0000 };
let roster = { person.name : person.phone };

However, React throws an error having person.name in the key. It doesn't matter if I do person.name or person["name"] . I have to do:

let roster = {};
roster[person.name] = person.phone;

Is there some special syntax to allow person.name to be set as the key directly, or is the work-around required?

Answer 1

Use []

 let person = { name: "Hilda", "id": 123, "phone": "000-000-0000" }; let roster = { [person.name]: person.phone }; console.log(roster)

Answer 2

Vugar's answer is correct, this can be done by placing brackets [] around the first object's property name.

This is called a computed property name . From the MDN web docs:

The object initializer syntax also supports computed property names. That allows you to put an expression in brackets [], that will be computed and used as the property name. This is reminiscent of the bracket notation of the property accessor syntax, which you may have used to read and set properties already.

Now you can use a similar syntax in object literals, too:

// Computed property names
let i = 0;
const 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

const items = ["A", "B", "C"];
const obj = {
  [items]: "Hello",
};
console.log(obj); // A,B,C: "Hello"
console.log(obj["A,B,C"]); // "Hello"

const param = 'size';
const config = {
  [param]: 12,
  [`mobile${param.charAt(0).toUpperCase()}${param.slice(1)}`]: 4,
};

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

MDN Docs Reference