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 相关文章推荐
JSQL  一个 web DB 的封装
May 05 Javascript
jquery实现居中弹出层代码
Aug 25 Javascript
javascript工厂方式定义对象
Dec 26 Javascript
JavaScript实现选择框按比例拖拉缩放的方法
Aug 04 Javascript
AngularJS ng-repeat指令中使用track by子语句解决重复数据遍历错误问题
Jan 21 Javascript
基于vue.js实现侧边菜单栏
Mar 20 Javascript
vue中七牛插件使用的实例代码
Jul 28 Javascript
AngularJs+Bootstrap实现漂亮的计算器
Aug 10 Javascript
JavaScript实现的超简单计算器功能示例
Dec 23 Javascript
vue嵌套路由与404重定向实现方法分析
May 04 Javascript
JavaScript 引用类型实例详解【数组、对象、严格模式等】
May 13 Javascript
微信小程序连续签到7天积分获得功能的示例代码
Aug 20 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
CPU步进是什么意思?i3-9100F B0步进和U0步进区别知识科普
2020/03/17 数码科技
用header 发送cookie的php代码
2007/03/16 PHP
基于递归实现的php树形菜单代码
2014/11/19 PHP
Linux中为php配置伪静态
2014/12/17 PHP
php通过array_push()函数添加多个变量到数组末尾的方法
2015/03/18 PHP
PHP实现适用于文件内容操作的分页类
2016/06/15 PHP
php+ajax登录跳转登录实现思路
2016/07/31 PHP
php rsa 加密,解密,签名,验签详解
2016/12/06 PHP
JObj预览一个JS的框架
2008/03/13 Javascript
jquery怎样实现ajax联动框(二)
2013/03/08 Javascript
图片延迟加载的实现代码(模仿懒惰)
2013/03/29 Javascript
jQuery+CSS3实现树叶飘落特效
2015/02/01 Javascript
浅谈JavaScript中运算符的优先级
2015/07/07 Javascript
详解javascript实现自定义事件
2016/01/19 Javascript
跨域资源共享 CORS 详解
2016/04/26 Javascript
解析js如何获取css样式
2016/12/11 Javascript
jquery 实现复选框的全选操作实例代码
2017/01/24 Javascript
Vue的Class与Style绑定的方法
2017/09/01 Javascript
ExtJs整合Echarts的示例代码
2018/02/27 Javascript
Echart折线图手柄触发事件示例详解
2018/12/16 Javascript
JavaScript正则表达式验证登录实例
2020/03/18 Javascript
vue实现一个矩形标记区域(rectangle marker)的方法
2020/10/28 Javascript
在 Django/Flask 开发服务器上使用 HTTPS
2014/07/03 Python
Python编程对列表中字典元素进行排序的方法详解
2017/05/26 Python
浅谈Python由__dict__和dir()引发的一些思考
2017/10/30 Python
Django重置migrations文件的方法步骤
2019/05/01 Python
css3 中translate和transition的使用方法
2020/03/26 HTML / CSS
分享一个H5原生form表单的checkbox特效代码
2018/02/26 HTML / CSS
HTML5新特性 多线程(Worker SharedWorker)
2017/04/24 HTML / CSS
Under Armour安德玛意大利官网:美国高端运动科技品牌
2020/01/16 全球购物
.net C#面试题
2012/08/28 面试题
毕业求职自荐信格式是什么
2013/11/19 职场文书
暑期研修感言
2014/02/17 职场文书
小学新学期寄语
2014/04/02 职场文书
硕士学位申请报告
2015/05/15 职场文书
学生会部长竞选稿
2015/11/19 职场文书