脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js深浅拷贝问题

js中的深浅拷贝问题简析

 更新时间：2019年05月10日 11:33:32   作者：见面那天有  
这篇文章主要给大家介绍了关于js中的深浅拷贝问题的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用js具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧

前言

在开发过程中，偶尔会遇到这种场景，拿到一个数据后，你打算对它进行处理，但是你又希望拷贝一份副本出来，方便数据对比和以后恢复数据。

那么这就涉及到了 JS 中对数据的深浅拷贝问题，所谓深浅拷贝，浅拷贝的意思就是，你只是复制了对象数据的引用，并没有把内存里的值另外复制一份，那么深拷贝就是把值完整地复制一份新的值。

下面这篇文章就对js中的深浅拷贝进行了深入的讲解，下面话不多说了，来一起看看详细的介绍吧

问题描述：

因为在JavaScript中对象在赋值中存储的是对象的地址（指针），所以会造成对象类型在复制过程中只复制对象的地址，从而导致以下问题

 var people = {
 name: "小明"
 }
var peoplea = people;
peoplea.name = "小白";
console.log(peoplea.name)//小白
console.log(people.name)//小白

我们本来期望只改变peoplea的name，现在连people的name都改变了。根据情况的不同，可使用深拷贝或浅拷贝来解决。

解决方法：

我们在实现深浅拷贝之前，我们先看一看深、浅拷贝、赋值这三种的区别：

1、赋值

改变新对象时不管第几层，老对象都会随着变化。

 var people = {
 name: "小明",
 act: ["吃饭","睡觉"]
}
var people1 = people;//赋值
people1.name = "小红";
 people1.act[1] = "打游戏";
console.log(people.name);//小红
console.log(people.act);//["吃饭", "打游戏"]

2、浅拷贝

改变新对象第一层基本数据类型时，老对象不变。有子对象时，改变子对象，老对象会随着变化。

 var people = {
  name: "小明",
  act: ["吃饭", "睡觉"]
}
var people1 = Object.assign({}, people);//浅拷贝
people1.name = "小红";
people1.act[1] = "打游戏";
console.log(people.name);//小明
console.log(people.act);// ["吃饭", "打游戏"]

3、深拷贝

不管改变新对象第几层，老对象都不会随之改变。

var people = {
  name: "小明",
  act: ["吃饭", "睡觉"]
}
var people1 = JSON.parse(JSON.stringify(people));//深拷贝
people1.name = "小红";
people1.act[1] = "打游戏";
console.log(people.name);//小明
console.log(people.act);// ["吃饭", "睡觉"]

总结一下就是：

第一层为基本数据类型 多于一层含有子对象
赋值 新老一起改变 新老一起改变
浅拷贝 新对象改变，老对象不变 新老一起改变
深拷贝 新对象改变，老对象不变 新对象改变，老对象不变

了解完了区别，下面介绍实现深浅拷贝的几个方法。

一、浅拷贝

1、Object.assign（）

官方对这个函数的介绍是：Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。实际上就是会把属性中的简单数据类型直接复制，而对于对象属性，只会拷贝地址（指针）,上边介绍区别时用的就是这个；

var people1 = Object.assign({}, people);

需要注意的是，如果对象没有子对象，Object.assign（）实现的就是深拷贝。

2、展开运算符（ES6新增）

var people = {
  name: "小明",
  act: ["吃饭", "睡觉"]
}
var people1 = {...people};
people1.name = "小红";
people1.act[1] = "打游戏";
console.log(people.name);//小明
console.log(people.act);// ["吃饭", "打游戏"]

3、自己写

 var people = {
  name: "小明",
  act: ["吃饭", "睡觉"]
 }
 var people1 = shallowCopy(people);
 people1.name = "小红";
 people1.act[1] = "打游戏";
 console.log(people.name);//小明
 console.log(people.act);// ["吃饭", "打游戏"]
 function shallowCopy(obj) {
  var res = {};
  for (var index in obj) {
  if (obj.hasOwnProperty(index)) {//不复制原型链上的属性
   res[index] = obj[index];
  }
  }
  return res;
 }

二、深拷贝

1、JSON.parse(JSON.stringify(obj))

上边介绍区别时用的就是这个：

var people1 = JSON.parse(JSON.stringify(people));//深拷贝

这个方法比较简便但也存在问题

1、不能复制对象中的函数。

2、会忽略对象中的undefind。

2、lodash函数

官方介绍是：lodash是一个一致性、模块化、高性能的 JavaScript 实用工具库。官网是
www.lodashjs.com/ ，我推荐用其中的_.cloneDeep(value)方法。

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

还有自己去写一个递归，但是需要考虑的东西较多，不再赘述，也有用jq的$.extend（）方法实现的，但是性能不好，这里提一下。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对脚本之家的支持。

您可能感兴趣的文章:

相关文章

  • javascript实现标签切换代码示例

    javascript实现标签切换代码示例

    本文给大家分享的事tab切换的两段js，均可实现标签切换功能，大家根据自己的需求自由选择
    2016-05-05
  • js中for in的用法示例解析

    js中for in的用法示例解析

    使用js的朋友对其中for in的并不陌生吧，下面用示例为大家介绍下其具体使用方法
    2013-12-12
  • JavaScript实现美化滑块效果

    JavaScript实现美化滑块效果

    这篇文章主要为大家详细介绍了JavaScript实现美化滑块效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-05-05
  • js获取指定时间的前几秒

    js获取指定时间的前几秒

    本文主要介绍了根据一张图片的拍摄时间获取到这个时间前二后三的一个五秒钟的视频信息的实例方法。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-04-04
  • 轻松实现js图片预览功能

    轻松实现js图片预览功能

    这篇文章帮助大家轻轻松松实现js图片预览功能，主要介绍了纯JS实现本地图片预览的方法，具有一定参考借鉴价值,需要的朋友可以参考下
    2016-01-01
  • setTimeout在类中使用的问题！

    setTimeout在类中使用的问题！

    setTimeout在类中使用的问题！...
    2007-04-04
  • Javascript实现视频轮播在pc端与移动端均可

    Javascript实现视频轮播在pc端与移动端均可

    用Javascript实现视频轮播，毕竟是客户的需求吗？所以尽量实现下,下面有个实现视频轮播的示例，pc端与移动端均可以实现，感兴趣的朋友可以了解下
    2013-09-09
  • 浅谈JavaScript作用域和闭包

    浅谈JavaScript作用域和闭包

    本篇文章主要介绍了JavaScript作用域和闭包，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • 浅谈webpack性能榨汁机(打包速度优化)

    浅谈webpack性能榨汁机(打包速度优化)

    这篇文章主要介绍了浅谈webpack性能榨汁机(打包速度优化)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01
  • uniapp常用路由跳转的几种方式(navigateTo、redirectTo...)

    uniapp常用路由跳转的几种方式(navigateTo、redirectTo...)

    uni-app有两种方式进行路由跳转,下面这篇文章主要给大家介绍了关于uniapp常用路由跳转的几种方式(navigateTo、redirectTo...),文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-11-11

最新评论