JavaScript数组和对象的复制

 更新时间:2017年03月21日 08:37:01   作者:tonyinsh  
本篇文章主要介绍了JavaScript数组和对象的复制的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧

一、数据类型

从狭义上来说,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属性以及对象原型中的一些方法。

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

相关文章

  • 微信小程序中如何实现动态改变SVG颜色和尺寸

    微信小程序中如何实现动态改变SVG颜色和尺寸

    SVG可被非常多的工具读取和修改SVG与JPEG和GIF图像比起来,尺寸更小,且可压缩性更强,下面这篇文章主要给大家介绍了关于微信小程序中如何实现动态改变SVG颜色和尺寸的相关资料,需要的朋友可以参考下
    2022-07-07
  • JS实现图片拖拽交换效果

    JS实现图片拖拽交换效果

    这篇文章主要为大家详细介绍了JS实现图片拖拽交换效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-11-11
  • js实现移动端轮播图滑动切换

    js实现移动端轮播图滑动切换

    这篇文章主要为大家详细介绍了js实现移动端轮播图滑动切换,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-12-12
  • JS实现的碰撞检测与周期移动完整示例

    JS实现的碰撞检测与周期移动完整示例

    这篇文章主要介绍了JS实现的碰撞检测与周期移动,结合完整实例形式分析了javascript结合时间函数的页面元素属性动态操作及事件响应相关使用技巧,需要的朋友可以参考下
    2019-09-09
  • 微信小程序 wx.login解密出现乱码的问题解决办法

    微信小程序 wx.login解密出现乱码的问题解决办法

    这篇文章主要介绍了微信小程序 wx.login解密出现乱码的问题解决办法的相关资料,需要的朋友可以参考下
    2017-03-03
  • TypeScript遍历Array的方法(for,forEach,every)

    TypeScript遍历Array的方法(for,forEach,every)

    本文主要介绍了TypeScript遍历Array的方法(for,forEach,every),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-06-06
  • javascript中String对象的slice()方法分析

    javascript中String对象的slice()方法分析

    这篇文章主要介绍了javascript中String对象的slice()方法,以实例形式分析了slice()方法的定义、参数与具体用法,具有一定的参考借鉴价值,需要的朋友可以参考下
    2014-12-12
  • javascript实现修改微信分享的标题内容等

    javascript实现修改微信分享的标题内容等

    这篇文章主要介绍了javascript实现修改微信分享的标题内容等,需要的朋友可以参考下
    2014-12-12
  • Javascript函数的参数

    Javascript函数的参数

    本文给大家分享的是网易云课堂中金旭亮老师的课堂笔记,对于大家学习javascript非常有帮助,这里推荐给小伙伴们
    2015-07-07
  • TypeScript中的接口Interface详解(对象类型的强大工具)

    TypeScript中的接口Interface详解(对象类型的强大工具)

    TypeScript中的接口是一个强大而灵活的特性,它为我们提供了一种清晰、简洁的方式来定义对象的结构和类型,通过使用接口,我们可以编写更加健壮、可维护的代码,这篇文章主要介绍了TypeScript中的接口(Interface):对象类型的强大工具,需要的朋友可以参考下
    2024-08-08

最新评论