Есть ли неизменная версия Object.assign?

Question

Я хочу смешивать два объекта в JavaScript:

let a = {x: 1, y: 2, z:3}; 
let b = {x:10, y: 20}; 

let c = Object.assign(a, b); 

Это дает правильное значение для c:

Object { x: 10, y: 20, z: 3 } 

Но теперь a было изменено тоже!

Object { x: 10, y: 20, z: 3 } 

Есть ли способ, чтобы назначить a на b в новый объект?

Answer 1

Первый аргумент assignявляется целевой. Так что это изменится. Вы можете просто передать пустой объект для вашей цели, если вы не хотите какой-либо из источников изменения:

let a = {x: 1, y: 2, z:3}; 
 
let b = {x:10, y: 20}; 
 

 
let c = Object.assign({},a, b); 
 
console.log(c); 
 
console.log(a); // a is unchanged

Answer 2

Вы можете использовать spread operator:

let a = {x: 1, y: 2, z: 3}; 
 
let b = {x: 10, y: 20}; 
 

 
let c = { 
 
    ...a, 
 
    ...b 
 
} 
 

 
console.log(c); 
 
console.log(a);

Answer 3

let a = {x: 1, y: 2, z:3}; 
let b = {x:10, y: 20}; 

let c = Object.assign({},a, b); 

Вам необходим {} в рамках метода Assign для первый объект, потому что если вы читаете документацию для метода Object.assign здесь https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/assign#Parameters Указывает, что первым параметром является целевой объект, а остальные - источники. поэтому прямо сейчас вы назначаете b a и возвращаете новый a в c. Поэтому, если ваш первый аргумент - пустой объект, этого не произойдет.

Answer 4

Окончательно оператор с . Это помогает добавить одно свойство, например, стилизовать CSS в JS. Но имейте в виду, что в настоящее время это only in stage 3 из EcmaScript.

const lessStyle = { 
    color: 'blue', 
    backgroundColor: 'yellow' 
}; 

const moreStyle = {...lessStyle, color: 'red'};