js克隆的怎么赋值进去

克隆JavaScript对象并赋值的方法包括：使用浅拷贝、深拷贝、JSON方法、结构赋值。浅拷贝与深拷贝是克隆对象的两种主要方式，浅拷贝只复制对象的引用，而深拷贝会递归复制对象的所有属性。本文将详细描述这两种方法，并提供实际代码示例。

一、浅拷贝

浅拷贝是指复制对象的引用，意味着原对象和新对象共享相同的属性和方法。这种方法适用于对象的属性都是原始类型的情况。

1、Object.assign()

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

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

2、扩展运算符（…）

使用扩展运算符可以快速地进行浅拷贝。

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

二、深拷贝

深拷贝是指递归复制对象的所有属性，适用于对象的属性中包含引用类型的情况。

1、JSON.parse()和JSON.stringify()

这是最简单的深拷贝方法，但它有一些局限性，例如无法处理函数和undefined。

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

2、递归拷贝函数

编写递归函数来实现深拷贝。

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

三、结合实际场景应用

1、项目管理系统中的应用

在项目管理系统中，经常需要克隆任务或项目模板，以便在不同的项目中复用。例如，在研发项目管理系统PingCode和通用项目协作软件Worktile中，可以使用深拷贝来确保新创建的任务或项目模板不会影响原有的任务或模板。

// 假设我们有一个项目模板对象
const projectTemplate = {
    name: "Default Project",
    tasks: [
        { name: "Task 1", status: "incomplete" },
        { name: "Task 2", status: "incomplete" }
    ]
};
// 使用深拷贝方法创建新的项目
const newProject = deepClone(projectTemplate);
newProject.name = "New Project";
newProject.tasks[0].status = "complete";
console.log(projectTemplate.tasks[0].status); // "incomplete"
console.log(newProject.tasks[0].status); // "complete"

2、复杂对象的克隆

在实际开发中，克隆的对象可能会非常复杂，包含多层嵌套的结构。在这种情况下，递归的深拷贝方法显得尤为重要。

const complexObject = {
    level1: {
        level2: {
            level3: "deep value"
        }
    }
};
const clonedComplexObject = deepClone(complexObject);
clonedComplexObject.level1.level2.level3 = "new value";
console.log(complexObject.level1.level2.level3); // "deep value"
console.log(clonedComplexObject.level1.level2.level3); // "new value"

四、性能考虑

在选择浅拷贝或深拷贝方法时，性能是一个需要考虑的因素。对于大型对象，深拷贝的开销可能会很大，因此需要根据实际情况选择合适的方法。

1、浅拷贝的性能

浅拷贝通常比深拷贝快，因为它只复制对象的引用，而不需要递归地遍历对象的所有属性。

console.time("Object.assign");
const shallowClone = Object.assign({}, complexObject);
console.timeEnd("Object.assign");

2、深拷贝的性能

深拷贝的性能取决于对象的复杂度和嵌套层级。对于简单的对象，使用JSON.parse()和JSON.stringify()方法是比较高效的，但对于复杂对象，递归方法可能需要更多的时间。

console.time("deepClone");
const deepClonedObject = deepClone(complexObject);
console.timeEnd("deepClone");

五、其他克隆方法

除了上述方法，还有一些第三方库可以帮助实现对象的克隆，例如Lodash。

1、Lodash的_.cloneDeep()方法

Lodash提供了一个方便的_.cloneDeep()方法来实现深拷贝。

const _ = require('lodash');
const original = { a: 1, b: { c: 2 } };
const clone = _.cloneDeep(original);
clone.b.c = 3;
console.log(original); // { a: 1, b: { c: 2 } }
console.log(clone); // { a: 1, b: { c: 3 } }

2、Immutable.js

Immutable.js是Facebook开发的一个库，用于创建不可变数据结构。它提供了深拷贝和浅拷贝的功能，适用于大型项目。

const { fromJS } = require('immutable');
const original = fromJS({ a: 1, b: { c: 2 } });
const clone = original.setIn(['b', 'c'], 3);
console.log(original.toJS()); // { a: 1, b: { c: 2 } }
console.log(clone.toJS()); // { a: 1, b: { c: 3 } }

六、总结

克隆JavaScript对象的方法有很多，选择合适的方法取决于对象的复杂度和应用场景。浅拷贝适用于简单对象，深拷贝适用于复杂对象。在项目管理系统中，使用深拷贝可以确保新创建的任务或项目模板不会影响原有的任务或模板。通过合理选择克隆方法，可以提高代码的可靠性和可维护性。