資料結構
網路
關係型資料庫管理系統
作業系統
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 次瀏覽
廣告