Разница между двумя способами добавления свойств объекта в Javascript

Question

Мой код включает добавление свойств к объекту на основе некоторых тестовых примеров. Вот два способа, которым я это сделал. Я использую этот объект для встроенного моделирования в реакциях.

var myObject = {} 

//some code 

myObject = { 
key1: value1, 
key2:value 
} 

//some code 

myObject = { 
key3: value3, 
key4: value4 
} 

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

var myObject = {} 

//some code 

myObject = { 
key1: value1, 
key2:value 
} 

//some code 

myObject.key3 = value3; 
myObject.key4 = value4; 

В чем разница между этими двумя способами?

Answer 1

В первом фрагменте вы не добавляете свойства объекта, вы переписываете целое myObject. Во втором фрагменте вы назначаете одно значение для ключа, т. Е. добавление свойств со значениями.

Например:

var i = {num: 1}; 
i.num = 2; 
console.log(i.num); // 2 
i = {str: "Hello"}; 
console.log(i.num); // undefined 
console.log(i.str); // "Hello" 
i.num = 1; 
console.log(i.num); // 1 
console.log(i.str); // "Hello" 

Answer 2

Рассмотрите возможность использования Object.assign в первом случае, причина в противном случае myObject будет содержать только key3 и key4.

var myObject = {} 

//some code 

myObject = { 
    key1: value1, 
    key2:value 
} 

//some code 

Object.assign(myObject,{ 
    key3: value3, 
    key4: value4 
}) 

Answer 3

Существует разница между этими двумя случаями

первый случай:

MyObject = { ключ1: значение1, ключ2: Значение }

означает создание нового объекта и присвоение его переменной myObject

В то время как во втором случае:

myObject.key3 = value3;

myObject.key4 = value4;

означает добавление нового свойства/значения к существующему объекту.