JavaScript 浅拷贝与深拷贝

Kylincsg

已于 2023-11-15 14:15:58 修改

阅读量200

点赞数 1

分类专栏：项目中的疑难解惑文章标签： javascript html 前端 web 开发语言

于 2022-07-15 17:09:25 首次发布

本文链接：https://blog.csdn.net/Kylincsg/article/details/125808271

版权

项目中的疑难解惑专栏收录该内容

28 篇文章 0 订阅

订阅专栏

本文详细介绍了JavaScript中的浅拷贝和深拷贝，包括扩展运算符、Object.assign方法以及如何手动实现深拷贝。基础版深拷贝通过递归实现，而进阶版利用Map优化了性能。在面试中，了解这些拷贝方法及其实现至关重要。

摘要由CSDN通过智能技术生成

深拷贝也是面试中的高频题，概念省略，直接上方法！！！

浅拷贝

1.扩展运算符：...

const arr2 = [...arr]

2.Object.assign: 将后面任意多个对象合并到target对象上

Object.assign(target, ...sources)

深拷贝

1.可以通过 JSON.parse与JSON.stringify来解决

JSON.parse(JSON.stringify(object))

2.自己封装一个深拷贝的函数：

当你回答了json的这两个方法后，面试官百分百会问你还有呢，这时，你就得自己如何写的了，

1.基础版：一般面试说这个就行了

function deepClone1(data) {
        if (data !== null && typeof data === "Object") {
          const clone = Array.isArray(data) ? [] : {};
          for (let key in data) {
            if (data.hasOwnProerty(key)) {
              clone[key] = aUtils.deepClone1(data[key]);
            }
          }
          return clone;
        } else {
          return data;
        }
      }

2. 在基础版的基础上，使用es6的map，提高了遍历的性能

function deepClone2(data, map = new Map()) {
        if (data !== null && typeof data === "object") {
          let clone = map.get(data);
          if (clone) {
            return clone;
          }
          // 数组
          if (Array.isArray(data)) {
            clone = [];
            map = map.set(data, clone);
            data.forEach((item, index) => {
              clone[index] = aUtils.deepClone2(item, map);
            });
          } else {
            // 对象
            clone = {};
            map = map.set(data, clone);
            for (var key in data) {
              if (data.hasOwnProerty(key)) {
                clone[key] = aUtils.deepClone2(data[key], map);
              }
            }
          }
          return clone;
        } else {
          return data;
        }
      }

3.项目中经常使用的一种：

function deepClone(data) {
  var type = getObjType(data);
  var obj;
  if (type === 'array') {
    obj = [];
  } else if (type === 'object') {
    obj = {};
  } else {
    //不再具有下一层次
    return data;
  }
  if (type === 'array') {
    for (var i = 0, len = data.length; i < len; i++) {
      obj.push(deepClone(data[i]));
    }
  } else if (type === 'object') {
    for (var key in data) {
      obj[key] = deepClone(data[key]);
    }
  }
  return obj;
};

可能还有其他的方法，在这里就不列举了，我只把我知道的写出来了！！！