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

Существует два способа добавления новых свойств в объект:

var obj = {
    key1: value1,
    key2: value2
};

Использование точечной нотации:

obj.key3 = "value3";

Использование квадратных скобок:

obj["key3"] = "value3";

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

var getProperty = function (propertyName) {
    return obj[propertyName];
};

getProperty("key1");
getProperty("key2");
getProperty("key3");

Настоящий массив JavaScript можно создать с помощью:

Литерала массива:

var arr = [];

Конструктора массива:

var arr = new Array();

Вы можете использовать любой из следующих способов (при условии, что key3 — это фактический ключ, который вы хотите использовать):

arr['key3'] = value3;

или

arr.key3 = value3;

Если key3 является переменной, то вам следует сделать так:

var key3 = 'a_key';
var value3 = 3;
arr[key3] = value3;

После этого, запрос arr.a_key вернет значение переменной value3, то есть литерал 3.

Оператор распространения (spread operator) — это удобный и быстрый синтаксис для добавления элементов в массивы, объединения массивов или объектов, а также для разбиения массива на аргументы функции.

С ES2018 в синтаксис добавлены свойства распространения для объектов. Он копирует собственные перечисляемые свойства из указанного объекта в новый объект.

Синтаксис распространения полезен для объединения свойств и методов объектов в новый объект:

Вы можете добавить свойство в объект следующим образом:

const obj1 = {hello: "🤪"};
const obj2 = {...obj1, laugh: "😂" };
console.log('obj1', obj1);
console.log('obj2', obj2);

Вы также можете объединять объекты следующим образом:

const objectOne = {hello: "🤪"};
const objectTwo = {world: "🐻"};
const objectThree = {...objectOne, ...objectTwo, laugh: "😂"};
console.log(objectThree); // Object { hello: "🤪", world: "🐻", laugh: "😂" }
const objectFour = {...objectOne, ...objectTwo, laugh: () => {console.log("😂".repeat(5))}};
objectFour.laugh(); // 😂😂😂😂😂

Таким образом, синтаксис распространения оказывается полезным инструментом для работы с объектами в JavaScript.

Ваш код:

arr.key3 = value3;

не работает, потому что arr на самом деле не является массивом. Это объект-прототип. Настоящий массив должен выглядеть так:

var arr = [{key1: value1}, {key2: value2}];

Однако это тоже не совсем верно. На самом деле правильно будет:

var arr = [{key: key1, value: value1}, {key: key2, value: value2}];

Таким образом, элементы массива представляют собой объекты с явным указанием ключа и значения.

Просто добавление свойств:

Если мы хотим добавить prop2: 2 к этому объекту, вот самые удобные варианты:

1. Оператор точки: object.prop2 = 2;
2. Квадратные скобки: object['prop2'] = 2;

Так какой из них использовать?

Оператор точки обеспечивает более чистый синтаксис и должен использоваться по умолчанию (по моему мнению). Однако оператор точки не позволяет добавлять динамические ключи в объект, что может быть весьма полезно в некоторых случаях. Вот пример:

const obj = {
  prop1: 1
}

const key = Math.random() > 0.5 ? 'key1' : 'key2';

obj[key] = 'это значение с динамическим ключом';

console.log(obj);

Слияние объектов:

Когда мы хотим объединить свойства двух объектов, вот самые удобные варианты:

1. Object.assign(), который принимает целевой объект в качестве аргумента и один или несколько исходных объектов и объединяет их. Например:

const object1 = {
  a: 1,
  b: 2,
};

const object2 = Object.assign({
  c: 3,
  d: 4
}, object1);

console.log(object2);

2. Оператор расширения объектов ...

const obj = {
  prop1: 1,
  prop2: 2
}

const newObj = {
  ...obj,
  prop3: 3,
  prop4: 4
}

console.log(newObj);

Какой из них использовать?

• Синтаксис расширения менее многословен и, на мой взгляд, должен использоваться по умолчанию. Не забывайте транспилировать этот синтаксис в более старые версии, поддерживаемые всеми браузерами, поскольку он относительно новый.
• Object.assign() более динамичен, так как у нас есть доступ ко всем объектам, переданным в качестве аргументов, и мы можем манипулировать ими, прежде чем они будут присвоены новому объекту.