«Единственный способ творить великие дела – это любить то, что ты делаешь»
JavaScript
site.komp36.ru Создание сайтов. Твой сайт фотографа Что есть на сайте? Несколько фото галерей: свадебная, постановочная съемка, love story, детские фото. Договор на фотосъемку, прайс-лист.
site.komp36.ru Продающий лендинг «Установка и продажа окон» Установка и продажа окон, установка дверей, перегородок. Одностраничный продающий сайт. Заявки прямо с сайта
site.komp36.ru Универсальный лендинг. Любая тема сайта - 4900 руб. Лендинг адаптируется под любую тему: ремонт, отделка, продажа окон, дверей, лестниц, мебели и многое другое
site.komp36.ru Создание сайтов. Сайт сервисного центра. Сайт компании. Новости и отзывы. Несколько прайс-листов – под каждый отдельная страница. Возможность размещения статей


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

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

site.komp36.ruТвой сайт фотографа. Создание сайтов Что есть на сайте? Несколько фото галерей: свадебная, постановочная съемка, love story, детские фото. Договор на фотосъемку, прайс-лист.
site.komp36.ru Акция Как начать свое дело? Свой сайт «Укладка плитки» 9 000 руб. Лендинг адаптируется под любой вид отделочных работ, продажу товаров или услуг. Сайт поможет найти новых клиентов
site.komp36.ru Акция Продающий лендинг «Установка и продажа окон» 9 000 руб. Одностраничный продающий сайт. Установка и продажа окон, установка дверей, перегородок. Заявки прямо с сайта

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

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

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

Ваше Имя:

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

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

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


Рунет - Часть 2
Метод assign() – Копирование исходных объектов в целевой объект
569
Условия if else - Конструкция switch case - Тернарный оператор
692
Циклы while и for - Операторы break и continue
925
Практика часть 2 – Циклы и Условия
4490
Объявление функций – Стрелочные функции ES6
1116
Методы и свойства строк и чисел - Метод substr - Индекс строки
551
Практика часть 3 - Используем функции
1482
Что такое callback-функция - Аргумент другой функции
2194
Свойства и методы объектов - Деструктуризация объектов ES6
2866
Методы массивов - Перебор элементов массива - Псевдомассивы
2167
Передача данных по ссылке и по значению – Клонирование объекта
520
Копирование массивов - Оператор spread
2011
Прототипное Программирование - Прототип и Экземпляр Объекта
512
Свойство proto - Методы Object.create и Object.setPrototypeOf
716
Практика часть 4 - Используем функции как методы объекта
10975
Тематические публикации
site.komp36.ru Как начать свое дело? Свой сайт «Укладка плитки» 9 000 руб. Лендинг адаптируется под любой вид отделочных работ, продажу товаров или услуг. Сайт поможет найти новых клиентов
site.komp36.ru Продающий лендинг «Установка и продажа окон» 9 000 руб. Одностраничный продающий сайт. Установка и продажа окон, установка дверей, перегородок. Заявки прямо с сайта
Популярные заметки
Последние заметки