Установка свойства объекта JS динамически через переменную

Пройдите тест, узнайте какой профессии подходите

Я предпочитаю

Работать самостоятельно и не зависеть от других

Работать в команде и рассчитывать на помощь коллег

Организовывать и контролировать процесс работы

Быстрый ответ

Для динамического задания имени свойства объекта в JavaScript используйте квадратные скобки::

Скопировать код

let key = "age";
let obj = {};
obj[key] = 30;

console.log(obj); // Вывод: { "age": 30 }

Таким образом, при помощи obj[key] мы создаём свойство age со значением 30.

Кинга Идем в IT: пошаговый план для смены профессии

Особенности и заметки

Призначение нескольких свойств

Для динамического присваивания нескольким свойствам их значений можно использовать цикл for:

Скопировать код

let obj = {};
for (let i = 0; i < 5; i++) {
  obj[`key${i}`] = `value${i}`;
}

console.log(obj); // Вывод: { "key0": 'value0', "key1": 'value1', ... }

Подробнее об этом расскажет наш спикер на видео

Области видимости переменных

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

Скопировать код

function createDynamicObject() {
  let obj = {};
  for (let i = 0; i < 3; i++) {
    obj[`prop${i}`] = i;
  }
  return obj;
}

console.log(createDynamicObject()); // Вывод: { "prop0": 0, "prop1": 1, "prop2": 2 }

Специальные символы

Важно учитывать некоторые особенности при выборе имён свойств, содержащих специальные символы:

Скопировать код

let specialKey = "Это *особенное* свойство";
let obj = {
  [specialKey]: "Особенное значение"
};

console.log(obj[specialKey]); // Вывод: "Особенное значение"

ES6: Краткость — сестра таланта

Использование вычисляемых свойств в ES6 позволяет более лаконично задавать имена:

Скопировать код

let prefix = 'data';
let obj = {
  [`${prefix}Key`]: "какое-то значение"
};

console.log(obj.dataKey); // Вывод: "какое-то значение"

Дальнейшее изучение

Присваивание динамического свойства при инициализации

С помощью ES6 и вычисляемых имён свойств можно инициализировать объекты:

Скопировать код

const dynamicKey = 'id';
const dynamicValue = 42;

const dynamicObj = {
  [dynamicKey]: dynamicValue
};

console.log(dynamicObj.id); // Вывод: 42

Переменные во вложенных областях видимости

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

Скопировать код

function createCounter() {
  let count = 0;
  return function() {
    let propName = `count${++count}`;
    this[propName] = count;
    return propName;
  };
}

const counter = createCounter();
console.log(counter()); // Вывод: "count1"
console.log(counter()); // Вывод: "count2"

Объединение динамических свойств

Мы можем комбинировать динамические ключи таким образом:

Скопировать код

const keys = ['alpha', 'beta', 'gamma'];
const values = [1, 2, 3];
let resultObj = {};

keys.forEach((key, index) => {
  resultObj[key] = values[index];
});

console.log(resultObj); // Вывод: { "alpha": 1, "beta": 2, "gamma": 3 }

Визуализация

Представим, у вас есть набор инструментов:

Markdown

Скопировать код

Набор инструментов: { 'молоток': 🔨, 'гаечный ключ': 🔧 }

И вы нашли старую пилу в дедовском сарае:

Скопировать код

let toolName = 'saw';
let myToolbox = {};

Вы решаете добавить ее в свой набор инструментов:

Скопировать код

myToolbox[toolName] = '🪚'; // Динамически добавляет свойство 'пила'

Теперь ваш набор инструментов выглядит так:

Markdown

Скопировать код

Обновленный набор инструментов: { 'молоток': 🔨, 'гаечный ключ': 🔧, 'пила': 🪚 }

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

Окончательные шаги: Совместимость и Транспиляция

Поддержка ES6

Перед публикацией кода в продакшен, убедитесь, что ваш код совместим с разными браузерами:

Скопировать код

const key = "enabledFeatures";
const knowsES6 = true;

const myScript = {
  [key]: knowsES6
};

// Обратите внимание на совместимость с устаревшими браузерами

В случае проблем со совместимостью, может помочь транспилятор Babel, позволяющий преобразовать код из ES6 в ES5.

Развертывание при помощи Webpack

По мере роста вашего проекта следует рассмотреть использование webpack для управления кодом.

Полезные материалы

Проверь как ты усвоил материалы статьи

Пройди тест и узнай насколько ты лучше других читателей

Как динамически задать имя свойства объекта в JavaScript?

1 / 5

Свежие материалы

Лучшие каналы для изучения JavaScript

6 сентября 2024

Видео уроки по C#

6 сентября 2024

Как выбрать версию Swift для скачивания

6 сентября 2024