js深拷贝和浅拷贝的实现方式

2024年2月8日发(作者：)

js深拷贝和浅拷贝的实现方式

在JavaScript中，我们经常需要复制对象或数组。但是有时候，我们需要复制的不仅仅是对象或数组本身，还需要复制它们的属性和值。这时候，我们就需要使用深拷贝和浅拷贝了。

本文将介绍 JavaScript 中深拷贝和浅拷贝的实现方式，并提供一些示例代码，帮助你更好地理解这两个概念。

一、浅拷贝

1.1 什么是浅拷贝

浅拷贝是指将原始对象的基本数据类型属性（如字符串、数字、布尔值等）复制到新的对象中，而对于引用类型的属性（如对象、数组等），只是复制了一个指向原始对象的引用，而没有复制对象本身。

因此，当我们修改新对象中的引用类型属性时，原始对象也会受到影响。

1.2 浅拷贝的实现方式

1.2.1 ()

ES6 引入了 () 方法，可以用于浅拷贝对象。

() 方法的语法如下：

(target, ...sources)

其中，target 是目标对象，sources 是一个或多个源对象。

示例代码：

const obj1 = { na '张三', age: 18 };

- 1 -

const obj2 = { gender: '男' };

const newObj = ({}, obj1, obj2);

(newObj); // { na '张三', age: 18, gender: '男' }

使用 () 方法，我们可以将 obj1 和 obj2 中的属性复制到一个新的对象中。

需要注意的是，() 方法只会复制对象的可枚举属性，而且它只会复制对象自身的属性，而不会复制继承的属性。

1.2.2 扩展运算符（...）

扩展运算符（...）也可以用于浅拷贝对象。

示例代码：

const obj1 = { na '张三', age: 18 };

const obj2 = { gender: '男' };

const newObj = { ...obj1, ...obj2 };

(newObj); // { na '张三', age: 18, gender: '男' }

使用扩展运算符，我们可以将 obj1 和 obj2 中的属性复制到一个新的对象中。

需要注意的是，扩展运算符只会复制对象的可枚举属性，而且它只会复制对象自身的属性，而不会复制继承的属性。

1.2.3 jQuery 的 $.extend() 方法

jQuery 的 $.extend() 方法也可以用于浅拷贝对象。

- 2 -

示例代码：

const obj1 = { na '张三', age: 18 };

const obj2 = { gender: '男' };

const newObj = $.extend({}, obj1, obj2);

(newObj); // { na '张三', age: 18, gender: '男' }

使用 $.extend() 方法，我们可以将 obj1 和 obj2 中的属性复制到一个新的对象中。

需要注意的是，$.extend() 方法只会复制对象的可枚举属性，而且它只会复制对象自身的属性，而不会复制继承的属性。

二、深拷贝

2.1 什么是深拷贝

深拷贝是指将原始对象的所有属性和值都复制到新的对象中，而不是只复制基本数据类型属性。

因此，当我们修改新对象中的属性时，原始对象不会受到影响。

2.2 深拷贝的实现方式

2.2.1 () 和 ify()

() 和 ify() 方法可以用于深拷贝对象。

示例代码：

const obj1 = { na '张三', age: 18, address: { city: '北 - 3 -

京', district: '朝阳区' } };

const newObj = (ify(obj1));

(newObj); // { na '张三', age: 18, address:

{ city: '北京', district: '朝阳区' } }

使用 () 和 ify() 方法，我们可以将

obj1 中的所有属性和值都复制到一个新的对象中。

需要注意的是，ify() 方法只能处理 JSON 兼容的数据类型，如字符串、数字、布尔值、数组、对象和 null。如果对象中包含函数、RegExp 对象、Date 对象等非 JSON 兼容的数据类型，那么这些属性会被忽略。

2.2.2 递归实现

我们也可以使用递归实现深拷贝。

示例代码：

function deepClone(obj) {

if (typeof obj !== 'object' || obj === null) {

return obj;

}

const newObj = y(obj) ? [] : {};

for (let key in obj) {

if (Property(key)) {

newObj[key] = deepClone(obj[key]);

}

- 4 -

}

return newObj;

}

const obj1 = { na '张三', age: 18, address: { city: '北京', district: '朝阳区' } };

const newObj = deepClone(obj1);

(newObj); // { na '张三', age: 18, address:

{ city: '北京', district: '朝阳区' } }

使用递归实现深拷贝，我们可以将 obj1 中的所有属性和值都复制到一个新的对象中。

需要注意的是，递归实现深拷贝的效率较低，当对象中包含大量嵌套的属性时，可能会导致栈溢出。

2.2.3 Lodash 的 _.cloneDeep() 方法

Lodash 是一个 JavaScript 实用工具库，提供了许多实用的函数和方法，其中就包括深拷贝对象的 _.cloneDeep() 方法。

示例代码：

const obj1 = { na '张三', age: 18, address: { city: '北京', district: '朝阳区' } };

const newObj = _.cloneDeep(obj1);

(newObj); // { na '张三', age: 18, address:

{ city: '北京', district: '朝阳区' } }

使用 _.cloneDeep() 方法，我们可以将 obj1 中的所有属性和 - 5 -

值都复制到一个新的对象中。

需要注意的是，Lodash 的 _.cloneDeep() 方法是一个第三方库，需要额外引入。

三、总结

本文介绍了 JavaScript 中深拷贝和浅拷贝的实现方式，包括：

- 浅拷贝：()、扩展运算符（...）、jQuery 的

$.extend() 方法。

- 深拷贝：() 和 ify()、递归实现、Lodash 的 _.cloneDeep() 方法。

需要根据实际情况选择不同的实现方式。如果对象中只包含基本数据类型属性，那么可以使用浅拷贝的方式；如果对象中包含引用类型属性，那么应该使用深拷贝的方式。

希望本文能够帮助你更好地理解 JavaScript 中深拷贝和浅拷贝的概念和实现方式。

- 6 -