js中的深拷贝与浅拷贝

最新推荐文章于 2024-05-02 19:37:05 发布

正儿八经学前端

最新推荐文章于 2024-05-02 19:37:05 发布

阅读量127

点赞数

分类专栏：方法文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_42101753/article/details/117811624

版权

方法专栏收录该内容

16 篇文章 0 订阅

订阅专栏

浅拷贝：将对象中的各个属性依次进行复制，浅拷贝只复制一层对象属性，如果对象属性中还有对象，赋值仅仅是地址，会相互影响。

深拷贝：将对象中的各个属性一次进行复制，深拷贝会递归赋值所有层的对象属性，如果对象属性还有对象，继续拷贝，会完全独立。

方法有

JSON.parse(JSON.stringify)
Object.assign({}, res.data.DagMap)
{ …res.data.DagMap }

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  <script>
    let aa = {
      name: '小红',
      age: 18,
      car: {
        brand: '斯柯达',
        price: 160000
      },
      house: {
        name: '独栋大别墅'
      }
    }

    function deepCopy(obj) {
      // debugger
      let temp = {}
      // 给temp添加属性
      for (let k in obj) {
        // 如果是复杂类型,就继续拷贝里面的复杂类型
        // if (typeof obj[k] === 'object') {
        //   temp[k] = deepCopy(obj[k])
        // } else {
        //   // 如果是简单类型,直接赋值
        //   temp[k] = obj[k]
        // }

        // 简写
        temp[k] = typeof obj[k] === 'object' ? deepCopy(obj[k]) : obj[k]
      }
      return temp
    }

    var bb = deepCopy(aa)
    bb.house.name = '海景房'
    console.log('原obj', aa);
    console.log('现在obj', bb);
  </script>
</body>
</html>

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

Object.assign() //es6的方法

Object.assign会合并对象生成一个新对象。如果对象的属性是普通类型改变之后新对象不会改变，如果是引用类型改变后新对象也会改变，所以Object.assign实际上还是浅拷贝。

var obj={aa:1,b:{item:'45'}};
var newObj=Object.assign({},obj);
obj.aa=2;
obj.b.item='kk';
console.log(newObj.aa);        //1
console.log(newObj.b.item);    //kk

深拷贝

JSON.parse(JSON.stringify(obj))

利用JSON.stringify(obj)将对象先转为json字符串，再JSON.parse(）转回为json对象可以实现深拷贝，这也是比较常用的一种方法。

用js实现一个深拷贝

其实深拷贝可以拆分成 2 步，浅拷贝 + 递归，浅拷贝时判断属性值是否是对象，如果是对象就进行递归操作，两个一结合就实现了深拷贝。

function cloneDeep(source) {
      if (!isObject(source)) return source; // 非对象返回自身
      var target = Array.isArray(source) ? [] : {};
      for (var key in source) {
        if (source.hasOwnProperty(i)) {
          if (isObject(source[key])) {
            target[key] = cloneDeep(source[key]); // 注意这里
          } else {
            target[key] = source[key];
          }
        }
      }
      return target;
    }
    function isObject(obj) {
      return typeof obj === 'object' && obj != null;
    }

正儿八经学前端

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
js中的深拷贝与浅拷贝

浅拷贝：将对象中的各个属性依次进行复制，浅拷贝只复制一层对象属性，如果对象属性中还有对象，赋值仅仅是地址，会相互影响。深拷贝：将对象中的各个属性一次进行复制，深拷贝会递归赋值所有层的对象属性，如果对象属性还有对象，继续拷贝，会完全独立。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=devic
复制链接

扫一扫

专栏目录