今天遇到个问题,就是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、通过递归

下面是简单的实现,更加完善的有Lodash这个库,能满足各种使用场景。
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实现对象或者数组深拷贝的更多相关文章

  1. 前端总结·基础篇·JS(二)数组深拷贝、去重以及字符串反序和数组(Array)

    目录 这是<前端总结·基础篇·JS>系列的第二篇,主要总结一下JS数组的使用.技巧以及常用方法. 一.数组使用 1.1 定义数组 1.2 使用数组 1.3 类型检测 二.常用技巧 2.1 ...

  2. js获取对象、数组的实际长度,元素实际个数

    /*获取对象.数组的长度.元素个数 *@param obj 要计算长度的元素,可以为object.array.string */ function count(obj){ var objType = ...

  3. JS中对象与数组(大括号{}与中括号[])

    一.{ } 大括号,表示定义一个对象,大部分情况下要有成对的属性和值,或是函数. 如:var LangShen = {"Name":"Langshen",&qu ...

  4. JS的对象、数组等处理方法:解构

    对象方法简写 你可以在定义方法时省略function和 :: const obj = { insteadOfThis: function() { // do stuff }, youCanDoThis ...

  5. JS遍历对象和数组总结

    在日常工作过程中,我们对于javaScript遍历对象.数组的操作是十分的频繁的,今天把经常用到的方法总结一下! 一.遍历对象 1.使用Object.keys()遍历 返回一个数组,包括对象自身的(不 ...

  6. JS去除对象或数组中的空值('',null,undefined,[],{})

    javascript去掉对象或数组中的'',null,undefined,[],{}.思路就是创建一个新的空对象,然后对传入的对象进行遍历,只把符合条件的属性返回,保留有效值,然后就相当于把空值去掉了 ...

  7. JS遍历对象或者数组

    一.纯js实现 <script> var obj = {"player_id":"GS001","event_id":" ...

  8. js遍历对象的数组

    遍历数组: 1.js关键for遍历 2.jquery提供each功能 ----------------------------------- $.each(array, function(){     ...

  9. [Web 前端] 025 js 的对象、数组和数学对象

    1. Javascript 对象 1.1 创建对象 1.1.1 使用原始的方式创建内置对象 var myObject = new Object(); myObject.name = "lij ...

随机推荐

  1. __FILE__,__LINE__,__func__ 真好用,DEBUG利器啊!

    我是不喜欢用类似VC下的F5,F10.曾经很喜欢用.被代码逻辑逼的没招了.所以不喜欢用了. 比如,错误是根据动态数据,产生的行为错误,无论是该写的未写,还是不该写的写了.指针跑飞什么等等,无非就是上述 ...

  2. emacs设置tab缩进

    这两天使用Emacs自带的JavaScriptMode时,发现与其它编辑器下缩进不同,而且用emacs重新缩进对齐后,再用其它的编辑器打时缩进却乱掉了.分析应该是Tab缩进的问题,在.emacs中增加 ...

  3. cygwin Could not create directory '/home/Administrator/.ssh'

    在cygwin下运行: ssh-keygen -C "634772208@qq.com" -t rsa 时,出现如下错误: cygwin Could not create dire ...

  4. 洛谷 P4660 & bzoj 1168 [ Baltic OI 2008 ] 手套 —— 分析+单调栈

    题目:https://www.luogu.org/record/show?rid=12702916 https://www.lydsy.com/JudgeOnline/problem.php?id=1 ...

  5. bzoj4247挂饰——DP

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4247 就是01背包: 把挂钩数限制在n以内,因为不需要更多,而这会带来一些问题,就是有很多挂 ...

  6. SQL Server中查询CPU占用高的SQL语句

    SQL Server中查询CPU占用高的情况,会用到sys.sysprocesses ,dm_exec_sessions ,dm_exec_requests 一.查看当前的数据库用户连接有多少 USE ...

  7. POJ2823(优先队列)

    Sliding Window Time Limit: 12000MS   Memory Limit: 65536K Total Submissions: 50738   Accepted: 14590 ...

  8. Code-NFine:NFine权限控制

    ylbtech-Code-NFine:NFine权限控制 1.返回顶部 1. NFine框架研究 1.前台业务操作 1.1 系统菜单配置方法 1.2 菜单管理配置方法 1.2.1 按钮管理 1.2.2 ...

  9. Qt5.7不能加载MySql驱动问题.(需要重新编译驱动)

    转自:http://blog.csdn.net/qq_28851503/article/details/52422302 首先贴上我遇到的问题,如下: QSqlDatabase: QMYSQL dri ...

  10. java 内存管理机制

    垃圾收集算法 1.标记清理算法:效率不高(标记和清理过程效率都不高).会形成内存碎片 2.复制算法:把内存分为两部分,当进行回收时,把使用部分的存活对象复制到未使用部分,然后两部分内存角色互换(一个为 ...