如何在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