克隆 JavaScript 对象的最有效方法是什么？我见过obj = eval(uneval(o));被使用，但这是非标准的，仅受 Firefox 支持。
我做过类似obj = JSON.parse(JSON.stringify(o));但质疑效率的事情。
我还看到了具有各种缺陷的递归复制函数。
我很惊讶不存在规范的解决方案。
问问题
2494031 次
67 回答
5387
本机深度克隆
现在有一个称为“结构化克隆”的 JS 标准，它在 Node 11 及更高版本中实验性地工作，将登陆浏览器，并为现有系统提供 polyfill。
structuredClone(value)
如果需要，首先加载 polyfill：
import structuredClone from '@ungap/structured-clone';
有关更多详细信息，请参阅此答案。
较早的答案
快速克隆数据丢失 - JSON.parse/stringify
如果您在对象中不使用Dates、函数undefined、、、、InfinityRegExps、Maps、Sets、Blob、FileLists、ImageDatas、稀疏数组、类型化数组或其他复杂类型，那么一个非常简单的深度克隆对象的方法是：
JSON.parse(JSON.stringify(object))
const a = {
string: 'string',
number: 123,
bool: false,
nul: null,
date: new Date(), // stringified
undef: undefined, // lost
inf: Infinity, // forced to 'null'
re: /.*/, // lost
}
console.log(a);
console.log(typeof a.date); // Date object
const clone = JSON.parse(JSON.stringify(a));
console.log(clone);
console.log(typeof clone.date); // result of .toISOString()有关基准，请参阅Corban 的答案。
使用库进行可靠克隆
由于克隆对象并非易事（复杂类型、循环引用、函数等），大多数主要库都提供了克隆对象的函数。不要重新发明轮子- 如果您已经在使用库，请检查它是否具有对象克隆功能。例如，
- lodash -
cloneDeep; 可以通过lodash.clonedeep模块单独导入，如果您还没有使用提供深度克隆功能的库，这可能是您的最佳选择 - AngularJS -
angular.copy - jQuery -
jQuery.extend(true, { }, oldObject);.clone()只克隆 DOM 元素 - 只是图书馆 -
just-clone; 零依赖 npm 模块库的一部分，它只做一件事。适合各种场合的无罪实用程序。
ES6（浅拷贝）
为了完整起见，请注意 ES6 提供了两种浅拷贝机制：Object.assign()和扩展语法。它将所有可枚举自身属性的值从一个对象复制到另一个对象。例如：
var A1 = {a: "2"};
var A2 = Object.assign({}, A1);
var A3 = {...A1}; // Spread Syntax
于 2008-09-23T18:09:37.277 回答
2401
查看此基准：http: //jsben.ch/#/bWfk9
在我之前的测试中，我发现速度是主要问题
JSON.parse(JSON.stringify(obj))
成为深度克隆对象的最慢方法（它比标志设置为 true 的jQuery.extenddeep慢10-20%）。
deep当标志设置为false（浅克隆）时，jQuery.extend 非常快。这是一个不错的选择，因为它包含一些用于类型验证的额外逻辑，并且不会复制未定义的属性等，但这也会让你慢一点。
如果你知道你试图克隆的对象的结构或者可以避免深度嵌套数组，你可以编写一个简单的for (var i in obj)循环来克隆你的对象，同时检查 hasOwnProperty，它会比 jQuery 快得多。
最后，如果您尝试在热循环中克隆已知对象结构，您可以通过简单地内联克隆过程并手动构造对象来获得更多性能。
JavaScript 跟踪引擎在优化for..in循环方面很糟糕，检查 hasOwnProperty 也会减慢你的速度。当速度是绝对必须的时候手动克隆。
var clonedObject = {
knownProp: obj.knownProp,
..
}
当心在对象上使用该JSON.parse(JSON.stringify(obj))方法-返回 ISO 格式的日期字符串表示，它不会转换回对象。有关更多详细信息，请参阅此答案。DateJSON.stringify(new Date())JSON.parse() Date
此外，请注意，至少在 Chrome 65 中，本机克隆不是可行的方法。根据 JSPerf 的说法，通过创建新函数执行本机克隆比使用 JSON.stringify 慢近800 倍，而 JSON.stringify 的速度非常快。
如果您使用的是 Javascript ES6，请尝试使用本机方法进行克隆或浅拷贝。
Object.assign({}, obj);
于 2011-03-17T19:19:55.880 回答
545
结构化克隆
2022 年更新：全局structuredClone功能已在 Firefox 94、Node 17 和 Deno 1.14 中可用
HTML 标准包括一个内部结构化克隆/序列化算法，可以创建对象的深层克隆。它仍然仅限于某些内置类型，但除了 JSON 支持的少数类型之外，它还支持 Dates、RegExps、Maps、Sets、Blobs、FileLists、ImageDatas、稀疏数组、类型化数组，未来可能还会支持更多. 它还保留克隆数据中的引用，允许它支持会导致 JSON 错误的循环和递归结构。
Node.js 中的支持：
structuredClone全局函数由Node 17.0 提供：
const clone = structuredClone(original);
以前的版本：v8Node.js 中的模块（从 Node 11 开始）直接公开结构化序列化 API，但此功能仍被标记为“实验性”，并且在未来版本中可能会更改或删除。如果您使用的是兼容版本，则克隆对象非常简单：
const v8 = require('v8');
const structuredClone = obj => {
return v8.deserialize(v8.serialize(obj));
};
浏览器中的直接支持：在 Firefox 94 中可用
所有主流浏览器都将很快提供structuredClone全局功能（之前已在 GitHub 上的 whatwg/html#793 中讨论过）。它看起来/看起来像这样：
const clone = structuredClone(original);
在发布之前，浏览器的结构化克隆实现只是间接公开。
异步解决方法：可用。
使用现有 API 创建结构化克隆的开销较低的方法是通过MessageChannels的一个端口发布数据。另一个端口将发出message带有附加的结构化克隆的事件.data。不幸的是，监听这些事件必然是异步的，同步的替代方案不太实用。
class StructuredCloner {
constructor() {
this.pendingClones_ = new Map();
this.nextKey_ = 0;
const channel = new MessageChannel();
this.inPort_ = channel.port1;
this.outPort_ = channel.port2;
this.outPort_.onmessage = ({data: {key, value}}) => {
const resolve = this.pendingClones_.get(key);
resolve(value);
this.pendingClones_.delete(key);
};
this.outPort_.start();
}
cloneAsync(value) {
return new Promise(resolve => {
const key = this.nextKey_++;
this.pendingClones_.set(key, resolve);
this.inPort_.postMessage({key, value});
});
}
}
const structuredCloneAsync = window.structuredCloneAsync =
StructuredCloner.prototype.cloneAsync.bind(new StructuredCloner);
使用示例：
const main = async () => {
const original = { date: new Date(), number: Math.random() };
original.self = original;
const clone = await structuredCloneAsync(original);
// They're different objects:
console.assert(original !== clone);
console.assert(original.date !== clone.date);
// They're cyclical:
console.assert(original.self === original);
console.assert(clone.self === clone);
// They contain equivalent values:
console.assert(original.number === clone.number);
console.assert(Number(original.date) === Number(clone.date));
console.log("Assertions complete.");
};
main();
同步解决方法：太糟糕了！
同步创建结构化克隆没有好的选择。这里有一些不切实际的技巧。
history.pushState()并且history.replaceState()都创建了第一个参数的结构化克隆，并将该值分配给history.state. 您可以使用它来创建任何对象的结构化克隆，如下所示：
const structuredClone = obj => {
const oldState = history.state;
history.replaceState(obj, null);
const clonedObj = history.state;
history.replaceState(oldState, null);
return clonedObj;
};
使用示例：
'use strict';
const main = () => {
const original = { date: new Date(), number: Math.random() };
original.self = original;
const clone = structuredClone(original);
// They're different objects:
console.assert(original !== clone);
console.assert(original.date !== clone.date);
// They're cyclical:
console.assert(original.self === original);
console.assert(clone.self === clone);
// They contain equivalent values:
console.assert(original.number === clone.number);
console.assert(Number(original.date) === Number(clone.date));
console.log("Assertions complete.");
};
const structuredClone = obj => {
const oldState = history.state;
history.replaceState(obj, null);
const clonedObj = history.state;
history.replaceState(oldState, null);
return clonedObj;
};
main();虽然是同步的，但这可能非常慢。它会产生与操作浏览器历史相关的所有开销。重复调用此方法可能会导致 Chrome 暂时无响应。
Notification构造函数创建其关联数据的结构化克隆。它还尝试向用户显示浏览器通知，但除非您请求通知权限，否则这将静默失败。如果您有其他用途的许可，我们将立即关闭我们创建的通知。
const structuredClone = obj => {
const n = new Notification('', {data: obj, silent: true});
n.onshow = n.close.bind(n);
return n.data;
};
使用示例：
'use strict';
const main = () => {
const original = { date: new Date(), number: Math.random() };
original.self = original;
const clone = structuredClone(original);
// They're different objects:
console.assert(original !== clone);
console.assert(original.date !== clone.date);
// They're cyclical:
console.assert(original.self === original);
console.assert(clone.self === clone);
// They contain equivalent values:
console.assert(original.number === clone.number);
console.assert(Number(original.date) === Number(clone.date));
console.log("Assertions complete.");
};
const structuredClone = obj => {
const n = new Notification('', {data: obj, silent: true});
n.close();
return n.data;
};
main();于 2012-06-06T14:59:04.077 回答
536
假设您的对象中只有属性而没有任何函数，您可以使用：
var newObject = JSON.parse(JSON.stringify(oldObject));
于 2011-01-04T08:05:55.877 回答
359
如果没有任何内置的，您可以尝试：
function clone(obj) {
if (obj === null || typeof (obj) !== 'object' || 'isActiveClone' in obj)
return obj;
if (obj instanceof Date)
var temp = new obj.constructor(); //or new Date(obj);
else
var temp = obj.constructor();
for (var key in obj) {
if (Object.prototype.hasOwnProperty.call(obj, key)) {
obj['isActiveClone'] = null;
temp[key] = clone(obj[key]);
delete obj['isActiveClone'];
}
}
return temp;
}
于 2008-09-23T16:38:51.143 回答
161
在一行代码中克隆（不是深度克隆）对象的有效方法
Object.assign方法是 ECMAScript 2015 (ES6) 标准的一部分，完全符合您的需要。
var clone = Object.assign({}, obj);
Object.assign() 方法用于将所有可枚举自身属性的值从一个或多个源对象复制到目标对象。
支持旧浏览器的polyfill ：
if (!Object.assign) {
Object.defineProperty(Object, 'assign', {
enumerable: false,
configurable: true,
writable: true,
value: function(target) {
'use strict';
if (target === undefined || target === null) {
throw new TypeError('Cannot convert first argument to object');
}
var to = Object(target);
for (var i = 1; i < arguments.length; i++) {
var nextSource = arguments[i];
if (nextSource === undefined || nextSource === null) {
continue;
}
nextSource = Object(nextSource);
var keysArray = Object.keys(nextSource);
for (var nextIndex = 0, len = keysArray.length; nextIndex < len; nextIndex++) {
var nextKey = keysArray[nextIndex];
var desc = Object.getOwnPropertyDescriptor(nextSource, nextKey);
if (desc !== undefined && desc.enumerable) {
to[nextKey] = nextSource[nextKey];
}
}
}
return to;
}
});
}
于 2015-12-15T07:26:38.073 回答
114
这就是我正在使用的：
function cloneObject(obj) {
var clone = {};
for(var i in obj) {
if(typeof(obj[i])=="object" && obj[i] != null)
clone[i] = cloneObject(obj[i]);
else
clone[i] = obj[i];
}
return clone;
}
于 2009-12-11T22:47:19.153 回答
109
代码：
// extends 'from' object with members from 'to'. If 'to' is null, a deep clone of 'from' is returned
function extend(from, to)
{
if (from == null || typeof from != "object") return from;
if (from.constructor != Object && from.constructor != Array) return from;
if (from.constructor == Date || from.constructor == RegExp || from.constructor == Function ||
from.constructor == String || from.constructor == Number || from.constructor == Boolean)
return new from.constructor(from);
to = to || new from.constructor();
for (var name in from)
{
to[name] = typeof to[name] == "undefined" ? extend(from[name], null) : to[name];
}
return to;
}
测试：
var obj =
{
date: new Date(),
func: function(q) { return 1 + q; },
num: 123,
text: "asdasd",
array: [1, "asd"],
regex: new RegExp(/aaa/i),
subobj:
{
num: 234,
text: "asdsaD"
}
}
var clone = extend(obj);
于 2009-06-25T07:53:06.533 回答
105
深度复制按性能： 从最好到最差排名
- 扩展运算符
...（原始数组 - 仅限） splice(0)（原始数组 - 仅限）slice()（原始数组 - 仅限）concat()（原始数组 - 仅限）- 自定义函数，如下所示（任何数组）
- jQuery
$.extend()（任何数组） JSON.parse(JSON.stringify())（原始数组和文字数组 - 仅限）- 下划线
_.clone()（原始数组和文字数组 - 仅限） - Lodash
_.cloneDeep()（任何数组）
在哪里：
- 原语 = 字符串、数字和布尔值
- 字面量 = 对象字面量
{}，数组字面量[] - any = 原语、文字和原型
深拷贝原语数组：
let arr1a = [1, 'a', true];
要仅使用基元（即数字、字符串和布尔值）深度复制数组，可以使用重新分配slice()、、、concat()和下划线。clone()
传播速度最快的地方：
let arr1b = [...arr1a];
哪里slice()的性能比concat()：https ://jsbench.me/x5ktn7o94d/
let arr1c = arr1a.splice(0);
let arr1d = arr1a.slice();
let arr1e = arr1a.concat();
深拷贝一组原始字面量和对象字面量：
let arr2a = [1, 'a', true, {}, []];
let arr2b = JSON.parse(JSON.stringify(arr2a));
深拷贝一组原始数组、对象字面量和原型：
let arr3a = [1, 'a', true, {}, [], new Object()];
编写一个自定义函数（具有比$.extend()or更快的性能JSON.parse）：
function copy(aObject) {
// Prevent undefined objects
// if (!aObject) return aObject;
let bObject = Array.isArray(aObject) ? [] : {};
let value;
for (const key in aObject) {
// Prevent self-references to parent object
// if (Object.is(aObject[key], aObject)) continue;
value = aObject[key];
bObject[key] = (typeof value === "object") ? copy(value) : value;
}
return bObject;
}
let arr3b = copy(arr3a);
或使用第三方实用功能：
let arr3c = $.extend(true, [], arr3a); // jQuery Extend
let arr3d = _.cloneDeep(arr3a); // Lodash
注意：jQuery 的$.extend性能也比JSON.parse(JSON.stringify())：
于 2014-09-18T20:10:38.237 回答
95
JavaScript 中的深拷贝对象（我认为最好也最简单）
1. 使用 JSON.parse(JSON.stringify(object));
var obj = {
a: 1,
b: {
c: 2
}
}
var newObj = JSON.parse(JSON.stringify(obj));
obj.b.c = 20;
console.log(obj); // { a: 1, b: { c: 20 } }
console.log(newObj); // { a: 1, b: { c: 2 } }
2.使用created方法
function cloneObject(obj) {
var clone = {};
for(var i in obj) {
if(obj[i] != null && typeof(obj[i])=="object")
clone[i] = cloneObject(obj[i]);
else
clone[i] = obj[i];
}
return clone;
}
var obj = {
a: 1,
b: {
c: 2
}
}
var newObj = cloneObject(obj);
obj.b.c = 20;
console.log(obj); // { a: 1, b: { c: 20 } }
console.log(newObj); // { a: 1, b: { c: 2 } }
3. 使用 Lo-Dash 的 _.cloneDeep链接lodash
var obj = {
a: 1,
b: {
c: 2
}
}
var newObj = _.cloneDeep(obj);
obj.b.c = 20;
console.log(obj); // { a: 1, b: { c: 20 } }
console.log(newObj); // { a: 1, b: { c: 2 } }
4. 使用 Object.assign() 方法
var obj = {
a: 1,
b: 2
}
var newObj = _.clone(obj);
obj.b = 20;
console.log(obj); // { a: 1, b: 20 }
console.log(newObj); // { a: 1, b: 2 }
但错误的时候
var obj = {
a: 1,
b: {
c: 2
}
}
var newObj = Object.assign({}, obj);
obj.b.c = 20;
console.log(obj); // { a: 1, b: { c: 20 } }
console.log(newObj); // { a: 1, b: { c: 20 } } --> WRONG
// Note: Properties on the prototype chain and non-enumerable properties cannot be copied.
5.使用Underscore.js _.clone链接Underscore.js
var obj = {
a: 1,
b: 2
}
var newObj = _.clone(obj);
obj.b = 20;
console.log(obj); // { a: 1, b: 20 }
console.log(newObj); // { a: 1, b: 2 }
但错误的时候
var obj = {
a: 1,
b: {
c: 2
}
}
var newObj = _.cloneDeep(obj);
obj.b.c = 20;
console.log(obj); // { a: 1, b: { c: 20 } }
console.log(newObj); // { a: 1, b: { c: 20 } } --> WRONG
// (Create a shallow-copied clone of the provided plain object. Any nested objects or arrays will be copied by reference, not duplicated.)
JSBEN.CH Performance Benchmarking Playground 1~3 http://jsben.ch/KVQLd
于 2018-08-08T08:17:31.580 回答
74
克隆一个对象在 JS 中一直是一个问题，但这都是在 ES6 之前的问题，我在下面列出了在 JavaScript 中复制对象的不同方法，假设你有下面的对象，并希望得到它的深层副本：
var obj = {a:1, b:2, c:3, d:4};
在不更改原点的情况下复制此对象的方法很少：
ES5+，使用一个简单的函数为你做拷贝：
function deepCopyObj(obj) { if (null == obj || "object" != typeof obj) return obj; if (obj instanceof Date) { var copy = new Date(); copy.setTime(obj.getTime()); return copy; } if (obj instanceof Array) { var copy = []; for (var i = 0, len = obj.length; i < len; i++) { copy[i] = deepCopyObj(obj[i]); } return copy; } if (obj instanceof Object) { var copy = {}; for (var attr in obj) { if (obj.hasOwnProperty(attr)) copy[attr] = deepCopyObj(obj[attr]); } return copy; } throw new Error("Unable to copy obj this object."); }ES5+，使用
JSON.parse和JSON.stringify。var deepCopyObj = JSON.parse(JSON.stringify(obj));角度：
var deepCopyObj = angular.copy(obj);jQuery：
var deepCopyObj = jQuery.extend(true, {}, obj);Underscore.js 和 Lodash：
var deepCopyObj = _.cloneDeep(obj); //latest version of Underscore.js makes shallow copy
希望这些帮助...</p>
于 2017-04-03T15:37:57.703 回答
67
var clone = function() {
var newObj = (this instanceof Array) ? [] : {};
for (var i in this) {
if (this[i] && typeof this[i] == "object") {
newObj[i] = this[i].clone();
}
else
{
newObj[i] = this[i];
}
}
return newObj;
};
Object.defineProperty( Object.prototype, "clone", {value: clone, enumerable: false});
于 2009-12-26T14:59:51.560 回答
62
有一个库（称为“克隆”），它做得很好。它提供了我所知道的最完整的任意对象的递归克隆/复制。它还支持循环引用，其他答案尚未涵盖。
你也可以在 npm 上找到它。它可以用于浏览器以及 Node.js。
下面是一个关于如何使用它的例子：
安装它
npm install clone
或者用Ender打包。
ender build clone [...]
您也可以手动下载源代码。
然后你可以在你的源代码中使用它。
var clone = require('clone');
var a = { foo: { bar: 'baz' } }; // inital value of a
var b = clone(a); // clone a -> b
a.foo.bar = 'foo'; // change a
console.log(a); // { foo: { bar: 'foo' } }
console.log(b); // { foo: { bar: 'baz' } }
（免责声明：我是图书馆的作者。）
于 2012-10-17T18:36:31.323 回答
54
我知道这是一篇旧帖子，但我认为这可能对下一个绊倒的人有所帮助。
只要您不将对象分配给任何对象，它就不会在内存中保持引用。因此，要创建一个要在其他对象之间共享的对象，您必须像这样创建一个工厂：
var a = function(){
return {
father:'zacharias'
};
},
b = a(),
c = a();
c.father = 'johndoe';
alert(b.father);
于 2011-09-24T19:28:11.733 回答
48
如果您正在使用它，Underscore.js库有一个克隆方法。
var newObject = _.clone(oldObject);
于 2011-12-15T15:56:15.577 回答
45
这是上面ConroyP答案的一个版本，即使构造函数具有必需的参数，它也可以工作：
//If Object.create isn't already defined, we just do the simple shim,
//without the second argument, since that's all we need here
var object_create = Object.create;
if (typeof object_create !== 'function') {
object_create = function(o) {
function F() {}
F.prototype = o;
return new F();
};
}
function deepCopy(obj) {
if(obj == null || typeof(obj) !== 'object'){
return obj;
}
//make sure the returned object has the same prototype as the original
var ret = object_create(obj.constructor.prototype);
for(var key in obj){
ret[key] = deepCopy(obj[key]);
}
return ret;
}
我的simpleoo库中也提供了此功能。
编辑：
这是一个更强大的版本（感谢 Justin McCandless，它现在也支持循环引用）：
/**
* Deep copy an object (make copies of all its object properties, sub-properties, etc.)
* An improved version of http://keithdevens.com/weblog/archive/2007/Jun/07/javascript.clone
* that doesn't break if the constructor has required parameters
*
* It also borrows some code from http://stackoverflow.com/a/11621004/560114
*/
function deepCopy(src, /* INTERNAL */ _visited, _copiesVisited) {
if(src === null || typeof(src) !== 'object'){
return src;
}
//Honor native/custom clone methods
if(typeof src.clone == 'function'){
return src.clone(true);
}
//Special cases:
//Date
if(src instanceof Date){
return new Date(src.getTime());
}
//RegExp
if(src instanceof RegExp){
return new RegExp(src);
}
//DOM Element
if(src.nodeType && typeof src.cloneNode == 'function'){
return src.cloneNode(true);
}
// Initialize the visited objects arrays if needed.
// This is used to detect cyclic references.
if (_visited === undefined){
_visited = [];
_copiesVisited = [];
}
// Check if this object has already been visited
var i, len = _visited.length;
for (i = 0; i < len; i++) {
// If so, get the copy we already made
if (src === _visited[i]) {
return _copiesVisited[i];
}
}
//Array
if (Object.prototype.toString.call(src) == '[object Array]') {
//[].slice() by itself would soft clone
var ret = src.slice();
//add it to the visited array
_visited.push(src);
_copiesVisited.push(ret);
var i = ret.length;
while (i--) {
ret[i] = deepCopy(ret[i], _visited, _copiesVisited);
}
return ret;
}
//If we've reached here, we have a regular object
//make sure the returned object has the same prototype as the original
var proto = (Object.getPrototypeOf ? Object.getPrototypeOf(src): src.__proto__);
if (!proto) {
proto = src.constructor.prototype; //this line would probably only be reached by very old browsers
}
var dest = object_create(proto);
//add this object to the visited array
_visited.push(src);
_copiesVisited.push(dest);
for (var key in src) {
//Note: this does NOT preserve ES5 property attributes like 'writable', 'enumerable', etc.
//For an example of how this could be modified to do so, see the singleMixin() function
dest[key] = deepCopy(src[key], _visited, _copiesVisited);
}
return dest;
}
//If Object.create isn't already defined, we just do the simple shim,
//without the second argument, since that's all we need here
var object_create = Object.create;
if (typeof object_create !== 'function') {
object_create = function(o) {
function F() {}
F.prototype = o;
return new F();
};
}
于 2012-11-11T17:53:39.010 回答
31
下面创建同一对象的两个实例。我找到了它，目前正在使用它。它简单易用。
var objToCreate = JSON.parse(JSON.stringify(cloneThis));
于 2015-08-21T15:51:17.560 回答
25
Crockford 建议（我更喜欢）使用这个函数：
function object(o) {
function F() {}
F.prototype = o;
return new F();
}
var newObject = object(oldObject);
它很简洁，可以按预期工作，并且您不需要库。
编辑：
这是一个 polyfill Object.create，所以你也可以使用它。
var newObject = Object.create(oldObject);
注意： 如果您使用其中的一些，您可能会遇到使用hasOwnProperty. 因为，create创建继承的新空对象oldObject。但它对于克隆对象仍然有用且实用。
例如如果 oldObject.a = 5;
newObject.a; // is 5
但：
oldObject.hasOwnProperty(a); // is true
newObject.hasOwnProperty(a); // is false
于 2010-10-06T15:08:59.540 回答
23
Lodash 有一个不错的_.cloneDeep(value)方法：
var objects = [{ 'a': 1 }, { 'b': 2 }];
var deep = _.cloneDeep(objects);
console.log(deep[0] === objects[0]);
// => false
于 2013-06-22T15:03:59.290 回答
22
function clone(obj)
{ var clone = {};
clone.prototype = obj.prototype;
for (property in obj) clone[property] = obj[property];
return clone;
}
于 2008-09-23T16:45:39.707 回答
21
浅拷贝单行（ECMAScript 第 5 版）：
var origin = { foo : {} };
var copy = Object.keys(origin).reduce(function(c,k){c[k]=origin[k];return c;},{});
console.log(origin, copy);
console.log(origin == copy); // false
console.log(origin.foo == copy.foo); // true
和浅拷贝单行（ECMAScript 第 6 版，2015）：
var origin = { foo : {} };
var copy = Object.assign({}, origin);
console.log(origin, copy);
console.log(origin == copy); // false
console.log(origin.foo == copy.foo); // true
于 2012-07-04T21:44:26.990 回答
18
对于类似数组的对象，似乎还没有理想的深度克隆运算符。正如下面的代码所示，John Resig 的 jQuery 克隆器将具有非数字属性的数组转换为非数组的对象，而 RegDwight 的 JSON 克隆器删除了非数字属性。以下测试在多个浏览器上说明了这些要点：
function jQueryClone(obj) {
return jQuery.extend(true, {}, obj)
}
function JSONClone(obj) {
return JSON.parse(JSON.stringify(obj))
}
var arrayLikeObj = [[1, "a", "b"], [2, "b", "a"]];
arrayLikeObj.names = ["m", "n", "o"];
var JSONCopy = JSONClone(arrayLikeObj);
var jQueryCopy = jQueryClone(arrayLikeObj);
alert("Is arrayLikeObj an array instance?" + (arrayLikeObj instanceof Array) +
"\nIs the jQueryClone an array instance? " + (jQueryCopy instanceof Array) +
"\nWhat are the arrayLikeObj names? " + arrayLikeObj.names +
"\nAnd what are the JSONClone names? " + JSONCopy.names)
于 2010-10-17T04:01:53.347 回答
18
只是因为我没有看到提到AngularJS并认为人们可能想知道......
angular.copy还提供了一种深度复制对象和数组的方法。
于 2016-05-13T22:16:35.630 回答
17
根据您的目标是否是克隆“普通的旧 JavaScript 对象”，我有两个很好的答案。
我们还假设您的意图是创建一个完整的克隆，没有原型引用返回到源对象。如果您对完整的克隆不感兴趣，那么您可以使用其他一些答案（Crockford 模式）中提供的许多 Object.clone() 例程。
对于普通的旧 JavaScript 对象，在现代运行时克隆对象的一种经过验证的真正好方法非常简单：
var clone = JSON.parse(JSON.stringify(obj));
请注意，源对象必须是纯 JSON 对象。也就是说，它的所有嵌套属性都必须是标量（如布尔值、字符串、数组、对象等）。任何函数或特殊对象（如 RegExp 或 Date）都不会被克隆。
它有效率吗？哎呀，是的。我们尝试了各种克隆方法，效果最好。我敢肯定一些忍者会想出一个更快的方法。但我怀疑我们谈论的是边际收益。
这种方法简单易行。把它包装成一个方便的函数，如果你真的需要挤出一些收益，以后再去。
现在，对于非纯 JavaScript 对象，没有一个真正简单的答案。事实上，由于 JavaScript 函数和内部对象状态的动态特性，不可能存在。深度克隆包含函数的 JSON 结构需要您重新创建这些函数及其内部上下文。而 JavaScript 根本没有标准化的方式来做到这一点。
再次，正确的方法是通过您在代码中声明和重用的便捷方法。方便方法可以赋予您对自己对象的一些了解，因此您可以确保在新对象中正确地重新创建图形。
我们是自己编写的，但这里介绍了我见过的最好的通用方法：
http://davidwalsh.name/javascript-clone
这是正确的想法。作者（David Walsh）已经注释掉了泛化函数的克隆。这是您可能会选择做的事情，具体取决于您的用例。
主要思想是您需要在每种类型的基础上专门处理函数（或原型类，可以这么说）的实例化。在这里，他为 RegExp 和 Date 提供了一些示例。
这段代码不仅简短，而且可读性也很强。它很容易扩展。
这有效率吗？哎呀，是的。鉴于目标是生成真正的深拷贝克隆，那么您将不得不遍历源对象图的成员。使用这种方法，您可以准确调整要处理的子成员以及如何手动处理自定义类型。
所以你去。两种方法。在我看来，两者都很有效。
于 2013-05-06T20:45:28.213 回答
16
我迟到了回答这个问题，但我有另一种克隆对象的方法：
function cloneObject(obj) {
if (obj === null || typeof(obj) !== 'object')
return obj;
var temp = obj.constructor(); // changed
for (var key in obj) {
if (Object.prototype.hasOwnProperty.call(obj, key)) {
obj['isActiveClone'] = null;
temp[key] = cloneObject(obj[key]);
delete obj['isActiveClone'];
}
}
return temp;
}
var b = cloneObject({"a":1,"b":2}); // calling
那更好更快：
var a = {"a":1,"b":2};
var b = JSON.parse(JSON.stringify(a));
和
var a = {"a":1,"b":2};
// Deep copy
var newObject = jQuery.extend(true, {}, a);
我已经对代码进行了基准测试，您可以在这里测试结果：
于 2017-10-11T16:02:22.687 回答
15
这通常不是最有效的解决方案，但它可以满足我的需要。下面的简单测试用例...
function clone(obj, clones) {
// Makes a deep copy of 'obj'. Handles cyclic structures by
// tracking cloned obj's in the 'clones' parameter. Functions
// are included, but not cloned. Functions members are cloned.
var new_obj,
already_cloned,
t = typeof obj,
i = 0,
l,
pair;
clones = clones || [];
if (obj === null) {
return obj;
}
if (t === "object" || t === "function") {
// check to see if we've already cloned obj
for (i = 0, l = clones.length; i < l; i++) {
pair = clones[i];
if (pair[0] === obj) {
already_cloned = pair[1];
break;
}
}
if (already_cloned) {
return already_cloned;
} else {
if (t === "object") { // create new object
new_obj = new obj.constructor();
} else { // Just use functions as is
new_obj = obj;
}
clones.push([obj, new_obj]); // keep track of objects we've cloned
for (key in obj) { // clone object members
if (obj.hasOwnProperty(key)) {
new_obj[key] = clone(obj[key], clones);
}
}
}
}
return new_obj || obj;
}
循环阵列测试...
a = []
a.push("b", "c", a)
aa = clone(a)
aa === a //=> false
aa[2] === a //=> false
aa[2] === a[2] //=> false
aa[2] === aa //=> true
功能测试...
f = new Function
f.a = a
ff = clone(f)
ff === f //=> true
ff.a === a //=> false
于 2011-04-03T02:08:03.017 回答
14
仅当您可以使用ECMAScript 6或transpilers 时。
特征：
- 复制时不会触发 getter/setter。
- 保留 getter/setter。
- 保留原型信息。
- 适用于对象文字和功能 OO写作风格。
代码：
function clone(target, source){
for(let key in source){
// Use getOwnPropertyDescriptor instead of source[key] to prevent from trigering setter/getter.
let descriptor = Object.getOwnPropertyDescriptor(source, key);
if(descriptor.value instanceof String){
target[key] = new String(descriptor.value);
}
else if(descriptor.value instanceof Array){
target[key] = clone([], descriptor.value);
}
else if(descriptor.value instanceof Object){
let prototype = Reflect.getPrototypeOf(descriptor.value);
let cloneObject = clone({}, descriptor.value);
Reflect.setPrototypeOf(cloneObject, prototype);
target[key] = cloneObject;
}
else {
Object.defineProperty(target, key, descriptor);
}
}
let prototype = Reflect.getPrototypeOf(source);
Reflect.setPrototypeOf(target, prototype);
return target;
}
于 2015-10-22T04:05:41.490 回答
14
对于想要使用JSON.parse(JSON.stringify(obj))版本但又不会丢失 Date 对象的人，您可以使用方法的第二个参数parse将字符串转换回 Date：
function clone(obj) {
var regExp = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z$/;
return JSON.parse(JSON.stringify(obj), function(k, v) {
if (typeof v === 'string' && regExp.test(v))
return new Date(v)
return v;
})
}
// usage:
var original = {
a: [1, null, undefined, 0, {a:null}, new Date()],
b: {
c(){ return 0 }
}
}
var cloned = clone(original)
console.log(cloned)于 2015-10-29T16:09:55.147 回答
13
我不同意这里得票最多的答案。递归深度克隆比提到的JSON.parse (JSON.stringify(obj))方法快得多。
- Jsperf在这里排名第一：https ://jsperf.com/deep-copy-vs-json-stringify-json-parse/5
- 上面答案中的Jsben已更新，以表明递归深度克隆击败了所有其他提到的：http: //jsben.ch/13YKQ
这是快速参考的功能：
function cloneDeep (o) {
let newO
let i
if (typeof o !== 'object') return o
if (!o) return o
if (Object.prototype.toString.apply(o) === '[object Array]') {
newO = []
for (i = 0; i < o.length; i += 1) {
newO[i] = cloneDeep(o[i])
}
return newO
}
newO = {}
for (i in o) {
if (o.hasOwnProperty(i)) {
newO[i] = cloneDeep(o[i])
}
}
return newO
}
于 2017-06-18T06:34:37.290 回答
12
// obj target object, vals source object
var setVals = function (obj, vals) {
if (obj && vals) {
for (var x in vals) {
if (vals.hasOwnProperty(x)) {
if (obj[x] && typeof vals[x] === 'object') {
obj[x] = setVals(obj[x], vals[x]);
} else {
obj[x] = vals[x];
}
}
}
}
return obj;
};
于 2010-04-28T11:16:55.327 回答
12
这是一个全面的 clone() 方法，可以克隆任何 JavaScript 对象。它处理几乎所有的情况：
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;
};
于 2012-07-23T21:39:22.093 回答
12
AngularJS
好吧，如果您使用的是角度，您也可以这样做
var newObject = angular.copy(oldObject);
于 2016-09-14T13:26:15.817 回答
9
在 JavaScript 中，您可以编写您的
deepCopy方法，例如
function deepCopy(src) {
let target = Array.isArray(src) ? [] : {};
for (let prop in src) {
let value = src[prop];
if(value && typeof value === 'object') {
target[prop] = deepCopy(value);
} else {
target[prop] = value;
}
}
return target;
}
于 2018-11-05T09:43:14.203 回答
7
于 2016-08-05T18:54:20.050 回答
7
根据我的经验，递归版本的性能大大优于JSON.parse(JSON.stringify(obj)). 这是一个现代化的递归深度对象复制函数，可以放在一行中：
function deepCopy(obj) {
return Object.keys(obj).reduce((v, d) => Object.assign(v, {
[d]: (obj[d].constructor === Object) ? deepCopy(obj[d]) : obj[d]
}), {});
}
这比该方法快 40 倍左右。JSON.parse...
于 2018-06-19T22:06:13.553 回答
6
单行 ECMAScript 6 解决方案（未处理特殊对象类型，如日期/正则表达式）：
const clone = (o) =>
typeof o === 'object' && o !== null ? // only clone objects
(Array.isArray(o) ? // if cloning an array
o.map(e => clone(e)) : // clone each of its elements
Object.keys(o).reduce( // otherwise reduce every key in the object
(r, k) => (r[k] = clone(o[k]), r), {} // and save its cloned value into a new object
)
) :
o; // return non-objects as is
var x = {
nested: {
name: 'test'
}
};
var y = clone(x);
console.log(x.nested !== y.nested);于 2016-07-17T17:10:41.433 回答
6
Lodash 有一个函数可以像这样为你处理。
var foo = {a: 'a', b: {c:'d', e: {f: 'g'}}};
var bar = _.cloneDeep(foo);
// bar = {a: 'a', b: {c:'d', e: {f: 'g'}}}
在此处阅读文档。
于 2017-06-04T20:49:53.927 回答
6
ES 2017 示例：
let objectToCopy = someObj;
let copyOfObject = {};
Object.defineProperties(copyOfObject, Object.getOwnPropertyDescriptors(objectToCopy));
// copyOfObject will now be the same as objectToCopy
于 2018-03-26T17:42:48.277 回答
5
这是我创建的不使用原型的最快方法，因此它将在新对象中维护 hasOwnProperty。
解决方案是迭代原始对象的顶级属性，制作两个副本，从原始对象中删除每个属性，然后重置原始对象并返回新副本。它只需要迭代与顶级属性一样多的次数。这保存了if检查每个属性是否为函数、对象、字符串等的所有条件，并且不必迭代每个后代属性。
唯一的缺点是必须为原始对象提供其原始创建的命名空间，才能重置它。
copyDeleteAndReset:function(namespace,strObjName){
var obj = namespace[strObjName],
objNew = {},objOrig = {};
for(i in obj){
if(obj.hasOwnProperty(i)){
objNew[i] = objOrig[i] = obj[i];
delete obj[i];
}
}
namespace[strObjName] = objOrig;
return objNew;
}
var namespace = {};
namespace.objOrig = {
'0':{
innerObj:{a:0,b:1,c:2}
}
}
var objNew = copyDeleteAndReset(namespace,'objOrig');
objNew['0'] = 'NEW VALUE';
console.log(objNew['0']) === 'NEW VALUE';
console.log(namespace.objOrig['0']) === innerObj:{a:0,b:1,c:2};
于 2011-06-24T09:41:38.973 回答
5
有很多答案，但没有一个能达到我想要的效果。我想利用 jQuery 的深拷贝的力量......但是，当它运行到一个数组时，它只是简单地复制对数组的引用并深拷贝其中的项目。为了解决这个问题，我做了一个很好的小递归函数，它会自动创建一个新数组。
（如果您愿意，它甚至会检查 kendo.data.ObservableArray！不过，如果您希望数组再次可观察，请确保您调用 kendo.observable(newItem)。）
因此，要完全复制现有项目，您只需执行以下操作：
var newItem = jQuery.extend(true, {}, oldItem);
createNewArrays(newItem);
function createNewArrays(obj) {
for (var prop in obj) {
if ((kendo != null && obj[prop] instanceof kendo.data.ObservableArray) || obj[prop] instanceof Array) {
var copy = [];
$.each(obj[prop], function (i, item) {
var newChild = $.extend(true, {}, item);
createNewArrays(newChild);
copy.push(newChild);
});
obj[prop] = copy;
}
}
}
于 2013-07-29T02:50:25.597 回答
5
我通常使用var newObj = JSON.parse( JSON.stringify(oldObje) );但是，这是一个更合适的方法：
var o = {};
var oo = Object.create(o);
(o === oo); // => false
观看旧版浏览器！
于 2014-04-24T18:35:46.370 回答
5
为了将来参考，ECMAScript 6的当前草案引入了Object.assign作为克隆对象的一种方式。示例代码是：
var obj1 = { a: true, b: 1 };
var obj2 = Object.assign(obj1);
console.log(obj2); // { a: true, b: 1 }
在撰写本文时，支持仅限于浏览器中的 Firefox 34，因此目前还不能在生产代码中使用（当然，除非您正在编写 Firefox 扩展）。
于 2014-08-24T21:09:50.147 回答
5
有很多方法可以实现这一点，但如果你想在没有任何库的情况下做到这一点，你可以使用以下方法：
const cloneObject = (oldObject) => {
let newObject = oldObject;
if (oldObject && typeof oldObject === 'object') {
if(Array.isArray(oldObject)) {
newObject = [];
} else if (Object.prototype.toString.call(oldObject) === '[object Date]' && !isNaN(oldObject)) {
newObject = new Date(oldObject.getTime());
} else {
newObject = {};
for (let i in oldObject) {
newObject[i] = cloneObject(oldObject[i]);
}
}
}
return newObject;
}
让我知道你的想法。
于 2017-09-09T15:08:58.730 回答
4
这是我的对象克隆器版本。这是 jQuery 方法的独立版本，只有很少的调整和调整。看看小提琴。我已经使用了很多 jQuery，直到有一天我意识到我大部分时间只使用这个函数 x_x。
用法与 jQuery API 中描述的相同：
- 非深度克隆：
extend(object_dest, object_source); - 深度克隆：
extend(true, object_dest, object_source);
一个额外的函数用于定义对象是否适合被克隆。
/**
* This is a quasi clone of jQuery's extend() function.
* by Romain WEEGER for wJs library - www.wexample.com
* @returns {*|{}}
*/
function extend() {
// Make a copy of arguments to avoid JavaScript inspector hints.
var to_add, name, copy_is_array, clone,
// The target object who receive parameters
// form other objects.
target = arguments[0] || {},
// Index of first argument to mix to target.
i = 1,
// Mix target with all function arguments.
length = arguments.length,
// Define if we merge object recursively.
deep = false;
// Handle a deep copy situation.
if (typeof target === 'boolean') {
deep = target;
// Skip the boolean and the target.
target = arguments[ i ] || {};
// Use next object as first added.
i++;
}
// Handle case when target is a string or something (possible in deep copy)
if (typeof target !== 'object' && typeof target !== 'function') {
target = {};
}
// Loop trough arguments.
for (false; i < length; i += 1) {
// Only deal with non-null/undefined values
if ((to_add = arguments[ i ]) !== null) {
// Extend the base object.
for (name in to_add) {
// We do not wrap for loop into hasOwnProperty,
// to access to all values of object.
// Prevent never-ending loop.
if (target === to_add[name]) {
continue;
}
// Recurse if we're merging plain objects or arrays.
if (deep && to_add[name] && (is_plain_object(to_add[name]) || (copy_is_array = Array.isArray(to_add[name])))) {
if (copy_is_array) {
copy_is_array = false;
clone = target[name] && Array.isArray(target[name]) ? target[name] : [];
}
else {
clone = target[name] && is_plain_object(target[name]) ? target[name] : {};
}
// Never move original objects, clone them.
target[name] = extend(deep, clone, to_add[name]);
}
// Don't bring in undefined values.
else if (to_add[name] !== undefined) {
target[name] = to_add[name];
}
}
}
}
return target;
}
/**
* Check to see if an object is a plain object
* (created using "{}" or "new Object").
* Forked from jQuery.
* @param obj
* @returns {boolean}
*/
function is_plain_object(obj) {
// Not plain objects:
// - Any object or value whose internal [[Class]] property is not "[object Object]"
// - DOM nodes
// - window
if (obj === null || typeof obj !== "object" || obj.nodeType || (obj !== null && obj === obj.window)) {
return false;
}
// Support: Firefox <20
// The try/catch suppresses exceptions thrown when attempting to access
// the "constructor" property of certain host objects, i.e. |window.location|
// https://bugzilla.mozilla.org/show_bug.cgi?id=814622
try {
if (obj.constructor && !this.hasOwnProperty.call(obj.constructor.prototype, "isPrototypeOf")) {
return false;
}
}
catch (e) {
return false;
}
// If the function hasn't returned already, we're confident that
// |obj| is a plain object, created by {} or constructed with new Object
return true;
}
于 2014-06-16T16:22:31.387 回答
4
由于递归对于 JavaScript 来说太昂贵了，而且我发现的大多数答案都是使用递归，而 JSON 方法将跳过不可转换为 JSON 的部分（函数等）。所以我做了一些研究，发现这种蹦床技术可以避免它。这是代码：
/*
* Trampoline to avoid recursion in JavaScript, see:
* https://www.integralist.co.uk/posts/functional-recursive-javascript-programming/
*/
function trampoline() {
var func = arguments[0];
var args = [];
for (var i = 1; i < arguments.length; i++) {
args[i - 1] = arguments[i];
}
var currentBatch = func.apply(this, args);
var nextBatch = [];
while (currentBatch && currentBatch.length > 0) {
currentBatch.forEach(function(eachFunc) {
var ret = eachFunc();
if (ret && ret.length > 0) {
nextBatch = nextBatch.concat(ret);
}
});
currentBatch = nextBatch;
nextBatch = [];
}
};
/*
* Deep clone an object using the trampoline technique.
*
* @param target {Object} Object to clone
* @return {Object} Cloned object.
*/
function clone(target) {
if (typeof target !== 'object') {
return target;
}
if (target == null || Object.keys(target).length == 0) {
return target;
}
function _clone(b, a) {
var nextBatch = [];
for (var key in b) {
if (typeof b[key] === 'object' && b[key] !== null) {
if (b[key] instanceof Array) {
a[key] = [];
}
else {
a[key] = {};
}
nextBatch.push(_clone.bind(null, b[key], a[key]));
}
else {
a[key] = b[key];
}
}
return nextBatch;
};
var ret = target instanceof Array ? [] : {};
(trampoline.bind(null, _clone))(target, ret);
return ret;
};
于 2016-01-01T09:35:15.477 回答
4
ES2015这是我使用默认值和扩展运算符深度克隆对象的方法
const makeDeepCopy = (obj, copy = {}) => {
for (let item in obj) {
if (typeof obj[item] === 'object') {
makeDeepCopy(obj[item], copy)
}
if (obj.hasOwnProperty(item)) {
copy = {
...obj
}
}
}
return copy
}
const testObj = {
"type": "object",
"properties": {
"userId": {
"type": "string",
"chance": "guid"
},
"emailAddr": {
"type": "string",
"chance": {
"email": {
"domain": "fake.com"
}
},
"pattern": ".+@fake.com"
}
},
"required": [
"userId",
"emailAddr"
]
}
const makeDeepCopy = (obj, copy = {}) => {
for (let item in obj) {
if (typeof obj[item] === 'object') {
makeDeepCopy(obj[item], copy)
}
if (obj.hasOwnProperty(item)) {
copy = {
...obj
}
}
}
return copy
}
console.log(makeDeepCopy(testObj))于 2017-10-15T20:01:27.260 回答
4
希望这可以帮助。
function deepClone(obj) {
/*
* Duplicates an object
*/
var ret = null;
if (obj !== Object(obj)) { // primitive types
return obj;
}
if (obj instanceof String || obj instanceof Number || obj instanceof Boolean) { // string objecs
ret = obj; // for ex: obj = new String("Spidergap")
} else if (obj instanceof Date) { // date
ret = new obj.constructor();
} else
ret = Object.create(obj.constructor.prototype);
var prop = null;
var allProps = Object.getOwnPropertyNames(obj); //gets non enumerables also
var props = {};
for (var i in allProps) {
prop = allProps[i];
props[prop] = false;
}
for (i in obj) {
props[i] = i;
}
//now props contain both enums and non enums
var propDescriptor = null;
var newPropVal = null; // value of the property in new object
for (i in props) {
prop = obj[i];
propDescriptor = Object.getOwnPropertyDescriptor(obj, i);
if (Array.isArray(prop)) { //not backward compatible
prop = prop.slice(); // to copy the array
} else
if (prop instanceof Date == true) {
prop = new prop.constructor();
} else
if (prop instanceof Object == true) {
if (prop instanceof Function == true) { // function
if (!Function.prototype.clone) {
Function.prototype.clone = function() {
var that = this;
var temp = function tmp() {
return that.apply(this, arguments);
};
for (var ky in this) {
temp[ky] = this[ky];
}
return temp;
}
}
prop = prop.clone();
} else // normal object
{
prop = deepClone(prop);
}
}
newPropVal = {
value: prop
};
if (propDescriptor) {
/*
* If property descriptors are there, they must be copied
*/
newPropVal.enumerable = propDescriptor.enumerable;
newPropVal.writable = propDescriptor.writable;
}
if (!ret.hasOwnProperty(i)) // when String or other predefined objects
Object.defineProperty(ret, i, newPropVal); // non enumerable
}
return ret;
}
于 2018-07-16T07:58:04.287 回答
4
我的情况有点不同。我有一个带有嵌套对象和函数的对象。因此，Object.assign()并JSON.stringify()没有解决我的问题。使用第三方库对我来说也不是一个选择。
因此，我决定创建一个简单的函数来使用内置方法来复制对象及其文字属性、嵌套对象和函数。
let deepCopy = (target, source) => {
Object.assign(target, source);
// check if there's any nested objects
Object.keys(source).forEach((prop) => {
/**
* assign function copies functions and
* literals (int, strings, etc...)
* except for objects and arrays, so:
*/
if (typeof(source[prop]) === 'object') {
// check if the item is, in fact, an array
if (Array.isArray(source[prop])) {
// clear the copied referenece of nested array
target[prop] = Array();
// iterate array's item and copy over
source[prop].forEach((item, index) => {
// array's items could be objects too!
if (typeof(item) === 'object') {
// clear the copied referenece of nested objects
target[prop][index] = Object();
// and re do the process for nested objects
deepCopy(target[prop][index], item);
} else {
target[prop].push(item);
}
});
// otherwise, treat it as an object
} else {
// clear the copied referenece of nested objects
target[prop] = Object();
// and re do the process for nested objects
deepCopy(target[prop], source[prop]);
}
}
});
};
这是一个测试代码：
let a = {
name: 'Human',
func: () => {
console.log('Hi!');
},
prop: {
age: 21,
info: {
hasShirt: true,
hasHat: false
}
},
mark: [89, 92, { exam: [1, 2, 3] }]
};
let b = Object();
deepCopy(b, a);
a.name = 'Alien';
a.func = () => { console.log('Wassup!'); };
a.prop.age = 1024;
a.prop.info.hasShirt = false;
a.mark[0] = 87;
a.mark[1] = 91;
a.mark[2].exam = [4, 5, 6];
console.log(a); // updated props
console.log(b);
对于与效率相关的问题，我相信这是解决我遇到的问题的最简单和最有效的解决方案。我将不胜感激对此算法的任何评论，以使其更有效。
于 2019-05-19T12:22:39.190 回答
4
Object.assign({},sourceObj)仅当对象的属性没有引用类型键时才克隆对象。前任
obj={a:"lol",b:["yes","no","maybe"]}
clonedObj = Object.assign({},obj);
clonedObj.b.push("skip")// changes will reflected to the actual obj as well because of its reference type.
obj.b //will also console => yes,no,maybe,skip
所以对于深度克隆是不可能通过这种方式实现的。
最有效的解决方案是
var obj = Json.stringify(yourSourceObj)
var cloned = Json.parse(obj);
于 2019-05-28T06:17:12.130 回答
3
如果您想概括您的对象克隆算法，我认为这是最好的解决方案。
它可以与 jQuery 一起使用，也可以不与 jQuery 一起使用，但如果您希望克隆的对象与原始对象具有相同的“类”，我建议您不要使用 jQuery 的扩展方法。
function clone(obj){
if(typeof(obj) == 'function')//it's a simple function
return obj;
//of it's not an object (but could be an array...even if in javascript arrays are objects)
if(typeof(obj) != 'object' || obj.constructor.toString().indexOf('Array')!=-1)
if(JSON != undefined)//if we have the JSON obj
try{
return JSON.parse(JSON.stringify(obj));
}catch(err){
return JSON.parse('"'+JSON.stringify(obj)+'"');
}
else
try{
return eval(uneval(obj));
}catch(err){
return eval('"'+uneval(obj)+'"');
}
// I used to rely on jQuery for this, but the "extend" function returns
//an object similar to the one cloned,
//but that was not an instance (instanceof) of the cloned class
/*
if(jQuery != undefined)//if we use the jQuery plugin
return jQuery.extend(true,{},obj);
else//we recursivley clone the object
*/
return (function _clone(obj){
if(obj == null || typeof(obj) != 'object')
return obj;
function temp () {};
temp.prototype = obj;
var F = new temp;
for(var key in obj)
F[key] = clone(obj[key]);
return F;
})(obj);
}
于 2011-03-27T20:29:48.873 回答
3
用于Object.create()获取prototype和支持instanceof，并使用for()循环获取可枚举键：
function cloneObject(source) {
var key,value;
var clone = Object.create(source);
for (key in source) {
if (source.hasOwnProperty(key) === true) {
value = source[key];
if (value!==null && typeof value==="object") {
clone[key] = cloneObject(value);
} else {
clone[key] = value;
}
}
}
return clone;
}
于 2015-06-19T02:56:44.930 回答
3
供将来参考，可以使用此代码
ES6：
_clone: function(obj){
let newObj = {};
for(let i in obj){
if(typeof(obj[i]) === 'object' && Object.keys(obj[i]).length){
newObj[i] = clone(obj[i]);
} else{
newObj[i] = obj[i];
}
}
return Object.assign({},newObj);
}
ES5：
function clone(obj){
let newObj = {};
for(let i in obj){
if(typeof(obj[i]) === 'object' && Object.keys(obj[i]).length){
newObj[i] = clone(obj[i]);
} else{
newObj[i] = obj[i];
}
}
return Object.assign({},newObj);
}
例如
var obj ={a:{b:1,c:3},d:4,e:{f:6}}
var xc = clone(obj);
console.log(obj); //{a:{b:1,c:3},d:4,e:{f:6}}
console.log(xc); //{a:{b:1,c:3},d:4,e:{f:6}}
xc.a.b = 90;
console.log(obj); //{a:{b:1,c:3},d:4,e:{f:6}}
console.log(xc); //{a:{b:90,c:3},d:4,e:{f:6}}
于 2016-11-21T14:05:22.000 回答
3
class Handler {
static deepCopy (obj) {
if (Object.prototype.toString.call(obj) === '[object Array]') {
const result = [];
for (let i = 0, len = obj.length; i < len; i++) {
result[i] = Handler.deepCopy(obj[i]);
}
return result;
} else if (Object.prototype.toString.call(obj) === '[object Object]') {
const result = {};
for (let prop in obj) {
result[prop] = Handler.deepCopy(obj[prop]);
}
return result;
}
return obj;
}
}于 2016-11-24T11:15:13.070 回答
3
在不触及原型继承的情况下，您可以深入孤独的对象和数组，如下所示；
function objectClone(o){
var ot = Array.isArray(o);
return o !== null && typeof o === "object" ? Object.keys(o)
.reduce((r,k) => o[k] !== null && typeof o[k] === "object" ? (r[k] = objectClone(o[k]),r)
: (r[k] = o[k],r), ot ? [] : {})
: o;
}
var obj = {a: 1, b: {c: 2, d: {e: 3, f: {g: 4, h: null}}}},
arr = [1,2,[3,4,[5,6,[7]]]],
nil = null,
clobj = objectClone(obj),
clarr = objectClone(arr),
clnil = objectClone(nil);
console.log(clobj, obj === clobj);
console.log(clarr, arr === clarr);
console.log(clnil, nil === clnil);
clarr[2][2][2] = "seven";
console.log(arr, clarr);于 2017-04-05T15:06:39.107 回答
3
由 a 完成的异步对象克隆怎么样Promise？
async function clone(thingy /**/)
{
if(thingy instanceof Promise)
{
throw Error("This function cannot clone Promises.");
}
return thingy;
}
于 2018-01-20T20:26:35.597 回答
3
浏览这个长长的答案列表，几乎所有的解决方案都被涵盖了，除了我知道的一个。这是 VANILLA JS 深度克隆对象的方法列表。
JSON.parse(JSON.stringify(obj));
通过 history.state 和 pushState 或 replaceState
Web Notifications API，但这有向用户询问权限的缺点。
通过对象进行自己的递归循环以复制每个级别。
我没有看到的答案 -> 使用 ServiceWorkers。在页面和 ServiceWorker 脚本之间来回传递的消息（对象）将是任何对象的深度克隆。
于 2018-02-26T04:05:16.723 回答
3
对于浅拷贝，ECMAScript2018 标准中引入了一种很棒的简单方法。它涉及使用扩展运算符：
let obj = {a : "foo", b:"bar" , c:10 , d:true , e:[1,2,3] };
let objClone = { ...obj };
我已经在 Chrome 浏览器中对其进行了测试，两个对象都存储在不同的位置，因此在其中一个中更改直接子值不会改变另一个。虽然（在示例中）更改值e会影响两个副本。
这种技术非常简单直接。我认为这是一劳永逸地解决这个问题的真正最佳实践。
于 2018-06-24T19:08:38.040 回答
3
这是我的解决方案，不使用任何库或本机 javascript 函数。
function deepClone(obj) {
if (typeof obj !== "object") {
return obj;
} else {
let newObj =
typeof obj === "object" && obj.length !== undefined ? [] : {};
for (let key in obj) {
if (key) {
newObj[key] = deepClone(obj[key]);
}
}
return newObj;
}
}
于 2019-08-03T16:36:52.890 回答
2
需要新的浏览器，但是...
让我们扩展原生 Object 并获得一个真实的 .extend();
Object.defineProperty(Object.prototype, 'extend', {
enumerable: false,
value: function(){
var that = this;
Array.prototype.slice.call(arguments).map(function(source){
var props = Object.getOwnPropertyNames(source),
i = 0, l = props.length,
prop;
for(; i < l; ++i){
prop = props[i];
if(that.hasOwnProperty(prop) && typeof(that[prop]) === 'object'){
that[prop] = that[prop].extend(source[prop]);
}else{
Object.defineProperty(that, prop, Object.getOwnPropertyDescriptor(source, prop));
}
}
});
return this;
}
});
只需在任何在对象上使用 .extend() 的代码之前弹出它。
例子：
var obj1 = {
node1: '1',
node2: '2',
node3: 3
};
var obj2 = {
node1: '4',
node2: 5,
node3: '6'
};
var obj3 = ({}).extend(obj1, obj2);
console.log(obj3);
// Object {node1: "4", node2: 5, node3: "6"}
于 2015-08-04T19:38:46.340 回答
2
这是一个递归解决方案：
obj = {
a: { b: { c: { d: ['1', '2'] } } },
e: 'Saeid'
}
const Clone = function (obj) {
const container = Array.isArray(obj) ? [] : {}
const keys = Object.keys(obj)
for (let i = 0; i < keys.length; i++) {
const key = keys[i]
if(typeof obj[key] == 'object') {
container[key] = Clone(obj[key])
}
else
container[key] = obj[key].slice()
}
return container
}
console.log(Clone(obj))于 2016-10-30T06:40:27.373 回答
2
当您的对象是嵌套的并且它包含数据对象、其他结构化对象或某些属性对象等时，使用JSON.parse(JSON.stringify(object))orObject.assign({}, obj)或$.extend(true, {}, obj)将不起作用。在这种情况下，请使用 lodash。它简单易行。。
var obj = {a: 25, b: {a: 1, b: 2}, c: new Date(), d: anotherNestedObject };
var A = _.cloneDeep(obj);
现在 A 将是您的新克隆 obj 没有任何引用..
于 2018-08-23T09:40:50.690 回答
2
如果您发现自己经常做这种事情（例如创建撤消重做功能），那么可能值得研究Immutable.js
const map1 = Immutable.fromJS( { a: 1, b: 2, c: { d: 3 } } );
const map2 = map1.setIn( [ 'c', 'd' ], 50 );
console.log( `${ map1.getIn( [ 'c', 'd' ] ) } vs ${ map2.getIn( [ 'c', 'd' ] ) }` ); // "3 vs 50"
于 2018-10-10T09:21:56.140 回答
2
随着一些浏览器的较新版本支持的新方法Object.fromEntries()的提议（参考）。我想为下一个递归方法做出贡献：
const obj = {
key1: {key11: "key11", key12: "key12", key13: {key131: 22}},
key2: {key21: "key21", key22: "key22"},
key3: "key3",
key4: [1,2,3, {key: "value"}]
}
const cloneObj = (obj) =>
{
if (Object(obj) !== obj)
return obj;
else if (Array.isArray(obj))
return obj.map(cloneObj);
return Object.fromEntries(Object.entries(obj).map(
([k,v]) => ([k, cloneObj(v)])
));
}
// Clone the original object.
let newObj = cloneObj(obj);
// Make changes on the original object.
obj.key1.key11 = "TEST";
obj.key3 = "TEST";
obj.key1.key13.key131 = "TEST";
obj.key4[1] = "TEST";
obj.key4[3].key = "TEST";
// Display both objects on the console.
console.log("Original object: ", obj);
console.log("Cloned object: ", newObj);.as-console {background-color:black !important; color:lime;}
.as-console-wrapper {max-height:100% !important; top:0;}于 2019-04-16T05:33:51.703 回答
1
由于这个问题在参考 Object.assign 或自定义代码等内置功能方面引起了很多关注和回答，因此我想分享一些库来进行深度克隆，
1. 埃克隆
npm install --savedev esclone https://www.npmjs.com/package/esclone
ES6 中的使用示例：
import esclone from "esclone";
const rockysGrandFather = {
name: "Rockys grand father",
father: "Don't know :("
};
const rockysFather = {
name: "Rockys Father",
father: rockysGrandFather
};
const rocky = {
name: "Rocky",
father: rockysFather
};
const rockyClone = esclone(rocky);
ES5 中的使用示例：
var esclone = require("esclone")
var foo = new String("abcd")
var fooClone = esclone.default(foo)
console.log(fooClone)
console.log(foo === fooClone)
2.深拷贝
npm install deep-copy https://www.npmjs.com/package/deep-copy
例子：
var dcopy = require('deep-copy')
// deep copy object
var copy = dcopy({a: {b: [{c: 5}]}})
// deep copy array
var copy = dcopy([1, 2, {a: {b: 5}}])
3. 深克隆
$ npm install --save clone-deep https://www.npmjs.com/package/clone-deep
例子：
var cloneDeep = require('clone-deep');
var obj = {a: 'b'};
var arr = [obj];
var copy = cloneDeep(arr);
obj.c = 'd';
console.log(copy);
//=> [{a: 'b'}]
console.log(arr);
于 2017-08-16T06:16:41.277 回答
1
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.");
}
使用下面的方法而不是JSON.parse(JSON.stringify(obj)) 因为它比下面的方法慢
于 2019-02-05T13:46:15.637 回答
0
如何将对象的键与其值合并？
function deepClone(o) {
var keys = Object.keys(o);
var values = Object.values(o);
var clone = {};
keys.forEach(function(key, i) {
clone[key] = typeof values[i] == 'object' ? Object.create(values[i]) : values[i];
});
return clone;
}
注意： 这种方法不一定要进行浅拷贝，但它只复制一个内部对象的深度，这意味着当你得到类似的东西时{a: {b: {c: null}}}，它只会克隆直接在它们内部的对象， deepClone(a.b).c技术上也是如此对a.b.c, while的引用deepClone(a).b是克隆，而不是引用。
于 2019-02-05T01:11:56.440 回答
-2
使用当今的 JavaScript 克隆对象：ECMAScript 2015（以前称为 ECMAScript 6）
var original = {a: 1};
// Method 1: New object with original assigned.
var copy1 = Object.assign({}, original);
// Method 2: New object with spread operator assignment.
var copy2 = {...original};
旧浏览器可能不支持 ECMAScript 2015。一种常见的解决方案是使用 JavaScript 到 JavaScript 编译器（如 Babel）输出 JavaScript 代码的ECMAScript 5版本。
正如@jim-hall 所指出的，这只是一个浅拷贝。属性的属性被复制作为参考：更改一个将更改另一个对象/实例中的值。
于 2016-03-23T11:37:21.453 回答