Как добавить пары ключ/значение в объекты JavaScript

Добавление пары ключ-значение в объект JavaScript

Чтобы добавить пару ключ-значение в объект JavaScript, можно использовать либо точечную нотацию (obj.key3 = value3), либо скобочную нотацию (obj['key3'] = value3). Оба метода дают одинаковый результат, но используются в разных сценариях в зависимости от ваших конкретных потребностей.

Содержание

• Метод точечной нотации
• Метод скобочной нотации
• Когда использовать каждый метод
• Расширенные примеры с динамическими ключами
• Распространенные ошибки, которых следует избегать
• Вопросы производительности

Метод точечной нотации

Точечная нотация — самый простой и commonly используемый метод добавления пар ключ-значение в объекты JavaScript. Вот как можно добавить key3 со значением value3 в ваш объект:

var obj = {key1: 'value1', key2: 'value2'};
obj.key3 = 'value3';

Этот подход чистый и читаемый, что делает его идеальным для случаев, когда вы заранее знаете точное имя ключа. Точечная нотация требует, чтобы ключ был допустимым идентификатором JavaScript (без пробелов, без специальных символов, кроме подчеркивания и знака доллара, и не может начинаться с цифры).

Как объясняется на Sentry.io, “Точечная нотация действительно имеет некоторые ограничения. Если ключ динамический, содержит пробелы или дефисы, или начинается с цифры, вы получите сообщение об ошибке.”

Метод скобочной нотации

Скобочная нотация обеспечивает большую гибкость и необходима при работе с динамическими ключами или ключами, которые не работают с точечной нотацией:

var obj = {key1: 'value1', key2: 'value2'};
obj['key3'] = 'value3';

Метод скобочной нотации особенно мощный, потому что позволяет использовать:

• Динамические ключи: Переменные в качестве имен свойств
• Специальные символы: Ключи с пробелами, дефисами или другими специальными символами
• Числовые ключи: Ключи, начинающиеся с цифр
• Зарезервированные слова: JavaScript зарезервированные слова в качестве имен свойств

Согласно GeeksforGeeks, “В этом подходе мы будем напрямую обращаться к ключу объекта через ‘.’ для присвоения значения ему. Это может быть повторяющимся методом, так как каждый раз нам нужно определить разный ключ для разных значений.” Однако скобочная нотация решает проблему с динамическими ключами.

Когда использовать каждый метод

Используйте точечную нотацию, когда:

• Вы заранее знаете точное имя ключа
• Ключ является допустимым идентификатором JavaScript
• Вы предпочитаете более чистый и читаемый код
• Производительность является критически важным фактором (точечная нотация быстрее)

// Хорошие кандидаты для точечной нотации
obj.firstName = 'John';
obj.userAge = 25;
obj.isAdmin = true;

Используйте скобочную нотацию, когда:

• Ключ хранится в переменной
• Ключ содержит специальные символы или пробелы
• Ключ начинается с цифры
• Вам нужно получить доступ к зарезервированным словам как к свойствам

// Хорошие кандидаты для скобочной нотации
obj['first name'] = 'John Doe';  // Пробел в ключе
obj['123-street'] = '123 Main St';  // Дефис и цифра
obj['class'] = 'Mathematics';  // Зарезервированное слово

Как объясняется на FreeCodeCamp, “Причина этого в том, что точечная нотация принимает только статические ключи. Поэтому, когда вы делаете obj.myKey, JavaScript ищет свойство с ключом myKey в obj. Но этого свойства не существует, поэтому мы получаем undefined.”

Расширенные примеры с динамическими ключами

Использование переменных в качестве ключей

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

var obj = {key1: 'value1', key2: 'value2'};
var dynamicKey = 'key3';
var dynamicValue = 'value3';

obj[dynamicKey] = dynamicValue;
console.log(obj);  // {key1: 'value1', key2: 'value2', key3: 'value3'}

Ключи со специальными символами

var obj = {};
obj['user-profile'] = 'active';  // Ключ с дефисом
obj['full name'] = 'Alice Johnson';  // Пробел в ключе
obj['1st-place'] = 'Winner';  // Начинается с цифры
console.log(obj);

Динамическое создание объектов

var user = {};
var fields = ['name', 'email', 'age'];
var values = ['Bob', 'bob@email.com', 30];

fields.forEach((field, index) => {
  user[field] = values[index];
});

console.log(user);  // {name: 'Bob', email: 'bob@email.com', age: 30}

Согласно SamanthaMing.com, “Если вы используете точечную нотацию, она просто предположит, что вы пытаетесь получить доступ к свойству с допустимым идентификатором JavaScript. Поскольку она возвращает что-то, вы можете подумать, что все работает нормально. Под капотом, да, это так. Но если ваша цель — использовать переменную, это может вас запутать.”

Распространенные ошибки, которых следует избегать

1. Использование точечной нотации с динамическими ключами

Это распространенная ошибка среди начинающих:

// ❌ Неправильный подход
var key = 'key3';
obj.key = 'value3';  // Это добавляет свойство 'key', а не 'key3'

// ✅ Правильный подход
var key = 'key3';
obj[key] = 'value3';  // Это добавляет свойство 'key3'

2. Забыть кавычки в скобочной нотации

Помните, что скобочная нотация требует строковых литералов (или переменных):

// ❌ Неправильно - отсутствуют кавычки
obj[key3] = 'value3';  // ReferenceError: key3 is not defined

// ✅ Правильно
obj['key3'] = 'value3';  // или obj[key3], если key3 - переменная

3. Использование точечной нотации с недопустимыми идентификаторами

// ❌ Неправильно - недопустимые идентификаторы
obj.123key = 'value';  // SyntaxError
obj.my-key = 'value';  // SyntaxError

// ✅ Правильно - используйте скобочную нотацию
obj['123key'] = 'value';
obj['my-key'] = 'value';

Вопросы производительности

Точечная нотация быстрее

Согласно Stack Overflow, “Точечная нотация быстрее (по крайней мере для меня) проверьте в вашем браузере jsperf.com/dot-notation-vs-bracket-notation/2”. Это связано с тем, что точечная нотация требует меньше обработки во время выполнения - имя свойства известно во время компиляции.

Когда производительность имеет значение

В приложениях, где производительность критична, учитывайте:

// Быстрее для статических ключей
for (let i = 0; i < 1000000; i++) {
  obj.staticKey = i;  // Точечная нотация
}

// Медленнее для динамических ключей
for (let i = 0; i < 1000000; i++) {
  obj['dynamicKey' + i] = i;  // Должна использоваться скобочная нотация
}

Однако для большинства приложений разница в производительности незначительна, если вы не обрабатываете миллионы операций.

Заключение

Добавление пар ключ-значение в объекты JavaScript является фундаментальной операцией, которую можно выполнить с помощью либо точечной, либо скобочной нотации. Вот основные выводы:

• Точечная нотация (obj.key = value) чище и быстрее, но ограничена допустимыми идентификаторами JavaScript
• Скобочная нотация (obj['key'] = value) более гибкая и поддерживает динамические ключи, специальные символы и числовые ключи
• Используйте точечную нотацию для статических, допустимых идентификаторов, когда приоритетом являются читаемость и производительность
• Используйте скобочную нотацию для динамических ключей, специальных символов или когда вам нужна максимальная гибкость
• Избегайте распространенной ошибки использования точечной нотации с переменными - всегда используйте скобочную нотацию для динамических ключей

При работе с вашим конкретным объектом var obj = {key1: 'value1', key2: 'value2'} вы можете добавить key3 со значением value3 с помощью obj.key3 = 'value3' или obj['key3'] = 'value3'. Выберите метод, который лучше всего соответствует вашему конкретному случаю использования и стилю кодирования.

Источники

1. How Can I Add a Key-Value Pair to a JavaScript Object? | Sentry
2. How can I add a key/value pair to a JavaScript object? - Stack Overflow
3. How to add Key-Value pair to a JavaScript Object? - GeeksforGeeks
4. How to Add a Key/Value pair to an Object in JavaScript | bobbyhadz
5. How to Add a Key Value Pair to a Javascript Object | Squash.io
6. Dot Notation vs Bracket Notation for Object Properties – What’s the Difference? | FreeCodeCamp
7. Dot notation vs Bracket notation | SamanthaMing.com
8. Property accessors - JavaScript | MDN
9. DOT & BRACKET Notation in JavaScript | CapsCode
10. The differences between Dot Notation and Bracket Notation in Javascript | Medium