为什么要进行深拷贝
JS中的变量在内存中存储分为值类型和引用类型:
值类型:
1、占用空间固定,保存在栈中;
2、保存与复制的是值本身;
3、基本类型数据是值类型(String,Number,undefined,Boolean,Null);
引用类型:
1、占用空间不固定,保存在堆中;
2、保存与复制的是指向对象的一个指针;
3、使用new()方法构造出的对象是引用型;
所以像Object, Array 这样的复杂对象的,需要进行深拷贝;
JOSN.stringify() 深拷贝有什么问题?
最简单的深拷贝呗方式就是使用JSON.stringify();进行深拷贝;比例:
var obj={
name:'大雄',
age:21
};
var obj1=JSON.parse(JSON.stringify(obj));
这样深拷贝出来是完全没有问题的;假如我们有如下的对象,进行深拷贝呢
var obj1={
name:'大雄',
say:function(){
console.log('我会说话哦!');
},
birthday:new Date('1990/01/01')
};
var obj2=JSON.parse(JSON.stringify(obj));
console.log(obj2);
// {name: "大雄", birthday: "1989-12-31T16:00:00.000Z"}
我们看到了,当我们的对象中有函数和日期类型是,日期类型被转化成了字符串;函数属性直接没有了!是不是问题很大! 经过我们测试我们发现:
- undefined、任意的函数以及 symbol 值,在序列化过程中会被忽略
- Date 日期调用了 toJSON() 将其转换为了 string 字符串(Date.toISOString()),因此会被当做字符串处理。
- NaN 和 Infinity 格式的数值及 null 都会被当做 null。
- 其他类型的对象,包括 Map/Set/WeakMap/WeakSet,仅会序列化可枚举的属性。
- 对包含循环引用的对象(对象之间相互引用,形成无限循环)执行此方法,会抛出错误。
// 下面就是循环引用;
var obj1 = {
x: 1,
y: 2
};
obj1.z = obj1;
var obj2 = JSON.parse(JSON.stringify(obj1)); // 栈溢出,抛出错误;
所以当我们要克隆的对象里面还有引用类型时,我们只能采用递归的方法进行遍历了,这里就不展开了。
JOSN.stringify() 有几个参数?
我们主要看一下 第二个参数和第三个参数时干啥用的
- 如果该参数是一个函数,则在序列化过程中,被序列化的值的每个属性都会经过该函数的转换和处理;
- 如果该参数是一个数组,则只有包含在这个数组中的属性名才会被序列化到最终的 JSON 字符串中;
- 如果该参数为 null 或者未提供,则对象所有的属性都会被序列化;
var obj1={
x:1,
y:2
};
var obj2=JOSN.stringify(obj1,function(key,value){
if(typeof value == 'number'){
return value*2
}
return value;
});
// "{x:2,y:4}"
我们再看一下 最后一个参数:
1、指定缩进用的空白字符串,用于美化输出(pretty-print)
2、如果参数是个数字,它代表有多少的空格;
举个例子
JSON.stringify(obj1,null,'\t');
"{
"x": 1,
"y": 2
}"
我我们用制表符来进行缩紧;
原创不易,请大家点赞关注,十分感谢!
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用?
- 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了?
- 找不到素材资源介绍文章里的示例图片?
- 模板不会安装或需要功能定制以及二次开发?
发表评论
还没有评论,快来抢沙发吧!