В этом посте мы обсудим различные методы для копирования объекта JavaScript и обсудить результат каждого метода.
Но до того, как только имейте в виду одну вещь, что объекты JavaScript являются Meatable по природе и хранится в качестве ссылки. Поэтому, когда вы назначаете объект другой переменной, вы просто назначаете адрес памяти объекта к этой переменной.
В этом случае ваш старый и новый объект оба укажет один и тот же адрес памяти. Любые изменения в любом объекте будут отражены в другом. Поэтому только назначение единого объекта к другому не будет копировать ваш объект !!!
// Define object bar
var bar = {
x : 'Hi'
}
console.log(bar.x); //Hi
// Assign it to foo
var foo = bar;
console.log(foo.x); //Hi
//But
foo.x = 'Hello!! Im foo.';
console.log(foo.x); //Hello!! Im foo.
console.log(bar.x); //Hello!! Im foo.
bar.x = "Nice to meet you foo!!";
console.log(foo.x); //Nice to meet you foo!!
console.log(bar.x); //Nice to meet you foo!!
Как вы видите в приведенном выше примере, оба Foo и бар отражают изменения, сделанные в любом объекте.
Но у нас нет 3 Короткий и сладкий метод, который вы можете использовать для копирования объекта.
Малая копия с использованием Spread Syntax или Object.Ascign
Распространение синтаксиса
Этот самый короткий и простой способ копирования/объединения объекта. См. Пример ниже:
var obj = { foo: "foo", bar: "bar" };
var clonedObj = { ...obj };
// Object { foo: "foo", bar: "bar" }
Объект.assign
Метод Object.Assign () может использоваться для копирования значений всех перечислимых собственных свойств от одного или нескольких исходных объектов в целевой объект, и он вернет целевой объект.
var obj = { foo: "foo", bar: "bar" };
var clonedObj = Object.assign({}, obj);
// Object { foo: "foo", bar: "bar" }
Используя синтаксис распространения или объекта. Назначить () – это стандартный способ копирования объекта в JavaScript. Обе методологии могут быть эквивалентно используются для копирования/объединения перечислимых свойств объекта к другому объекту.
Проблема С этими двумя подходами это просто сделает Малая копия Отказ Неглубокая копия – это битная копия объекта. Создан новый объект, который имеет точную копию значений в исходном объекте. Но если какие-либо из полей объекта являются ссылки на другие объекты, просто справочные адреса копируются, то есть только адрес памяти копируется. Изменение такого эталонного поля будет отражено на обоих объектах. Смотрите ниже пример.
let obj = { a: 0 , b: { c: 0}};
let copySpread = {...obj};
let copyOA = Object.assign({}, obj);
console.log(JSON.stringify(obj)); // { a: 0, b: { c: 0}}
obj.a = 1;
console.log(JSON.stringify(obj)); // { a: 1, b: { c: 0}}
console.log(JSON.stringify(copySpread)); // { a: 0, b: { c: 0}}
console.log(JSON.stringify(copyOA)); // { a: 0, b: { c: 0}}
copySpread.a = 2;
console.log(JSON.stringify(obj)); // { a: 1, b: { c: 0}}
console.log(JSON.stringify(copySpread)); // { a: 2, b: { c: 0}}
console.log(JSON.stringify(copyOA)); // { a: 0, b: { c: 0}}
copyOA.a = 3;
console.log(JSON.stringify(obj)); // { a: 1, b: { c: 0}}
console.log(JSON.stringify(copySpread)); // { a: 2, b: { c: 0}}
console.log(JSON.stringify(copyOA)); // { a: 3, b: { c: 0}}
obj.b.c = 4;
console.log(JSON.stringify(obj)); // { a: 1, b: { c: 4}}
console.log(JSON.stringify(copySpread)); // { a: 2, b: { c: 4}}
console.log(JSON.stringify(copyOA)); // { a: 3, b: { c: 4}}
Таким образом, эти два метода короткие и очень полезны, но оно не будет отработать, когда вы вложенный объект в вашем объекте, который будет скопирован.
Глубокая копия, используя json.stringify и json.parse
Глубокая копия возникает, когда объект скопирован вместе с объектами, к которым он относится. Это можно легко сделать, используя комбинацию Json.stringify и Json.parse создать глубокую копию.
В этом методе мы первым Json.stringify () Объект JSON и снова разбирает его, чтобы вернуть объект JSON. Json.parse () Метод определяет строку JSON и создает значение JavaScript или объект, описанный строкой. Эти новые объектные поля будут иметь свой собственный адрес памяти и будут независимы от глубоко вложенных полей объектов
Смотрите ниже пример, Deepclone Объект не будет иметь никакого эффекта, если основной исходный объект obj модифицирован и наоборот.
// Deep Clone
obj = { a: 0 , b: { c: 0}};
let deepClone = JSON.parse(JSON.stringify(obj));
obj.a = 5;
obj.b.c = 5;
console.log(JSON.stringify(obj)); // { a: 5, b: { c: 5}}
console.log(JSON.stringify(deepClone)); // { a: 0, b: { c: 0}}
deepClone.a = 6;
deepClone.b.c = 6;
console.log(JSON.stringify(obj)); // { a: 5, b: { c: 5}}
console.log(JSON.stringify(deepClone)); // { a: 6, b: { c: 6}}
Или вы можете написать свою собственную функцию, чтобы сделать глубокую копию/клонирование.
Обертывание
- Помните, что объекты JavaScript являются смежными и хранятся посредством ссылки.
- Object.Assign () или Speed Syntax можно использовать для копирования, но это будет неглубокая копия.
- Json. Stringify и Json. Разбор можно использовать для глубокой копии.
- Вы можете создать свою собственную функцию, чтобы сделать глубокую копию или использовать сторонние библиотеки, такие как Load Lodash, подчеркивание или многие доступные там.