Поверхностное и глубокое копирование
Часть раздела Логика и поток путешествия по JavaScript на Coddy — урок 25 из 65.
При копировании объектов существует два типа копирования:
- Поверхностное копирование — копирует только первый уровень
- Глубокое копирование — копирует все вложенные уровни
Методы поверхностного копирования:
Использование оператора spread:
const original = { a: 1, b: { x: 2 } };
const spreadCopy = { ...original };Использование Object.assign(), который создает новый объект путем копирования свойств из исходного объекта в целевой:
const assignCopy = Object.assign({}, original);Проблема с поверхностным копированием:
original.b.x = 3;
console.log(spreadCopy.b.x); // 3
// (вложенные объекты имеют общую ссылку)
console.log(assignCopy.b.x); // 3Понимание методов JSON и глубокого копирования
JSON.stringify() преобразует объект JavaScript в строку JSON:
const obj = { name: "John", age: 30 };
const jsonString = JSON.stringify(obj);
console.log(jsonString); // "{"name":"John","age":30}"JSON.parse() преобразует строку JSON обратно в объект JavaScript:
const backToObject = JSON.parse(jsonString);
console.log(backToObject); // { name: "John", age: 30 }Глубокое копирование с использованием JSON:
const original = { a: 1, b: { x: 2 } };
const deepCopy = JSON.parse(JSON.stringify(original));
original.b.x = 3;
console.log(deepCopy.b.x); // 2 (полностью независимый)
Задание
ЛегкоСоздайте функцию с именем processCart, которая принимает JSON строку, представляющую корзину покупок. Корзина содержит массив товаров с названиями и ценами. Ваша задача:
- Преобразовать JSON-строку в объект JavaScript
- Создать из нее ДВЕ отдельные корзины
- Во второй корзине:
- Добавить свойство
discountedкаждому товару, установив его в false - Применить скидку 10% ко всем товарам, у которых
priceбольше 50 - Установить 'discounted' в true для товаров, получивших скидку
- Добавить свойство
- Вернуть массив, содержащий обе корзины
Шпаргалка
При копировании объектов существует два типа копирования:
- Поверхностное копирование (Shallow Copy) — копирует только первый уровень
- Глубокое копирование (Deep Copy) — копирует все вложенные уровни
Методы поверхностного копирования:
Использование оператора расширения (spread operator):
const original = { a: 1, b: { x: 2 } };
const spreadCopy = { ...original };Использование Object.assign():
const assignCopy = Object.assign({}, original);Проблема поверхностного копирования:
original.b.x = 3;
console.log(spreadCopy.b.x); // 3 (nested objects share reference)Методы JSON:
JSON.stringify() преобразует объект JavaScript в строку JSON:
const obj = { name: "John", age: 30 };
const jsonString = JSON.stringify(obj);
console.log(jsonString); // "{"name":"John","age":30}"JSON.parse() преобразует строку JSON обратно в объект JavaScript:
const backToObject = JSON.parse(jsonString);
console.log(backToObject); // { name: "John", age: 30 }Глубокое копирование с использованием JSON:
const original = { a: 1, b: { x: 2 } };
const deepCopy = JSON.parse(JSON.stringify(original));
original.b.x = 3;
console.log(deepCopy.b.x); // 2 (completely independent)Попробуйте сами
function processCart(jsonString) {
// Напишите код здесь
}
// Не пишите ничего вне функции
Проверьте себяВ этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.
Все уроки раздела Логика и поток
1Строки в деталях
Основы работы со строкамиИтерация по строкамШаблонные литералыМетоды строкИтоги — String Weaver4JSON Часть 2
Итерация по JSONВложенный JSONОпциональная цепочка JSONПоверхностное и глубокое копированиеПовторение — Магазин велосипедовПовторение — Солнечная система7Система управления библиотекой
Обзор проектаДобавление книг
Поиск по названиюФильтрация по жанруОтметить как прочитанное10Управление системой фестиваля
Обзор проектаДобавление фильмов и площадокДобавление сеансаПокупка билетовОценка фильмовОтмена сеансов2Многомерные массивы
Основы 2D массивовДоступ к элементам 2D массиваВложенные циклы и 2D массивыПовторение: 2D массивыСложение и вычитание матрицСтупенчатые массивы3D массивы и далееРаспространенные паттерны 2D массивовПовторение: всё о массивах5Множества. Часть 1
Что такое множество?Итерация по множествамДобавление элементаУдаление элементаПроверка наличия элементаРазмер и проверка на пустотуКопирование и очисткаИтоги — Основы множеств8Интересные темы о массивах
Деструктуризация массивовСинтаксис Spread в массивахРазреженные массивыИтоги — Воркшоп по массивам3JSON. Часть 1
Что такое JSON?Проверка наличия ключаМетоды объектовОператор spread. Часть 1Оператор spread. Часть 2Удаление ключейПовторение: манипуляции с ключами JSON