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 Array对象 学习
Jul 19 Javascript
JQuery自适应IFrame高度(支持嵌套 兼容IE,ff,safafi,chrome)
Mar 28 Javascript
IE下window.onresize 多次调用与死循环bug处理方法介绍
Nov 12 Javascript
javascript日期操作详解(脚本之家整理)
Sep 05 Javascript
后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法
Jul 05 Javascript
JS判断是否手机或pad访问实现方法
Dec 09 Javascript
jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】
Dec 19 Javascript
基于AngularJS的拖拽文件上传的实例代码
Jul 15 Javascript
javascript trie前缀树的示例
Jan 29 Javascript
解决Vue中mounted钩子函数获取节点高度出错问题
May 18 Javascript
Vue2.0+Vux搭建一个完整的移动webApp项目的示例
Mar 19 Javascript
微信小程序实现左滑动删除效果
Mar 30 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中10个不常见却非常有用的函数
2010/03/21 PHP
PHP循环函数使用介绍之PHP基础入门教程
2013/09/21 PHP
PHP基于新浪IP库获取IP详细地址的方法
2017/05/04 PHP
JS定时刷新页面及跳转页面的方法
2013/07/04 Javascript
js 3秒后跳转页面的实现代码
2014/03/10 Javascript
Javascript获取CSS伪元素属性的实现代码
2014/09/28 Javascript
jQuery中removeAttr()方法用法实例
2015/01/05 Javascript
javascript实现校验文件上传控件实例
2015/04/20 Javascript
用JavaScript实现PHP的urlencode与urldecode函数
2015/08/13 Javascript
javascript:void(0)点击登录没反应怎么解决
2015/11/13 Javascript
JS实现侧边栏鼠标经过弹出框+缓冲效果
2017/03/29 Javascript
JS中的三个循环小结
2017/06/20 Javascript
Angular.js项目中使用gulp实现自动化构建以及压缩打包详解
2017/07/19 Javascript
详解webpack2+React 实例demo
2017/09/11 Javascript
layer ui插件显示tips时,修改字体颜色的实现方法
2019/09/11 Javascript
微信小程序自定义组件components(代码详解)
2019/10/21 Javascript
[01:02:09]Liquid vs TNC 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21
2020/07/19 DOTA
总结网络IO模型与select模型的Python实例讲解
2016/06/27 Python
Python 专题二 条件语句和循环语句的基础知识
2017/03/19 Python
机器学习python实战之决策树
2017/11/01 Python
Java与Python两大幸存者谁更胜一筹呢
2018/04/12 Python
python多线程并发实例及其优化
2019/06/27 Python
搭建python django虚拟环境完整步骤详解
2019/07/08 Python
django-rest-framework 自定义swagger过程详解
2019/07/18 Python
Python 进程操作之进程间通过队列共享数据,队列Queue简单示例
2019/10/11 Python
使用Django和Postgres进行全文搜索的实例代码
2020/02/13 Python
Booking.com美国:全球酒店预订网站
2017/04/18 全球购物
师范生实习的个人自我鉴定
2013/10/20 职场文书
车辆安全检查制度
2014/01/12 职场文书
综艺节目策划方案
2014/06/13 职场文书
幼儿园个人师德总结
2015/02/06 职场文书
学雷锋主题班会教案
2015/08/13 职场文书
文书工作总结(范文)
2019/07/11 职场文书
话题作文之诚信
2019/11/28 职场文书
详解python中[-1]、[:-1]、[::-1]、[n::-1]使用方法
2021/04/25 Python
Django模型层实现多表关系创建和多表操作
2021/07/21 Python