如何在JavaScript中克隆对象?

克隆

克隆javascript就是将对象属性复制到另一个对象,以避免创建已经存在的对象。

有几种方法可以克隆javascript对象。

1)遍历每个属性,然后将它们复制到新对象。

2)使用JSON方法。

3)使用object.assign()方法。

让我们分别讨论每种方法

a)遍历每个属性,然后将它们复制到新对象。

这是克隆javascript对象的旧方法,该方法将迭代每个属性并将其复制到新对象。这是一种简单的方法,但很少使用。

<html>
<body>
<p id="cloning-1"></p>
<script>
   const sourceObject = {name:"salman", age:23, salary:25000};
   let requiredObj = {};
   for (let pro in sourceObject) {
      if (sourceObject.hasOwnProperty(pro)) {
      requiredObj[pro] = sourceObject[pro];
      }
   }
   document.getElementById("cloning-1").innerHTML =
   "targetObject name = "+requiredObj.name+", age = " + requiredObj.age+", salary =                      "+requiredObj.salary;
</script>
</body>
</html>

输出结果

targetObject name = salman, age = 23, salary = 25000

b)JSON方法

克隆JavaScript对象是现代的方法之一,在这种方法中,源对象必须是JSON安全的。

<html>
<body>
<p id="cloning-2"></p>
<script>
   const sourceObject = {name:"salman", age:23, salary:25000};
   let requiredObj = {};
   requiredObj = JSON.parse(JSON.stringify(sourceObject));
   document.getElementById("cloning-2").innerHTML =
   "targetObject name = "+requiredObj.name+", age = " + requiredObj.age+", salary =                     "+requiredObj.salary;
</script>
</body>
</html>

输出结果

targetObject name = salman, age = 23, salary = 25000

c)Object.assign()

这是一种高级方法,如今已经很频繁地用于克隆javascript对象。此方法仅执行浅表复制,这意味着嵌套属性仍通过引用进行复制。

<html>
<body>
<p id="cloning-3"></p>
<script>
   const sourceObject = {name:"salman", age:23, salary:25000};
   let requiredObj = {};
   requiredObj = Object.assign({}, sourceObject);
   document.getElementById("cloning-3").innerHTML =
   "targetObject name = "+requiredObj.name+", age = " + requiredObj.age+",salary"+requiredObj.salary;
</script>
</body>
</html>

输出结果

targetObject name = salman, age = 23, salary = 25000