在前端开发的某些逻辑中,经常需要对现有的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. 19、网络编程 (Socket套接字编程)

    网络模型 *A:网络模型 TCP/IP协议中的四层分别是应用层.传输层.网络层和链路层,每层分别负责不同的通信功能,接下来针对这四层进行详细地讲解. 链路层:链路层是用于定义物理传输通道,通常是对某些 ...

  2. Eclipse的版本命名

    Eclipse自3.1开始使用木星的卫星作为版本名,例如: 木卫一:伊奥 lo木卫二:欧罗巴 Europa木卫三:伽倪墨得斯 Ganymede木卫四:卡利斯托 Callisto .... Eclips ...

  3. ssm项目快速搭建(配置)

    核心jar包 <properties>    <project.build.sourceEncoding>UTF-8</project.build.sourceEncod ...

  4. 如何优雅的爬取 gzip 格式的页面并保存在本地(java实现)

    1. 引言 在爬取汽车销量数据时需要爬取 html 保存在本地后再做分析,由于一些页面的 gzip 编码格式, 获取后要先解压缩,否则看到的是一片乱码.在网络上仔细搜索了下,终于在这里找到了一个优雅的 ...

  5. tcpcopy + tcpdump 离线回放

    简单来说,就是用tcpdump记录线上请求,用tcpcopy来重放,如下图所示:   有关 tcpdump 的命令详解请参考: http://www.cnblogs.com/ggjucheng/arc ...

  6. C# 运算符 ++在前与++在后实例分析。

    首先记住计算技巧“++在前先+1,++在后后+1”. static void Main(string[] args) { int i = 10; Console.WriteLine(i);//此时i的 ...

  7. gulp实用配置(1)——demo

    在React和Vue推进下,现在很多人都在使用webpack作为自动化构建工具,但其实在很多时候我们并不是一定需要用到它,gulp这样的轻量级构建工具就足够了. 最近一段时间不是太忙,所以就写了三份配 ...

  8. [转]vue数据绑定(数据,样式,事件)

    1.mounted 与 methods 与 computed 与 watched区别 From:https://blog.csdn.net/qinlulucsdn/article/details/80 ...

  9. 自定义指令directive基础用法

    官方链接:http://doc.vue-js.com/v2/guide/custom-directive.html#simplest-directive-example 在main.js中注册自定义指 ...

  10. 浏览器根对象window之操作方法

    1.1 不常用 alert:带有一条指定消息和一个OK按钮的警告框. confirm:带有指定消息和OK及取消按钮的对话框. prompt:可提示用户进行输入的对话框. print:打印网页. ope ...