javascript中对数组对象的深度拷贝

简介: 在前端开发的某些逻辑中,经常需要对现有的js对象创建副本,避免污染原始数据的情况。 如果是简单的一维数组对象,可以使用两个原生方法: 1、splice var arr1 = ['a', 'b', 'c']; var arr2 = arr1.

在前端开发的某些逻辑中,经常需要对现有的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还可以做的更多

 


宠辱不惊,看庭前花开花落;去留无意,望天上云卷云舒
目录
相关文章
|
3天前
|
JavaScript 前端开发
JS将两个数组和合并成数组包对象格式的方法
JS将两个数组和合并成数组包对象格式的方法
7 0
|
10天前
|
JavaScript 前端开发
js遍历对象的方法
js遍历对象的方法
17 1
|
1月前
|
JavaScript 前端开发
javaScript Number 对象
avaScript Number 对象是 JavaScript 中用于表示数字的基本类型之一。它表示的数字可以是整数,也可以是浮点数。在 JavaScript 中,所有的数字都是 Number 类型的实例,可以通过 new Number() 构造函数来创建。此外,JavaScript 还提供了一些用于处理数字的常用方法和属性,例如 parseFloat()、parseInt()、isNaN()、is
67 6
|
14小时前
|
JavaScript 前端开发
javascript的对象
javascript的对象
|
1天前
|
JSON 前端开发 JavaScript
JavaScript拷贝大作战:浅拷贝vs深拷贝
JavaScript拷贝大作战:浅拷贝vs深拷贝
18 0
|
4天前
|
JavaScript
js将数组转为字符串用逗号隔开,字符串转数组
js将数组转为字符串用逗号隔开,字符串转数组
7 1
|
7天前
|
前端开发 JavaScript 数据处理
JavaScript中的异步编程及Promise对象
【2月更文挑战第3天】 传统的JavaScript编程模式在处理异步任务时常常会导致回调地狱和代码可读性较差的问题,而Promise对象的引入为解决这一问题提供了一种优雅的解决方案。本文将介绍JavaScript中的异步编程方式以及Promise对象的使用方法和优势,帮助读者更好地理解和运用异步编程技术。
14 8
|
13天前
|
JavaScript 前端开发 索引
【JavaScript】面试手撕数组原型链(易)
续借上文,这篇文章主要讲的是数组原型链相关的考题,有些人可能会纳闷,数组和原型链之间有什么关系呢?我们日常使用的数组forEach,map等都是建立在原型链之上的。举个🌰,如我有一个数组const arr = [1,2,3]我想要调用arr.sum方法对arr数组的值进行求和,该如何做呢?我们知道数组没有sum函数,于是我们需要在数组的原型上定义这个函数,才能方便我们调用,具体代码如下。接下来我们就是采用这种方式去实现一些数组常用的方法。
32 6
|
15天前
|
JavaScript 前端开发
【JavaScript】面试手写题精讲之数组(上)
该专题主要是讲解我们在面试的时候碰到一些JS的手写题, 确实这种手写题还是比较恶心的。有些时候好不容易把题目写出来了,突然面试官冷不丁来一句有没有更优的解法,直接让我们僵在原地。为了解决兄弟们的这些困扰,这个专题于是就诞生啦。我们会将一些常见的不是最优解的答案作为对比,方便大家更好理解。
25 3
|
24天前
|
JavaScript Unix 索引
2022年11月21日13:32:00——T5——JS对象与Date日期函数
2022年11月21日13:32:00——T5——JS对象与Date日期函数
21 0

热门文章

最新文章

相关产品

  • 云迁移中心