js 的深拷贝和浅拷贝

要讲 js 的深浅拷贝就必须了解js的数据类型

基本数据类型:null、undefined、number 、string 、boolean 、symbol(es6)

引用数据类型:Object,Array, Map ....

数据赋值

- 基本数据类型拷贝对象的值,两个变量的值相等但是确实两个不同的变量。

- 引用数据类型拷贝的是对象的地址,两个变量指向同一个对象实例。改变其中一个变量的属性都会影响两外一个变量。【其实就是赋值了一个地址,但是没有创建新的对象】

深浅拷贝是对引用数据类型来说的

浅拷贝: 拷贝对象时只拷贝对象属性的一层,当对象的属性也是一个对象时拷贝的是对象的地址。

所以浅拷贝在对象的属性不全是基本数据类型的时候会带来一些问题,因为对象的属性对象指向的

是同一个对象实例,那么在改变的时候就会影响元数据。

const obj = {
  a1:1,
  a2:'a1',
  a3:{ b1: 2, b2:'b2' }
}

// 浅拷贝的方式
const nobj = {...obj}  es6语言
const nobj = Object.assign({},obj);  
const nobj = Object.keys(obj).reduce((res,cur) => ({ ...res,[cur]:obj[cur]}),{});
const nobj = {};
for(let key in obj)
  nobj[key] = obj[key];

// 新知识点 const 表示的常量, 对于基本数据类型来说是不可以改变值的,对于引用数据类型来说是不可以改变引用类型的地址的,但是却可以改变引用数据类的属性的值

// 深拷贝的方式【需要自己补充其他引用数据类型的拷贝】
function deepClone(obj){
  const type = Object.prototype.toString.call(obj);
  switch(type){
    case '[object Object]':
      const cloneObj = {};
      for(let key in obj)
        cloneObj[key] = deepClone(obj[key]);
      return cloneObj;
    case '[object Array]':
      return obj.map(item => deepClone(item));
    default:
      return obj;
  }
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值