如何在JS中克隆对象举例说明

在JavaScript中，克隆对象可以分为浅克隆（shallow clone）和深克隆（deep clone）两种。浅克隆只复制对象的第一层属性，如果对象的属性值还是对象，则只复制其引用；而深克隆会递归复制对象的所有层级。

浅克隆

使用Object.assign()

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

javascript

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

const clone = Object.assign({}, original);

console.log(clone.a); // 1

console.log(clone.b === original.b); // true，说明b是引用的复制

使用扩展运算符...

扩展运算符也可以用于浅克隆对象。

javascript

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

const clone = { ...original };

console.log(clone.a); // 1

console.log(clone.b === original.b); // true，同样说明b是引用的复制

深克隆

深克隆较为复杂，因为需要递归复制对象的所有层级。JavaScript的内置方法不能直接实现深克隆，但可以通过递归函数来实现。

手动实现深克隆

以下是一个简单的深克隆实现，注意这个实现不处理特殊对象（如函数、Date等）和循环引用。

javascript

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

    if (obj === null) return null; // null 的情况

    if (obj instanceof Date) return new Date(obj); // 日期对象直接返回一个新的日期对象

    if (obj instanceof RegExp) return new RegExp(obj); // 正则对象直接返回一个新的正则对象

    // 如果循环引用了就用 weakMap 来解决

    if (hash.has(obj)) return hash.get(obj);

 

    let allDesc = Object.getOwnPropertyDescriptors(obj);

    let cloneObj = Object.create(Object.getPrototypeOf(obj), allDesc);

    hash.set(obj, cloneObj);

 

    for (let key of Reflect.ownKeys(obj)) {

        if (typeof obj[key] === 'object' && obj[key] !== null) {

            cloneObj[key] = deepClone(obj[key], hash); // 递归复制

        } else {

            cloneObj[key] = obj[key];

        }

    }

    return cloneObj;

}

 

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

const clone = deepClone(original);

 

console.log(clone.a); // 1

console.log(clone.b === original.b); // false，说明b是深克隆

注意，上面的深克隆实现中使用了WeakMap来存储已经克隆过的对象，以避免循环引用导致的问题。此外，还处理了Date和RegExp等特殊对象的克隆。然而，对于更复杂的对象（如包含函数、Map、Set等的对象），你可能需要扩展这个函数来适应这些特殊情况。