JS对象和数组深浅拷贝总结②
在实际开发中遇到过太多次深拷贝浅拷贝的问题。总结一下~
这是之前写过的一篇文章,解决浅拷贝深拷贝的问题只说了一种方法,今天来补充一下。
介绍深拷贝和浅拷贝都在上一篇文章里介绍过了,在上一篇文章里只写了一个针对于数组的一种深拷贝,今天总结一下 js中对象和数组的深浅拷贝。具体的场景已经在上一篇文章里说明了。
这里废话一下上一篇文章中出现的问题:一个表格数据,可以点击编辑弹出表单数据,修改数据后点击取消或者关闭表单时,表格的数据会变空,解决的思路就是当我点击表单显示的时候,定义一个中间变量存储当前表单的数据。点击取消按钮或者关闭表单时,把之前定义的这个中间变量重新赋值给当前的表单数据。就可以解决啦~
当然这个问题还是由于对象或者数组的深浅拷贝的问题。所以今天来总结一下对象和数组的深拷贝和浅拷贝的常用方法。
首先来介绍一下对象的浅拷贝
1.最传统的浅拷贝
var gogo = {
name: '小明',
}
var out = {}
out = gogo
console.log(gogo) //{name: "小明"}
console.log(out) //{name: "小明"}
out.name = '小花花'
console.log(gogo) //{name: "小花花"}
console.log(out) //{name: "小花花"}
当我改变out的值的时候gogo里也改变了~
2.Object.assign()
这个方法是es6的新方法,用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target)。目标对象就是Object.assign(),括号里的第一个参数。
注意,Object.assign可以用来处理数组,但是会把数组视为对象。
说完了对象的浅拷贝说一下深拷贝
1.转换成json再转换成对象实现对象的完全深拷贝(此方法适用于数组的深拷贝,也是比较简单快速的深拷贝方法)
var out= {
name: '小花花',
sex: 'man',
old: '18'
}
var gogo= JSON.parse(JSON.stringify(out))
这种方式目前是最受推崇的完全深拷贝写法。
但是这样容易造成数据丢失,因为如果对象中含有Date, function, undefined, Infinity, RegExp, Map, Set, Blob, FileList, ImageData, sparse Array, Typed Array等复杂对象的话,转化成json再转回来后这些数据都丢失了。。。
2.扩展运算符
var out= {
name: '小花花',
sex: 'man',
old: '18'
}
var { ...gogo} = out
console.log(gogo) //{name: "小花花", sex: "man", old: "18"}
console.log(out) //{name: "小花花", sex: "man", old: "18"}
out.name = '大花花花花花'
console.log(gogo) //{name: "小花花", sex: "man", old: "18"}
console.log(out) // { name: "大花花花花花", sex: "man", old: "18" }
介绍完对象的深浅拷贝之后接下来说一下数组
- concat() slice() 实现一维数组的深拷贝,多维数组不行。
var array1 = ['a',1,true,{name:'lei',age:18}]; //concat() slice() 实现浅拷贝 var array2 = array1.concat() //修改拷贝后的数据 array2[0] = 'b'; //array1[0]是原始数据类型 所以是直接赋值的 array2[3].name = 'zhang'; //array1[3]是对象数据类型 所以拷贝的是对象的引用,其实还是和原数组使用同一对象 console.log(array1); // ['a',1,true,{name:'zhang',age:18}]
2.递归(目前有点难度所以以后再补充) 深拷贝
3.针对于多维数组的jq方法 深拷贝
jQuery.extend()
JS对象和数组深浅拷贝总结②的更多相关文章
- 关于:1.指针与对象;2.深浅拷贝(复制);3.可变与不可变对象;4.copy与mutableCopy的一些理解
最近对深浅拷贝(复制)做了一些研究,在此将自己的理解写下来,希望对大家有所帮助.本人尚处在摸索阶段,希望各位予以指正. 本文包括如下方向的探索: 1.指针与对象: 2.深/浅拷贝(复制): 3.可变/ ...
- JS基本类型-引用类型-深浅拷贝
在JavaScript中变量包含两种类型的值:一种是基本类型,一种是引用类型. 基本类型包括:数值.字符串.null.undefined.布尔值引用类型包括:对象.数组.函数.正则… 补充: null ...
- JS对象和数组在谷歌浏览器中引用存储的表现
大家都知道JS的数据分为基本类型和引用类型.具体什么不说了,今天主要说说对象和数组作为引用类型在谷歌浏览器中的表现. 首先,问题是这么发现的.我在控制台使用console打印了一个数组,然后对数组进行 ...
- JS的赋值与深浅拷贝实例
赋值 基本类型: 传值,在栈内存中的数据发生数据变化的时候,系统会自动为新的变量分配一个新的之值在栈内存中,两个变量相互独立,互不影响的 引用类型: 传址,只改变指针的指向,指向同一个对象,两个变量相 ...
- js 对象,数组,字符串,相互转换
1:对象转换数组 let obj = {'val1':1, 'val2':2, 'val3':3, 'val4':4}; var arr = [] for (let i in obj) { //取键 ...
- js对象及元素复制拷贝
1.数组及对象拷贝: 浅拷贝var b=$.extend(false,{},a);//对象浅拷贝 var a={aa:111,bb:{bb1:22}}; var b=$.extend(false,{} ...
- 检测js对象是不是数组类型?
面试时候被人问如何检测一个未知变量是不是数组类型,丢脸啊,老祖宗的脸都丢没了,这都不会,回家啃书本去吧!!! var a = [];方法一:Array.isArray([]) //true type ...
- js对象、数组转换字符串
对象转换成字符串需要使用toString()方法. 1 var a = function(){ 2 console.log(111); 3 }; 4 var b = a.toString(); 5 c ...
- js对象跟数组多层嵌套,检测没有此数据就添加有则不添加以及超过限制条件删除操作
例如你需要这样格式的数据: [{"name":"合肥市","arrey":[{"lat":"31.862323 ...
随机推荐
- csps模拟9495凉宫春日的忧郁,漫无止境的八月,简单计算,格式化,真相题解
题面:https://www.cnblogs.com/Juve/articles/11767239.html 94,95的T3都没改出来,是我太菜了... 凉宫春日的忧郁: 比较$x^y$和$y!$的 ...
- Java笔记 - Socket编程
两个Java应用程序可以通过一个双向的网络通讯连接实现数据交换,这个双向链路的一端称为一个Socket.java.net包中定义的两个类Socket和ServerSocket,分别用来实现双向链路的c ...
- django中写form表单时csrf_token的作用
之前在学习django的时候,在template中写form时,出现错误.百度,google后要加{% csrf_token %}才可以,之前一直也没研究,只是知道要加个这个东西,具体是什么也不明白. ...
- 《代码整洁之道》ch5~ch9读书笔记 PB16110698(~3.15) 第二周
<代码整洁之道>ch5~ch9读书笔记 本周我阅读了本书的第5~9章节,进一步了解整洁代码需要注意的几个方面:格式.对象与数据结构.错误处理.边界测试.单元测试和类的规范.以下我将分别记录 ...
- druapl-note1 本地开发上传模块不提示Ftp的警告
刚安装完drupal之后,通过drupalxray 看到其它drupal网站安装的一些模块,下载好模块并安装时,提示需要输入Ftp信息. 但是本地开发不输入Ftp信息的(也不清楚自己的系统是否开启Ft ...
- Spring Boot 配置 Security 密码加密
依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spri ...
- Docker配置JDK1.8
1.安装Docker(菜鸟教程有) https://www.runoob.com/docker/centos-docker-install.html 2.docker下载centos镜像(用作配置jd ...
- LinkedHashMap笔记
一.最基本元素存储单元 /** * HashMap.Node subclass for normal LinkedHashMap entries. */ static class Entry<K ...
- Apache Flink 1.9.0版本新功能介绍
摘要:Apache Flink是一个面向分布式数据流处理和批量数据处理的开源计算平台,它能够基于同一个Flink运行时,提供支持流处理和批处理两种类型应用的功能.目前,Apache Flink 1.9 ...
- Ubuntu usb设备端口号绑定
1.将串口设备插入USB口,通过lsusb查看端口信息.例如: ID 1a86:7523 表示usb设备的ID(这个ID由芯片制造商设置,可以唯一表示该设备) 1a86 usb_device_desc ...