js中对象如何克隆

在JavaScript中，对象的克隆可以通过多种方式实现，包括浅拷贝和深拷贝。常见的方法有：Object.assign()、扩展运算符、JSON.parse()和JSON.stringify()、以及使用外部库。其中，使用Object.assign()和扩展运算符是最常见的浅拷贝方法，而JSON.parse()和JSON.stringify()则是常见的深拷贝方法。下面将详细介绍这些方法的实现方式和适用场景。

一、OBJECT.ASSIGN()

Object.assign()方法用于将所有可枚举的自身属性从一个或多个源对象复制到目标对象。它将返回目标对象。

1、基本用法

Object.assign()的基本用法非常简单，适用于浅拷贝。浅拷贝只复制对象的第一层属性，对于嵌套对象，只是复制引用。

const original = { a: 1, b: { c: 2 } };

const copy = Object.assign({}, original);
console.log(copy); // { a: 1, b: { c: 2 } }

2、注意事项

浅拷贝并不适用于所有场景，尤其是当对象中包含嵌套对象时，修改嵌套对象的属性会影响到原对象，因为它们引用的是同一个对象。

copy.b.c = 3;

console.log(original.b.c); // 3

二、扩展运算符（SPREAD OPERATOR）

扩展运算符（…）是浅拷贝另一种简洁的方法，适用于简单对象的拷贝。

1、基本用法

扩展运算符的语法简洁直观，非常适合浅拷贝。

const original = { a: 1, b: { c: 2 } };

const copy = { ...original };
console.log(copy); // { a: 1, b: { c: 2 } }

2、注意事项

与Object.assign()一样，扩展运算符仅适用于浅拷贝，不适合嵌套对象的深拷贝。

copy.b.c = 3;

console.log(original.b.c); // 3

三、JSON.PARSE()和JSON.STRINGIFY()

JSON.parse()和JSON.stringify()方法常用于深拷贝，通过将对象序列化为JSON字符串，再反序列化为对象，实现深拷贝。

1、基本用法

这种方法适用于大部分对象，尤其是嵌套对象。

const original = { a: 1, b: { c: 2 } };

const copy = JSON.parse(JSON.stringify(original));
console.log(copy); // { a: 1, b: { c: 2 } }

2、注意事项

这种方法有一些局限性：

• 不能处理函数、undefined、Symbol等特殊类型；
• 会丢失对象的原型链；
• 对于循环引用的对象会报错。

const original = { a: 1, b: { c: 2 }, d: function() {} };

const copy = JSON.parse(JSON.stringify(original));
console.log(copy); // { a: 1, b: { c: 2 } }  (函数d丢失)

四、外部库

为了处理更复杂的对象克隆需求，可以使用外部库如Lodash的_.cloneDeep()方法。

1、Lodash的_.cloneDeep()方法

Lodash是一个流行的JavaScript实用工具库，提供了强大的对象操作功能。

const _ = require('lodash');

const original = { a: 1, b: { c: 2 } };
const copy = _.cloneDeep(original);
console.log(copy); // { a: 1, b: { c: 2 } }

2、适用场景

_.cloneDeep()适用于需要深拷贝复杂对象的场景，能够处理循环引用、函数等特殊类型。

const original = { a: 1, b: { c: 2, d: function() {} } };

const copy = _.cloneDeep(original);
console.log(copy); // { a: 1, b: { c: 2, d: [Function: d] } }

五、手动递归实现深拷贝

对于特定需求，可以手动实现递归深拷贝，灵活定制拷贝逻辑。

1、基本实现

手动递归实现深拷贝，需要考虑各种数据类型和边界条件。

function deepClone(obj) {

    if (obj === null || typeof obj !== 'object') {
        return obj;
    }
    if (Array.isArray(obj)) {
        return obj.map(deepClone);
    }
    const copy = {};
    for (const key in obj) {
        if (obj.hasOwnProperty(key)) {
            copy[key] = deepClone(obj[key]);
        }
    }
    return copy;
}
const original = { a: 1, b: { c: 2 } };
const copy = deepClone(original);
console.log(copy); // { a: 1, b: { c: 2 } }

2、注意事项

手动实现递归深拷贝需要仔细处理各种边界条件和特殊情况，如循环引用、Date对象等。

function deepClone(obj, hash = new WeakMap()) {

    if (obj === null || typeof obj !== 'object') {
        return obj;
    }
    if (hash.has(obj)) {
        return hash.get(obj);
    }
    const copy = Array.isArray(obj) ? [] : {};
    hash.set(obj, copy);
    for (const key in obj) {
        if (obj.hasOwnProperty(key)) {
            copy[key] = deepClone(obj[key], hash);
        }
    }
    return copy;
}
const original = { a: 1, b: { c: 2 }, d: new Date() };
const copy = deepClone(original);
console.log(copy); // { a: 1, b: { c: 2 }, d: [Date object] }

六、总结

在JavaScript中，对象的克隆可以通过多种方法实现，选择适当的克隆方法取决于具体需求和对象的复杂性。对于简单对象的浅拷贝，Object.assign()和扩展运算符是简洁高效的选择；对于需要深拷贝的复杂对象，JSON.parse()和JSON.stringify()方法适用大部分场景，而Lodash的_.cloneDeep()方法提供了更强大的功能支持。此外，手动递归实现深拷贝可以灵活定制，但需要处理更多的边界条件和特殊情况。

相关问答FAQs：

1. 如何在JavaScript中克隆一个对象？

• 问题： 怎样在JavaScript中复制一个对象？
• 回答： 在JavaScript中，可以使用Object.assign()方法或者展开运算符（...）来克隆一个对象。例如：

const obj1 = { name: 'John', age: 25 };
// 使用Object.assign()方法克隆对象
const obj2 = Object.assign({}, obj1);
// 使用展开运算符克隆对象
const obj3 = { ...obj1 };

这样，obj2和obj3都是obj1的克隆副本。

2. 如何深度克隆一个对象？

• 问题： 怎样在JavaScript中深度复制一个对象？
• 回答： 在JavaScript中，如果要进行深度克隆，即复制对象及其所有嵌套的子对象，可以使用JSON.parse()和JSON.stringify()方法。例如：

const obj1 = { name: 'John', age: 25, address: { city: 'New York', country: 'USA' } };
const obj2 = JSON.parse(JSON.stringify(obj1));

通过先将对象转换为字符串，再将字符串转换为对象，可以实现深度克隆。

3. 如何克隆一个带有方法的对象？

• 问题： 怎样在JavaScript中克隆一个带有方法的对象？
• 回答： 在JavaScript中，克隆一个带有方法的对象需要特殊处理。可以使用Object.create()方法来创建一个新的对象，并将原对象的方法继承到新对象中。例如：

const obj1 = {
  name: 'John',
  age: 25,
  sayHello: function() {
    console.log('Hello!');
  }
};
const obj2 = Object.create(obj1);

这样，obj2就是obj1的克隆副本，并且继承了obj1的方法。