Существует три различных способа клонирования объектов в Javascript.
1: глубокое копирование с использованием итерации
function iterationCopy(src) {
let target = {};
for (let prop in src) {
if (src.hasOwnProperty(prop)) {
target[prop] = src[prop];
}
}
return target;
}
const source = {a:1, b:2, c:3};
const target = iterationCopy(source);
console.log(target); // {a:1, b:2, c:3}
// Check if clones it and not changing it
source.a = 'a';
console.log(source.a); // 'a'
console.log(target.a); // 1
Итак, как вы видите, это работает!
Теперь давайте остановимся на втором решении, которое действительно более элегантно, но более ограничено в использовании.
2: преобразование в JSON и обратно
function jsonCopy(src) {
return JSON.parse(JSON.stringify(src));
}
const source = {a:1, b:2, c:3};
const target = jsonCopy(source);
console.log(target); // {a:1, b:2, c:3}
// Check if clones it and not changing it
source.a = 'a';
console.log(source.a); // 'a'
console.log(target.a); // 1
Примечание. Будьте осторожны при использовании этого метода, поскольку ваш исходный объект ДОЛЖЕН быть безопасным в JSON. Поэтому для обеспечения безопасности может потребоваться какая-то обработка исключений, если исходный объект не может быть преобразован в JSON.
3: Использование Object.assign
Обновление: у этого метода есть недостаток, заключающийся в том, что он делает только поверхностную копию. Это означает, что вложенные свойства все еще будут скопированы по ссылке. Будьте осторожны с этим.
Этот способ является лучшим и самым безопасным способом, который я лично использую в своих проектах. Он использует встроенный статический метод для объекта Object и обрабатывается и обеспечивается языком. Так что используйте это!
function bestCopyEver(src) {
return Object.assign({}, src);
}
const source = {a:1, b:2, c:3};
const target = bestCopyEver(source);
console.log(target); // {a:1, b:2, c:3}
// Check if clones it and not changing it
source.a = 'a';
console.log(source.a); // 'a'
console.log(target.a); // 1