Object.assign方法

Question

我已经在这里冲浪了一段时间，仍然没有找到适合我的答案。

有没有办法在JS中深层复制非普通对象？

我已经尝试了y但它只克隆了其中的一部分，其余部分仍作为对另一个对象的引用。

Answer 1

以下是3种不同的复制对象的方法。每种方法都有利有弊，所以请仔细阅读并选择最适合您情况的方法

Object.assign方法

使用Object.assign，其中＆＃34;用于将所有可枚举的自有属性的值从一个或多个源对象复制到目标对象＆＃34;。这会复制值和函数。在撰写本文时，浏览器支持好但不完美，但这是三者中最好的方法IMO。

＆＃13;

const obj1 = {a:1, b:2};
const obj1Copy = Object.assign(obj1)

＆＃13;

Spread运算符方法

或者，您可以使用spread operator从一个对象传播到另一个对象。请记住，这将复制键的值，但如果键的值是内存地址（另一个嵌套对象或数组），则它只是一个浅表副本。

＆＃13;

const obj1 = {a: () => {}, b:2}
const obj1Copy = { ...obj1 }

＆＃13;

JSON stringify / parse技巧

如果对象没有任何循环引用或函数作为值，则可以使用json stringify技巧：

let myCopy = JSON.parse(JSON.stringify(myObject));

不需要库，并且对大多数对象都有效。

Answer 2

您可以使用lodash的cloneDeep函数 - https://lodash.com/docs/4.16.4#cloneDeep

示例（来自docs）

var objects = [{ 'a': 1 }, { 'b': 2 }];

var deep = _.cloneDeep(objects);
console.log(deep[0] === objects[0]);
// => false

Answer 3

一种快速克隆对象的快速方法，具有性能。

TimeWindowedKStreams

性能如何？ >> [也许这是深度复制对象的最佳方法]。我强烈建议您在YouTube上的Google Chrome Developers社区中观看此视频，解释该方法的工作原理和性能基准。

注意：如果您的对象没有日期，函数，未定义，无穷大，正则表达式，地图，集合，斑点，文件列表，ImageData，稀疏数组，请使用JSON.parse(JSON.stringify({"foo":"bar"}))方法类型化数组或其他复杂类型。来源：Read this SO answer

快速提示 -React.JS初始状态树可以使用此解决方案从localStorage加载。

Answer 4

如果你正在处理一个类实例，你可以使用这样的东西。

您不需要复制原型上委派给它们的函数。

// myObject constructor
function myObject(foo, bar){
  this.foo = foo
  this.bar = bar
}
// delegate the functions to a prototype
myObject.prototype.something = function(){
  console.log('something')
}

function instanceCopy(obj) {
  // copy the object by the constructor
  const copy = new obj.constructor()
  const keys = Object.keys(obj)
  keys.forEach(key => {
    copy[key] = obj[key]
  })
  return copy
}

const myObj = new myObject('foo', 'bar')
const copyObj = instanceCopy(myObj)

console.log('myObj', myObj)
console.log('copyObj', copyObj)
console.log('same ?', copyObj === myObj)

// can we still call the functions
copyObj.something()

<script src="https://codepen.io/synthet1c/pen/WrQapG.js"></script>

Answer 5

Lodash _.cloneDeep（）方法会破坏应用程序的性能。所以我想出了基本的JavaScript解决方案。我已将其添加到我的GIT存储库中。使用解决方案后，我的应用程序性能恢复正常。

https://github.com/manideeppabba1991/javascript_util_functions/blob/master/clone_Array_or_Object.js

如何在JavaScript中深层复制自定义对象？

5 个答案:

Object.assign方法

Spread运算符方法

JSON stringify / parse技巧