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弹出层始终垂直居中相对于屏幕或当前窗口
Apr 01 Javascript
Javascript代码在页面加载时的执行顺序介绍
May 03 Javascript
jquery高效反选具体实现
May 05 Javascript
jQuery获取当前对象标签名称的方法
Feb 07 Javascript
JavaScript编程中实现对象封装特性的实例讲解
Jun 24 Javascript
JS跨域交互(jQuery+php)之jsonp使用心得
Jul 01 Javascript
使用JSON作为函数的参数的优缺点
Oct 27 Javascript
Vue 使用 Mint UI 实现左滑删除效果CellSwipe
Apr 27 Javascript
js实现跟随鼠标移动的小球
Aug 26 Javascript
vue实现手机号码的校验实例代码(防抖函数的应用场景)
Sep 05 Javascript
如何在Vue中使localStorage具有响应式(思想实验)
Jul 14 Javascript
详解阿里Node.js技术文档之process模块学习指南
Jan 04 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书写安全的脚本代码
2012/02/05 PHP
初识php MVC
2014/09/10 PHP
PHP设计模式之工厂模式与单例模式
2016/09/28 PHP
php让json_encode不自动转义斜杠“/”的方法
2020/04/27 PHP
jquery中常用的SET和GET
2009/01/13 Javascript
jquery tools系列 expose 学习
2009/09/06 Javascript
javascript操作cookie的文章(设置,删除cookies)
2010/04/01 Javascript
jQuery 1.5最新版本的改进细节分析
2011/01/19 Javascript
javascript中比较字符串是否相等的方法
2013/07/23 Javascript
JS实现跟随鼠标闪烁转动色块的方法
2015/02/26 Javascript
JavaScript中pop()方法的使用教程
2015/06/09 Javascript
JavaScript组合模式学习要点
2016/08/26 Javascript
Nodejs高扩展性的模板引擎 functmpl简介
2017/02/13 NodeJs
微信小程序 开发之滑块视图容器(swiper)详解及实例代码
2017/02/22 Javascript
js中删除数组中的某一元素实例(无下标时)
2017/02/28 Javascript
Django+Vue.js搭建前后端分离项目的示例
2017/08/07 Javascript
微信小程序实现根据字母选择城市功能
2017/08/16 Javascript
BootStrap下的弹出框加载select2框架失败的解决方法
2017/08/31 Javascript
JS禁止浏览器右键查看元素或按F12审查元素自动关闭页面示例代码
2017/09/07 Javascript
JS计算两个时间相差分钟数的方法示例
2018/01/10 Javascript
Vue中$refs的用法详解
2018/06/24 Javascript
跟混乱的页面弹窗说再见
2019/04/11 Javascript
javascript中undefined的本质解析
2019/07/31 Javascript
vue服务端渲染操作简单入门实例分析
2019/08/28 Javascript
Vue 请求传公共参数的操作
2020/07/31 Javascript
vue调用本地摄像头实现拍照功能
2020/08/14 Javascript
JS指定音频audio在某个时间点进行播放
2020/11/28 Javascript
[40:16]TFT vs Mski Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
Python实现excel转sqlite的方法
2017/07/17 Python
python打开windows应用程序的实例
2019/06/28 Python
pycharm 2019 最新激活方式(pycharm破解、激活)
2020/09/22 Python
Lentiamo比利时:便宜的隐形眼镜
2020/02/14 全球购物
工商管理实习自我鉴定
2013/09/28 职场文书
《小壁虎借尾巴》教学反思
2014/02/16 职场文书
机修车间主任岗位职责
2015/04/08 职场文书
工作犯错保证书
2015/05/11 职场文书