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 相关文章推荐
层序遍历在ExtJs的TreePanel中的应用
Oct 16 Javascript
javascript 获取表单file全路径
Dec 31 Javascript
Jquery中使用setInterval和setTimeout的方法
Apr 08 Javascript
给超链接添加特效鼠标移动展示提示信息且随鼠标移动
Oct 17 Javascript
jquery、js调用iframe父窗口与子窗口元素的方法整理
Jul 31 Javascript
JavaScript中的方法调用详细介绍
Dec 30 Javascript
JS+CSS实现分类动态选择及移动功能效果代码
Oct 19 Javascript
详解VUE 定义全局变量的几种实现方式
Jun 01 Javascript
让Vue也可以使用Redux的方法
May 23 Javascript
JS使用百度地图API自动获取地址和经纬度操作示例
Apr 16 Javascript
JS实现简易图片自动轮播
Oct 16 Javascript
JavaScript Html实现移动端红包雨功能页面
Jan 10 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安装攻略:常见问题解答(二)
2006/10/09 PHP
FleaPHP的安全设置方法
2008/09/15 PHP
基于PHP创建Cookie数组的详解
2013/07/03 PHP
php缓存技术详细总结
2013/08/07 PHP
JS可以控制样式的名称写法一览
2014/01/16 Javascript
JavaScript判断按钮被点击的方法
2015/12/13 Javascript
基于JavaScript代码实现自动生成表格
2016/06/15 Javascript
js enter键激发事件实例代码
2016/08/17 Javascript
vue实现商城上货组件简易版
2017/11/27 Javascript
json前后端数据交互相关代码
2018/09/19 Javascript
小程序实现人脸识别功能(百度ai)
2018/12/23 Javascript
详解nuxt 微信公众号支付遇到的问题与解决
2019/08/26 Javascript
Jquery滑动门/tab切换实现方法完整示例
2020/06/05 jQuery
python实现获取序列中最小的几个元素
2014/09/25 Python
Python函数参数类型*、**的区别
2015/04/11 Python
python实现一次创建多级目录的方法
2015/05/15 Python
python里使用正则的findall函数的实例详解
2017/10/19 Python
浅谈python 里面的单下划线与双下划线的区别
2017/12/01 Python
Python实现改变与矩形橡胶的线条的颜色代码示例
2018/01/05 Python
深入浅析python with语句简介
2018/04/11 Python
python中open函数的基本用法示例
2019/09/07 Python
python 弧度与角度互转实例
2020/04/15 Python
Python 实现二叉查找树的示例代码
2020/12/21 Python
英国高级百货公司:Harvey Nichols
2017/01/29 全球购物
美国手机支架公司:PopSockets
2019/11/27 全球购物
财务总经理岗位职责
2014/02/16 职场文书
竞选村长演讲稿
2014/04/28 职场文书
加油口号大全
2014/06/13 职场文书
2014年重阳节活动策划方案书
2014/09/16 职场文书
2014幼儿园中班工作总结
2014/11/10 职场文书
2014年学校安全工作总结
2014/11/13 职场文书
2014年安置帮教工作总结
2014/12/11 职场文书
企业财务管理制度范本
2015/08/04 职场文书
实习感想范文
2015/08/10 职场文书
Go标准容器之Ring的使用说明
2021/05/05 Golang
直播实况, OMG破敌三路五十分钟大战神技局摩托车
2022/04/01 DOTA