Як встановити ім'я властивості об'єкта JS зі змінної


178

Мені потрібно динамічно встановити ім'я властивості об’єкта JS.

for(i=1; i<3; i++) {
    var key  = i+'name';

    data = {
        key : 'name1',
    }
}

Результат повинен бути:

data = {
    1name: 'name1'
    2name: 'name1'
}

Якщо вони є послідовними, чому ви не використовуєте масив?
epascarello

Я хочу знати, хто з вас потрапив неправильну стрілку. Давай, вигадуй.
Чарльз

Відповіді:


194
var jsonVariable = {};
for(var i=1; i < 3; i++) {
  jsonVariable[i + 'name'] = 'name' + i;        
}

4
Відповідь Музи, наведеної нижче, також правильно сформулює, що використання позначень [] насправді єдиний спосіб зробити це.
Денніс Плучінік

1
Також зауважте, що відповідь @ ChilNut, наведена нижче, описує найпростіший спосіб зробити це за допомогою ES6
rambossa

1
Насправді, з новим синтаксисом те, що ОП намагається досягти, стане можливим лише за умови жорсткого коду та малого обмеження циклу.
Муса

168

Вам потрібно буде використовувати []позначення для динамічного встановлення клавіш.

var jsonVariable = {};
for(i=1; i<3; i++) {        
 var jsonKey  = i+'name';
 jsonVariable[jsonKey] = 'name1';

}

Тепер у ES6 ви можете використовувати синтаксис літерального об'єкта для динамічного створення об'єктних ключів, просто оберніть змінну в []

var key  = i + 'name';
data = {
    [key] : 'name1',
}

3
jsonVariable = {}; не слід ініціалізувати всередині циклу for.
закриття

Тут ви також робите jsonVariable global
Денніс Плучінік

130

За допомогою ECMAScript 6 ви можете використовувати імена змінних властивостей з синтаксисом буквального об'єкта, наприклад:

var keyName = 'myKey';
var obj = {
              [keyName]: 1
          };
obj.myKey;//1

Цей синтаксис доступний у наступних новіших браузерах:

Edge 12+ (без підтримки IE), FF34 +, Chrome 44+, Opera 31+, Safari 7.1+

( https://kangax.github.io/compat-table/es6/ )

Ви можете додати підтримку до старих браузерів, використовуючи транспілятор, такий як babel . Легко transpile весь проект , якщо ви використовуєте модуль пакетування , такі як накопичувальний пакет або WebPack .


2
Дякуємо за додавання дивовижного синтаксису
ES6

Без ES6 я не можу визначити var payload = {dynamicKey: val}, мені потрібно виконати var payload = {} та payload [variaName] = val.
Sainath SR

23

Це спосіб динамічно встановити значення

var jsonVariable = {};
for (var i = 1; i < 3; i++) {
    var jsonKey = i + 'name';
    jsonVariable[jsonKey] = 'name' + i;
}

20

Використовуйте змінну як об'єктний ключ

let key = 'myKey';

let data = {[key] : 'name1'; }

Дивіться, як переглядати об’єкт тут


Чи можете ви, будь ласка, розробити трохи більше, щоб повідомити іншим, чому це може бути рішенням?
фаберест

Інформація, яку ви додали, чудова, просто ніколи не дайте відповіді просто кодом;)
Phaberest

7

Не має значення, звідки походить змінна. Головне, у нас є одне ... Встановити назву змінної між квадратними дужками "[..]".

var optionName = 'nameA';
var JsonVar = {
[optionName] : 'some value'
}

Це добре працює, мені цікаво, чи працює він у всіх браузерах / версіях
Mercury

1
jsonVariable = {}
for(i=1; i<3; i++) {        
   var jsonKey  = i+'name';
   jsonVariable[jsonKey] = 'name1'
}

це буде схоже на

    jsonVariable = {
    1name : 'name1'
    2name : 'name1'
}

0

По лінії коментаря Sainath SR вище, я зміг встановити ім’я властивості об’єкта js зі змінної в Google Apps Script (яка ще не підтримує ES6), визначивши об'єкт, а потім визначивши інший ключ / значення поза об’єктом:

var salesperson = ...

var mailchimpInterests = { 
        "aGroupId": true,
    };

mailchimpInterests[salesperson] = true;
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.