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还可以做的更多

 


宠辱不惊,看庭前花开花落;去留无意,望天上云卷云舒
目录
相关文章
|
12天前
|
存储 JavaScript 索引
JS中数组的相关方法介绍
JS中数组的相关方法介绍
|
12天前
|
JavaScript Java
JS有趣的灵魂 清空数组
JS有趣的灵魂 清空数组
|
12天前
|
JavaScript
JS 获取对象数据类型的键值对的键与值
JS 获取对象数据类型的键值对的键与值
|
22天前
|
JavaScript 前端开发
Math对象:JavaScript中的数学工具
Math对象:JavaScript中的数学工具
27 1
N..
|
29天前
|
存储 JavaScript 前端开发
JavaScript中的对象
JavaScript中的对象
N..
10 0
|
1月前
|
JavaScript 前端开发 API
常用JavaScript 数组 API大全
常用JavaScript 数组 API大全
32 0
|
15天前
|
JavaScript 算法
原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查,通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM
原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查,通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM
|
1天前
|
JavaScript 前端开发 开发者
JavaScript中的错误处理:try-catch语句与错误对象
【4月更文挑战第22天】JavaScript中的错误处理通过try-catch语句和错误对象实现。try块包含可能抛出异常的代码,catch块捕获并处理错误,finally块则无论是否出错都会执行。错误对象提供关于错误的详细信息,如类型、消息和堆栈。常见的错误类型包括RangeError、ReferenceError等。最佳实践包括及时捕获错误、提供有用信息、不忽略错误、利用堆栈信息和避免在finally块中抛错。
|
5天前
|
JavaScript 前端开发 索引
JavaScript 数组中的增、删、改、查
JavaScript 数组中的增、删、改、查
|
7天前
|
JavaScript
【Js】检查Date对象是否为Invalid Date
【Js】检查Date对象是否为Invalid Date
9 0