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属性以及对象原型中的一些方法。
以上就是JavaScript数组和对象的复制的代码实例分析的详细内容,更多请关注其它相关文章!
推荐阅读
-
javascript中数组(Array)对象和字符串(String)对象的常用方法总结
-
js对象数组和对象的使用实例详解
-
数组排序,对象排序的代码实例
-
js比较两个单独的数组或对象是否相等的实例代码
-
JavaScript中toLocaleString()和toString()的区别实例分析
-
JavaScript中的模拟事件和自定义事件实例分析
-
JavaScript Math对象和调试程序的方法分析
-
javascript遍历json对象的key和任意js对象属性实例
-
JavaScript面向对象学习之类的创建,类的抽象代码实例讲解
-
遍历某个数组里的字段,拼接到需要的对象里,相对应的修改字段名称(代码实例)