迹忆客 专注技术分享

在像 C++ 这样的编程语言中，我们经常初始化指针以获取内容位置。但是在 JavaScript 的情况下，我们没有直接指向地址的约定。

在 JavaScript 中，我们有两种数据类型，一种是原始数据类型，另一种是复合数据类型。

通常，原始数据类型遵循以维护按值传递。复合数据类型允许按引用传递；这就是浅拷贝的工作原理。

对象的浅拷贝获取目标对象的引用，所做的任何修改都会影响原始对象和副本。

在这里，我们将看到按值传递和按引用传递的工作原理。我们还将尝试制作复合对象的深拷贝。

具体来说，我们将使用 lodash、JSON.parse 和 JSON.stringify、slice()、Object.assign() 功能介绍 spread operator。

在 JavaScript 中传递原始对象的值

在处理原始对象时，会维护目标对象的一般副本。并且在这个驱动器中，即使对副本进行任何修改，原始对象也不会受到影响。

这个过程以 pass by value 命名，默认执行 deep copy。

var x = 7;
var y = x;
x = 42;
console.log(x);
console.log(y);

输出：

对象 y 的修改不会影响 x 对象。

JavaScript 中复合对象的引用传递

在复合对象的情况下，引用作为副本传递。因此，对复制对象所做的任何修改都会影响原始对象。

这种方法也称为浅拷贝或按引用传递。

var x = {num: 42};
var y = x;
y.num = 7;
console.log(x.num);
console.log(y.num);

输出：

在这里，我们有一个对象 y，它获取 x 的副本。但内部图片仅使用对象 x 引用。

因此，当我们更改副本中的内容时，效果将在原始对象上，因为这里的两个对象都指向同一个引用。

为了解决这种浅拷贝的情况，我们有一些命题和工作，不管对象类型（数组或对象）或需要单独注意。

例如，spread operator 适用于数组和对象中的 deep copy。让我们按照以下部分进行清晰的查看。

在 JavaScript 中使用 Spread Operator 进行深度复制

传播运算符是将一个对象传播到另一个对象的约定。这种复制方法是准确的，任何修改都会使对象保持完整或应该被更改。

同样，展开运算符适用于数组和对象。让我们检查以下实例。

var x = [1, 2, 3];
var y = [...x];
y[2] = 5;
console.log(x[2]);
console.log(y[2]);

输出：

对嵌套对象使用扩展运算符会很乏味，因为你必须访问每个级别的键。在这种情况下，更简单的解决方案是使用即将推出的方法。

使用 JSON.parse() 和 JSON.stringify() 进行对象的深层复制

每当我们使用一个对象时，我们都会访问触发 keys 的内容。JSON.parse(JSON.stringify(Object)) 使艰苦的工作变得更好。

它对目标对象进行深拷贝，我们还可以修改内容。

var json = {num: {val: 7}};
var collect = JSON.parse(JSON.stringify(json));
collect.num.val = 42;
console.log(json.num.val);
console.log(collect.num.val);

输出：

在 JavaScript 中使用 Object.assign() 进行对象的深层复制

Object.assign() 方法制作原始对象的准确副本。

以这种方式解决问题，我们需要 2 个参数；一个是一对空白花括号 {}，后跟目标对象。让我们检查实例以获得更好的理解。

var x = {'food': 'cheese', 'sport': 'badminton'};
var y = Object.assign({}, x);
y.food = 'chocolate';
console.log(x.food);
console.log(y.food);

输出：

在 JavaScript 中使用 Object.slice(0) 进行数组的深度复制

没有任何参数或零的方法 slice() 启动可以进行深层复制。这是处理数组的熟悉且最常用的方法之一。

除此之外，你还可以使用 map 复制数组。检查此文档以进行进一步查询。

这些示例将更具说明性。

var x = [1, 3, 4];
var y = x.slice(0);
y[2] = 5;
console.log(x);
console.log(y);

输出：

在 JavaScript 中使用 lodash 进行深度克隆

要使用此解决方案，你需要加载 lodash 4.x 库。我们已经检查了 jsbin 编辑器中的示例。

在这里，你将在库部分找到 lodash 4.x。

var x = [1, 2, 3];
var y = _.cloneDeep(x);
y[1] = 4;
console.log(y[1]);
console.log(x[1]);

输出：