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 相关文章推荐
asp javascript 实现关闭窗口时保存数据的办法
Nov 24 Javascript
IE6与IE7中,innerHTML获取param的区别
Mar 15 Javascript
js中window.open()的所有参数详细解析
Jan 09 Javascript
jQuery 回车事件enter使用示例
Feb 18 Javascript
第九篇Bootstrap导航菜单创建步骤详解
Jun 21 Javascript
AngularJS入门教程之过滤器用法示例
Nov 02 Javascript
利用node.js搭建简单web服务器的方法教程
Feb 20 Javascript
JS脚本加载后执行相应回调函数的操作方法
Feb 28 Javascript
js动态引入的四种方法
May 05 Javascript
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
Jun 14 jQuery
微信小程序使用canvas的画图操作示例
Jan 18 Javascript
package.json各个属性说明详解
Mar 11 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 header 跳转
2013/06/17 PHP
php读取图片内容并输出到浏览器的实现代码
2013/08/08 PHP
js代码实现微博导航栏
2015/07/30 PHP
php如何修改SESSION的生存存储时间的实例代码
2017/07/05 PHP
php封装的mongodb操作类代码
2017/08/06 PHP
详解PHP实现支付宝小程序用户授权的工具类
2018/12/25 PHP
jQuery随机切换图片的小例子
2013/04/18 Javascript
jQuery回车实现登录简单实现
2013/08/20 Javascript
JQuery异步获取返回值中文乱码的解决方法
2015/01/29 Javascript
jQuery ztree实现动态树形多选菜单
2016/08/12 Javascript
javascript闭包功能与用法实例分析
2017/04/06 Javascript
Vue响应式原理详解
2017/04/18 Javascript
详解node中创建服务进程
2017/05/09 Javascript
Bootstrap与Angularjs的模态框实例代码
2017/08/03 Javascript
webpack4 配置 ssr 环境遇到“document is not defined”
2019/10/24 Javascript
python操作MySQL数据库具体方法
2013/10/28 Python
Python中pygame安装方法图文详解
2015/11/11 Python
总结python实现父类调用两种方法的不同
2017/01/15 Python
django+echart绘制曲线图的方法示例
2018/11/26 Python
Python参数解析模块sys、getopt、argparse使用与对比分析
2019/04/02 Python
ML神器:sklearn的快速使用及入门
2019/07/11 Python
python双向链表原理与实现方法详解
2019/12/03 Python
利用keras加载训练好的.H5文件,并实现预测图片
2020/01/24 Python
Python将字典转换为XML的方法
2020/08/01 Python
Python类成员继承重写的实现
2020/09/16 Python
Python解析m3u8拼接下载mp4视频文件的示例代码
2021/03/03 Python
html5 viewport使用方法示例详解
2013/12/02 HTML / CSS
Volcom法国官网:美国冲浪滑板品牌
2017/05/25 全球购物
美国领先的低折扣旅行网站:Hotwire
2019/01/19 全球购物
奉献演讲稿范文
2014/05/21 职场文书
民主评议党员自我鉴定
2014/10/21 职场文书
期末个人总结范文
2015/02/13 职场文书
2015年税务稽查工作总结
2015/05/26 职场文书
校运会加油稿大全
2015/07/22 职场文书
什么是创业计划书?什么是商业计划书?这里一一解答
2019/07/12 职场文书
用基于python的appium爬取b站直播消费记录
2021/04/17 Python