通过遍历每个属性并将它们克隆到新对象。使用JSON方法作为源对象必须是JSON安全的。因此,在源对象无法转换为JSON的情况下,需要异常处理以保证其安全。object.assign
方法仅执行浅度克隆。这意味着嵌套属性仍然通过引用克隆。
注,浅度克隆:简单类型为值传递,对象类型是引用的传递。深度克隆:所有元素或属性完全复制,与原对象完全脱离,也就是说所有对于新对象的修改都不会反映到原对象中。
克隆JavaScript对象有几种方法,如下:
示例1:一种方法是遍历源对象的属性,并将所有属性逐个复制到目标对象。它很简单,但不常使用。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body style = "text-align:center;">
<h1 style = "color:green;" >
js克隆对象
</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>
</body>
</html>
输出:
点击按钮前
点击按钮后
示例2:此示例使用JSON。使用此方法,源对象必须是JSON安全的。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body style = "text-align:center;">
<h1 style = "color:green;" >
js克隆对象
</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>
</body>
</html>
示例3:此方法使用Object.assign
方法。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body style = "text-align:center;">
<h1 style = "color:green;" >
js克隆对象
</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>
</body>
</html>
相关文章推荐:
JavaScript实现小型区块链的方法介绍(附代码)mp.weixin.qq.com