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

Question

Я пытаюсь что-то вроде этого, но этот пример не работает.

jsObj = {};

for (var i = 1; i <= 10; i++) {
    jsObj{'key' + i} = 'example ' + 1;
}

Что я могу сделать, чтобы сделать такой динамический ключ?

Answer 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:

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

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

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

Answer 2

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

jsArr = []; 

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

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