js深拷贝

马成继

已于 2023-04-29 21:30:55 修改

阅读量61

点赞数

文章标签： javascript 前端 java

于 2023-04-29 21:26:20 首次发布

本文链接：https://blog.csdn.net/machengji/article/details/130443863

版权

深拷贝

拷贝的类型：基本类型和引用类型

在JavaScript中，数据类型分为基本类型和引用类型。基本类型包括：undefined、null、boolean、number和string；引用类型包括：对象、数组和函数。

基本类型的值是直接存储在栈(stack)中的数据，而引用类型的值是存储在堆(heap)中的对象，栈中存储的是该对象在堆中的引用地址。

拷贝时，基本类型的值是直接复制到新变量的栈空间中，而引用类型的值是复制一份指向堆内存中同一个对象的指针，因此修改其中一个变量会影响到另一个变量。

浅拷贝的实现：Object.assign 和展开运算符

首先我们来看 Object.assign 的用法，它可以将多个对象合并成一个新的对象并返回。例如：

let obj1 = { a: 1 };
let obj2 = { b: 2 };
let copy = Object.assign({}, obj1, obj2);
console.log(copy); // 输出 { a: 1, b: 2 }

在这个例子中，我们使用 Object.assign() 将 obj1 和 obj2 合并成了一个新的对象 copy，并将其赋值给了一个新的变量。这个新的对象 copy 是浅拷贝的，它只是 obj1 和 obj2 的引用，而不是它们的副本。因此，如果我们修改 copy 中的属性，那么 obj1 和 obj2 中的对应属性也会被修改。
接下来看一下展开运算符的用法，它可以将一个数组或对象展开成多个独立的元素。例如：

let obj1 = { a: 1 };
let obj2 = { b: 2 };
let copy = { ...obj1, ...obj2 };
console.log(copy); // 输出 { a: 1, b: 2 }

在这个例子中，我们使用展开运算符将 obj1 和 obj2 展开成了多个独立的元素，并将它们合并成了一个新的对象 copy。这个新的对象 copy 也是浅拷贝的，它只是 obj1 和 obj2 的引用，而不是它们的副本。因此，如果我们修改 copy 中的属性，那么 obj1 和 obj2 中的对应属性也会被修改。
总的来说，Object.assign 和展开运算符都可以实现浅拷贝，它们的用法非常简单，但需要注意的是，它们只能拷贝一层对象，对于嵌套的对象或数组，需要使用深拷贝。

let obj1 = { a: 1 };
let obj2 = { b: 2 };
let copy = Object.assign({}, obj1, obj2);
console.log(copy); // 输出 { a: 1, b: 2 }

let obj1 = { a: 1 };
let obj2 = { b: 2 };
let copy = { ...obj1, ...obj2 };
console.log(copy); // 输出 { a: 1, b: 2 }

深拷贝的实现：递归拷贝、JSON.parse 和 JSON.stringify、Lodash 库等

首先来看递归拷贝的实现方式。递归拷贝的过程就是遍历对象的所有属性，并将它们复制到一个新的对象中。如果属性值是一个对象或数组，我们需要递归拷贝它们。以下是一个递归拷贝的示例代码：

function deepClone(obj) {
  let result;
  if (typeof obj === 'object') {
    result = obj instanceof Array ? [] : {};
    for (let key in obj) {
      if (obj.hasOwnProperty(key)) {
        result[key] = deepClone(obj[key]);
      }
    }
  } else {
    result = obj;
  }
  return result;
}

在这个例子中，我们定义了一个函数 deepClone，它接收一个对象参数 obj，并返回这个对象的深拷贝副本。如果 obj 不是一个对象，那么直接返回 obj。如果 obj 是一个对象，那么我们先判断它是数组还是普通对象，然后遍历它的所有属性，并递归调用 deepClone 函数拷贝其中的对象或数组。
接下来，我们看一下使用 JSON.parse 和 JSON.stringify 实现深拷贝的方法。这种方式的原理是将对象转换成 JSON 字符串，再将 JSON 字符串转换成新的对象。这个方法非常简单，但是有一些限制，例如不能拷贝函数和循环引用的对象。以下是一个使用 JSON.parse 和 JSON.stringify 实现深拷贝的示例代码：

function deepClone(obj) {
  return JSON.parse(JSON.stringify(obj));
}

在这个例子中，我们定义了一个函数 deepClone，它接收一个对象参数 obj，并返回这个对象的深拷贝副本。我们先使用 JSON.stringify 将 obj 转换成一个 JSON 字符串，然后再用 JSON.parse 将这个 JSON 字符串转换成新的对象。
最后，我们看一下使用 Lodash 库实现深拷贝的方法。Lodash 是一个流行的 JavaScript 工具库，提供了许多方便的函数，其中包括深拷贝函数 cloneDeep。以下是一个使用 Lodash 库实现深拷贝的示例代码：

const _ = require('lodash');

let obj1 = {
  a: 1,
  b: {
    c: 2
  }
};

let obj2 = _.cloneDeep(obj1);
console.log(obj2); // 输出 { a: 1, b: { c: 2 } }

在这个例子中，我们先定义了一个对象 obj1，它包含一个嵌套的对象。然后，我们使用 Lodash 库提供的函数 _.cloneDeep 将 obj1 深度拷贝到一个新的对象 obj2 中。
总的来说，深拷贝的实现方式有多种，递归拷贝、JSON.parse 和 JSON.stringify、Lodash 库都是常用的实现方式。每种实现方式都有其优缺点，需要根据具体的情况选择合适的方法。

深拷贝的优缺点：可以完整复制对象及其嵌套的对象和数组，但是实现比较复杂，可能存在性能问题和循环引用问题

深拷贝的优点是可以完整复制对象及其嵌套的对象和数组，不会影响原始对象的值。这种方式适用于需要完整复制对象的情况，比如在进行数据处理和传递时需要保留原始对象的值。
但是，深拷贝的实现比较复杂，并且可能存在性能问题和循环引用问题。在使用递归拷贝实现深拷贝时，如果对象或数组的层次比较深，递归的层数会比较多，可能会导致性能问题。而使用 JSON.parse 和 JSON.stringify 实现深拷贝时，如果对象或数组中包含循环引用，这种方式就会出现问题，因为 JSON 格式不支持循环引用。
因此，在使用深拷贝时需要注意避免出现循环引用和性能问题。如果对性能有较高要求，可以考虑使用一些优化技巧，比如使用缓存来避免重复拷贝。如果需要拷贝大型的数据结构，还可以使用流式拷贝来提高性能。

应用场景：处理复杂数据结构、避免对象被修改等

深拷贝适用于需要完整复制对象及其嵌套的对象和数组的情况，比如在处理复杂的数据结构时，需要保留原始对象的值。另外，由于深拷贝会创建一个新的对象，它也可以用来避免对象被修改的问题。
比如，假设我们有一个包含嵌套对象的数据结构，如下所示：

let data = {
  name: 'John',
  age: 30,
  address: {
    city: 'New York',
    state: 'NY'
  },
  hobbies: ['reading', 'sports']
};

如果我们想要对这个数据结构进行一些操作，但是又不想修改原始数据，就可以使用深拷贝来创建一个新的数据结构。以下是一个使用深拷贝创建新的数据结构的示例代码：

let newData = _.cloneDeep(data);
newData.name = 'Jane';
newData.address.city = 'San Francisco';
newData.hobbies.push('travel');
console.log(newData);

在这个例子中，我们使用 Lodash 库提供的函数 _.cloneDeep 将原始数据 data 深度拷贝到一个新的数据结构 newData 中。然后，我们对 newData 进行了一些操作，包括修改 name 属性、修改 address.city 属性和添加一个新的元素到 hobbies 数组中。这些操作不会影响原始数据 data，因为我们使用了深拷贝来创建新的数据结构。
总的来说，深拷贝适用于处理复杂的数据结构，避免对象被修改等情况。但是，在使用深拷贝时需要注意避免出现循环引用和性能问题。

马成继

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
js深拷贝

在JavaScript中，数据类型分为基本类型和引用类型。基本类型包括：undefined、null、boolean、number和string；引用类型包括：对象、数组和函数。基本类型的值是直接存储在栈(stack)中的数据，而引用类型的值是存储在堆(heap)中的对象，栈中存储的是该对象在堆中的引用地址。拷贝时，基本类型的值是直接复制到新变量的栈空间中，而引用类型的值是复制一份指向堆内存中同一个对象的指针，因此修改其中一个变量会影响到另一个变量。
复制链接

扫一扫