JavaScript数组复制详解
更新时间：2017年02月02日 16:43:32 投稿：hebedich
对于javascript来说，数组是一种引用类型，如果只是一维数组的话，复制还较为容易，如果是多维数组呢？如何实现多维数组的深度复制？
前面的话
前面的博文中介绍了对象拷贝，本文将详细介绍数组复制
push
function copyArray(arr){
var result = [];
for(var i = 0; i < arr.length; i++){
result.push(arr[i]);
}
return result;
}
var obj1=[1,2,3];
var obj2=copyArray(obj1);
console.log(obj1); //[1,2,3]
console.log(obj2); //[1,2,3]
obj2.push(4);
console.log(obj1); //[1,2,3]
console.log(obj2); //[1,2,3,4]
join
使用该方法的缺点是数组中的项全部变成了字符串形式
function copyArray(arr){
var result = [];
result = arr.join().split(',');
return result;
}
var obj1=[1,2,3];
var obj2=copyArray(obj1);
console.log(obj1); //[1,2,3]
console.log(obj2); //['1','2','3']
obj2.push(4);
console.log(obj1); //[1,2,3]
console.log(obj2); //['1','2','3',4]
concat
function copyArray(arr){
var result = [];
result = arr.concat();
return result;
}
var obj1=[1,2,3];
var obj2=copyArray(obj1);
console.log(obj1); //[1,2,3]
console.log(obj2); //[1,2,3]
obj2.push(4);
console.log(obj1); //[1,2,3]
console.log(obj2); //[1,2,3,4]
slice
function copyArray(arr){
var result = [];
result = arr.slice();
return result;
}
var obj1=[1,2,3];
var obj2=copyArray(obj1);
console.log(obj1); //[1,2,3]
console.log(obj2); //[1,2,3]
obj2.push(4);
console.log(obj1); //[1,2,3]
console.log(obj2); //[1,2,3,4]
深拷贝
以上方法实现的仅是数组的浅拷贝，如果要实现数组的深拷贝，需要使用递归方法
function copyArray(arr,result){
var result = result || [];
for(var i = 0; i < arr.length; i++){
if(arr[i] instanceof Array){
result[i] = [];
copyArray(arr[i],result[i]);
}else{
result[i] = arr[i];
}
}
return result;
}
var obj1=[1,2,[3,4]];
var obj2=copyArray(obj1);
console.log(obj1[2]); //[3,4]
console.log(obj2[2]); //[3,4]
obj2[2].push(5);
console.log(obj1[2]); //[3,4]
console.log(obj2[2]); //[3,4,5]
相关文章
JavaScript模拟GET请求并携带指定Cookie的代码示例
在使用 JavaScript 进行网络请求时,有时会遇到需要携带特定 Cookie 的情况,同时,如果尝试设置一些不安全的请求头,浏览器会拒绝设置这些头,导致请求失败,本文将详细介绍如何解决这些问题,并提供具体的代码示例,需要的朋友可以参考下2025-01-01
不管什么样的编程语言,在代码的执行过程中都是需要给它分配内存的,下面这篇文章主要给大家介绍了关于JavaScript内存管理与闭包的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-06-06
这篇文章主要为大家介绍了JavaScript设计模式中的模板方法模式，对JavaScript设计模式感兴趣的小伙伴们可以参考一下2016-01-01
最全正则表达式总结：验证QQ号、手机号、Email、中文、邮编、身份证、IP地址等
这篇文章主要介绍了最全正则表达式：验证QQ号、手机号、Email、中文、邮编、身份证、IP地址等，通过语法介绍作用表达式等详细解释了正则表达式的使用，具体操作步骤大家可查看下文的详细讲解，感兴趣的小伙伴们可以参考一下。2017-08-08
TS是强类型的JS超集,支持ES6语法,支持面向对象编程的概念,如类、接口、继承、泛型等,下面这篇文章主要给大家介绍了关于一些常见的TypeScript面试题的相关资料,需要的朋友可以参考下2024-09-09
JS中的算法与数据结构之链表(Linked-list)实例详解
这篇文章主要介绍了JS中的算法与数据结构之链表(Linked-list),结合实例形式详细分析了javascript中链表的概念、原理、定义及常用操作技巧,需要的朋友可以参考下2019-08-08
JavaScript运行机制之事件循环(Event Loop)详解
这篇文章主要介绍了JavaScript运行机制之事件循环(Event Loop)详解,本文从多个方面讲解了Event Loop,需要的朋友可以参考下2014-10-10
解构赋值是一种特殊的语法,它使我们可以将数组或对象“拆包”为到一系列变量中,因为有时候使用变量更加方便,下面这篇文章主要给大家介绍了关于JavaScript解构赋值的5个常见场景与实例的相关资料,需要的朋友可以参考下2021-11-11
这篇文章主要介绍了javascript HTML+CSS实现经典橙色导航菜单的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-02-02
用RadioButten或CheckBox实现div的显示与隐藏
用RadioButten（或CheckBox）实现div的显示与隐藏，当选择“女”时，显示“美女、才女”；当选择“男”时隐藏，具体实现如下，感兴趣的朋友可以参考下2013-09-09
最新评论