我有一个对象x。我想将其复制为对象y，这样对y的更改不会修改x。我意识到复制从内置JavaScript对象派生的对象会导致额外的、不需要的财产。这不是问题，因为我正在复制我自己的一个文字构造对象。
如何正确克隆JavaScript对象？
当前回答
使用lodash_.cloneDeep（）。
浅拷贝：lodash_.clone（）
只需复制参考即可进行浅层复制。
let obj1 = {
a: 0,
b: {
c: 0,
e: {
f: 0
}
}
};
let obj3 = _.clone(obj1);
obj1.a = 4;
obj1.b.c = 4;
obj1.b.e.f = 100;
console.log(JSON.stringify(obj1));
//{"a":4,"b":{"c":4,"e":{"f":100}}}
console.log(JSON.stringify(obj3));
//{"a":0,"b":{"c":4,"e":{"f":100}}}
深度复制：lodash_.cloneDeep（）
取消引用字段：而不是复制对象的引用
let obj1 = {
a: 0,
b: {
c: 0,
e: {
f: 0
}
}
};
let obj3 = _.cloneDeep(obj1);
obj1.a = 100;
obj1.b.c = 100;
obj1.b.e.f = 100;
console.log(JSON.stringify(obj1));
{"a":100,"b":{"c":100,"e":{"f":100}}}
console.log(JSON.stringify(obj3));
{"a":0,"b":{"c":0,"e":{"f":0}}}
其他回答
基于模板克隆对象。如果您不想要精确的副本，但确实想要某种可靠的克隆操作的健壮性，但您只想要克隆位，或者希望确保可以控制每个属性值的存在或格式，该怎么办？
我之所以这么做，是因为它对我们有用，我们之所以创建它，是因为我们找不到类似的东西。您可以使用它来基于模板对象克隆对象，该模板对象指定了要克隆的对象的属性，如果源对象上不存在这些属性，或者您希望如何处理克隆，则模板允许函数将这些属性转换为不同的属性。如果没有用，我相信有人可以删除这个答案。
function isFunction(functionToCheck) {
var getType = {};
return functionToCheck && getType.toString.call(functionToCheck) === '[object Function]';
}
function cloneObjectByTemplate(obj, tpl, cloneConstructor) {
if (typeof cloneConstructor === "undefined") {
cloneConstructor = false;
}
if (obj == null || typeof (obj) != 'object') return obj;
//if we have an array, work through it's contents and apply the template to each item...
if (Array.isArray(obj)) {
var ret = [];
for (var i = 0; i < obj.length; i++) {
ret.push(cloneObjectByTemplate(obj[i], tpl, cloneConstructor));
}
return ret;
}
//otherwise we have an object...
//var temp:any = {}; // obj.constructor(); // we can't call obj.constructor because typescript defines this, so if we are dealing with a typescript object it might reset values.
var temp = cloneConstructor ? new obj.constructor() : {};
for (var key in tpl) {
//if we are provided with a function to determine the value of this property, call it...
if (isFunction(tpl[key])) {
temp[key] = tpl[key](obj); //assign the result of the function call, passing in the value
} else {
//if our object has this property...
if (obj[key] != undefined) {
if (Array.isArray(obj[key])) {
temp[key] = [];
for (var i = 0; i < obj[key].length; i++) {
temp[key].push(cloneObjectByTemplate(obj[key][i], tpl[key], cloneConstructor));
}
} else {
temp[key] = cloneObjectByTemplate(obj[key], tpl[key], cloneConstructor);
}
}
}
}
return temp;
}
一个简单的调用方法如下：
var source = {
a: "whatever",
b: {
x: "yeah",
y: "haha"
}
};
var template = {
a: true, //we want to clone "a"
b: {
x: true //we want to clone "b.x" too
}
};
var destination = cloneObjectByTemplate(source, template);
如果您想使用函数来确保返回属性或确保它是特定类型，请使用这样的模板。我们提供了一个函数，它仍然只是复制源对象的ID属性，但它确保它是一个数字，即使它不存在于源对象上。
var template = {
ID: function (srcObj) {
if(srcObj.ID == undefined){ return -1; }
return parseInt(srcObj.ID.toString());
}
}
数组可以很好地进行克隆，但如果您愿意，也可以使用自己的函数来处理这些单独的属性，并执行以下特殊操作：
var template = {
tags: function (srcObj) {
var tags = [];
if (process.tags != undefined) {
for (var i = 0; i < process.tags.length; i++) {
tags.push(cloneObjectByTemplate(
srcObj.tags[i],
{ a : true, b : true } //another template for each item in the array
);
}
}
return tags;
}
}
所以在上面，我们的模板只复制源对象的标签属性（如果它存在的话）（假设它是一个数组），并且对该数组中的每个元素调用clone函数，根据第二个模板单独克隆它，该模板只复制这些标签元素的a和b属性。
如果您要将对象移入和移出节点，并且希望控制这些对象的哪些属性被克隆，那么这是在node.js中控制这些属性的一种很好的方法，代码也可以在浏览器中工作。
下面是它的用法示例：http://jsfiddle.net/hjchyLt1/
function clone(src, deep) {
var toString = Object.prototype.toString;
if(!src && typeof src != "object"){
//any non-object ( Boolean, String, Number ), null, undefined, NaN
return src;
}
//Honor native/custom clone methods
if(src.clone && toString.call(src.clone) == "[object Function]"){
return src.clone(deep);
}
//DOM Elements
if(src.nodeType && toString.call(src.cloneNode) == "[object Function]"){
return src.cloneNode(deep);
}
//Date
if(toString.call(src) == "[object Date]"){
return new Date(src.getTime());
}
//RegExp
if(toString.call(src) == "[object RegExp]"){
return new RegExp(src);
}
//Function
if(toString.call(src) == "[object Function]"){
//Wrap in another method to make sure == is not true;
//Note: Huge performance issue due to closures, comment this :)
return (function(){
src.apply(this, arguments);
});
}
var ret, index;
//Array
if(toString.call(src) == "[object Array]"){
//[].slice(0) would soft clone
ret = src.slice();
if(deep){
index = ret.length;
while(index--){
ret[index] = clone(ret[index], true);
}
}
}
//Object
else {
ret = src.constructor ? new src.constructor() : {};
for (var prop in src) {
ret[prop] = deep
? clone(src[prop], true)
: src[prop];
}
}
return ret;
};
2022年更新
有一个新的JS标准叫做结构化克隆。它可以在许多浏览器中工作（请参阅我可以使用）。
const clone = structuredClone(object);
旧答案
对JavaScript中的任何对象执行此操作都不简单或直接。您将遇到错误地从对象的原型中提取属性的问题，这些属性应该留在原型中，而不是复制到新实例中。例如，如果您要向Object.prototype添加一个克隆方法，如某些答案所示，则需要显式跳过该属性。但是，如果有其他添加到Object.prototype或其他中间原型的方法，您不知道，该怎么办？在这种情况下，您将复制不应该复制的属性，因此需要使用hasOwnProperty方法检测不可预见的非本地属性。
除了非枚举属性之外，当您尝试复制具有隐藏财产的对象时，还会遇到更困难的问题。例如，原型是函数的隐藏属性。此外，对象的原型被__proto__属性引用，该属性也是隐藏的，不会被for/in循环复制到源对象的属性上。我认为__proto__可能特定于Firefox的JavaScript解释器，在其他浏览器中可能会有所不同，但你可以理解这一点。并非所有事物都是可枚举的。如果知道隐藏属性的名称，可以复制它，但我不知道有什么方法可以自动发现它。
寻求优雅解决方案的另一个障碍是正确设置原型继承的问题。如果源对象的原型是object，那么只需使用｛｝创建一个新的通用对象就可以了，但是如果源对象原型是object的后代，那么您将丢失该原型中使用hasOwnProperty筛选器跳过的其他成员，或者这些成员在原型中，但最初不可枚举。一种解决方案可能是调用源对象的构造函数属性以获取初始复制对象，然后复制属性，但这样仍然无法获取不可枚举的属性。例如，Date对象将其数据存储为隐藏成员：
function clone(obj) {
if (null == obj || "object" != typeof obj) return obj;
var copy = obj.constructor();
for (var attr in obj) {
if (obj.hasOwnProperty(attr)) copy[attr] = obj[attr];
}
return copy;
}
var d1 = new Date();
/* Executes function after 5 seconds. */
setTimeout(function(){
var d2 = clone(d1);
alert("d1 = " + d1.toString() + "\nd2 = " + d2.toString());
}, 5000);
d1的日期字符串将比d2晚5秒。一种使一个Date与另一个Date相同的方法是调用setTime方法，但这是Date类特有的。我不认为这个问题有一个防弹的通用解决方案，尽管我很乐意错了！
当我不得不实现一般的深度复制时，我最终妥协了，假设我只需要复制一个普通的Object、Array、Date、String、Number或Boolean。最后3种类型是不可变的，所以我可以执行一个浅拷贝，而不用担心它会发生变化。我进一步假设Object或Array中包含的任何元素也将是该列表中的6种简单类型之一。这可以通过以下代码实现：
function clone(obj) {
var copy;
// Handle the 3 simple types, and null or undefined
if (null == obj || "object" != typeof obj) return obj;
// Handle Date
if (obj instanceof Date) {
copy = new Date();
copy.setTime(obj.getTime());
return copy;
}
// Handle Array
if (obj instanceof Array) {
copy = [];
for (var i = 0, len = obj.length; i < len; i++) {
copy[i] = clone(obj[i]);
}
return copy;
}
// Handle Object
if (obj instanceof Object) {
copy = {};
for (var attr in obj) {
if (obj.hasOwnProperty(attr)) copy[attr] = clone(obj[attr]);
}
return copy;
}
throw new Error("Unable to copy obj! Its type isn't supported.");
}
只要对象和数组中的数据形成一个树结构，上述函数就可以适用于我提到的6种简单类型。也就是说，对象中对同一数据的引用不超过一个。例如：
// This would be cloneable:
var tree = {
"left" : { "left" : null, "right" : null, "data" : 3 },
"right" : null,
"data" : 8
};
// This would kind-of work, but you would get 2 copies of the
// inner node instead of 2 references to the same copy
var directedAcylicGraph = {
"left" : { "left" : null, "right" : null, "data" : 3 },
"data" : 8
};
directedAcyclicGraph["right"] = directedAcyclicGraph["left"];
// Cloning this would cause a stack overflow due to infinite recursion:
var cyclicGraph = {
"left" : { "left" : null, "right" : null, "data" : 3 },
"data" : 8
};
cyclicGraph["right"] = cyclicGraph;
它将无法处理任何JavaScript对象，但只要您不认为它只适用于您向它抛出的任何东西，它就可以满足许多目的。
function clone(obj)
{
var cloneObj = Object.create(obj);
return cloneObj;
}
在Javascript中，对象单独继承另一个对象（原型继承）。create（obj）返回一个对象，该对象是obj的子对象或子对象。在上面的函数中，它将有效地返回该对象的副本。
然而，这是一种非常奇怪的克隆方式，因为我没有将继承用于其真正目的。
//
// creates 'clone' method on context object
//
// var
// clon = Object.clone( anyValue );
//
!((function (propertyName, definition) {
this[propertyName] = definition();
}).call(
Object,
"clone",
function () {
function isfn(fn) {
return typeof fn === "function";
}
function isobj(o) {
return o === Object(o);
}
function isarray(o) {
return Object.prototype.toString.call(o) === "[object Array]";
}
function fnclon(fn) {
return function () {
fn.apply(this, arguments);
};
}
function owns(obj, p) {
return obj.hasOwnProperty(p);
}
function isemptyobj(obj) {
for (var p in obj) {
return false;
}
return true;
}
function isObject(o) {
return Object.prototype.toString.call(o) === "[object Object]";
}
return function (input) {
if (isfn(input)) {
return fnclon(input);
} else if (isobj(input)) {
var cloned = {};
for (var p in input) {
owns(Object.prototype, p)
|| (
isfn(input[p])
&& ( cloned[p] = function () { return input[p].apply(input, arguments); } )
|| ( cloned[p] = input[p] )
);
}
if (isarray(input)) {
cloned.length = input.length;
"concat every filter forEach indexOf join lastIndexOf map pop push reduce reduceRight reverse shift slice some sort splice toLocaleString toString unshift"
.split(" ")
.forEach(
function (methodName) {
isfn( Array.prototype[methodName] )
&& (
cloned[methodName] =
function () {
return Array.prototype[methodName].apply(cloned, arguments);
}
);
}
);
}
return isemptyobj(cloned)
? (
isObject(input)
? cloned
: input
)
: cloned;
} else {
return input;
}
};
}
));
//
