Как создать динамический ключ для добавления в переменную объекта JavaScript

Ответ 1

Квадратные скобки:

jsObj['key' + i] = 'example' + 1;

В JavaScript все массивы являются объектами, но не все объекты являются массивами. Основное различие (и такое, что довольно сложно имитировать с помощью прямого JavaScript и простых объектов) состоит в том, что экземпляры массива поддерживают свойство length, так что он отражает числовое значение свойства, имя которого является числовым и значение которого при преобразовании в число, является самым большим из всех таких свойств. Это звучит очень странно, но это просто означает, что при заданном экземпляре массива свойства с именами типа "0", "5", "207" и т.д. Все рассматриваются специально в том смысле, что их существование определяет значение length. И, кроме того, значение length может быть установлено для удаления таких свойств. Установка length массива в 0 эффективно удаляет все свойства, имена которых выглядят как целые числа.

ОК, так что делает массив особенным. Однако все это не имеет ничего общего с тем, как работает оператор JavaScript [ ]. Этот оператор является механизмом доступа к объекту, который работает на любом объекте. Важно отметить, что имена имен числовых массивов не являются особыми, поскольку доступ к простому объекту доступа идет. Они всего лишь строки, которые выглядят как цифры, но имена объектов объектов JavaScript могут быть любыми типами, которые вам нравятся.

Таким образом, оператор [ ] работает в цикле for, итерации через массив:

for (var i = 0; i < myArray.length; ++i) {
  var value = myArray[i]; // property access
  // ...
}

действительно не отличается от того, как работает [ ] при доступе к свойству, имя которого является некоторой вычисленной строкой:

var value = jsObj["key" + i];

Оператор [ ] делает то же самое в обоих случаях. Дело в том, что в одном случае объект, являющийся массивом, неважен, другими словами.

При настройке значений свойств с помощью [ ] история остается той же, за исключением особого поведения, поддерживающего свойство length. Если вы установите свойство с числовым ключом в экземпляре массива:

myArray[200] = 5;

тогда (если предположить, что "200" - это наибольшее числовое имя свойства), свойство length будет обновлено до 201 как побочный эффект присвоения свойства. Однако, если одно и то же делается с простым объектом:

myObj[200] = 5;

нет такого побочного эффекта. Свойство, называемое "200" как массива, так и объекта, будет установлено равным значению 5 в противном случае точно таким же образом.

Можно подумать, что, поскольку поведение length является удобным, вы можете также сделать все экземпляры объектов конструктора Array вместо простых объектов. В этом нет ничего плохого (хотя это может сбивать с толку, особенно для людей, знакомых с некоторыми другими языками, для того, чтобы некоторые свойства были включены в length, но не другие). Однако, если вы работаете с сериализацией JSON (довольно распространенная вещь), поймите, что экземпляры массива сериализуются в JSON таким образом, который включает только свойства с численным именем. Другие свойства, добавленные в массив, никогда не появятся в сериализованной форме JSON. Так, например:

var obj = [];
obj[0] = "hello world";
obj["something"] = 5000;

var objJSON = JSON.stringify(obj);

значение "objJSON" будет строкой, содержащей только ["hello world"]; свойство "что-то" будет потеряно.

ES2015:

Если вы можете использовать функции JavaScript ES6, вы можете использовать Compute Property Names, чтобы справиться с этим очень легко:

var key = 'DYNAMIC_KEY',
    obj = {
        [key]: 'ES6!'
    };

console.log(obj);
// > { 'DYNAMIC_KEY': 'ES6!' }

Ответ 2

Ассоциативные массивы в JavaScript не работают так же, как на других языках. Операторы for each сложны (потому что они перечисляют унаследованные свойства прототипа). Вы можете объявлять свойства в объектно-ассоциативном массиве, как упоминал Уокни, но на самом деле для этого типа вы должны использовать массив с методом push:

jsArr = []; 

for (var i = 1; i <= 10; i++) { 
    jsArr.push('example ' + 1); 
} 

Просто не забывайте, что индексированные массивы основаны на нуле, поэтому первым элементом будет jsArr [0], а не jsArr [1].