JS 对象数组浅拷贝,深拷贝

初学 同时被 2 个专栏收录
10 篇文章 0 订阅
10 篇文章 0 订阅

对象数组的深拷贝与浅拷贝,简单点来说,就是b复制了a,当a被修改时,未操作b,但b也跟着变了,就是浅拷贝,反之是深拷贝

深拷贝本身只针对较为复杂的object类型数据

浅拷贝

var a=[{name:'zhangsan',age:12},{name:'lisi',age:20}];
var b=a;
a[1].age=18;
console.log(a,b);

运行结果,a,b的age都发生了改变
在这里插入图片描述
伪深拷贝,仍然是浅拷贝 slice
只对数组第一层有效

var a=[{name:'zhangsan',age:12},{name:'lisi',age:20},1];
var b=a.slice();
a[1].age=18;
a[2]=2
console.log(a,b);

在这里插入图片描述
有缺陷的深拷贝
它的主要缺点是,只限于处理可被 JSON.stringify() 编码的值。
JSON.stringify() 将编码 JSON 支持的值。包含 Boolean,Number,String,以及对象,数组。其他任何内容都将被特殊处理。
FunctionSymbol 时,它被忽略掉
InfinityundefinedNaN 会被变成 null
Date 对象会被转化为 String (默认调用date.toISOString())

var a=[{name:'zhangsan',age:12},{name:'lisi',age:20},1,undefined,NaN];
var b = JSON.parse(JSON.stringify(a))
a[1].age=18;
a[2]=2
console.log(a,b);

在这里插入图片描述
深拷贝

var a=[{name:'zhangsan',age:12},{name:'lisi',age:20}];
var b=a.map(o => ({...o}));
a[1].age=18;
a[2]=2
console.log(a,b);

在这里插入图片描述
JQuery方法深拷贝

$.extend([deep],target,object1[,objectN])

deep表示是否深拷贝,为true为深拷贝,为false,则为浅拷贝

targetObject类型 目标对象,其他对象的成员属性将被附加到该对象上。

object1 objectN可选。 Object类型 第一个以及第N个被合并的对象

b=$.extend(true,[],a);
  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值