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 变量作用域分析
Jul 04 Javascript
Javascript闭包用法实例分析
Jan 23 Javascript
jQuery操作JSON的CRUD用法实例
Feb 25 Javascript
IE浏览器下PNG相关功能
Jul 05 Javascript
jQuery旋转木马式幻灯片轮播特效
Dec 04 Javascript
jQuery鼠标悬浮链接弹出跟随图片实例代码
Jan 08 Javascript
js数组常用最重要的方法
Feb 04 Javascript
mpvue 单文件页面配置详解
Dec 02 Javascript
小程序scroll-view安卓机隐藏横向滚动条的实现详解
May 16 Javascript
vue页面引入three.js实现3d动画场景操作
Aug 10 Javascript
在实例中重学JavaScript事件循环
Dec 03 Javascript
关于Vue中的options选项
Mar 22 Vue.js
常用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
function.inc.php超越php
2006/12/09 PHP
php中$_SERVER[PHP_SELF] 和 $_SERVER[SCRIPT_NAME]之间的区别
2009/09/05 PHP
国外PHP程序员的13个好习惯小结
2012/02/20 PHP
采用thinkphp自带方法生成静态html文件详解
2014/06/13 PHP
PHP制作图形验证码代码分享
2014/10/23 PHP
php实现计数器方法小结
2015/01/05 PHP
PHP脚本监控Nginx 502错误并自动重启php-fpm
2015/05/13 PHP
php 把数字转换成汉字的代码
2015/07/21 PHP
比较完整的微信开发php代码
2016/08/02 PHP
javascript入门·对象属性方法大总结
2007/10/01 Javascript
jquery tab插件制作实现代码
2010/06/22 Javascript
JavaScript基础知识之数据类型
2012/08/06 Javascript
JS+CSS模拟可以无刷新显示内容的留言板实例
2015/03/03 Javascript
js实现点击链接后延迟3秒再跳转的方法
2015/06/05 Javascript
js限制文本框只能输入中文的方法
2015/08/11 Javascript
快速掌握Node.js模块封装及使用
2016/03/21 Javascript
Nodejs下DNS缓存问题浅析
2016/11/16 NodeJs
ztree简介_动力节点Java学院整理
2017/07/19 Javascript
微信小程序-滚动消息通知的实例代码
2017/08/03 Javascript
使用validate.js实现表单数据提交前的验证方法
2018/09/04 Javascript
layui 数据表格 点击分页按钮 监听事件的实例
2019/09/02 Javascript
javascript实现函数柯里化与反柯里化过程解析
2019/10/08 Javascript
JavaScript实现点击出现子菜单效果
2021/02/08 Javascript
[00:12]2018DOTA2亚洲邀请赛 sylar表现SOLO技艺
2018/04/06 DOTA
python学习笔记:字典的使用示例详解
2014/06/13 Python
Python简单日志处理类分享
2015/02/14 Python
python实现支持目录FTP上传下载文件的方法
2015/06/03 Python
Python实现爬取亚马逊数据并打印出Excel文件操作示例
2019/05/16 Python
python实现猜数字游戏
2020/03/25 Python
Python嵌套函数,作用域与偏函数用法实例分析
2019/12/26 Python
利用html5 canvas破解简单验证码及getImageData接口应用
2013/01/25 HTML / CSS
详解HTML5常用的语义化标签
2019/09/27 HTML / CSS
大学生学年自我鉴定
2014/02/10 职场文书
中学生国旗下讲话稿
2014/04/26 职场文书
学校教师读书活动总结
2014/07/08 职场文书
2015年营业员工作总结
2015/04/23 职场文书