JS中实现浅拷贝和深拷贝的代码详解

 更新时间:2019年06月05日 11:19:17   作者:撩课学院  
JavaScript的变量中包含两种类型的值:基本类型值 和 引用类型值,这篇文章主要介绍了JS中实现浅拷贝和深拷贝,需要的朋友可以参考下

(一)JS中基本类型和引用类型

JavaScript的变量中包含两种类型的值:基本类型值 和 引用类型值,在内存中的表现形式在于:前者是存储在栈中的一些简单的数据段,后者则是保存在堆内存中的一个对象。

基本类型值

在JavaScript中基本数据类型有 String , Number , Undefined , Null , Boolean ,在ES6中,又定义了一种新的基本数据类型 Symbol ,所以一共有6种。

基本类型是按值访问的,从一个变量复制基本类型的值到另一个变量后,这两个变量的值是完全独立的,即使一个变量改变了也不会影响到第二个变量。

var str1 = '撩课';
var str2 = str1;
str2 = 'itlike';
console.log(str2); //'itlike'
console.log(str1); //'撩课'

引用类型值

引用类型值是引用类型的实例,它是保存在堆内存中的一个对象,引用类型是一种数据结构,最常用的是Object,Array,Function类型,此外还有Date,RegExp,Error等。

在ES6中提供了Set,Map2种新的数据结构。

(二)JS中如何复制引用类型的

基本类型和引用类型赋值的差异化
举个例子:在下面代码中,只修改了obj1中的name属性,却同时改变了ob1和obj2中的name属性。

var obj1 = {'name': '撩课'};
var obj2 = obj1;
obj2.name = '小撩';
console.log(obj1); // {'name': '撩课'}
console.log(obj2); // {'name': '撩课'}

当变量复制引用类型值的时候,同样和基本类型值一样会将变量的值复制到新变量上,不同的是对于变量的值,它是一个指针,指向存储在堆内存中的对象。

因为,在JS中,堆内存中的对象无法直接访问,必须要访问这个对象在堆内存中的地址,然后再按照这个地址去获得这个对象中的值。

(三)浅拷贝

在JS中,如果属性是基本类型,拷贝的就是基本类型的值;如果属性是引用类型,拷贝的就是内存地址;所以如果其中一个对象改变了这个地址,就会影响到另一个对象。

下面是JavaScript提供的浅拷贝方法:

Object.assign

ES6中拷贝对象的方法,接受的第一个参数是拷贝的目标,剩下的参数是拷贝的源对象;

语法:Object.assign(target, ...sources)

var p = {
  'name': '张三',
};
var copyP = {};
Object.assign(copyP, p);
console.log(copyP);
console.log(p);

Object.assign是一个浅拷贝,它只是在根属性(对象的第一层级)创建了一个新的对象,但是如果属性的值是对象的话,只会拷贝一份相同的内存地址。

扩展运算符

利用扩展运算符可以在构造字面量对象时,进行克隆或者属性拷贝。语法如下:

var cloneObj = { ...obj };
var obj = {'name': '撩课', 'college': ['H5','JAVA','Python']}
var obj2 = {...obj};
obj.name='小撩';
//{'name': '小撩', 'college': ['H5','JAVA','Python']}
console.log(obj);
//{'name': '撩课', 'college': ['H5','JAVA','Python']}
console.log(obj2); 
obj.college.push('Go');
//{'name': '小撩', 'college': ['H5','JAVA','Python','Go']}
console.log(obj); 
//{'name': '小撩', 'college': ['H5','JAVA','Python','Go']}
console.log(obj2);

扩展运算符和Object.assign()存在同样的问题,对于值是对象的属性无法完全拷贝成两个不同对象;

但是如果属性都是基本类型的值的话,使用扩展运算符更加简洁。

(四)深拷贝

浅拷贝只在根属性上在堆内存中创建了一个新的的对象,复制了基本类型的值,但是复杂数据类型也就是对象则是拷贝相同的地址。

而深拷贝则是将一个对象从内存中完整的拷贝一份出来,从堆内存中开辟一个新的区域存放新对象,且修改新对象不会影响原对象。

JSON.stringify

JSON.stringify()是目前开发过程中最常用的深拷贝方式,原理是把一个对象序列化成为一个JSON字符串,将对象的内容转换成字符串的形式再保存在内存中,再用JSON.parse()反序列化将JSON字符串变成一个新的对象。

举个例子:

var obj = {
  name: '撩课',
  age: 18,
  friends: ['小花', '小黑'],
  goodF: {
    name: '小撩',
    age: 19,
    address: '上海',
    pets: [{name: '土豆'}, {name: '马铃薯'}]},
  bir: new Date()
};

var newObj = JSON.parse(JSON.stringify(obj));
obj.goodF.pets[0].name = '旺财';
console.log(newObj);
console.log(obj);

使用JSON.stringify实现深拷贝有几点要注意:

1)拷贝的对象的值中如果有函数,undefined,symbol,经过JSON.stringify()序列化后的JSON字符串中这个键值对会消失;

无法拷贝不可枚举的属性,无法拷贝对象的原型链
3)拷贝Date引用类型会变成字符串

4)拷贝RegExp引用类型会变成空对象

对象中含有NaN、Infinity和-Infinity,则序列化的结果会变成null

递归实现深拷贝

具体实现如下:

/**
 * 辅助函数, 判定是否是对象
 * @param obj
 * @returns {boolean}
 */
function isObj(obj) {
  return obj instanceof Object;
}

/**
 * 深拷贝fromObj面的所有属性/值, 到toObj对象里面
 * @param fromObj 拷贝对象
 * @param toObj  目标对象
 */
function deepCopyObj2NewObj(fromObj, toObj) {
  for (var key in fromObj) {
    if(fromObj.hasOwnProperty(key)){
      var fromValue = fromObj[key];
      // 如果是值类型,那么就直接拷贝赋值
      if (!isObj(fromValue)) {
        toObj[key] = fromValue;
      } else {
        // 如果是引用类型,那么就再调用一次这个方法,
        // 去内部拷贝这个对象的所有属性
        // fromValue是什么类型, 创建一个该类型的空对象
        var tmpObj = new fromValue.constructor;

        // console.log(tmpObj);
        // debugger;
        deepCopyObj2NewObj(fromValue, tmpObj);
        toObj[key] = tmpObj;
      }
    }
  }
}

(五)总结

1)在日常开发中一般并不需要拷贝很多特殊的引用类型,深拷贝对象使用JSON.stringify是最直接和简单的方法。

2)实现一个完整的深拷贝是非常复杂的,需要考虑到很多边界情况。对于特殊的引用类型有拷贝需求的话,建议借助第三方完整的库。

以上所述是小编给大家介绍的JS中实现浅拷贝和深拷贝的代码详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

相关文章

  • 简介alert()与console.log()的不同

    简介alert()与console.log()的不同

    alert()和console.log()在程序中经常会用到,大家知道他们的区别吗,接下来,通过本文给大家介绍alert()与console.log()的不同,需要的朋友可以参考下
    2015-08-08
  • 深入理解JavaScript中的尾调用(Tail Call)

    深入理解JavaScript中的尾调用(Tail Call)

    尾调用(Tail Call)是函数式编程的一个重要概念,下面这篇文章主要给大家深入的介绍了关于JavaScript中尾调用的相关资料,文中介绍的非常详细,相信对大家具有一定的参考价值,有需要的朋友们下面来一起看看吧。
    2017-02-02
  • JS实现屏蔽shift,Ctrl,alt等功能键的方法

    JS实现屏蔽shift,Ctrl,alt等功能键的方法

    这篇文章主要介绍了JS实现屏蔽shift,Ctrl,alt等功能键的方法,涉及javascript针对键盘按键的获取与操作技巧,需要的朋友可以参考下
    2015-06-06
  • javascript循环变量注册dom事件 之强大的闭包

    javascript循环变量注册dom事件 之强大的闭包

    是在循环过程过this被改变,注册过的事件也被随之改变,找到了一种解决方法
    2010-09-09
  • 简单的JS多重继承示例

    简单的JS多重继承示例

    JS多重继承实例,js新手学习资料
    2008-03-03
  • js 静态HTML表格排序功能实现

    js 静态HTML表格排序功能实现

    对于对于一些表格按价格 等进行排序,方便用户对当前页面的高低价格排序,用户体验性好
    2009-02-02
  • JavaScript编写的网页小游戏,很给力

    JavaScript编写的网页小游戏,很给力

    这篇文章主要介绍了JavaScript编写的网页小游戏,附上全部代码供大家查看,实现了网页的小游戏页面,需要的朋友可以参考下
    2017-08-08
  • JS实现图片高亮展示效果实例

    JS实现图片高亮展示效果实例

    这篇文章主要介绍了JS实现图片高亮展示效果的方法,实例分析了JavaScript响应鼠标事件动态操作页面元素样式的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-11-11
  • 全面解析Bootstrap中Carousel轮播的使用方法

    全面解析Bootstrap中Carousel轮播的使用方法

    这篇文章主要为大家详细的介绍了Bootstrap中Carousel的使用方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-06-06
  • JS操作JSON方法总结(推荐)

    JS操作JSON方法总结(推荐)

    JSON是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式。本文给大家介绍JS操作JSON方法总结,非常不错具有参考借鉴价值,感兴趣的朋友一起学习吧
    2016-06-06

最新评论