数据的深浅拷贝

最新推荐文章于 2022-03-03 12:11:29 发布

原创最新推荐文章于 2022-03-03 12:11:29 发布 · 502 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #深拷贝 #浅拷贝 #赋值

前端逻辑基础专栏收录该内容

42 篇文章

订阅专栏

本文详细解析了深拷贝和浅拷贝的概念，通过实例展示了赋值、浅拷贝及深拷贝的区别，并提供了多种实现深浅拷贝的方法，包括ES6扩展运算符、Object.assign、JSON.parse(JSON.stringify)及递归实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

深浅拷贝，只有引用类型的数据才会出现这个问题。

浅拷贝不等于赋值。一张解释赋值，浅拷贝，深拷贝的关系。
在这里插入图片描述

赋值(两个地址指向一个对象)

let obj = {name:'dx',age:'18'}
let obj1 = obj

浅拷贝 (适用于第一层为基本数据类型的对象)

1、es6扩展运算

let obj = {name:'dx',age:'18'}

let obj1 = {...obj}

obj,age = 16
console.log(obj.age) // 16
console.log(obj1.age) //18

2、assign方法实现浅拷贝

var obj1 = {name:'lily'};
    var obj2 = Object.assign({},obj1);
    obj2.name = 'bob';
    console.log(obj1.name); //lily
    console.log(obj2.name); //bob

3、Array.prototype.slice

 // lmran
 const arr1 = [
     'yang',
     {
         value: 123
     }
 ];
 
 const arr2 = arr1.slice(0);
 arr2[1].value = 456;
 /** 因为数组的第一层有引用类型，浅拷贝无法实现 */
 console.log(arr2); // ["yang", {value: 456}]
 console.log(arr1); // ["yang", {value: 456}]
 arr2[0] = 'haha';
 console.log(arr2); // ["haha", {value: 456}]
 console.log(arr1); // ["yang", {value: 456}]

4、Array.prototype.concat

  // lmran
  const arr1 = [
      'yang',
      {
          value: 123
      }
  ];
  
  const arr2 = [].concat(arr1);
  arr2[1].value = 456;
   /** 因为数组的第一层有引用类型，浅拷贝无法实现 */
  console.log(arr2); // ["yang", {value: 456}]
  console.log(arr1); // ["yang", {value: 456}]
  arr2[0] = 'haha';
  console.log(arr2); // ["haha", {value: 456}]
  console.log(arr1); // ["yang", {value: 456}]

深拷贝

1、JSON.parse(JSON.stringify(obj))

var obj = {
        a:'hello',
        b:{
            name:'lily',
            age:21
        },
        c:[1,2,3]
    };
    var obj1 = JSON.parse(JSON.stringify(obj));

它是不可以拷贝 undefined ， function， RegExp 等等类型的

2、递归回调，实现深度拷贝

// 定义一个深拷贝函数接收目标target参数

// 深拷贝 深度优先搜索 递归 利用栈的先入后出，后入先出
function deepClone2(sourceObject) {

  if (typeof sourceObject !== 'object') {
    return sourceObject
  }


  let resultObject = {}

  if (Object.prototype.toString.call(sourceObject) === '[object Array]') {
    resultObject = []
  }

  for (let key in sourceObject) {
    if (Object.prototype.hasOwnProperty.call(sourceObject, key)) {
      if (typeof sourceObject[key] !== 'object') {
        resultObject[key] = sourceObject[key]
      } else {
        resultObject[key] = deepClone2(sourceObject[key])
      }
    }
  }

  return resultObject
}

3、递归容易爆栈，改进为while循环，深度克隆

// 深拷贝 循环实现 深度优先搜索 
function deepClone(sourceObject) {
  const loopList = [];

  let deepObject = {}

  if (Object.prototype.toString.call(sourceObject) === "[object Object]") {
    // 将sourceObject 放入loopList
    loopList.push({
      parent: deepObject,
      data: sourceObject,
      key: undefined,
    });
  } else if (Object.prototype.toString.call(sourceObject) === "[object Array]") {
    deepObject = [];
    // 将sourceObject 放入loopList
    loopList.push({
      parent: deepObject,
      data: sourceObject,
      key: undefined,
    });
  } else {
    // 如果不是对象或者数组，直接返回
    return sourceObject
  }

  while (loopList.length) {
    const node = loopList.pop();
    const { data, key, parent } = node;
    let res = parent;
    // 判断是数组还是对象
    if (typeof key !== "undefined" && Object.prototype.toString.call(data) === '[object Object]') {
      res = parent[key] = {};
    } else if (typeof key !== "undefined" && Object.prototype.toString.call(data) === '[object Array]') {
      res = parent[key] = [];
    }
    for (let i in data) {
      if (Object.prototype.hasOwnProperty.call(data, i)) {
        if (typeof data[i] === "object") {
          loopList.push({
            parent: res,
            key: i,
            data: data[i],
          });
        } else {
          res[i] = data[i];
        }
      }
    }
  }
  return deepObject;
}