赋值和深/浅拷贝的区别

前端路由 hash 与 history 差异:https://juejin.cn/post/7096034733649297421

赋值和深/浅拷贝的区别

这三者的区别如下,不过比较的前提都是针对引用类型:

  • 当我们把一个对象赋值给一个新的变量时,赋的其实是该对象的在栈中的地址,而不是堆中的数据。也就是两个对象指向的是同一个存储空间,无论哪个对象发生改变,其实都是改变的存储空间的内容,因此,两个对象是联动的。

  • 浅拷贝:浅拷贝是指复制对象的时候,只对第一层键值对进行独立的复制,如果对象内还有对象,则只能复制嵌套对象的地址

  • 深拷贝:深拷贝是指复制对象的时候完全的拷贝一份对象,即使嵌套了对象,两者也相互分离,修改一个对象的属性,也不会影响另一个。其实只要递归下去,把那些属性的值仍然是对象的再次进入对象内部一 一进行复制即可。

浅拷贝的实现方式

对象的浅拷贝

1.设置一个新的对象obj2,通过遍历的方式将obj1对象的值
2.Object.assign()
3.Object.assign()

let obj1 = {
    person: { name: "kobe", age: 41, d: [1, 1] },
    sports: 'basketball',
    d: [1, 2, 3]
  };

  // 1.设置一个新的对象obj2,通过遍历的方式将obj1对象的值
  let obj2 = {}
  for (let i in obj1) {
    obj2[i] = obj1[i]
  }
  // // 2.Object.assign()
  // let obj2 = Object.assign({}, obj1);

  // // 3.展开运算符...
  // let obj2 = { ...obj1 };

  obj2.person.name = "wade";
  obj2.person.d = [0, 1];
  obj2.sports = 'football'
  obj2.d = [4, 5, 6]
  console.log(obj1); // { person: { name: 'wade', age: 41,d: [0,1] }, sports: 'basketball', d: [1, 2, 3] }
  console.log(obj2);// { person: { name: 'wade', age: 41 ,d: [0,1] }, sports: 'football' ,d: [ 4, 5, 6 ]}


数组的浅拷贝

1.设置一个新的对象数组,通过遍历的方式将arr1对象的值
2.Array.concat()
3.Array.slice()

// 数组的浅拷贝
  let arr1 = ['1', '2', '3', { '4': 'value' }, { d: [1, 2, 3] }]
  let arr2 = []

  // 1.设置一个新的对象数组,通过遍历的方式将arr1对象的值
  // for (let i in arr1) {
  //   arr2[i] = arr1[i]
  // }

  // // 2.Array.concat()
  // arr2 = arr1.concat();

  // 3.Array.slice()
  arr2 = arr1.slice();


  arr2[3]['4'] = '1111111111'
  arr2[4]['d'] = [4, 5, 6]
  arr2.push('6')
  console.log(arr1)  // ['1', '2', '3',{ '4': '1111111111' },{d: [4,5,6]}]
  console.log(arr2)  // ['1', '2', '3',{ '4': '1111111111' },{d: [4,5,6]},'6']

深拷贝的实现方式

深拷贝--------JSON.parse(JSON.stringify(obj))

不仅适用于数组还适用于对象!不过存在一个问题,就是不能拷贝函数

// 
  // 不仅适用于数组还适用于对象!不过存在一个问题,就是不能拷贝函数
  let obj1 = {
    a: 'one',
    b: 'two',
    c: {
      name: 'Demi'
    },
    d: [1, 2, 3],

  };

  let obj2 = JSON.parse(JSON.stringify(obj1));
  obj2.b = 'three'
  obj2.c.name = 'dingFY'
  obj2.d = [4, 5, 6]

  console.log(obj1);    // {a: "one", b: "two", c: {name: 'Demi'},d:{[ 1,2,3]}}
  console.log(obj2); // {a: "one", b: "three", c: {name: 'dingFY'},d:{[ 4, 5, 6 ]}}

  let arr1 = ['1', '2', '3', { '4': 'value' }
  ]
  let arr2 = JSON.parse(JSON.stringify(arr1))
  arr2[3]['4'] = '1111111'
  arr2.push('5')

  console.log(arr1);    // ['1', '2', '3',{ '4': 'value' }
  console.log(arr2); // ['1', '2', '3',{ '4': '1111111' ,'5'}
浅拷贝封装方法----原理:遍历对象,然后把属性和属性值都放在一个新的对象
let shallowCopy = function (obj) {
    // 只拷贝对象
    if (typeof obj !== 'object') return;
    // 根据obj的类型判断是新建一个数组还是对象
    let newObj = obj instanceof Array ? [] : {};
    // 遍历obj,并且判断是obj的属性才拷贝
    for (let key in obj) {
      if (obj.hasOwnProperty(key)) {
        newObj[key] = obj[key];
      }
    }
    return newObj;
  }
深拷贝封装方法----我们在拷贝的时候判断一下属性值的类型,如果是对象,我们递归调用深拷贝函数就好了
 let deepCopy = function (obj) {
      // 只拷贝对象
      if (typeof obj !== 'object') return;
      // 根据obj的类型判断是新建一个数组还是对象
      let newObj = obj instanceof Array ? [] : {};
      // 遍历obj,并且判断是obj的属性才拷贝
      for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
          // 如果obj的子属性是对象,则进行递归操作,否则直接赋值
          newObj[key] = typeof obj[key] === 'object' ? deepCopy(obj[key]) : obj[key];
        }
      }
      return newObj;
    }

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,386评论 6 479
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,939评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,851评论 0 341
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,953评论 1 278
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,971评论 5 369
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,784评论 1 283
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,126评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,765评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,148评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,744评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,858评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,479评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,080评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,053评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,278评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,245评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,590评论 2 343

推荐阅读更多精彩内容