美文网首页
认识js下的浅拷贝与深拷贝

认识js下的浅拷贝与深拷贝

作者: 小焲 | 来源:发表于2017-08-13 23:27 被阅读0次

浅拷贝与深拷贝

首先深拷贝和浅拷贝只针对像 Object, Array 这样的复杂对象的。简单来说,浅拷贝只拷贝一层对象的属性,而深拷贝则递归拷贝了所有层级。

浅拷贝

在使用JavaScript对数组进行操作的时候,我们经常需要将数组进行备份,事实证明如果只是简单的将它赋予其他变量,那么我们只要更改其中的任何一个,然后其他的也会跟着改变。

var arr = ["One","Two","Three"];
var arrto = arr;
arrto[1] = "test";
document.writeln("数组的原始值:" + arr + "<br />");
//Export:数组的原始值:One,test,Three
document.writeln("数组的新值:" + arrto + "<br />");
//Export:数组的新值:One,test,Three

像上面的这种直接赋值的方式就是浅拷贝,很多时候,这样并不是我们想要得到的结果。因为浅拷贝只会将对象的各个属性进行依次拷贝,并不会进行递归拷贝,而 JavaScript 存储对象都是存地址的,所以浅拷贝会导致 arr 和 arrto 指向同一块内存地址。

深拷贝

而深拷贝则不同,它不仅将原对象的各个属性逐个拷贝出去,而且将原对象各个属性所包含的对象也依次采用深拷贝的方法递归拷贝到新对象上。即深拷贝会产生新的地址,修改一个对象的属性,不会改变另一个对象的属性。

深拷贝的实现方法

数组

1. js的slice函数
arrayObj.slice(start, [end]);
如var newarr = arr.slice(0);

2.js的concat方法 
arrayObject.concat(arrayX,arrayX,......,arrayX);
如var newarr = arr.slice(0);

对象

1.通过JSON解析解决
JSON.stringify:将对象转化为字符串;
JSON.parse :将字符串转化为对象;
如var newobj= JSON.parse(JSON.stringify(obj)); 

2.遍历对象属性
var deepCopy= function(source) { 
var result={};
for (var key in source) {
    result[key] = typeof source[key]===’object’? deepCoyp(source[key]): source[key];
 } 
 return result; 
}

复合写法

var cloneObj = function(obj){
var str, newobj = obj.constructor === Array ? [] : {};
if(typeof obj !== 'object'){
return;
} else if(window.JSON){
str = JSON.stringify(obj), //系列化对象
newobj = JSON.parse(str); //还原
} else {
for(var i in obj){
newobj[i] = typeof obj[i] === 'object' ?
cloneObj(obj[i]) : obj[i];
}
}
return newobj;
};

相关文章

  • JS中的深拷贝与浅拷贝

    知乎:js中的深拷贝和浅拷贝? 掘金: js 深拷贝 vs 浅拷贝 前言 首先深拷贝与浅拷贝只针对 Object,...

  • js浅拷贝深拷贝

    js浅拷贝,深拷贝的简单实现 基础数据 浅拷贝 深拷贝

  • 认识js下的浅拷贝与深拷贝

    浅拷贝与深拷贝 首先深拷贝和浅拷贝只针对像 Object, Array 这样的复杂对象的。简单来说,浅拷贝只拷贝一...

  • 浅拷贝和深拷贝

    本文参考:JavaScript中的浅拷贝和深拷贝js 深拷贝 vs 浅拷贝深入剖析 JavaScript 的深复制...

  • js浅拷贝、深拷贝

    前言 本文主要简单讲一下什么是浅拷贝、什么是深拷贝、深拷贝与浅拷贝的区别,以及怎么进行深拷贝和怎么进行浅拷贝。 一...

  • 深拷贝VS浅拷贝

    深拷贝VS浅拷贝 本文主要对深拷贝&浅拷贝的解释及实现做一下简单记录。 之所以会有深拷贝与浅拷贝之分,是因为不同数...

  • js 深拷贝 vs 浅拷贝(本篇博客摘抄子掘金‘sunshine

    链接本文主要讲一下 js 的基本数据类型以及一些堆和栈的知识和什么是深拷贝、什么是浅拷贝、深拷贝与浅拷贝的区别,以...

  • js面试题

    1,js的深拷贝与浅拷贝 如何区分深拷贝与浅拷贝,简单点来说,就是假设B复制了A,当修改A时,看B是否会发生变化,...

  • 深拷贝与浅拷贝

    本文将讲述一下几点 深拷贝与浅拷贝的区别。 深拷贝的常用方法 切记。只有引用类型才存在深拷贝与浅拷贝的问题哦~,基...

  • JS实现深拷贝、instanceof、判断是否为数组

    JS深拷贝 JS中拷贝对象可以按照拷贝的程度可以分为浅拷贝和深拷贝,有些时候我们需要拷贝之后的对象和拷贝之前的对象...

网友评论

      本文标题:认识js下的浅拷贝与深拷贝

      本文链接:https://www.haomeiwen.com/subject/gpqyrxtx.html