js实现对象或者数组深拷贝
今天遇到个问题,就是vue绑定的数组在push中所有的数组都会跟着改变。这个主要是因为 JavaScript中对象或者数组等引用类型,直接拷贝,改变一个另外一个也会改变;
有个简单的方法就是先转换为字符串再转换为json
var arr = [,,];
var arr1 = arr;
arr1.push();
console.log(arr); //[1,2,3,4]
console.log(arr1);//[1,2,3,4]
上面这是没转换的.
1、通过JSON.stringfy()和JSON.parse()转换
var arr = [,,]; var arr1 = JSON.stringify(arr);
var arr2 = JSON.parse(arr1);
arr2.push();
console.log(arr); //[1, 2, 3]
console.log(arr1);//字符串[1,2,3]
console.log(arr2);//[1, 2, 3, 4]
这种方式也会有一下几点的不足:
1、会忽略 undefined
2、会忽略 symbol
3、不能序列化函数
4、不能解决循环引用的对象
5、不能正确处理new Date()
6、不能处理正则
2、通过递归
function deepCopy(obj) {
if(typeof obj!='object'){
return obj
}
let newObj=obj instanceof Array ? []:{ };
for(let i in obj){
if(Object.prototype.hasOwnProperty.call(obj,i)){
type[i]=typeof obj[i]=='object' ? deep(obj[i]):obj[i]
} }
return newObj
}
至于为什么要深拷贝,可以参考js 数据类型及检测
js实现对象或者数组深拷贝的更多相关文章
- 前端总结·基础篇·JS(二)数组深拷贝、去重以及字符串反序和数组(Array)
目录 这是<前端总结·基础篇·JS>系列的第二篇,主要总结一下JS数组的使用.技巧以及常用方法. 一.数组使用 1.1 定义数组 1.2 使用数组 1.3 类型检测 二.常用技巧 2.1 ...
- js获取对象、数组的实际长度,元素实际个数
/*获取对象.数组的长度.元素个数 *@param obj 要计算长度的元素,可以为object.array.string */ function count(obj){ var objType = ...
- JS中对象与数组(大括号{}与中括号[])
一.{ } 大括号,表示定义一个对象,大部分情况下要有成对的属性和值,或是函数. 如:var LangShen = {"Name":"Langshen",&qu ...
- JS的对象、数组等处理方法:解构
对象方法简写 你可以在定义方法时省略function和 :: const obj = { insteadOfThis: function() { // do stuff }, youCanDoThis ...
- JS遍历对象和数组总结
在日常工作过程中,我们对于javaScript遍历对象.数组的操作是十分的频繁的,今天把经常用到的方法总结一下! 一.遍历对象 1.使用Object.keys()遍历 返回一个数组,包括对象自身的(不 ...
- JS去除对象或数组中的空值('',null,undefined,[],{})
javascript去掉对象或数组中的'',null,undefined,[],{}.思路就是创建一个新的空对象,然后对传入的对象进行遍历,只把符合条件的属性返回,保留有效值,然后就相当于把空值去掉了 ...
- JS遍历对象或者数组
一.纯js实现 <script> var obj = {"player_id":"GS001","event_id":" ...
- js遍历对象的数组
遍历数组: 1.js关键for遍历 2.jquery提供each功能 ----------------------------------- $.each(array, function(){ ...
- [Web 前端] 025 js 的对象、数组和数学对象
1. Javascript 对象 1.1 创建对象 1.1.1 使用原始的方式创建内置对象 var myObject = new Object(); myObject.name = "lij ...
随机推荐
- __FILE__,__LINE__,__func__ 真好用,DEBUG利器啊!
我是不喜欢用类似VC下的F5,F10.曾经很喜欢用.被代码逻辑逼的没招了.所以不喜欢用了. 比如,错误是根据动态数据,产生的行为错误,无论是该写的未写,还是不该写的写了.指针跑飞什么等等,无非就是上述 ...
- emacs设置tab缩进
这两天使用Emacs自带的JavaScriptMode时,发现与其它编辑器下缩进不同,而且用emacs重新缩进对齐后,再用其它的编辑器打时缩进却乱掉了.分析应该是Tab缩进的问题,在.emacs中增加 ...
- cygwin Could not create directory '/home/Administrator/.ssh'
在cygwin下运行: ssh-keygen -C "634772208@qq.com" -t rsa 时,出现如下错误: cygwin Could not create dire ...
- 洛谷 P4660 & bzoj 1168 [ Baltic OI 2008 ] 手套 —— 分析+单调栈
题目:https://www.luogu.org/record/show?rid=12702916 https://www.lydsy.com/JudgeOnline/problem.php?id=1 ...
- bzoj4247挂饰——DP
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4247 就是01背包: 把挂钩数限制在n以内,因为不需要更多,而这会带来一些问题,就是有很多挂 ...
- SQL Server中查询CPU占用高的SQL语句
SQL Server中查询CPU占用高的情况,会用到sys.sysprocesses ,dm_exec_sessions ,dm_exec_requests 一.查看当前的数据库用户连接有多少 USE ...
- POJ2823(优先队列)
Sliding Window Time Limit: 12000MS Memory Limit: 65536K Total Submissions: 50738 Accepted: 14590 ...
- Code-NFine:NFine权限控制
ylbtech-Code-NFine:NFine权限控制 1.返回顶部 1. NFine框架研究 1.前台业务操作 1.1 系统菜单配置方法 1.2 菜单管理配置方法 1.2.1 按钮管理 1.2.2 ...
- Qt5.7不能加载MySql驱动问题.(需要重新编译驱动)
转自:http://blog.csdn.net/qq_28851503/article/details/52422302 首先贴上我遇到的问题,如下: QSqlDatabase: QMYSQL dri ...
- java 内存管理机制
垃圾收集算法 1.标记清理算法:效率不高(标记和清理过程效率都不高).会形成内存碎片 2.复制算法:把内存分为两部分,当进行回收时,把使用部分的存活对象复制到未使用部分,然后两部分内存角色互换(一个为 ...