JavaScript 指针
- 在 JavaScript 中传递原始对象的值
- JavaScript 中复合对象的引用传递
-
在 JavaScript 中使用
Spread Operator
进行深度复制 -
使用
JSON.parse()
和JSON.stringify()
进行对象的深层复制 -
在 JavaScript 中使用
Object.assign()
进行对象的深层复制 -
在 JavaScript 中使用
Object.slice(0)
进行数组的深度复制 -
在 JavaScript 中使用
lodash
进行深度克隆
在像 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]);
输出: