在前端开发的某些逻辑中,经常需要对现有的js对象创建副本,避免污染原始数据的情况。

如果是简单的一维数组对象,可以使用两个原生方法:

1、splice

var arr1 = ['a', 'b', 'c'];
var arr2 = arr1.splice(0);
console.info(arr1);
arr2[1] = 'x';
console.info(arr1);

2、concat

var arr1 = ['a', 'b', 'c'];
var arr2 = [].concat(arr1);
console.info(arr1);
arr2[1] = 'x';
console.info(arr1);

那如果是多层级的数组对象,再用上面的两个方法就有问题了

虽然最上层会创建副本,但每层下面的数据还是会引用原来的对象

对于这种情况,可以利用jquery的extend方法进行深度拷贝:

3、$.extend

var arr1 = [
{ 'id': 1, 'name': 'a' },
{ 'id': 2, 'name': 'b' },
{ 'id': 3, 'name': 'c' }
]
var arr2 = $.extend(true, {}, arr1);
console.info(arr1);
arr2[1].name = 'x';
console.info(arr1);

另外,$.extend也能对任何js对象创建深度拷贝,需要注意的是第一个参数要传入true,否则只是拷贝第一层属性

其实在实际开发中,$.extend还可以做的更多

javascript中对数组对象的深度拷贝的更多相关文章

  1. JavaScript中Array(数组) 对象

    JavaScript中Array 对象 JavaScript中创建数组有两种方式 (一)使用直接量表示法: var arr4 = []; //创建一个空数组var arr5 = [20]; // 创建 ...

  2. JavaScript 中有关数组对象的方法

    JS 处理数组多种方法 js 中的数据类型分为两大类:原始类型和对象类型. 原始类型包括:数值.字符串.布尔值.null.undefined 对象类型包括:对象即是属性的集合,当然这里又两个特殊的对象 ...

  3. javascript中的数组对象

    1.创建数组的三种方式: 1.1 var 数组名=[元素1,元素2,元素3...]; 例如: var arr1=[1,2,3,4]; 1.2 var 数组名=new Array(元素1,元素2,元素3 ...

  4. JavaScript中的数组对象遍历、读写、排序等操作

    以百度前端技术学院的js任务三为例,复习一下关于js数组的几个点 题目 <!DOCTYPE> <html> <head> <meta charset=&quo ...

  5. C#中List<T>对象的深度拷贝问题

    一.List<T>对象中的T是值类型的情况(int 类型等) 对于值类型的List直接用以下方法就可以复制: List<T> oldList = new List<T&g ...

  6. javascript中的数组扩展(一)

     javascript中的数组扩展(一) 随着学习的深入,发现需要学习的关于数组的内容也越来越多,后面将会慢慢归纳,有的是对前面的强化,有些则是关于前面的补充. 一.数组的本质    数组是按照次序排 ...

  7. 前端开发:Javascript中的数组,常用方法解析

    前端开发:Javascript中的数组,常用方法解析 前言 Array是Javascript构成的一个重要的部分,它可以用来存储字符串.对象.函数.Number,它是非常强大的.因此深入了解Array ...

  8. javascript中关于数组的一些鄙视题

    一.判断一个数组中是否有相同的元素 /* * 判断数组中是否有相同的元素的代码 */ // 方案一 function isRepeat1(arrs) { if(arrs.length > 0) ...

  9. Javascript中判断数组的正确姿势

    在 Javascript 中,如何判断一个变量是否是数组? 最好的方式是用 ES5 提供的 Array.isArray() 方法(毕竟原生的才是最屌的): var a = [0, 1, 2]; con ...

随机推荐

  1. Unity 发布到ios平台笔记

    [ProjectName] was compiled with optimization - stepping may behave oddly; variables may not be avail ...

  2. 写一个有字符界面的ssh链接工具

    大概的样子 这是大致的样子- 写之前想说的 因为个人工作的的电脑是deepin系统的,系统本身的命令行非常好用,用第三方的ssh工具用不习惯,就想自己写一个. shell脚本是第一次写,写的不是很好, ...

  3. 1 springboot创建项目

    文章采用idea工具进行springboot项目创建 1点击 New Project 选择[Spring Initializr] 选择Jdk版本其他默认即可 点击Next 2添加项目信息 文章即使用默 ...

  4. before(),after(),prepend(),append()等新DOM方法简介

    一.DOM API也在不断升级 web前端标准一直在不断升级,比方说,说了很多年的HTML5.CSS3,以及天天见的ES6. 然后,似乎就没有然后了.实际上,除了HTML5/CSS3/ES6+,关于D ...

  5. Go 语言实现 HTTP 层面的反向代理

    最近对 Go 语言的反向代理使用得偏多,其实在大概两年前就写过 TCP 层面的代理,而且那时也是用的 Go 语言,不同之处在于之前只是偶尔尝试一下使用,最近是因为工作需要使用的.相比较于 TCP 层面 ...

  6. Linux 文件缓存 (一)

    缓存印象 缓存给人的感觉就是可以提高程序运行速度,比如在桌面环境中,第一次打开一个大型程序可能需要10秒,但是关闭程序后再次打开可能只需5秒了.这是因为运行程序需要的代码.数据文件在操作系统中得到了缓 ...

  7. PHP的new self() 与new static()

    参考链接:[PHP中new static()与new self()的区别异同分析],[PHP中new self()和new static()的区别探究],[PHP中static和self的区别] 要点 ...

  8. GIT 这么好用,为什么还是有人不知道怎么用它提交代码?

    客户端代码管理工具的变迁: 从 SVN 到 GIT 截止目前,新版的 APICloud Studio 2 仍然处于公测期.APICloud Studio 2 的代码管理客户端,由 SVN 改为了 GI ...

  9. linux 权限管理命令chmod、文件和目录的权限的意义

    chmod /bin/chmod chmod [{ugoa}{+-=}{rwx}] [文件或目录]chmod [mode=421] [文件或目录]-R 递归修改 只有 root 和 所有者 可以修改一 ...

  10. idea 导入Mapper错误报错设置

    这个报错如图: 其实这个报错是错误,因为运行一切正常. 解决办法: