Javascript的对象拷贝

在开始之前，我先普及一些基础知识。Javascript 的对象只是指向内存中某个位置的指针。这些指针是可变的，也就是说，它们可以重新被赋值。所以仅仅复制这个指针，其结果是有两个指针指向内存中的同一个地址。

成都创新互联长期为上1000家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为南丹企业提供专业的做网站、成都网站建设，南丹网站改版等技术服务。拥有10年丰富建站经验和众多成功案例,为您定制开发。

 
 
 
      
  
  
  1. var foo = { 
    2.   
  
  
  2.     a : "abc" 
    3.   
  
  
  3. } 
    4.   
  
  
  4. console.log(foo.a); 
    5.   
  
  
  5. // abc 
    6.   
  
  
  6.  
    7.   
  
  
  7. var bar = foo; 
    8.   
  
  
  8. console.log(bar.a); 
    9.   
  
  
  9. // abc 
    10.   
  
  
  10.  
    11.   
  
  
  11. foo.a = "yo foo"; 
    12.   
  
  
  12. console.log(foo.a); 
    13.   
  
  
  13. // yo foo 
    14.   
  
  
  14. console.log(bar.a); 
    15.   
  
  
  15. // yo foo 
    16.   
  
  
  16.  
    17.   
  
  
  17. bar.a = "whatup bar?"; 
    18.   
  
  
  18. console.log(foo.a); 
    19.   
  
  
  19. // whatup bar? 
    20.   
  
  
  20. console.log(bar.a); 
    21.   
  
  
  21. // whatup bar?     
    22.

通过上面的例子可以看到，对象 foo 和 bar 都能随着对方的变化而变化。所以在拷贝 Javascript 中的对象时，要根据实际情况做一些考虑。

浅拷贝

如果要操作的对象拥有的属性都是值类型，那么可以使用扩展语法或 Object.assign(...)

 
 
 
      
  
  
  1. var obj = { foo: "foo", bar: "bar" }; 
    2.   
  
  
  2. var copy = { ...obj }; 
    3.   
  
  
  3. // Object { foo: "foo", bar: "bar" } 
    4.   
  
  
  4. var obj = { foo: "foo", bar: "bar" }; 
    5.   
  
  
  5. var copy = Object.assign({}, obj); 
    6.   
  
  
  6. // Object { foo: "foo", bar: "bar" } 
    7.

可以看到上面两种方法都可以把多个不同来源对象中的属性复制到一个目标对象中。

 
 
 
      
  
  
  1. var obj1 = { foo: "foo" }; 
    2.   
  
  
  2. var obj2 = { bar: "bar" }; 
    3.   
  
  
  3. var copySpread = { ...obj1, ...obj2 }; 
    4.   
  
  
  4. // Object { foo: "foo", bar: "bar" } 
    5.   
  
  
  5. var copyAssign = Object.assign({}, obj1, obj2); 
    6.   
  
  
  6. // Object { foo: "foo", bar: "bar" } 
    7.

上面这种方法是存在问题的，如果对象的属性也是对象，那么实际被拷贝的只是那些指针，这跟执行 var bar = foo; 的效果是一样的，和第一段代码中的做法一样。

 
 
 
      
  
  
  1. var foo = { a: 0 , b: { c: 0 } }; 
    2.   
  
  
  2. var copy = { ...foo }; 
    3.   
  
  
  3. copy.a = 1; 
    4.   
  
  
  4. copy.b.c = 2; 
    5.   
  
  
  5. console.dir(foo); 
    6.   
  
  
  6. // { a: 0, b: { c: 2 } } 
    7.   
  
  
  7. console.dir(copy); 
    8.   
  
  
  8. // { a: 1, b: { c: 2 } } 
    9.

深拷贝(有限制)

想要对一个对象进行深拷贝，一个可行的方法是先把对象序列化为字符串，然后再对它进行反序列化。

 
 
 
      
  
  
  1. var obj = { a: 0, b: { c: 0 } }; 
    2.   
  
  
  2. var copy = JSON.parse(JSON.stringify(obj)); 
    3.

不幸的是，这个方法只在对象中包含可序列化值，同时没有循环引用的情况下适用。常见的不能被序列化的就是日期对象 —— 尽管它显示的是字符串化的 ISO 日期格式，但是 JSON.parse 只会把它解析成为一个字符串，而不是日期类型。

深拷贝 (限制较少)

对于一些更复杂的场景，我们可以用 HTML5 提供的一个名为结构化克隆的新算法。不过，截至本文发布为止，有些内置类型仍然无法支持，但与 JSON.parse 相比较而言，它支持的类型要多的多：Date、RegExp、 Map、 Set、 Blob、 FileList、 ImageData、 sparse 和 typed Array。它还维护了克隆对象的引用，这使它可以支持循环引用结构的拷贝，而这些在前面所说的序列化中是不支持的。

目前还没有直接调用结构化克隆的方法，但是有些新的浏览器特性的底层用了这个算法。所以深拷贝对象可能需要依赖一系列的环境才能实现。

Via MessageChannels: 其原理是借用了通信中用到的序列化算法。由于它是基于事件的，所以这里的克隆也是一个异步操作。

 
 
 
      
  
  
  1. class StructuredCloner { 
    2.   
  
  
  2.   constructor() { 
    3.   
  
  
  3.     this.pendingClones_ = new Map(); 
    4.   
  
  
  4.     this.nextKey_ = 0; 
    5.   
  
  
  5.  
    6.   
  
  
  6.     const channel = new MessageChannel(); 
    7.   
  
  
  7.     this.inPort_ = channel.port1; 
    8.   
  
  
  8.     this.outPort_ = channel.port2; 
    9.   
  
  
  9.  
    10.   
  
  
  10.     this.outPort_.onmessage = ({data: {key, value}}) => { 
    11.   
  
  
  11.       const resolve = this.pendingClones_.get(key); 
    12.   
  
  
  12.       resolve(value); 
    13.   
  
  
  13.       this.pendingClones_.delete(key); 
    14.   
  
  
  14.     }; 
    15.   
  
  
  15.     this.outPort_.start(); 
    16.   
  
  
  16.   } 
    17.   
  
  
  17.  
    18.   
  
  
  18.   cloneAsync(value) { 
    19.   
  
  
  19.     return new Promise(resolve => { 
    20.   
  
  
  20.       const key = this.nextKey_++; 
    21.   
  
  
  21.       this.pendingClones_.set(key, resolve); 
    22.   
  
  
  22.       this.inPort_.postMessage({key, value}); 
    23.   
  
  
  23.     }); 
    24.   
  
  
  24.   } 
    25.   
  
  
  25. } 
    26.   
  
  
  26.  
    27.   
  
  
  27. const structuredCloneAsync = window.structuredCloneAsync = 
    28.   
  
  
  28.     StructuredCloner.prototype.cloneAsync.bind(new StructuredCloner); 
    29.   
  
  
  29.  
    30.   
  
  
  30. const main = async () => { 
    31.   
  
  
  31.   const original = { date: new Date(), number: Math.random() }; 
    32.   
  
  
  32.   originaloriginal.self = original; 
    33.   
  
  
  33.  
    34.   
  
  
  34.   const clone = await structuredCloneAsync(original); 
    35.   
  
  
  35.  
    36.   
  
  
  36.   // different objects: 
    37.   
  
  
  37.   console.assert(original !== clone); 
    38.   
  
  
  38.   console.assert(original.date !== clone.date); 
    39.   
  
  
  39.  
    40.   
  
  
  40.   // cyclical: 
    41.   
  
  
  41.   console.assert(original.self === original); 
    42.   
  
  
  42.   console.assert(clone.self === clone); 
    43.   
  
  
  43.  
    44.   
  
  
  44.   // equivalent values: 
    45.   
  
  
  45.   console.assert(original.number === clone.number); 
    46.   
  
  
  46.   console.assert(Number(original.date) === Number(clone.date)); 
    47.   
  
  
  47.  
    48.   
  
  
  48.   console.log("Assertions complete."); 
    49.   
  
  
  49. }; 
    50.   
  
  
  50.  
    51.   
  
  
  51. main(); 
    52.

Via the history API：history.pushState() 和 history.replaceState()都会给它们的第一个参数做一个结构化克隆!需要注意的是，此方法是同步的，因为对浏览器历史记录进行操作的速度不是很快，假如频繁调用这个方法，将会导致浏览器卡死。

 
 
 
      
  
  
  1. const structuredClone = obj => { 
    2.   
  
  
  2.   const oldState = history.state; 
    3.   
  
  
  3.   history.replaceState(obj, null); 
    4.   
  
  
  4.   const clonedObj = history.state; 
    5.   
  
  
  5.   history.replaceState(oldState, null); 
    6.   
  
  
  6.   return clonedObj; 
    7.   
  
  
  7. }; 
    8.

Via notification API：当创建一个 notification 实例的时候，构造器为它相关的数据做了结构化克隆。需要注意的是，它会尝试向用户展示浏览器通知，但是除非它收到了用户允许展示通知的请求，否则它什么都不会做。一旦用户点击同意的话，notification 会立刻被关闭。

 
 
 
      
  
  
  1. const structuredClone = obj => { 
    2.   
  
  
  2.   const n = new Notification("", {data: obj, silent: true}); 
    3.   
  
  
  3.   nn.onshow = n.close.bind(n); 
    4.   
  
  
  4.   return n.data; 
    5.   
  
  
  5. }; 
    6.

用 Node.js 进行深拷贝

Node.js 的 8.0.0 版本提供了一个 序列化 api 可以和结构化克隆相媲美. 不过这个 API 在本文发布的时候，还只是被标记为试验性的:

 
 
 
      
  
  
  1. const v8 = require('v8'); 
    2.   
  
  
  2. const buf = v8.serialize({a: 'foo', b: new Date()}); 
    3.   
  
  
  3. const cloned = v8.deserialize(buf); 
    4.   
  
  
  4. cloned.b.getMonth(); 
    5.

在 8.0.0 版本以下比较稳定的方法，可以考虑用 lodash 的 cloneDeep函数，它的思想多少也基于结构化克隆算法。

结论

Javascript 中最好的对象拷贝的算法，很大程度上取决于其使用环境，以及你需要拷贝的对象类型。虽然 lodash 是最安全的泛型深拷贝函数，但是如果你自己封装的话，也许能够获得效率更高的实现方法，以下就是一个简单的深拷贝，对 Date 日期对象也同样适用：

 
 
 
      
  
  
  1. function deepClone(obj) { 
    2.   
  
  
  2.   var copy; 
    3.   
  
  
  3.  
    4.   
  
  
  4.   // Handle the 3 simple types, and null or undefined 
    5.   
  
  
  5.   if (null == obj || "object" != typeof obj) return obj; 
    6.   
  
  
  6.  
    7.   
  
  
  7.   // Handle Date 
    8.   
  
  
  8.   if (obj instanceof Date) { 
    9.   
  
  
  9.     copy = new Date(); 
    10.   
  
  
  10.     copy.setTime(obj.getTime()); 
    11.   
  
  
  11.     return copy; 
    12.   
  
  
  12.   } 
    13.   
  
  
  13.  
    14.   
  
  
  14.   // Handle Array 
    15.   
  
  
  15.   if (obj instanceof Array) { 
    16.   
  
  
  16.     copy = []; 
    17.   
  
  
  17.     for (var i = 0, len = obj.length; i < len; i++) { 
    18.   
  
  
  18.         copy[i] = deepClone(obj[i]); 
    19.   
  
  
  19.     } 
    20.   
  
  
  20.     return copy; 
    21.   
  
  
  21.   } 
    22.   
  
  
  22.  
    23.   
  
  
  23.   // Handle Function 
    24.   
  
  
  24.   if (obj instanceof Function) { 
    25.   
  
  
  25.     copy = function() { 
    26.   
  
  
  26.       return obj.apply(this, arguments); 
    27.   
  
  
  27.     } 
    28.   
  
  
  28.     return copy; 
    29.   
  
  
  29.   } 
    30.   
  
  
  30.  
    31.   
  
  
  31.   // Handle Object 
    32.   
  
  
  32.   if (obj instanceof Object) { 
    33.   
  
  
  33.       copy = {}; 
    34.   
  
  
  34.       for (var attr in obj) { 
    35.   
  
  
  35.           if (obj.hasOwnProperty(attr)) copy[attr] = deepClone(obj[attr]); 
    36.   
  
  
  36.       } 
    37.   
  
  
  37.       return copy; 
    38.   
  
  
  38.   } 
    39.   
  
  
  39.  
    40.   
  
  
  40.   throw new Error("Unable to copy obj as type isn't supported " + obj.constructor.name); 
    41.   
  
  
  41. } 
    42.

我很期待可以随便使用结构化克隆的那一天的到来，让对象拷贝不再令人头疼^_^

网站栏目：Javascript的对象拷贝
文章链接：http://www.gawzjz.com/qtweb/news27/187427.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

解决方案知识

同城分类信息

德阳电信服务器托管　　 　成都富士康招工　　 　堡垒主机　　 　成都电信服务器托管　　 　重庆网站制作　　 　成都云主机　　 　服务器托管　　 　铁科精智测控　　 　成都网站设计公司　　 　物流公司网站建设方案　　 　网站建设　　 　绵竹网站建设　　 　成都做网站　　 　成都外贸网站建设公司　　 　腾讯云香港虚拟主机　　 　企业网站设计　　 　等级保护测评　　 　西信服务器托管　　 　腾讯云香港免备案空间　　 　网站空间