JavaScript数组和对象的复制


Posted in Javascript onMarch 21, 2017

一、数据类型

从狭义上来说,JS把所有的数据分成两大类型:基本类型和引用类型,其中基本类型包括Undefined、Null、Boolean、Number和String,引用类型为Object,常用的Array、Date、RegExp、Function等都属于Object类型。

基本型数据和引用型数据的区别之一就是,在复制变量时,基本型数据复制独立的一份新的拷贝,而引用型数据复制的是原变量的引用。下面是一个例子:

// 基本类型数据的复制
var a = 10;
var b = a; // b = 10
a = 20; // a = 20, b = 10
// 引用类型数据的复制
var m = [1, 2];
var n = m;
m[0] = 10;
console.log(n[0]); // 10

如果我想复制引用类型本身的值而非引用,显然不能采用上面的方式。

二、数组的浅复制

浅复制是指对象(数组)被复制时,其引用字段的值不会被复制,而是复制了对应字段的引用。如:

var src = [
 'alpha',
 ['bravo', 'chalie']
];
var dest = [];
for (var i = 0; i < src.length; i++) {
 dest[i] = src[i];
}
//此时,如果改变src中的引用字段,dest中相应的字段也会被改变
src[1].push('delta');
console.log(dest[1]); // ['bravo', 'chalie', 'delta']

浅复制一般用于一维数组,即数组中不存在引用类型的情况。常用的浅复制方法有:

concat方法

var src = ['alpha', 'bravo'],
  dest = [];
 dest = dest.concat(src);

concat方法更多地被用在数组合并中,比如:

var a = ['alpha', 'bravo'],
  b = ['chalie', 'delta'],
  combine;
 combine = a.concat(b);

特别要指出,concat用于数组合并时,是将两个(或多个)数组中的所有元素复制到新的对象,对于大型数组来说,开销比较大。更好的办法是把后一个数组的元素复制到前一个数组中:

var src = ['alpha', 'bravo'],
  dest = ['chalie', 'delta'];
 Array.prototype.push.apply(src, dest);

slice方法

slice方法可以从已有数组中返回选定的元素,返回的是一个新数组。

var src = ['alpha', 'bravo'],
 var dest = src.slice(0);

三、对象的浅复制

对象的浅复制可以用for-in遍历来实现,在es6中提供了更为方便的Object.assign()方法。

var src = {name: 'fox', age: 20},
  dest = null;
 dest = Object.assign({}, src);

也可以使用jQuery中的$.extend,underscore中的_.extend等方法来实现对象的复制。

四、深度复制

浅复制的应用场景有限,更多情况下,我们希望能够将对象复制出一个完整的副本,这就需要用到typeof或instanof操作符来对各个字段的类型进行判断。如果某字段是基本类型的,可以直接复制。如果某字段是引用类型的,还需要对该字段的所有字段进行上述判断,这就很容易让我们考虑使用递归来实现这个功能。

function deep_copy(src, dest) {
 for (var p in src) {
  if (Array.isArray(src[p]) || src[p] instanceof Object) {
   dest[p] = Array.isArray(src[p]) ? [] : {};
   arguments.callee(dest[p], src[p]);
  }else {
   dest[p] = src[p];
  }
 }
}

在上述代码中,由于数组是特殊的对象,因此可以用for-in来遍历。

另外,还可以使用json大法:

function deep_copy_in_json(src) {
  return JSON.parse(JSON.stringify(src));
 }

这样做虽然比较简便,但原对象的很多属性在操作后会丢失,比如construtor属性以及对象原型中的一些方法。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
javascript 隐藏/显示指定的区域附HTML元素【legend】用法
Mar 05 Javascript
jquery maxlength使用说明
Sep 09 Javascript
javascript中offset、client、scroll的属性总结
Aug 13 Javascript
javascript实现密码验证
Nov 10 Javascript
详解Jquery的事件操作和文档操作
Dec 19 Javascript
js数字滑动时钟的简单实现(示例讲解)
Aug 14 Javascript
React key值的作用和使用详解
Aug 23 Javascript
JS实现的A*寻路算法详解
Dec 14 Javascript
微信小程序利用swiper+css实现购物车商品删除功能
Mar 06 Javascript
ajaxfileupload.js实现上传文件功能
Apr 19 Javascript
Vue 列表上下过渡效果的实例代码
Jun 25 Javascript
vue实现点击按钮“查看详情”弹窗展示详情列表操作
Sep 09 Javascript
Vue响应式添加、修改数组和对象的值
Mar 20 #Javascript
zTree实现节点修改的实时刷新功能
Mar 20 #Javascript
Vue指令的钩子函数使用方法
Mar 20 #Javascript
非常实用的vue导航钩子
Mar 20 #Javascript
Vue2.0实现1.0的搜索过滤器功能实例代码
Mar 20 #Javascript
如何解决vue与传统jquery插件冲突
Mar 20 #Javascript
Vue.js路由vue-router使用方法详解
Mar 20 #Javascript
You might like
php支付宝手机网页支付类实例
2015/03/04 PHP
给PHP开发者的编程指南 第一部分降低复杂程度
2016/01/18 PHP
Laravel 6 将新增为指定队列任务设置中间件的功能
2019/08/06 PHP
HTML5之lang属性与dir属性的详解
2013/06/19 Javascript
js中判断用户输入的值是否为空的简单实例
2013/12/23 Javascript
父页面显示遮罩层弹出半透明状态的dialog
2014/03/04 Javascript
JavaScript数组常用操作技巧汇总
2014/11/17 Javascript
jquery判断当前浏览器的实现代码
2015/11/07 Javascript
购物车前端开发(jQuery和bootstrap3)
2016/08/27 Javascript
JS用斜率判断鼠标进入DIV四个方向的方法
2016/11/07 Javascript
EasyUI折叠表格层次显示detailview详解及实例
2016/12/28 Javascript
小程序开发实战:实现九宫格界面的导航的代码实现
2017/01/19 Javascript
Angular实现购物车计算示例代码
2017/02/21 Javascript
js实现PC端根据IP定位当前城市地理位置
2017/02/22 Javascript
Javascript前端经典的面试题及答案
2017/03/14 Javascript
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
2018/04/17 jQuery
微信小程序时间轴实现方法示例
2019/01/14 Javascript
Layui之table中的radio在切换分页时无法记住选中状态的解决方法
2019/09/02 Javascript
详解Nuxt.js 实战集锦
2019/11/19 Javascript
Python聚类算法之基本K均值实例详解
2015/11/20 Python
Python实现字典去除重复的方法示例
2017/07/31 Python
Python中的groupby分组功能的实例代码
2018/07/11 Python
Django框架模型简单介绍与使用分析
2019/07/18 Python
在Pytorch中使用样本权重(sample_weight)的正确方法
2019/08/17 Python
Pandas时间序列重采样(resample)方法中closed、label的作用详解
2019/12/10 Python
详解Python中namedtuple的使用
2020/04/27 Python
Python reques接口测试框架实现代码
2020/07/28 Python
python中count函数知识点浅析
2020/12/17 Python
HTML5是什么 HTML5是什么意思 HTML5简介
2012/10/26 HTML / CSS
Currentbody德国站:健康与美容技术专家
2020/04/05 全球购物
介绍一下Ruby中的对象,属性和方法
2012/07/11 面试题
幼师求职信
2014/06/23 职场文书
招商银行工作证明
2015/06/17 职场文书
小学英语教学经验交流材料
2015/11/02 职场文书
小学2016年“我们的节日·重阳节”活动总结
2016/04/01 职场文书
python如何正确使用yield
2021/05/21 Python