Далее на странице...
Метод assign() - используется для копирования одного или нескольких исходных объектов в целевой объект.
Синтаксис метода assign()
Object.assign(target, src1, src2...)
target - целевой объект;
src1, src2 - исходные объекты.
После копирования метод assign() возвращает целевой объект.
Метод assign() - Примеры
Пример 1.1
// Целевой объект
const numbers = {
a: 3,
b: 5,
c: 8
};
// Исходный - объект для копирования
const add = {
d: 7,
e: 1
};
Object.assign(numbers,add);
console.log(numbers);
console.log(add);
Результат
{ a: 3, b: 5, c: 8, d: 7, e: 1 }
{ d: 7, e: 1 }
Исходный объект add и целевой объект numbers после копирования остаются независимыми объектами.
Это не относится к вложенным объектам. В следующем примере исходный объект add имеет вложенный объект.
Пример 1.2
// Целевой объект
const numbers = {
a: 3,
b: 5,
c: 8
};
// Исходный - объект для копирования
const add = {
d: 7,
e: 1,
k: {
x: 2,
y: 8
}
};
Object.assign(numbers,add);
console.log(numbers);
// 1. Меняем родительское и вложенное свойство объекта add
add.d = 777;
add.k.x = 333;
console.log(add);
console.log(numbers);
// 2. Меняем вложенное свойство объекта numbers
numbers.k.x = 444;
console.log(numbers);
console.log(add);
Результат
{ a: 3, b: 5, c: 8, d: 7, e: 1, k: { x: 2, y: 8 } }
{ d: 777, e: 1, k: { x: 333, y: 8 } }
{ a: 3, b: 5, c: 8, d: 7, e: 1, k: { x: 333, y: 8 } }
{ a: 3, b: 5, c: 8, d: 7, e: 1, k: { x: 444, y: 8 } }
{ d: 777, e: 1, k: { x: 444, y: 8 } }
Итак, исходный объект add имеет вложенный объект.
Что происходит после копирования?
Как родительские свойства, так и вложенная структура исходного объекта add появляются и у целевого объекта numbers.
Вложенная структура исходного объекта add, как в самом исходном объекте add, так и в целевом объекте numbers имеет ссылочный характер.
1. При изменении родительских свойств исходного объекта add --> аналогичные (скопированные) родительские свойства целевого объекта numbers НЕ изменяются.
При изменении свойств вложенной структуры исходного объекта add --> изменяются скопированные свойства вложенной структуры целевого объекта numbers.
2. И наоборот: при изменении скопированных свойств вложенной структуры целевого объекта numbers --> изменяются свойства вложенной структуры исходного объекта add.
Таким образом применение метода assign() не дает глубокого копирования объекта: вложенные объекты передаются по ссылке.
Копия только исходного объекта
В рассмотренных выше примерах исходный объект add копировался в целевой объект numbers. Таким образом к свойствам объекта numbers добавлялись свойства объекта add.
Но как сделать копию исходного объекта? В нашем случае, как сделать копию только объекта add?
Чтобы при помощи метода assign() сделать копию исходного объекта, нужно в качестве целевого объекта указать пустой объект.
Пример 2.1
const add = {
a: 3,
b: 5,
c: 8
};
const addCopy = Object.assign({}, add);
addCopy.c = 888;
console.log(addCopy);
console.log(add);
Результат
{ a: 3, b: 5, c: 888 }
{ a: 3, b: 5, c: 8 }
В примере исходный объект копируется в пустой целевой объект. В результате мы имеем независимую копию исходного объекта.
Так работает метод assign() в JavaScript - делает поверхностную копию исходного объекта.
