JavaScript数组复制详解


Posted in Javascript onFebruary 02, 2017

前面的话

  前面的博文中介绍了对象拷贝,本文将详细介绍数组复制

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 相关文章推荐
用prototype实现的简单小巧的多级联动菜单
Mar 24 Javascript
Javascript 中的 &amp;&amp; 和 || 使用小结
Apr 25 Javascript
原生js拖拽(第一课 未兼容)拖拽思路
Mar 29 Javascript
各种页面定时跳转(倒计时跳转)代码总结
Oct 24 Javascript
asm.js使用示例代码
Nov 28 Javascript
node.js中的fs.truncate方法使用说明
Dec 15 Javascript
基于jquery实现弹幕效果
Sep 29 Javascript
bootstarp modal框居中显示的实现代码
Feb 18 Javascript
JS实现标签滚动切换效果
Dec 25 Javascript
vue awesome swiper异步加载数据出现的bug问题
Jul 03 Javascript
Layer+Echarts构建弹出层折线图的方法
Sep 25 Javascript
nuxt 实现在其它js文件中使用store的方式
Nov 05 Javascript
常用jQuery选择器汇总
Feb 02 #Javascript
JavaScript优化以及前段开发小技巧
Feb 02 #Javascript
JavaScript字符集编码与解码详谈
Feb 02 #Javascript
JS实现购物车特效
Feb 02 #Javascript
jQuery实现复选框的全选和反选
Feb 02 #Javascript
jQuery制作图片旋转效果
Feb 02 #Javascript
浅谈javascript中的 “ &amp;&amp; ” 和 “ || ”
Feb 02 #Javascript
You might like
php连接mssql数据库的几种方法
2013/02/21 PHP
thinkphp实现上一篇与下一篇的方法
2014/12/08 PHP
javascript学习网址备忘
2007/05/29 Javascript
Aptana调试javascript图解教程
2009/11/30 Javascript
jQuery中需要注意的细节问题小结
2011/12/06 Javascript
浅谈 jQuery 事件源码定位问题
2014/06/18 Javascript
JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法
2016/12/27 Javascript
Vue中使用clipboard实现复制功能
2018/09/05 Javascript
AngularJS修改model值时,显示内容不变的实例
2018/09/13 Javascript
JavaScript简单实现的仿微博留言功能示例
2019/01/17 Javascript
微信小程序实现获取用户信息并存入数据库操作示例
2019/05/07 Javascript
Angular8 Http拦截器简单使用教程
2019/08/20 Javascript
Nodejs libuv运行原理详解
2019/08/21 NodeJs
[03:24]DOTA2超级联赛专访hao 大翻盘就是逆袭
2013/05/24 DOTA
编程语言Python的发展史
2014/09/26 Python
连接Python程序与MySQL的教程
2015/04/29 Python
python图片验证码生成代码
2016/07/02 Python
Python中str.join()简单用法示例
2018/03/20 Python
详解pandas库pd.read_excel操作读取excel文件参数整理与实例
2019/02/17 Python
详解Python循环作用域与闭包
2019/03/21 Python
基于OpenCV python3实现证件照换背景的方法
2019/03/22 Python
详解Python 调用C# dll库最简方法
2019/06/20 Python
python pandas生成时间列表
2019/06/29 Python
浅析Python 责任链设计模式
2020/09/11 Python
Python爬虫自动化获取华图和粉笔网站的错题(推荐)
2021/01/08 Python
CSS3中颜色线性渐变实战
2015/07/18 HTML / CSS
static全局变量与普通的全局变量有什么区别
2014/05/27 面试题
应届毕业生求职信范文分享
2013/12/26 职场文书
领导干部廉政承诺书
2014/03/27 职场文书
《游戏公平》教学反思
2016/02/20 职场文书
2019年怎样才能撰写出优秀的自荐信
2019/03/25 职场文书
《家庭教育》读后感3篇
2019/12/18 职场文书
Python中X[:,0]和X[:,1]的用法
2021/05/10 Python
python用海龟绘图写贪吃蛇游戏
2021/06/18 Python
spring cloud 配置中心native配置方式
2021/09/25 Java/Android
Python使用mitmproxy工具监控手机 下载手机小视频
2022/04/18 Python