脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → 基础知识 → js中对象深拷贝方法总结

js中对象深拷贝方法总结

 更新时间：2022年10月15日 16:00:44   投稿：wdc  
js深拷贝这个问题，在实际的工作和面试当中也是经常使用到的。
还经常有一些公司要求，原生手写实现，这篇文章主要介绍了js中对象深拷贝方法总结,需要的朋友可以参考下

快速克隆（存在数据丢失问题） – 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中对象深拷贝方法请查看下面的相关链接

您可能感兴趣的文章:

相关文章

最新评论