1. 犀牛前端部落首页
  2. JavaScript百科

js中对象深拷贝方法总结

js深拷贝这个问题,在实际的工作和面试当中也是经常使用到的。

还经常有一些公司要求,原生手写实现。: (

俺并不认为,自己手写的,在兼容性上和适用性上可以跟人家框架媲美。

js中对象深拷贝方法总结

原生深度拷贝

称为“结构化克隆”,在Node 11和更高版本中实验性地工作,并有希望可以在浏览器使用。

有兴趣的朋友可以阅读更多的文章。

快速克隆(存在数据丢失问题) – JSON.parse/stringify

如果不在对象中使用Date、functions、undefined、Infinity、RegExps、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()

使用第三方框架

由于克隆对象并不简单(复杂类型、循环引用、函数等),大多数主要库都提供了克隆对象的功能。不要重新发明轮子-如果你已经在使用一个库,检查它是否有对象克隆功能。例如:


ES6

为了完整起见,请注意ES6提供了两种浅拷贝机制:Object.assign()和拓展运算符语法。它将所有可枚举的自身属性的值从一个对象复制到另一个对象。例如:

var A1 = {a: "2"};
var A2 = Object.assign({}, A1);
var A3 = {...A1};  // 拓展运算符

原创文章,作者:犀牛前端部落,如若转载,请注明出处:https://www.pipipi.net/2926.html

发表评论

登录后才能评论