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 相关文章推荐
javascript 特殊字符串
Feb 25 Javascript
jQuery 源码分析笔记(7) Queue
Jun 19 Javascript
js 距离某一时间点时间是多少实现代码
Oct 14 Javascript
Jquery中children与find之间的区别详细解析
Nov 29 Javascript
函数window.open实现关闭所有的子窗口
Aug 03 Javascript
JQuery.Ajax()的data参数类型实例详解
Nov 20 Javascript
使用jquery提交form表单并自定义action的实现代码
May 25 Javascript
轻松掌握JavaScript享元模式
Aug 27 Javascript
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
May 26 jQuery
微信小程序 POST请求的实例详解
Sep 29 Javascript
iconfont的三种使用方式详解
Aug 05 Javascript
使用weixin-java-tools完成微信授权登录、微信支付的示例
Sep 26 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
ThinkPHP的Widget扩展实例
2014/06/19 PHP
PHP保留两位小数的几种方法
2019/07/24 PHP
Laravel validate error处理,ajax,json示例
2019/10/25 PHP
Javascript 篱式条件判断
2008/08/22 Javascript
js 实现的可折叠留言板(附源码下载)
2014/07/01 Javascript
jquery+ajax验证不通过也提交表单问题处理
2014/12/12 Javascript
ionic js 复选框 与普通的 HTML 复选框到底有没区别
2016/06/06 Javascript
Bootstrap中的Panel和Table全面解析
2016/06/13 Javascript
AngularJS包括详解及示例代码
2016/08/17 Javascript
js中获取键盘事件的简单实现方法
2016/10/10 Javascript
js实现动态显示时间效果
2017/03/06 Javascript
jQuery实现的上传图片本地预览效果简单示例
2018/03/29 jQuery
jQuery实现的手动拖动控制进度条效果示例【测试可用】
2018/04/18 jQuery
微信小程序使用wxParse解析html的实现示例
2018/08/30 Javascript
NodeJS服务器实现gzip压缩的示例代码
2018/10/12 NodeJs
Webpack 4如何动态切割JS注入文件名详解
2019/07/09 Javascript
Nodejs封装类似express框架的路由实例详解
2020/01/05 NodeJs
Python urllib、urllib2、httplib抓取网页代码实例
2015/05/09 Python
python实现搜索本地文件信息写入文件的方法
2016/02/22 Python
Python实现快速排序算法及去重的快速排序的简单示例
2016/06/26 Python
Python的IDEL增加清屏功能实例
2017/06/19 Python
Python基于httpx模块实现发送请求
2020/07/07 Python
python中实现栈的三种方法
2020/12/19 Python
澳大利亚领先的男装零售连锁店:Lowes
2020/08/07 全球购物
联想智利官方网站:Lenovo Chile
2020/06/03 全球购物
业务主管岗位职责
2013/11/20 职场文书
大学生自我鉴定
2013/12/16 职场文书
初中生物教学反思
2014/01/10 职场文书
幸福家庭事迹材料
2014/02/03 职场文书
公务员考察材料
2014/12/23 职场文书
2015年助理工程师工作总结
2015/04/03 职场文书
2015婚礼主持词开场白
2015/05/28 职场文书
OpenCV-Python实现人脸美白算法的实例
2021/06/11 Python
浅谈Python实现opencv之图片色素的数值运算和逻辑运算
2021/06/23 Python
Python 数据可视化工具 Pyecharts 安装及应用
2022/04/20 Python
SpringBoot使用AOP实现统计全局接口访问次数详解
2022/06/16 Java/Android