«Единственный способ творить великие дела – это любить то, что ты делаешь»
JavaScript



Игра «Морской Бой» на JavaScript: Простая Игра и Игра для Двоих



Метод 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 - делает поверхностную копию исходного объекта.



Читайте также...



Отзывы и комментарии:

Комментариев нет...

Оставить отзыв:

Ваше Имя:

Текст комментария:

Ответьте на вопрос:

Сколько дней в Високосном году?


Рунет - Часть 2
Метод assign() – Копирование исходных объектов в целевой объект
7244
Условия if else - Конструкция switch case - Тернарный оператор
7245
Циклы while и for - Операторы break и continue
7245
Практика часть 2 – Циклы и Условия
7250
Объявление функций – Стрелочные функции ES6
7243
Методы и свойства строк и чисел - Метод substr - Индекс строки
7243
Практика часть 3 - Используем функции
7244
Что такое callback-функция - Аргумент другой функции
7244
Свойства и методы объектов - Деструктуризация объектов ES6
7243
Методы массивов - Перебор элементов массива - Псевдомассивы
7244
Передача данных по ссылке и по значению – Клонирование объекта
7245
Копирование массивов - Оператор spread
7244
Прототипное Программирование - Прототип и Экземпляр Объекта
7243
Свойство proto - Методы Object.create и Object.setPrototypeOf
7243
Практика часть 4 - Используем функции как методы объекта
7243

Тематические публикации
Популярные заметки
Последние заметки