深浅拷贝小整理(对象赋值请注意)

深浅拷贝小整理

1. 一些基础知识

  1. js数据类型分为基本数据类型=>Number、String、Boolean、Null、Undefined和引用(对象)数据类型=>Object包括有Function、Array、Date
  2. 基本数据类型存放在栈中,访问是按值访问;
  3. 引用类型指的是对象,可以拥有属性和方法,我们可以修改其属性和方法,引用对象存放的方式是:在栈中存放对象变量标识名称和该对象在堆中的存放地址,在堆中存放数据;
  4. 引用赋值,当我们把一个对象赋值给一个新的对象时,赋的其实是该对象在堆中的地址,而不是堆中的数据,即两个对象指向的同一个存储空间,无论哪个对象发生改变,其实改变的是存储空间中的内容,因此两个对象是联动的,会互相影响。

2. 深浅拷贝

  1. 浅拷贝:浅拷贝只复制指向某个对象的指针,而不复制对象本身,新旧对象共存同一内存;
  2. 深拷贝:会另外创建一个一模一样的对象,即有自己新的内存地址来存放复制的对象,改变新对象不会改变原对象。

3. 方法

  1. 一类:
    Object.assign()方法:newObj = object.assign({},obj)
    扩展运算符:const newObj = {...obj}
    slice()方法:newArr = arr.slice(0)
    concat()方法:newArr = [].concat(arr,arr2,…)
    提示:以上方法都只能深拷贝对象第一层,二层以上就是浅拷贝了;
    例如以下示例:
const obj = { a:6, b:undefined, arr:[1,2,3], fun:()=>{}}
const newObj = Object.assign({},obj)
obj.arr[0]=99
console.log(obj,newObj);

在这里插入图片描述

  1. 二类:
    实现多维深拷贝可以使用JSON转换方法newObj = JSON.parse(JSON.stringify(obj)),但是此方法在数据类型为function和undefined情况下无法复制;示例以下:
const obj = { a:6, b:undefined, arr:[1,2,3], fun:()=>{}}
const newObj = JSON.parse(JSON.stringify(obj))
obj.arr[0]=99
console.log(obj, newObj);

在这里插入图片描述

  1. 三类:
    最ok的方法是写一个递归deepClone函数
function deepClone(obj) {
  let newObj = null;
  // 判断数据类型是否是复杂的数据类型,如果是则往下走,不是则直接赋值
  // null不可以进行循环但又是object,需要判断
  if (typeof (obj) == 'object' && obj !== null) {
    newObj = obj instanceof Array ? [] : {};
    // 循环obj的每一项,如果还有复杂的数据类型,再次递归
    for (let i in obj) {
      newObj[i] = deepClone(obj[i])
    }
  } else {
    newObj = obj
  }
  return newObj; 
}

const obj = { 
  a: "test",
  b:undefined,
  arr:[1,2,3],
  main: {
    a: 1,
    b: 2
  },
  fun:()=>{}
}

let newObj = deepClone(obj);
newObj.a = '修改值';
newObj.main.a = 110;
newObj.arr[0] = 99;
console.log(obj, newObj);

在这里插入图片描述

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值