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实现文件下载并重命名代码实例
这篇文章主要介绍了JavaScript实现文件下载并重命名代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-12-12
VSCode中如何利用d.ts文件进行js智能提示
这篇文章主要给大家介绍了关于VSCode中如何利用d.ts文件进行js智能提示的相关资料，文中通过图文以及示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
2018-04-04
移动端Ionic App 资讯上下循环滚动的实现代码(跑马灯效果)
这篇文章主要介绍了移动端Ionic App 资讯上下循环滚动的实现代码，实现方法需要借助jQuery库的选择器和动画函数，并且把jquery的操作封装到指令里，具体指令代码大家通过本文学习吧
2017-08-08
javascript中函数的写法实例代码详解
这篇文章主要介绍了javascript中函数的写法 ,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2018-10-10
小程序tab页无法传递参数的方法
这篇文章主要介绍了小程序tab页无法传递参数的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-08-08
学习JavaScript设计模式之责任链模式
这篇文章主要为大家介绍了JavaScript设计模式中的责任链模式，对JavaScript设计模式感兴趣的小伙伴们可以参考一下
2016-01-01
js实现横向百叶窗效果网页切换动画效果的方法
这篇文章主要介绍了js实现横向百叶窗效果网页切换动画效果的方法,实例分析了javascript实现百叶窗效果的技巧,需要的朋友可以参考下
2015-03-03
webpack热模块替换（HMR）/热更新的方法
模块热替换(HMR)的作用是，在应用运行时，无需刷新页面，便能替换、增加、删除必要的模块，本篇文章主要介绍了webpack热模块替换（HMR）/热更新的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-04-04
javascript组合使用构造函数模式和原型模式实例
这篇文章主要介绍了javascript组合使用构造函数模式和原型模式的方法,通过一个简单实例分析了javascript构造函数模式与原型模式的使用方法,需要的朋友可以参考下
2015-06-06
解读input标签的value属性及name属性
这篇文章主要介绍了解读input标签的value属性，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-01-01