JavaScript数组和对象的复制的代码实例分析-js教程-PHP中文网

JavaScript数组和对象的复制的代码实例分析

黄舟

发布： 2017-03-21 14:26:17

原创

1285人浏览过

本篇文章主要介绍了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

登录后复制

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

立即学习“Java免费学习笔记（深入）”；

二、数组的浅复制

浅复制是指对象（数组）被复制时，其引用字段的值不会被复制，而是复制了对应字段的引用。如：

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用于数组合并时，是将两个（或多个）数组中的所有元素复制到新的对象，对于大型数组来说，开销比较大。更好的办法是把后一个数组的元素复制到前一个数组中：

SCA介绍及应用实例中文WORD版

本文档主要讲述的是SCA介绍及应用实例；SCA（Service Component Architecture）是针对SOA提出的一套服务体系构建框架协议，内部既融合了IOC的思想，同时又把面向对象的复用由代码复用上升到了业务模块组件复用，同时将服务接口，实现，部署，调用完全分离，通过配置的形式灵活的组装，绑定。希望本文档会给有需要的朋友带来帮助；感兴趣的朋友可以过来看看

查看详情

 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);

登录后复制

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

四、深度复制

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

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来遍历。

另外，还可以使用对象3大法：

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

登录后复制

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

以上就是JavaScript数组和对象的复制的代码实例分析的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

JavaScript职责链模式_中间件架构 JavaScript打包优化_代码分割与Tree Shaking实践精通正则表达式：实现WhatsApp风格的富文本格式转换 JavaScript 连续倒计时实现教程 JavaScript同构应用_客户端与服务端代码复用