3 способа копирования объектов в JavaScript

Резюме: в этом уроке вы узнаете, как копировать объекты в JavaScript, включая поверхностное и глубокое копирование. Чтобы скопировать объект в JavaScript, у вас есть три варианта:

1. Использовать синтаксис распространения (...).
2. Использовать метод Object.assign()
3. Использовать методы JSON.stringify() и JSON.parse().

Ниже показано, как скопировать объект, используя три вышеуказанных метода:

const person = {
    firstName: 'John',
    lastName: 'Doe'
};


// using spread ...
let p1 = {
    ...person
};

// using  Object.assign() method
let p2 = Object.assign({}, person);

// using JSON
let p3 = JSON.parse(JSON.stringify(person));
Code language: JavaScript (javascript)

И spread (...) и Object.assign() выполняют неглубокое копирование, в то время как методы JSON выполняют глубокое копирование.

Неглубокое копирование против глубокого копирования

В JavaScript вы используете переменные для хранения значений, которые могут быть примитивами или ссылками. Когда вы делаете копию значения, хранящегося в переменной, вы создаете новую переменную с тем же значением. Для примитивного значения вы просто используете простое присваивание:

let counter = 1;
let copiedCounter = counter;
Code language: JavaScript (javascript)

И когда вы изменяете значение скопированной переменной, значение оригинала остается прежним.

copiedCounter = 2;
console.log(counter); 
Code language: JavaScript (javascript)

Вывод:

1

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

let person = {
    firstName: 'John',
    lastName: 'Doe'
};
let copiedPerson = person;
Code language: JavaScript (javascript)

И когда вы обращаетесь к объекту через новую переменную (copiedPerson) и изменяете значение ее свойства (name), вы изменяете значение свойства объекта.

copiedPerson.firstName = 'Jane';
console.log(person); 
Code language: JavaScript (javascript)

Вывод:

{
    firstName: 'Jane',
    lastName: 'Doe'
}
Code language: CSS (css)

Глубокое копирование означает, что значение новой переменной отвязано от исходной переменной, а неглубокое копирование означает, что некоторые значения все еще связаны с исходной переменной.

Пример неглубокого копирования

Рассмотрим следующий пример:

let person = {
    firstName: 'John',
    lastName: 'Doe',
    address: {
        street: 'North 1st street',
        city: 'San Jose',
        state: 'CA',
        country: 'USA'
    }
};


let copiedPerson = Object.assign({}, person);

copiedPerson.firstName = 'Jane'; // disconnected

copiedPerson.address.street = 'Amphitheatre Parkway'; // connected
copiedPerson.address.city = 'Mountain View'; // connected

console.log(copiedPerson);
Code language: JavaScript (javascript)

В этом примере:

• Во-первых, создайте новый объект с именем person.
• Во-вторых, клонируйте объект person с помощью метода Object.assign().
• В-третьих, измените имя и адрес объекта copiedPerson.

Вот вывод:

{
    firstName: 'Jane',
    lastName: 'Doe',
    address: {
        street: 'Amphitheatre Parkway',
        city: 'Mountain View',
        state: 'CA',
        country: 'USA'
    }
}
Code language: CSS (css)

Однако, когда вы покажете значения объекта person, вы обнаружите, что изменилась информация об адресе, но изменилось имя:

console.log(person);
Code language: JavaScript (javascript)

Output:

{
    firstName: 'John',
    lastName: 'Doe',
    address: {
        street: 'Amphitheatre Parkway',
        city: 'Mountain View',
        state: 'CA',
        country: 'USA'
    }
}
Code language: CSS (css)

Причина в том, что адрес является справочным значением, а имя — примитивным значением. И person, и copiedPerson ссылаются на разные объекты, но эти объекты ссылаются на один и тот же объект address.

Пример глубокого копирования

Следующий фрагмент заменяет метод Object.assign() на методы JSON для глубокого копирования объекта person:

let person = {
    firstName: 'John',
    lastName: 'Doe',
    address: {
        street: 'North 1st street',
        city: 'San Jose',
        state: 'CA',
        country: 'USA'
    }
};


let copiedPerson = JSON.parse(JSON.stringify(person));

copiedPerson.firstName = 'Jane'; // disconnected

copiedPerson.address.street = 'Amphitheatre Parkway';
copiedPerson.address.city = 'Mountain View';

console.log(person);
Code language: JavaScript (javascript)

Выход

{
    firstName: 'John',
    lastName: 'Doe',
    address: {
        street: 'North 1st street',
        city: 'San Jose',
        state: 'CA',
        country: 'USA'
    }
}
Code language: CSS (css)

В этом примере все значения в объекте copiedPerson отделены от исходного объекта person. В этом уроке вы узнали, как копировать объекты в JavaScript с помощью поверхностного или глубокого копирования.