js中的深浅拷贝问题简析


Posted in Javascript onMay 10, 2019

前言

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

那么这就涉及到了 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 火狐(firefox)不显示本地图片问题解决
Jul 05 Javascript
jQuery 菜单随滚条改为以定位方式(固定要浏览器顶部)
May 24 Javascript
javascript-简单的计算器实现步骤分解(附图)
May 30 Javascript
js正则表达式验证邮件地址
Nov 12 Javascript
使用jQuery判断浏览器滚动条位置的方法
May 30 Javascript
Angularjs手动解析表达式($parse)
Oct 12 Javascript
Vue.js:使用Vue-Router 2实现路由功能介绍
Feb 22 Javascript
Vue.use源码分析
Apr 22 Javascript
基于vue监听滚动事件实现锚点链接平滑滚动的方法
Jan 17 Javascript
用POSTMAN发送JSON格式的POST请求示例
Sep 04 Javascript
vue-路由精讲 二级路由和三级路由的作用
Aug 06 Javascript
vue实现滑动解锁功能
Mar 03 Vue.js
解决cordova+vue 项目打包成APK应用遇到的问题
May 10 #Javascript
详解jQuery如何实现模糊搜索
May 10 #jQuery
JS匿名函数内部this指向问题详析
May 10 #Javascript
详解关于React-Router4.0跳转不置顶解决方案
May 10 #Javascript
Vue使用watch监听一个对象中的属性的实现方法
May 10 #Javascript
微信小程序获取用户信息并保存登录状态详解
May 10 #Javascript
jsonp实现百度下拉框功能的方法分析
May 10 #Javascript
You might like
PHP生成静态页
2006/11/25 PHP
smarty获得当前url的方法分享
2014/02/14 PHP
PHP检测字符串是否为UTF8编码的常用方法
2014/11/21 PHP
PHP生成随机字符串(3种方法)
2015/09/25 PHP
PHP内核学习教程之php opcode内核实现
2016/01/27 PHP
thinkPHP5框架设置404、403等http状态页面的方法
2018/06/05 PHP
PHP下载文件函数与用法示例
2019/09/27 PHP
laravel validate 设置为中文的例子(验证提示为中文)
2019/09/29 PHP
中国地区三级联动下拉菜单效果分析
2012/11/15 Javascript
js控制href内容的连接内容的变化示例
2014/04/30 Javascript
jQuery中dom元素上绑定的事件详解
2015/04/24 Javascript
jQuery的基本概念与高级编程
2015/05/14 Javascript
表单验证插件Validation应用的实例讲解
2015/10/10 Javascript
JS动态创建元素的两种方法
2016/04/20 Javascript
在Javascript操作JSON对象,增加 删除 修改的简单实现
2016/06/02 Javascript
js中遍历Map对象的方法
2016/07/27 Javascript
解决Window10系统下Node安装报错的问题分析
2016/12/13 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(一)
2017/01/21 Javascript
iscroll动态加载数据完美解决方法
2017/07/18 Javascript
CheckBox多选取值及判断CheckBox选中是否为空的实例
2017/10/31 Javascript
快速处理vue渲染前的显示问题
2018/03/05 Javascript
详解Vue2.0配置mint-ui踩过的那些坑
2018/04/23 Javascript
JavaScript实现美化滑块效果
2019/05/17 Javascript
JavaScript组合模式---引入案例分析
2020/05/23 Javascript
跟老齐学Python之编写类之三子类
2014/10/11 Python
Python读取Excel的方法实例分析
2015/07/11 Python
Python文本相似性计算之编辑距离详解
2016/11/28 Python
python绘制条形图方法代码详解
2017/12/19 Python
python爬取Ajax动态加载网页过程解析
2019/09/05 Python
利用pandas将非数值数据转换成数值的方式
2019/12/18 Python
python输入中文的实例方法
2020/09/14 Python
pycharm 实现调试窗口恢复
2021/02/05 Python
表决心的诗句大全
2014/03/11 职场文书
基层党组织整改方案
2014/10/25 职场文书
大学宣传委员竞选稿
2015/11/19 职场文书
青少年法制教育心得体会
2016/01/14 职场文书