JavaScript 指针

Anika Tabassum Era 2023年1月30日 2022年5月10日
  1. 在 JavaScript 中传递原始对象的值
  2. JavaScript 中复合对象的引用传递
  3. 在 JavaScript 中使用 Spread Operator 进行深度复制
  4. 使用 JSON.parse()JSON.stringify() 进行对象的深层复制
  5. 在 JavaScript 中使用 Object.assign() 进行对象的深层复制
  6. 在 JavaScript 中使用 Object.slice(0) 进行数组的深度复制
  7. 在 JavaScript 中使用 lodash 进行深度克隆
JavaScript 指针

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

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

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

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

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

具体来说,我们将使用 lodashJSON.parse 和 JSON.stringifyslice()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);

输出:

将 JSON.parse() 和 JSON.stringify() 用于对象的深层副本

在 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);

输出:

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

在 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);

输出:

使用 object.slice(0) 进行数组的深层复制

在 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]);

输出:

使用 lodash 进行深度克隆

Anika Tabassum Era avatar Anika Tabassum Era avatar

Era is an observer who loves cracking the ambiguos barriers. An AI enthusiast to help others with the drive and develop a stronger community.

LinkedIn GitHub Facebook