如何克隆JavaScript对象

克隆JavaScript对象的任务通常是为了避免重复创建相同的对象。有几种方法：

• 通过迭代每个属性并将它们复制到新对象中。
• 使用 JSON 方法，源对象必须是JSON安全的。因此，需要异常处理来确保源对象不可转换为JSON的情况下仍然安全。
• object.assign： 该方法只执行浅拷贝。这意味着嵌套的属性仍然是引用复制。
• 使用 Spread operator 操作符

下面一一介绍这些方法，并提供示例：

示例1： 通过迭代源对象的属性，逐个将它们复制到目标对象中。这种方法非常简单，但使用频率不高。

<h1 style="color:green;">
    GeeksforGeeks
</h1>
<p id="demo2">sourceObject = {a:1, b:2, c:3};</p>
<button onClick="fun()">click
</button>
<p id="demo"></p>
<script>
    function fun(){
    const sourceObject = {a:1, b:2, c:3};
    let tO = {};
        for (let prop in sourceObject) {
        if (sourceObject.hasOwnProperty(prop)) {
            tO[prop] = sourceObject[prop];
        }
        }
    document.getElementById("demo").innerHTML =
        "targetObject a = "+tO.a+", b = " + tO.b+", c = "+tO.c;
    }
</script>

输出：

示例 2： 此示例使用JSON。使用此方法，源对象必须是JSON安全的。

<h1 style="color:green;">
    GeeksforGeeks
</h1>
<p id="demo2">sourceObject = {a:1, b:2, c:3};</p>
<button onClick="fun()">click
</button>
<p id="demo"></p>
<script>
    function fun(){
    const sourceObject = {a:1, b:2, c:3};
    let tO = {};
    tO = JSON.parse(JSON.stringify(sourceObject));
    document.getElementById("demo").innerHTML =
    "targetObject a = "+tO.a+", b = " + tO.b+", c = "+tO.c;
    }
</script>

输出:

示例3： 这种方法使用了Object.assign方法。

<h1 style="color:green;">
    GeeksforGeeks
</h1>
<p id="demo2">sourceObject = {a:1, b:2, c:3};</p>
<button onClick="fun()">click
</button>
<p id="demo"></p>
 
<script>
    function fun(){
    const sourceObject = {a:1, b:2, c:3};
    let tO = {};
    tO = Object.assign({}, sourceObject);
    document.getElementById("demo").innerHTML =
        "targetObject a = "+tO.a+", b = " + tO.b+", c = "+tO.c;
    }
</script>

输出:

示例4： 该方法使用扩展运算符。

<h1 style="color:green;">
    GeeksforGeeks
</h1>
<p id="demo2">sourceObject = {a:1, b:2, c:3};</p>
<button onClick="fun()">click
</button>
<p id="demo"></p>
<script>
    function fun(){
    const sourceObject = {a:1, b:2, c:3};
    let tO = {};
    tO ={...sourceObject};
    document.getElementById("demo").innerHTML =
        "targetObject a = "+tO.a+", b = " + tO.b+", c = "+tO.c;
    }
</script>

输出：