数据结构
网络
关系型数据库管理系统
操作系统
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+ 浏览量
广告