JSON.stringify深拷贝的缺点

更新日期: 2020-10-02阅读: 1.3k标签: 拷贝

浅拷贝和深拷贝:

针对对象
深拷贝和浅拷贝只针对像Object和Array这样的复杂对象的,String,Number等简单类型不存在深拷贝。


浅拷贝:
因为浅拷贝只会将对象的各个属性进行依次复制,并不会进行递归复制。在JavaScript中,对于Object和Array这类引用类型值,当从一个变量向另一个变量复制引用类型值时,这个值的副本其实是一个指针,两个变量指向同一个堆对象,改变其中一个变量,另一个也会受到影响。所以浅拷贝会导致 obj.arr 和 shallowObj.arr 指向同一块内存地址,当修改obj.arr的值时,shallowObj.arr的值同样会被修改,

var a={a:1,b:2,c:3}
var b=a
b.a=2
console.log(a,b)


深拷贝
而深拷贝则不同,它不仅将原对象的各个属性逐个复制出去,而且将原对象各个属性所包含的对象也依次采用深拷贝的方法递归复制到新对象上。这就不会存在上面 obj 和 shallowObj 的 arr 属性指向同一个对象的问题。当修改obj.arr的值时,shallowObj.arr的值不会被修改,仍然为原值

function deepClone(obj){
let obj_ = JSON.stringify(obj),
loneObj = JSON.parse(obj_);
return loneObj
}
let a=[1,2,3,4],
b=deepClone(a);
b[0] = 2;
console.log(a,b);


弊端:

1.如果obj里面有时间对象,则JSON.stringify后再JSON.parse的结果,时间将只是字符串的形式,而不是对象的形式

var test = {
name: ‘a‘,
date: [new Date(1536627600000), new Date(1540047600000)],
};

let b;
b = JSON.parse(JSON.stringify(test));
console.log(b);

2.如果obj里有RegExp(正则表达式的缩写)、Error对象,则序列化的结果将只得到空对象;

const test = {
name: ‘a‘,
date: new RegExp(‘\\w+‘),
};
// debugger
const copyed = JSON.parse(JSON.stringify(test));
test.name = ‘test‘
//console.error(‘ddd‘, test, copyed);
console.log(copyed);


3、如果obj里有函数,undefined,则序列化的结果会把函数或 undefined丢失;

const test = {
name: ‘a‘,
date: function hehe() {
console.log(‘fff‘)
},
};
// debugger
const copyed = JSON.parse(JSON.stringify(test));
test.name = ‘test‘
console.error(‘ddd‘, test, copyed);


4、如果obj里有NaN、Infinity和-Infinity,则序列化的结果会变成null


5、JSON.stringify()只能序列化对象的可枚举的自有属性,例如 如果obj中的对象是有构造函数生成的, 则使用JSON.parse(JSON.stringify(obj))深拷贝后,会丢弃对象的constructor;

function Person(name) {
this.name = name;
console.log(name)
}

const liai = new Person(‘liai‘);

const test = {
name: ‘a‘,
date: liai,
};
// debugger
const copyed = JSON.parse(JSON.stringify(test));
test.name = ‘test‘
console.error(‘ddd‘, test, copyed)


6、如果对象中存在循环引用的情况也无法正确实现深拷贝;


总结:

用法简单,然而使用这种方法会有一些隐藏的坑:因为在序列化JavaScript对象时,所有函数和原型成员会被有意忽略。

通俗点说,JSON.parse(JSON.stringfy(X)),其中X只能是Number, String, Boolean, Array, 扁平对象,即那些能够被 JSON 直接表示的数据结构。


JSON.stringify()的几种妙用:

判断数组是否包含某对象,或者判断对象是否相等。

let data = [
{name:‘echo‘},
{name:‘听风是风‘},
{name:‘天子笑‘},
],
val = {name:‘天子笑‘};
console.log(JSON.stringify(data).indexOf(JSON.stringify(val)) !== -1);
console.log(data.indexOf(val) !== -1)
//因为数组和对象是引用值不能比较,所以需要序列化一下转成字符串

判断两数组/对象是否相等

let a = [1,2,3],
b = [1,2,3];
JSON.stringify(a) === JSON.stringify(b);//true

让localStorage/sessionStorage可以存储对象。

localStorage/sessionStorage默认只能存储字符串,而实际开发中,我们往往需要存储的数据多为对象类型,那么这里我们就可以在存储时利用json.stringify()将对象转为字符串,而在取缓存时,只需配合json.parse()转回对象即可。

//存
function setLocalStorage(key,val){
window.localStorage.setItem(key,JSON.stringify(val));
};
//取
function getLocalStorage(key){
let val = JSON.parse(window.localStorage.getItem(key));
return val;
};
//测试
setLocalStorage(‘demo‘,[1,2,3]);
let a = getLocalStorage(‘demo‘);//[1,2,3]


JSON.stringify()与toString()这两者虽然都可以将目标值转为字符串,但本质上还是有区别的,比如

let arr = [1,2,3];
console.log(JSON.stringify(arr));//‘[1,2,3]‘
console.log(arr.toString());//1,2,3



链接: https://www.fly63.com/article/detial/9807

js中深拷贝和浅拷贝的区别及原理

javascript的深拷贝和浅拷贝主要是针对像Object, Array这样的复杂对象的,简单理解为浅拷贝只复制一层对象的属性,而深拷贝则递归复制了所有层级。

使用JSON.parse(),JSON.stringify()实现对对象的深拷贝

JSON.parse(),JSON.stringify()实现对对象的深拷贝以及兼容性问题,根据不包含引用对象的普通数组深拷贝得到启发,不拷贝引用对象,拷贝一个字符串会新辟一个新的存储地址,这样就切断了引用对象的指针联系。

使用jquery克隆对象_实现深、浅拷贝的简单实例

克隆JavaScript对象,首页想到的是obj = eval(uneval(obj)),但这是非标准的,推荐使用jquery提供的jQuery.extend方法,因为它包含了一些额外的类型验证逻辑,并且不会复制未定义的属性等。

JS中如何进行对象的深拷贝

在JS中,一般的=号传递的都是对象/数组的引用,并没有真正地拷贝一个对象,那如何进行对象的深度拷贝呢?对象的深拷贝与浅拷贝的区别如下:浅拷贝:仅仅复制对象的引用,而不是对象本身;深拷贝:把复制的对象所引用的全部对象都复制一遍。

javascript实现数组或对象的深拷贝

可以看出来,改变原数组arr,并没有对新数组copyArr产生影响;改变新数组copyArr也没有对原数组arr产生影响;同样:改变原数组arr,并没有对新数组copyArr产生影响;改变新数组copyArr也没有对原数组arr产生影响;

关于内存拷贝(浅拷贝)和js链表的小知识点

记录一个做leetcode看答案学到的小知识。。。浅拷贝实现一些特殊的功能的一些应用场景,比如:我们有一个需求如下

js的浅拷贝 VS 深拷贝

我们常常会用到拷贝对象的功能,而拷贝有浅拷贝和深拷贝2种。这篇文章会着重讲2个方面:1: 浅拷贝和深拷贝的区别2: 浅拷贝和深拷贝的具体实现,拷贝我们常常用在把A对象的属性copy到B对象,这样B对象就拥有了A对象的属性。

理解JS中的深拷贝与浅拷贝

了解深拷贝也不仅仅是为了应付面试题,在实际开发中也是非常有用的。例如后台返回了一堆数据,你需要对这堆数据做操作,但多人开发情况下,你是没办法明确这堆数据是否有其它功能也需要使用,直接修改可能会造成隐性问题

Js实现深浅复制

JavaScript中有两种数据类型,基本数据类型如undefined、null、boolean、number、string,另一类是Object。简单数据类型只存储在内存中的栈区,复制的时候是值传递给新的索引。而复杂数据类型由栈区和堆区共同储存

14个JS数组拷贝技巧

数组拷贝经常被误解,但这并不是因为拷贝过程本身,而是因为缺乏对 JS 如何处理数组及其元素的理解。JS 中的数组是可变的,这说明在创建数组之后还可以修改数组的内容。这意味着要拷贝一个数组,咱们不能简单地将旧数组分配给一个新变量

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!