在前端开发的某些逻辑中,经常需要对现有的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. eclipse/myEclipse 代码提示和快捷键

    一.设置自动提示 设置eclipse/myEclipse代码提示可以方便开发者,不用在记住拉杂的单词,只用打出首字母,就会出现提示代码菜单. 1.菜单window->Preferences-&g ...

  2. 数据库导出Excel(转载)

    来源:https://jingyan.baidu.com/article/3065b3b68f2ab7becef8a449.html SQLServer2005或者SQLServer2008.SQLS ...

  3. mysql + excel 校正线上数据

    积分问题处理 1. 所有应补汇总 select driver_id, SUM(integral) from detail_score group by driver_id; 2. 原汇总积分 sele ...

  4. C# 如何在Linux操作系统下读取文件

    发布在Window环境上的微服务需要部署在Linux环境上,本以为没有什么问题,结果因为一处读取文件路径的原因报错了,在此记录一下两个问题:1.C#如何判断当前运行环境是什么操作系统:2.C#读取文件 ...

  5. 使用catsup快速建立个人博客

    一.安装 time: 2016-01-2 20:30 1.使用pip安装catsup:(sudo) pip install catsup 从旧版本升级到新版本:(sudo) pip install c ...

  6. MySql 缓存查询原理与缓存监控 和 索引监控

    MySql缓存查询原理与缓存监控 And 索引监控 by:授客 QQ:1033553122 查询缓存 1.查询缓存操作原理 mysql执行查询语句之前,把查询语句同查询缓存中的语句进行比较,且是按字节 ...

  7. Android网络请求库RetrofitUtils

    RetrofitUtils GitHub地址,帮忙给个Star 项目介绍 Retrofit+Okhttp辅助类的简单封装,vesion 1.0.X 实现了Get,Post-Form.Post-Json ...

  8. python学习手册中的一些易忘的点(前三部分)

    1.ubuntu下让python脚本可直接运行: test.py文件(后缀可省)#!/usr/bin/pythonprint('wwwww') sudo chmod +x ./test.py (sud ...

  9. react的基本概念

    数据流向 数据的改变发生通常是通过用户交互行为或者浏览器行为(如路由跳转等)触发的,当此类行为会改变数据的时候可以通过 dispatch 发起一个 action,如果是同步行为会直接通过 Reduce ...

  10. elipse安装php

    在用eclipse作为PHP的开发IDE工具时,如果下载的Eclipse不带有PHP功能,则需要我们自己来给Eclipse升级.不过也可以下载eclipseForPHP 在Eclipse的help菜单 ...