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 相关文章推荐
Extjs学习笔记之二 初识Extjs之Form
Jan 07 Javascript
jquery 图片轮换效果
Jul 29 Javascript
Javascript获取当前时间函数和时间操作小结
Oct 01 Javascript
node.js中的fs.readFileSync方法使用说明
Dec 15 Javascript
require简单实现单页应用程序(SPA)
Jul 12 Javascript
Bootstrap 网站实例之单页营销网站
Oct 20 Javascript
微信小程序实现点击返回顶层的方法
Jul 12 Javascript
BootStrap 页签切换失效的解决方法
Aug 17 Javascript
JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法
Sep 21 Javascript
layui table 参数设置方法
Aug 14 Javascript
Vue官方推荐AJAX组件axios.js使用方法详解与API
Oct 09 Javascript
JavaScript数组特性与实践应用深入详解
Dec 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中的正规表达式(二)
2006/10/09 PHP
php修改文件上传限制方法汇总
2015/04/07 PHP
PHP封装CURL扩展类实例
2015/07/28 PHP
如何写php守护进程(Daemon)
2015/12/30 PHP
PHP实现限制IP访问的方法
2017/04/20 PHP
PHP中in_array的隐式转换的解决方法
2018/03/06 PHP
PHP手机号码及邮箱正则表达式实例解析
2020/07/11 PHP
DOMAssitant最新版 DOMAssistant 2.5发布
2007/12/25 Javascript
发一个自己用JS写的实用看图工具实现代码
2008/07/26 Javascript
jQuery动画animate方法使用介绍
2013/05/06 Javascript
js的Prototype属性解释及常用方法
2014/05/08 Javascript
使用GruntJS构建Web程序之Tasks(任务)篇
2014/06/06 Javascript
javascript实现类似超链接的效果
2014/12/26 Javascript
Node.js 文件夹目录结构创建实例代码
2016/07/08 Javascript
基于jQuery实现表格内容的筛选功能
2016/08/21 Javascript
js数组去重的hash方法
2016/12/22 Javascript
angular2中使用第三方js库的实例
2018/02/26 Javascript
vue路由懒加载的实现方法
2018/03/12 Javascript
npm 更改默认全局路径以及国内镜像的方法
2018/05/16 Javascript
Vue中添加滚动事件设置的方法详解
2020/09/14 Javascript
vue中路由跳转不计入history的操作
2020/09/21 Javascript
uniapp微信小程序实现一个页面多个倒计时
2020/11/01 Javascript
python魔法方法-自定义序列详解
2016/07/21 Python
详解python selenium 爬取网易云音乐歌单名
2019/03/28 Python
使用Python爬虫库requests发送请求、传递URL参数、定制headers
2020/01/25 Python
python批量替换文件名中的共同字符实例
2020/03/05 Python
如何搭建pytorch环境的方法步骤
2020/05/06 Python
Python unittest discover批量执行代码实例
2020/09/08 Python
Python根据字符串调用函数过程解析
2020/11/05 Python
linux面试题参考答案(7)
2014/07/24 面试题
经销商会议欢迎词
2014/01/11 职场文书
幼儿园区域活动总结
2014/05/08 职场文书
企业标语大全
2014/07/01 职场文书
给老婆的保证书怎么写
2015/05/08 职场文书
Java图书管理系统,课程设计必用(源码+文档)
2021/06/30 Java/Android
零基础学java之带参数以及返回值的方法
2022/04/10 Java/Android