Синтаксис объявления объекта JavaScript - имена переменных как свойства

JavaScript дает вам много способов объявить объекты. Когда у вас имеется большая часть доступных данных, наиболее удобным (по моему мнению) является следующее:

var person = {
    name: 'John',
    age: 23
}; // "object literal syntax"

Любопытная вещь в этом синтаксисе заключается в том, что он идентичен этому:

var person = {
    'name': 'John',
    'age': 23
}; // "object literal syntax"

То есть вы можете использовать кавычки или опускать их для имен свойств.

Сравнивая это с тем, как работает одно свойство, у вас есть две возможности:

person.birthday = "January 12"; // "dot syntax"

или

person['birthday'] = "January 12"; // "array syntax"

"Точечный синтаксис" работает только тогда, когда правый операнд является фактическим именем свойства. Если вы хотите использовать переменную для имени свойства, вы должны использовать "синтаксис массива", т.е.:

var prop = "birthday";
person[prop] = "January 12";

Теперь, можно ли использовать переменную для имени свойства в "синтаксисе литерала объекта"? Поскольку это не имеет значения, если вы укажете имена свойств, не существует очевидного способа использовать переменную там. Я ищу что-то вроде этого:

var prop = "birthday";
var person = {
    name: 'John',
    age: 23,
    (prop): 'January 12'
};

Здесь я использую (prop) как воображаемый синтаксис, используемый для выражения того, что это переменная, а не буквальная строка.

Спасибо.

Ответ 1

ES6 теперь позволяет это:

var obj = {
  [prop]: 'value'
};

Ответ 2

Нет, это не сработает, поэтому, если вы динамически задаете имена свойств, предлагается и используется массив, такой как нотация.

var k='propertyname';
object[k]="value";

это работает при использовании точечной нотации для установки индекса или имени свойства из жизнеспособного значения.

Ответ 3

Для тех, кто нуждается в замене замены для точечного синтаксиса, где ключи являются объектами вместо строк (например, для вложенности внутри родительского объекта), вот несколько способов:

var developers = {
    person: {
        'name': 'John',
        'age': 23
    },
    anarchist: (function(){ var a = {};
        a['name'] = 'John';
        a['age'] = 23;
        a[false] = false;
        a[1] = 1;
        a[window] = window;
    return a; })(),
    conformist: _.object([
        ['name', 'John'],
        ['age', 23],
        [false, false],
        [1, 1],
        [window, window]
    ])
};

// console.log(developers); // <- to see var dump in Firebug

Элемент anarchist использует self-executing-function, который получает мусор, собранный после вызова, а элемент-конформист использует _. object(), если вы можете включить underscore.js на свой сайт.

Я хочу, чтобы встроенные функции Object() и Array() разрешали передавать ключи и значения так, как это делает underscore.js: -)

Ответ 4

Вы не можете сделать это с помощью объектов, но если вы вместо этого рассмотрите возможность использования функции конструктора, это может выглядеть примерно так:

var prop = "birthday";
var Person = function() {
    this.name = "Bob";
    this[prop] = "January 12";
};
var bob = new Person();

Конечно, у вас все еще есть нотация массива, но, возможно, вам все равно нравится этот апробак:)