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 相关文章推荐
一些有关检查数据的JS代码
Sep 07 Javascript
项目实践之javascript技巧
Dec 06 Javascript
js二维数组排序的简单示例代码
Jan 24 Javascript
jQuery中prevAll()方法用法实例
Jan 08 Javascript
使用jQuery判断Div是否在可视区域的方法 判断div是否可见
Feb 17 Javascript
JavaScript中两个字符串的匹配
Jun 08 Javascript
javaScript给元素添加多个class的简单实现
Jul 20 Javascript
easyui messager alert 三秒后自动关闭提示的实例
Nov 07 Javascript
Angular实现的进度条功能示例
Feb 18 Javascript
vue-star评星组件开发实例
Mar 01 Javascript
vue使用Google地图的实现示例代码
Dec 19 Javascript
Vue实现开关按钮拖拽效果
Sep 22 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.MVC的模板标签系统(一)
2006/09/05 PHP
IIS6.0+PHP5.x+MySQL5.x+Zend3.0x+GD+phpMyAdmin2.8x通用安装实例(已经完成)
2006/12/06 PHP
asp和php下textarea提交大量数据发生丢失的解决方法
2008/01/20 PHP
深入理解PHP之数组(遍历顺序)  Laruence原创
2012/06/13 PHP
使用Apache的htaccess防止图片被盗链的解决方法
2013/04/27 PHP
PHP中比较时间大小实例
2014/08/21 PHP
php防止用户重复提交表单
2015/11/02 PHP
PHP命名空间namespace的定义方法详解
2017/03/29 PHP
javascript addBookmark 加入收藏 多浏览器兼容
2009/08/15 Javascript
js下关于onmouseout、事件冒泡的问题经验小结
2010/12/09 Javascript
JS弹出层遮罩,隐藏背景页面滚动条细节优化分析
2016/04/29 Javascript
JavaScript中0和&quot;&quot;比较引发的问题
2016/05/26 Javascript
使用bootstrap实现多窗口和拖动效果
2016/09/22 Javascript
Nodejs进阶:核心模块net入门学习与实例讲解
2016/11/21 NodeJs
webpack实现热加载自动刷新的方法
2017/07/30 Javascript
原生JS上传大文件显示进度条 php上传文件代码
2020/03/27 Javascript
360doc网站不登录就无法复制内容的解决方法
2018/01/27 Javascript
分析javascript原型及原型链
2018/03/18 Javascript
基于vue 实现表单中password输入的显示与隐藏功能
2019/07/19 Javascript
js实现随机div颜色位置 类似满天星效果
2019/10/24 Javascript
TensorFlow中权重的随机初始化的方法
2018/02/11 Python
利用python如何处理百万条数据(适用java新手)
2018/06/06 Python
浅谈pycharm出现卡顿的解决方法
2018/12/03 Python
python爬虫模拟浏览器的两种方法实例分析
2019/12/09 Python
Python paramiko 模块浅谈与SSH主要功能模拟解析
2020/02/29 Python
python 对象真假值的实例(哪些视为False)
2020/12/11 Python
沙特阿拉伯家用电器和电子产品购物网站:Sheta and Saif
2020/04/03 全球购物
DIY蛋糕店的创业计划书范文
2013/12/26 职场文书
汇源肾宝广告词
2014/03/20 职场文书
英语教育专业毕业生求职信
2014/08/28 职场文书
城市规划应届生推荐信
2014/09/08 职场文书
2014年纳税评估工作总结
2014/12/23 职场文书
普宁寺导游词
2015/02/04 职场文书
中国文明网2015年“向国旗敬礼”活动网上签名寄语
2015/09/24 职场文书
jquery插件实现代码雨特效
2021/04/24 jQuery
jQuery ajax - getScript() 方法和getJSON方法
2021/05/14 jQuery