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 参考教程
Dec 29 Javascript
document.getElementById介绍
Sep 13 Javascript
纯Javascript实现Windows 8 Metro风格实现
Oct 15 Javascript
JQUERY简单按钮轮换选中效果实现方法
May 07 Javascript
基于JavaScript实现生成名片、链接等二维码
Sep 20 Javascript
简单实现jQuery进度条轮播实例代码
Jun 20 Javascript
js实现登录与注册界面
Nov 01 Javascript
js删除数组中某几项的方法总结
Jan 16 Javascript
echarts实现词云自定义形状的示例代码
Feb 20 Javascript
Vue CLI3基础学习之pages构建多页应用
Jun 02 Javascript
jQuery实现简单弹幕效果
Nov 28 jQuery
JS正则表达式常见函数与用法小结
Apr 13 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
咖啡的种类和口感
2021/03/03 新手入门
修改了一个很不错的php验证码(支持中文)
2007/02/14 PHP
php fputcsv命令 写csv文件遇到的小问题(多维数组连接符)
2011/05/24 PHP
基于PHP+Ajax实现表单验证的详解
2013/06/25 PHP
Laravel5中Cookie的使用详解
2017/05/03 PHP
Javascript对象属性方法汇总
2013/11/21 Javascript
JavaScript调用ajax获取文本文件内容实现代码
2014/03/28 Javascript
jQuery实现渐变下拉菜单的简单方法
2015/03/11 Javascript
基于Jquery实现表单验证
2020/07/20 Javascript
javascript HTML5 canvas实现打砖块游戏
2020/06/18 Javascript
js实现倒计时及时间对象
2016/11/15 Javascript
webpack2.0配置postcss-loader的方法
2017/08/17 Javascript
详解ES6 Symbol 的用途
2018/10/14 Javascript
layui--js控制switch的切换方法
2019/09/03 Javascript
vue实现弹幕功能
2019/10/25 Javascript
jquery实现轮播图特效
2020/04/12 jQuery
nuxt 自定义 auth 中间件实现令牌的持久化操作
2020/11/05 Javascript
[03:11]2014DOTA2国际邀请赛-VG掉入败者组 独家专访357
2014/07/19 DOTA
Python中MYSQLdb出现乱码的解决方法
2014/10/11 Python
Pandas 合并多个Dataframe(merge,concat)的方法
2018/06/08 Python
Python读取英文文件并记录每个单词出现次数后降序输出示例
2018/06/28 Python
详解Python解决抓取内容乱码问题(decode和encode解码)
2019/03/29 Python
pyqt 实现QlineEdit 输入密码显示成圆点的方法
2019/06/24 Python
python redis连接 有序集合去重的代码
2019/08/04 Python
OpenCV 使用imread()函数读取图片的六种正确姿势
2020/07/09 Python
利用Python实现朋友圈中的九宫格图片效果
2020/09/03 Python
Python操作Excel的学习笔记
2021/02/18 Python
css3 position fixed固定居中问题解决方案
2014/08/19 HTML / CSS
美国在线肉类和海鲜配送:Crowd Cow
2020/10/02 全球购物
remote接口和home接口主要作用
2013/05/15 面试题
大跃进口号
2014/06/16 职场文书
2014党员干部四风问题对照检查材料思想汇报
2014/09/24 职场文书
JavaScript中isPrototypeOf函数
2021/11/07 Javascript
电脑无法安装Windows 11怎么办?无法安装Win11的解决方法
2021/11/21 数码科技
Vue操作Storage本地化存储
2022/04/29 Vue.js
MyBatis在注解上使用动态SQL方式(@select使用if)
2022/07/07 Java/Android