Создание модифицированного массива из объектов массива невозможно с точечной нотацией в качестве ключа

Question

Почему я не могу установить key во вновь созданном объекте, как это:

const baseObject = {key: "a", val: "b"}
const modifiedObject = {baseObject.val: baseObject.key} // SyntaxError: Unexpected token '.'

Но вместо этого можно использовать скобки:

const modifiedObject = {[baseObject.val]: baseObject.key} // OK

Из моего понимания [baseObject.val] должен создать новый массив из baseObject.val только с этим элементом. Можете ли вы объяснить, почему это работает? Является ли это наилучшим практическим подходом для установки key из вложенного свойства объекта?

Я пытался найти информацию о MDN и других источниках, но не смог ее найти. Я предполагаю, что мои поисковые фразы неверны, поскольку должно быть довольно простое объяснение. Не стесняйтесь отмечать как дубликат, если вы можете связать меня с уже предоставленными ответами.

Answer 1

То, что у вас есть [baseObject.val], это не массив, а "вычисляемое имя свойства" , специальный синтаксис для литералов объекта.

Что происходит, когда внутри Объектный литерал, где должен находиться ключ, вычисляет выражение в скобках и затем определяет свойство объекта, создаваемого с этим выражением. Например, { ['foo']: 'bar' } приводит к { foo: 'bar' }. { ['a' + 'b']: 'bar' } приводит к { ab: 'bar' }.

Вы можете поместить любое желаемое выражение в скобки [], и результатом будет ключ, поставленный на объекте. Для вашего случая вы хотите, чтобы значение выражения baseObject.val, поэтому синтаксис [baseObject.val]:.

Answer 2

[ и ] - это знаки препинания, которые имеют разное значение в разных контекстах. В зависимости от того, где они появляются, они могут обозначать литерал массива:

let a = [];

или разделять имя свойства (так называемое «квадратное скобочное обозначение»), где выражение должно оцениваться для получения имени свойства:

let foo = 'log';
console[foo]('foo'); // equivalent to console.log('foo');

или определите присвоение значений массива переменным:

let [a, b, c] = [1, 2, 3]

В контексте OP они разграничивают имя вычисляемого свойства , аналогично второму примеру выше:

let x = 'foo';
let obj= {[x] : 'Foo'};

, который создает объект, как если бы:

let obj = {foo: 'Foo'};