快速克隆(存在数据丢失问题) JSON.parse/stringify 如果不在对象中使用Date、functions、undefined、Infinity、RegExps、Maps、Sets、blob、FileLists、ImageDatas、或其他复杂类型,则深入克隆对象库可以
快速克隆(存在数据丢失问题) – JSON.parse/stringify
如果不在对象中使用Date、functions、undefined、Infinity、RegExps、Maps、Sets、blob、FileLists、ImageDatas、或其他复杂类型,则深入克隆对象库可以使用非常简单的一行代码。
简单的来说有以下问题:
- 会忽略
undefined
- 会忽略
symbol
- 不能序列化函数
- 不能解决循环引用的对象
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()
使用第三方框架
由于克隆对象并不简单(复杂类型、循环引用、函数等),大多数主要库都提供了克隆对象的功能。不要重新发明轮子-如果你已经在使用一个库,检查它是否有对象克隆功能。例如:
- lodash
cloneDeep
;可以通过lodash.cloneDeep模块单独导入,如果之前你没使用过lodash,那么lodash是一个非常不错的选择。 - AngularJS
angular.copy
- jQuery –
jQuery.extend(true, { }, oldObject)
;.clone()
只能克隆DOM
ES6
为了完整起见,请注意ES6提供了两种浅拷贝机制:Object.assign()和拓展运算符语法。它将所有可枚举的自身属性的值从一个对象复制到另一个对象。例如:
var A1 = {a: "2"}; var A2 = Object.assign({}, A1); var A3 = {...A1}; // 拓展运算符
原生实现深拷贝
原生手写深拷贝代码,在面试当中经常遇到,虽然在实际项目开发中不是很常用,但大家还是需要熟练掌握手写代码的思想,因为真的面试经常考到呀~
function deepClone(obj) { function isObject(o) { return (typeof o === 'object' || typeof o === 'function') && o !== null } if (!isObject(obj)) { throw new Error('非对象') } let isArray = Array.isArray(obj) let newObj = isArray ? [...obj] : { ...obj } Reflect.ownKeys(newObj).forEach(key => { newObj[key] = isObject(obj[key]) ? deepClone(obj[key]) : obj[key] }) return newObj } let obj = { a: [1, 2, 3], b: { c: 2, d: 3 } } let newObj = deepClone(obj) newObj.b.c = 1 console.log(obj.b.c) // 2
MessageChannel
MessageChannel 也是一个可以实现深拷贝的方式。
function structuralClone(obj) { return new Promise(resolve => { const { port1, port2 } = new MessageChannel() port2.onmessage = ev => resolve(ev.data) port1.postMessage(obj) }) } var obj = { a: 1, b: { c: 2 } } obj.b.d = obj.b // 注意该方法是异步的 // 可以处理 undefined 和循环引用对象 const test = async () => { const clone = await structuralClone(obj) console.log(clone) } test()
更多关于js中对象深拷贝方法请查看下面的相关链接