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 相关文章推荐
Jquery 动态添加按钮实现代码
May 06 Javascript
Javascript中call和apply函数的比较和使用实例
Feb 03 Javascript
JavaScript判断表单提交时哪个radio按钮被选中的方法
Mar 21 Javascript
jquery淡入淡出效果简单实例
Jan 14 Javascript
JQuery导航菜单选择特效
Apr 11 Javascript
JS实现的自定义显示加载等待图片插件(loading.gif)
Jun 17 Javascript
AngularJS实现单独作用域内的数据操作
Sep 05 Javascript
JS实现快速的导航下拉菜单动画效果附源码下载
Nov 01 Javascript
在vue2.0中引用element-ui组件库的方法
Jun 21 Javascript
vue.js计算属性computed用法实例分析
Jul 06 Javascript
详解vue-cli+es6引入es5写的js(两种方法)
Apr 19 Javascript
JavaScript实现浏览器网页自动滚动并点击的示例代码
Dec 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
for循环连续求和、九九乘法表代码
2012/02/20 PHP
PHP面向对象——访问修饰符介绍
2012/11/08 PHP
PHP获取服务器端信息的方法
2014/11/28 PHP
php结合安卓客户端实现查询交互实例
2015/05/05 PHP
PHP批量去除BOM头内容信息代码
2016/03/11 PHP
PHP XML和数组互相转换详解
2016/10/26 PHP
php readfile下载大文件失败的解决方法
2017/05/22 PHP
php实现网页端验证码功能
2017/07/11 PHP
jquery last-child 列表最后一项的样式
2010/01/22 Javascript
游览器中javascript的执行过程(图文)
2012/05/20 Javascript
JavaScript中“+”的陷阱深刻理解
2012/12/04 Javascript
js 中将多个逗号替换为一个逗号的代码
2014/06/07 Javascript
jQuery循环滚动新闻列表示例代码
2014/06/17 Javascript
JS 获取鼠标左右键的键值方法
2014/10/11 Javascript
浅谈angular懒加载的一些坑
2016/08/20 Javascript
javascript计算对象长度的方法
2017/10/25 Javascript
Vue核心概念Action的总结
2019/01/18 Javascript
[04:05]TI9战队采访 - Natus Vincere
2019/08/22 DOTA
[31:47]夜魇凡尔赛茶话会 第三期01:选手知多少
2021/03/11 DOTA
python实现爬虫统计学校BBS男女比例(一)
2015/12/31 Python
Python的Flask框架中使用Flask-SQLAlchemy管理数据库的教程
2016/06/14 Python
python变量不能以数字打头详解
2016/07/06 Python
Python实现类的创建与使用方法示例
2017/07/25 Python
Django中的文件的上传的几种方式
2018/07/23 Python
tensorflow图像裁剪进行数据增强操作
2020/06/30 Python
python如何使用代码运行助手
2020/07/03 Python
浅谈Python 钉钉报警必备知识系统讲解
2020/08/17 Python
Ray-Ban雷朋奥地利官网:全球领先的太阳眼镜品牌
2020/10/12 全球购物
中国入世承诺
2014/04/01 职场文书
公司节能减排倡议书
2014/05/14 职场文书
护士节演讲稿开场白
2014/08/25 职场文书
街道务虚会发言材料
2014/10/20 职场文书
2014年药店工作总结
2014/11/20 职场文书
中学生综合素质自我评价
2015/03/06 职场文书
2016年度基层党建工作公开承诺书
2016/03/25 职场文书
Python批量解压&压缩文件夹的示例代码
2022/04/04 Python