JS 深浅拷贝

iteval

已于 2022-07-13 09:15:06 修改

阅读量225

点赞数

分类专栏： js 文章标签： javascript 前端

于 2022-07-13 08:49:35 首次发布

本文链接：https://blog.csdn.net/weixin_45042661/article/details/125755905

版权

js 专栏收录该内容

48 篇文章 0 订阅

订阅专栏

在日常开发当中那面会遇到对象拷贝问题

一、对象浅拷贝（shallowClone）

使用 Object.assign 把源对象自身的、可枚举的属性拷贝到目标对象上

var person = {
  name: '张三',
  age: 18,
  sex: '男',
  hobbies: ['篮球', '足球', '排球'],
  sayName: function () {
    console.log(this.name);
  },
  play: null,
  info: {
    address: '四川成都',
    child: [
      {
        id: 1,
        name: '张小三',
        age: 5,
        sex: '女'
      }
    ]
  }
};

var newPerson = Object.assign({}, person);
console.log(newPerson);

拷贝后新旧对象的对比：
在这里插入图片描述

但是当我操作对象里面更深层次的属性之后：
在这里插入图片描述
结果把源数据给改了

使用 for in 遍历拷贝

function shallowClone(target, origin) {
	var tar = target || {};
	
	for (var key in origin) {
		// 过滤原型上的属性
		origin.hasOwnProperty(key) && (target[key] = origin[key]);
	}

	return tar;
}

二、深拷贝（deepClone）

使用 for in 循环遍历 + 递归

判断是不是原型上的属性
判断是引用值（注意：typeof null === 'object'）还是原始值
如果是引用值就递归继续拷贝，否则就直接拷贝
把拷贝好的对象 return 出去

function deepClone(target, origin) {
  var target = target || {},
      toStr = Object.prototype.toString,
      arrType = '[object Array]';

  for (var key in origin) {
    if (origin.hasOwnProperty(key)) {
      if (typeof origin[key] === 'object' && origin[key] !== null) {
        target[key] = toStr.call(origin[key]) === arrType ? [] : {};
        deepClone(target[key], origin[key]);
      } else {
        target[key] = origin[key];
      }
    }
  }

  return target;
}

当我操作拷贝之后的对象：
在这里插入图片描述
结果源对象不会发生改变：

简单粗暴直接 JSON.parse(JSON.stringify(originObj));
```
function deepClone(target, origin) {
  var target = target || {};
  target = JSON.parse(JSON.stringify(origin));
  return target;
}
```
记得初学的时候，以为一个对象赋值另一个空对象（newObj = originObj）就可以达到拷贝的效果，结果后来操作被赋值的那个对象之后，没想到源对象也修改了（后来才知道因为它俩用的是同一个引用地址的东西，呜呜呜~）