資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在 JavaScript 中克隆一個 JS 物件，但排除一個鍵？
在計算機程式設計中，克隆指的是透過方法或複製工廠函式（通常稱為克隆和複製）複製的物件。
克隆一個物件，但排除一個鍵的最簡單方法是克隆整個物件，然後刪除不需要的屬性。但是，克隆可以分為兩種型別：
深克隆
淺克隆
淺克隆
淺克隆儘可能少地複製。例如，集合的淺複製可能是集合結構的複製，而不是其元素的複製。使用淺複製，兩個集合現在共享單個元素。
示例
讓我們來看一個例子：
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<script>
let innerObj = {
a: 'b',
c: 'd'
}
let obj = {
x: "test",
y: innerObj
}
// Create a shallow copy.
let copyObj = Object.assign({}, obj);
// Both copyObj and obj's prop y now refers to the same innerObj. Any changes to this will be reflected.
innerObj.a = "test";
document.write("Original Object: ");
document.write(JSON.stringify(obj),"<br>");
document.write("Copy: ");
document.write(JSON.stringify(copyObj));
</script>
</body>
</html>
注意−淺複製不會遞迴地建立克隆。它只在頂層進行。
深克隆
深克隆複製所有內容。集合的深複製是兩個集合，其中包含原始集合中所有克隆的元素。
示例 1
以下是深克隆的示例。
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<script>
let innerObj = {
a: 'b',
c: 'd'
}
let obj = {
x: "test",
y: innerObj
}
// Create a deep copy.
let copyObj = JSON.parse(JSON.stringify(obj));
innerObj.a = "test";
document.write("Original Object: ");
document.write(JSON.stringify(obj), "<br>");
document.write("Copy: ");
document.write(JSON.stringify(copyObj));
</script>
</body>
</html>
使用上述任何一種方法獲取副本後，可以使用 delete 關鍵字刪除不需要的屬性。例如：
示例 2
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<script>
let original = {
x: 'test',
y: {
a: 'test',
c: 'd'
}
}
let copy = JSON.parse(JSON.stringify(original))
delete copy['x']
document.write(JSON.stringify(copy), "<br>")
document.write(JSON.stringify(original))
</script>
</body>
</html>
讓我們再看幾個例子：
示例 3
在以下示例中，我們正在建立一個名為objectExceptOne的克隆函式，該函式將列印除一個之外的所有物件值和鍵。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Clone javascript object except One Key</title>
</head>
<body>
<script>
// create a function and pass the parameter first is your object and second is that need to be removed.
function objectExceptOne(obj, keys) {
//create an empty object named target
var target = {};
//itrating the loop and storing the value in the target object
for (var i in obj) {
if (keys.indexOf(i) >= 0) continue;
if (!Object.prototype.hasOwnProperty.call(obj, i)) continue;
target[i] = obj[i];
}
return target;
}
var x = {
a: "aman",
b: "tutorialspoint",
c: "Easy To Learn",
d: "Technical Writer"
};
var a = x.a;
var y = objectExceptOne(x, ["a"]);
document.write(JSON.stringify(y)); // printing the remaining value;
</script>
</body>
</html>
示例 4
在以下示例中，我們使用Object.assign()從物件中排除一個鍵。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<script>
var clone = Object.assign({}, { a: "aman", b: "tutorialspoint", c: "Easy To Learn", d: "Technical Writer" });
delete clone.b;
document.write(JSON.stringify(clone));
</script>
</body>
</html>
示例 5
在以下示例中，我們使用ESnext 單行程式碼並刪除a 和 c 鍵。
<!DOCTYPE html>
<html lang="en">
<body>
<script>
var obj = {
a: "aman",
b: "tutorialspoint",
c: "Easy To Learn",
d: "Technical Writer",
};
const clone = (({ a, c, ...o }) => o)(obj); // remove a and c
document.write(JSON.stringify(clone));
</script>
</body>
</html>
示例 6
在以下示例中，我們使用_.omit()，它接受兩個引數，第一個是物件，第二個是要從物件中過濾掉的鍵。
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js" ></script>
</head>
<body>
<script type="text/javascript">
var comInfo = {
Company: "tutorialspoint",
Address: "Hyderabad",
Contact: "+915678889902",
};
//Removing company and address
document.write(JSON.stringify(_.omit(comInfo, "Company", "Address")));
</script>
</body>
</html>
示例 7
在以下示例中，我們為克隆編寫了一個簡單的輔助函式，就像 Javascript 擁有underscore.js庫_.omit()函式一樣。
<!DOCTYPE html>
<html lang="en">
<body>
<script>
function omit(obj, omitKey) {
return Object.keys(obj).reduce((result, key) => {
if (key !== omitKey) {
result[key] = obj[key];
}
return result;
}, {});
}
document.write(JSON.stringify(omit({
Company: "tutorialspoint",
Address: "Hyderabad",
Contact: "+915678889902",
},
"Contact"
)));
</script>
</body>
</html>
更新於：2022-12-19
1K+ 瀏覽量
廣告