博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
javascript中对象的深复制的几种方法
阅读量:5316 次
发布时间:2019-06-14

本文共 1491 字,大约阅读时间需要 4 分钟。

javascript中复制一个对象有深复制和浅复制两种方式,二者的区别的浅复制只会复制对象的第一层属性,如果对象的层级比较深且为对象或数组时,那么原对象和目标对象的深层对象或数组会指向内存中同一个对象的实例,修改其中一个也会导致另一个改变。

深复制则是会复制对象的所有层级的所有属性,在堆内存中重新分配内存,将目标对象指向新的内存空间,这样源对象和目标对象之间没有任何关联,修改其中一个也不会导致另一个被修改。

浅复制的方式

1、遍历对象

function clone(obj) {  if (obj == null || typeof obj !== 'object') return obj  var newObj = Array.isArray(obj) ? [] : {}  for (let i in obj) {    if (obj.hasOwnProperty(i)) {      newObj[i] =obj[i]    }  }  return newObj}

2、Object.assign

var obj2 = Object.assign({}, obj)

 Object.assign是ES6新增的一个浅复制对象的方法,

深复制的方式

1、jQuery的$.extend方法

$.extend(true, {}, obj)

jQuery的extend方法可以浅复制对象,根据文档,在extend的第一个参数传入true可以实现深复制 

2、lodash的_.方法

var objects = [{ 'a': 1 }, { 'b': 2 }]; var deep = _.cloneDeep(objects);console.log(deep[0] === objects[0]); //false

3、JSON对象的方法

var obj2 = JSON.parse(JSON.stringify(obj1))

熟悉js的人对这两个方法肯定不陌生,利用原生JSON对象的两个可以非常方便地实现对象的深复制。

这种方法也有弊端:

  1. 只能复制能用json表示的属性,比如String、Number、Array等,对于不能用json表示的属性例如Function、Regexp等则会丢失
  2. 对象的原型链丢失
  3. 复制效率较低

虽说有以上缺点,但是这种方式也足以应对大部分情况了。

4、递归复制

function cloneDeep(obj) {  if (obj == null || typeof obj !== 'object') return obj  var newObj = Array.isArray(obj) ? [] : {}  for (let i in obj) {    if (obj.hasOwnProperty(i)) {      var value = obj[i]      newObj[i] = typeof value === 'object' ? clone(value) : value    }  }  return newObj}

这种方式与上面浅复制的遍历对象方式相比只是多了递归调用,即判断对象的属性是否也为对象,是则递归调用遍历这个对象,直到不为对象为止。

但是这种方式也没有考虑Function、Regexp、Error等类型,需要更多的判断,但是核心思想也还是递归遍历对象复制,另外这种方式比JSON的深复制效率稍高。

转载于:https://www.cnblogs.com/tgxh/p/7488270.html

你可能感兴趣的文章
jquery获取文档高度和窗口高度的例子
查看>>
[LeetCode #5] Longest Palindromic Substring
查看>>
Linux系统文件与目录权限管理
查看>>
Git 常用命令(二)
查看>>
《Effective.Enterprise.Java中文版》知识点摘要
查看>>
内存调试技巧
查看>>
MongoDB的安装与使用
查看>>
給定周中的特定天
查看>>
孤掌难鸣-------堵水眼
查看>>
复利计算评价博客
查看>>
[NOIP2015提高组]运输计划
查看>>
C# 中打印、预览、打印机设置和打印属性的方法
查看>>
protobuf编码
查看>>
Codeforces 919D:Substring(拓扑排序+DP)
查看>>
SQL Server创建索引(转)
查看>>
淘宝一淘网收录部分垂直B2C网站信息
查看>>
取球博弈
查看>>
poj2632 累死了
查看>>
Hdu 3478 Catch
查看>>
团队第二次冲刺第三天
查看>>