数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何在 JavaScript 中浅拷贝对象？
在本文中，我们将讨论如何在 JavaScript 对象上执行浅拷贝。
如果源值为对象的引用，则它只会将引用值复制到目标值中。
当源属性在没有引用的情况下被复制，并且存在一个源属性其值为对象并被作为引用复制时。
浅拷贝构造一个新的复合对象，然后（在可能的情况下）将引用插入到原始对象中找到的对象中。
使用 _.extend() 方法
Underscore.js 是一个 JavaScript 库，它有一个名为 _.extend() 的方法来浅拷贝 JavaScript 对象。此方法将源对象中的所有属性复制到目标对象上。并返回目标对象。
注意 - 它不会复制重复项。
语法
以下是 _.extend() 方法的语法 -
_.extend(object*);
此方法只接受一个对象作为参数并进行浅拷贝。我们可以根据需要提供任意多个对象。
示例：1
在以下示例中，我们传递了两个以上对象并执行了浅拷贝。
<html>
<body>
<script type="text/javascript"src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"
></script>
</head>
<body>
<script>
var res = JSON.stringify(_.extend(
{name: 'Rahul', designation: "Technical developer"},
{age: 24},
{salary: 1000000}));
document.write((res));
</script>
</body>
</html>
示例 2
在以下示例中，我们做了与上述示例相同的事情，但在这里我们传递了一个具有相同键但不同值的额外值。但它输出的是最后一个键值对，而不是第一个。
<html>
<body>
<script type="text/javascript"src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>
</head>
<body>
<script>
var res = JSON.stringify(_.extend(
{name: 'Rahul', designation: "Technical developer"},
{age: 24},
{name: 'Aman', designation: "Software developer"},
{salary: 1000000}));
document.write((res));
</script>
</body>
</html>
示例：3
在以下示例中，我们使用另一个方法 Object.assign() 从源复制到目标。以下是 Object.assign() 方法的语法 -
Object.assign({}, person);
它接受两个参数，第一个是目标对象，第二个是源对象。这里目标是 空({})，源是一个对象。
<html>
<body>
<script type="text/javascript"src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>
</head>
<body>
<script>
let person = {
firstName: 'Jkshon',
lastName: 'Doe',
address: {
street: 'North 1st street',
city: 'San Jose',
state: 'CA',
country: 'USA'
}
};
let copiedPerson = Object.assign({}, person);
copiedPerson.firstName = 'Jane';
copiedPerson.address.street = 'Amphitheatre Parkway';
copiedPerson.address.city = 'Mountain View';
document.write(JSON.stringify(copiedPerson));
</script>
</body>
</html>
示例 4：使用扩展运算符
在以下示例中，我们尝试使用扩展运算符执行浅拷贝 -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Shallow copy using spread operator</title>
<div id="shallow"></div>
</head>
<body>
<script type="text/javascript">
let obj = {
name: "Alice",
age: {
newAge: 22,
},
role: "Full stack developer",
};
let shallowCopy = {
...obj,
};
shallowCopy.age.newAge = 21;
document.write(JSON.stringify(obj));
document.write(JSON.stringify(shallowCopy));
</script>
</body>
</html>
示例 5：使用赋值运算符
我们还可以使用赋值运算符执行浅拷贝。以下是一个示例 -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Shallow copy using assingment operator</title>
<div id="shallow"></div>
</head>
<body>
<script type="text/javascript">
let obj = {
name: "Alice",
age: 21,
role: "Full stack developer",
};
let shallowCopy = obj;
shallowCopy.age = 22;
document.write(JSON.stringify(obj));
document.writr(JSON.stringify(shallowCopy));
</script>
</body>
</html>
更新于： 2022-12-06
366 次浏览
广告