JavaScript - Глубокое копирование: Пособие для начинающих

Здравствуйте, будущие маги JavaScript! Сегодня мы отправимся в увлекательное путешествие в мир поверхностного копирования в JavaScript. Не волнуйтесь, если вы новички в программировании - я буду вашим доброжелательным гидом, объясняя все шаг за шагом. Так что налейте себе чашечку кофе (или ваш любимый напиток) и погружайтесь с нами!

Что такое поверхностное копирование?

Прежде чем мы углубимся в(surface) поверхностное копирование, давайте начнем с простого сравнения. Представьте, что у вас есть美丽的画作, и вы хотите сделать ее копию. У вас есть два варианта:

1. Сфотографировать画作 (поверхностное копирование)
2. Полностью recreate画作 с нуля (глубокое копирование)

В JavaScript поверхностное копирование похоже на то, что вы делаете photograph. Оно создает новый объект или массив, но элементы внутри являются ссылками на те же элементы, что и в оригинале.

Как работает поверхностное копирование

Когда вы создаете поверхностное копирование:

1. Создается новый объект или массив
2. Копируются верхнеуровневые свойства
3. Вложенные объекты или массивы по-прежнему ссылаются на оригинал

Давайте посмотрим на это в действии с кодом!

// Исходный объект
let original = {
name: "Alice",
age: 30,
hobbies: ["reading", "swimming"]
};

// Поверхностное копирование
let shallowCopy = Object.assign({}, original);

// Модификация копии
shallowCopy.name = "Bob";
shallowCopy.hobbies.push("coding");

console.log(original);
console.log(shallowCopy);

Если вы запустите этот код, вы увидите что-то интересное:

{name: "Alice", age: 30, hobbies: ["reading", "swimming", "coding"]}
{name: "Bob", age: 30, hobbies: ["reading", "swimming", "coding"]}

Обратите внимание, как изменение name повлияло только на копию, но изменение hobbies повлияло на оба объекта. Вот суть поверхностного копирования!

Глубокое копирование vs. Поверхностное копирование

Теперь, когда мы понимаем поверхностное копирование, давайте сравним его с его собратьем, глубоким копированием.

Feature	Поверхностное копирование	Глубокое копирование
Создание нового объекта	Да	Да
Копирование верхнеуровневых свойств	Да	Да
Копирование вложенных объектов/массивов	Нет (ссылки на оригинал)	Да (создает новые копии)
Производительность	Быстрее	Медленнее
Использование памяти	Меньше	Больше

Когда использовать поверхностное копирование

Поверхностные копии很好, когда:

1. Вы只想 изменить верхнеуровневые свойства
2. Важна производительность
3. Вы хотите создать новую ссылку на объект

Когда использовать глубокое копирование

Глубокие копии лучше, когда:

1. Вам нужно изменить вложенные свойства, не affecting оригинал
2. Вы хотите получить полностью независимую копию объекта

Примеры поверхностного копирования в JavaScript

Давайте рассмотрим некоторые распространенные способы создания поверхностных копий в JavaScript!

1. Object.assign()

let original = { a: 1, b: { c: 2 } };
let copy = Object.assign({}, original);

copy.a = 5;
copy.b.c = 10;

console.log(original); // { a: 1, b: { c: 10 } }
console.log(copy);     // { a: 5, b: { c: 10 } }

Здесь Object.assign() создает поверхностную копию. Изменение a влияет только на копию, но изменение b.c влияет на оба объекта, так как это вложенное свойство.

2. Оператор spread (...)

let fruits = ["apple", "banana", ["grape", "orange"]];
let fruitsCopy = [...fruits];

fruitsCopy[0] = "pear";
fruitsCopy[2].push("kiwi");

console.log(fruits);     // ["apple", "banana", ["grape", "orange", "kiwi"]]
console.log(fruitsCopy); // ["pear", "banana", ["grape", "orange", "kiwi"]]

Оператор spread создает поверхностную копию массива. Модификация первого элемента влияет только на копию, но добавление в вложенный массив влияет на оба.

3. Array.from()

let numbers = [1, 2, [3, 4]];
let numbersCopy = Array.from(numbers);

numbersCopy[0] = 10;
numbersCopy[2].push(5);

console.log(numbers);     // [1, 2, [3, 4, 5]]
console.log(numbersCopy); // [10, 2, [3, 4, 5]]

Array.from() также создает поверхностную копию. Первый уровень элементов копируется, но вложенные массивы по-прежнему ссылаются на originals.

Значение поверхностного копирования

Может быть, вы задаетесь вопросом: "Зачем нам вообще поверхностные копии?" Отличный вопрос! Поверхностные копии都非常 полезны во многих сценариях:

1. Производительность: Поверхностные копии быстрее и используют меньше памяти, чем глубокие копии, что делает их идеальными для больших объектов или частых операций.

2. Невменяемость: Они помогают поддерживать невменяемость в вашем коде, что важно для предсказуемого управления состоянием в современных фреймворках JavaScript.

3. Избегание побочных эффектов: Поверхностные копии позволяют вам модифицировать объект, не изменяя оригинал, что уменьшает неожиданные побочные эффекты в вашем коде.

4. React и Redux: В приложениях React и Redux поверхностные копии часто используются для触发ания перерисовок и обновления состояния, не мутируя исходные данные.

Вот реальный пример:

function updateUserProfile(user, newName) {
// Создаем поверхностную копию объекта пользователя
let updatedUser = Object.assign({}, user);

// Обновляем имя
updatedUser.name = newName;

return updatedUser;
}

let user = {
name: "Alice",
age: 30,
address: {
city: "Wonderland",
street: "Rabbit Hole Lane"
}
};

let updatedUser = updateUserProfile(user, "Alicia");

console.log(user);        // Исходный объект не изменен
console.log(updatedUser); // Новый объект с обновленным именем

В этом примере мы обновляем имя пользователя, не изменяя исходный объект. Это распространенный паттерн в управлении состоянием и помогает поддерживать целостность данных.

Заключение

Поздравляю! Вы только что сделали свои первые шаги в мир поверхностного копирования в JavaScript. Помните, что поверхностные копии как фотографирование - они быстры и эффективны, но не capture все в полной детализации.

Пока вы продолжаете свое путешествие в JavaScript, вы найдете множество ситуаций, где поверхностное копирование оказывается полезным. Это мощный инструмент в вашем арсенале программирования, особенно при работе с сложными структурами данных и управлением состоянием.

Продолжайте практиковаться, stay curious и не бойтесь экспериментировать. Before you know it, вы будете создавать и манипулировать объектами, как профессион! ?

Credits: Image by storyset