JavaScript中赋值、浅拷贝和深拷贝的区别

赋值,浅拷贝,深拷贝

和原数据是否指向同一对象第一层数据为基本数据类型原数据中包含子对象
赋值会使原数据一起改变会使原数据一起改变
浅拷贝不会使原数据一起改变会使原数据一起改变
深拷贝不会使原数据一起改变不会使原数据一起改变

赋值:赋值是将某一数值或对象赋给某个变量的过程

1、基本数据类型
2、引用数据类型

浅拷贝:创建一个新对象,这个对象有着原始对象属性值的一份精确拷贝

1.如果属性是基本数据类型,拷贝的就是基本类型的值
2.如果属性是引用数据类型,拷贝的就是内存地址
所以如果其中一个对象改变了这个地址,就会影响到另一个对象。

浅拷贝具体例子:

Object.assign()方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。
Array.prototype.slice()不会改变原数组,slice() 方法返回一个新的数组对象,这一对象是一个由 beginend(不包括end)决定的原数组的浅拷贝

深拷贝:深拷贝会拷贝所有的属性,并拷贝属性指向的动态分配的内存

当对象和它所引用的对象一起拷贝时即发生深拷贝。深拷贝相比于浅拷贝速度较慢并且花销较大。拷贝前后两个对象互不影响。

深拷贝具体例子:

JSON.parse(JSON.stringify(object))
jQuery.extend()lodash.cloneDeep()
其中(1)(2)(3) undefinedsymbol 和函数这三种情况,会直接忽略。

// saucxs
let obj = {
    name: 'saucxs',
    a: undefined,
    b: Symbol('saucxs'),
    c: function() {}
}
console.log(obj);
// {
// 	name: "saucxs", 
// 	a: undefined, 
//  b: Symbol(saucxs), 
//  c: ƒ ()
// }


let b = JSON.parse(JSON.stringify(obj));
console.log(b);
// {name: "saucxs"}

其中(4)循环引用会报错

// saucxs
let obj = {
    a: 1,
    b: {
        c: 2,
   		d: 3
    }
}
obj.a = obj.b;
obj.b.c = obj.a;

let b = JSON.parse(JSON.stringify(obj));
// Uncaught TypeError: Converting circular structure to JSON

其中(5)* new Date 情况下,转换结果不正确。

// saucxs
new Date();
// Mon Dec 24 2018 10:59:14 GMT+0800 (China Standard Time)

JSON.stringify(new Date());
// ""2018-12-24T02:59:25.776Z""

JSON.parse(JSON.stringify(new Date()));
// "2018-12-24T02:59:41.523Z"

解决方法转成字符串或者时间戳就好了。

// saucxs
let date = (new Date()).valueOf();
// 1545620645915

JSON.stringify(date);
// "1545620673267"

JSON.parse(JSON.stringify(date));
// 1545620658688

其中(6)正则情况下

// saucxs
let obj = {
    name: "saucxs",
    a: /'123'/
}
console.log(obj);
// {name: "saucxs", a: /'123'/}

let b = JSON.parse(JSON.stringify(obj));
console.log(b);
// {name: "saucxs", a: {}}
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值