JavaScript - 浅层复制

上一页
下一页

浅层复制

在 JavaScript 中，浅层复制是数组或对象的复制，它复制其顶级元素，但不复制其嵌套结构。创建数组的浅表副本时，常见的方法包括使用展开运算符 （[...]）、Array.from（） 或 slice（） 方法。

对于对象，通常使用展开运算符 （{...}） 和 Object.assign（）。请务必注意，在复制顶级语句时，不会克隆原始结构中的任何嵌套对象或数组，而是将其引用保留在浅层副本中。

因此，对复制版本中嵌套结构的修改会影响原始结构，反之亦然。对于嵌套结构也重复的深度克隆，需要替代技术或库，例如 lodash 的 _.cloneDeep。

深层复制与浅层复制

有两种方法可用于复制对象或数组：深层复制和浅层复制。深度复制会创建一个完全独立的副本，即使包括嵌套结构;相反，浅层复制仅复制顶级元素，同时保留对嵌套元素的引用。

虽然深度复制保证了完全的独立性，但浅层复制证明内存效率更高、速度更快，但要付出代价：嵌套结构中的修改会影响原始对象和复制的对象。任务要求决定了选择：为了完全独立，最好使用深度复制;但是，当效率至关重要并且可以保留嵌套引用时，浅层复制成为最佳选择。

例子

示例 1：使用 Object assign（） 方法进行浅层复制

在下面的示例中，我们使用 Object.assign（） 方法创建对象的浅表副本。


<!DOCTYPE html>
<html>
<body>
	 	<h2>Shallow copy using Object.assign() method</h2>
	 	<p>Original Object:</p>
	 	<p id="originalObject"></p>
	 	<p>Copied Object:</p>
	 	<p id="copiedObject"></p>
	 	<script>
	 	 	 const originalObject = { name: "Alice", age: 30 };
	 	 	 const copiedObject = Object.assign({}, originalObject);
	 	 	 document.getElementById("originalObject").textContent = JSON.stringify(originalObject);
	 	 	 document.getElementById("copiedObject").textContent = JSON.stringify(copiedObject);
	 	</script>
</body>
</html>

示例 2：使用展开运算符的浅层复制

在此示例中，我们使用扩展运算符 （...） 创建数组的浅表副本。


<!DOCTYPE html>
<html>
<body>
	 	<h2>Shallow copy using spread operator (...)</h2>
	 	<p>Original Array:</p>
	 	<p id="originalArray"></p>
	 	<p>Copied Object:</p>
	 	<p id="copiedArray"></p>
	 	<script>
	 	 	 const originalArray = [1, 2, 3];
	 	 	 const copiedArray = [...originalArray];
	 	 	 document.getElementById("originalArray").textContent = JSON.stringify(originalArray);
	 	 	 document.getElementById("copiedArray").textContent = JSON.stringify(copiedArray);
	 	</script>
</body>
</html>

示例 3：具有数组的对象的浅层副本

在下面的示例中，Object.assign（） 和 Array.prototype.slice（） 的组合用于创建对象的浅表副本，强调正确处理对象结构中的数组。


<!DOCTYPE html>
<html>
<body>
	 	<h2>Shallow copy using array slice() method</h2>
	 	<p>Original Object:</p>
	 	<p id="originalObject"></p>
	 	<p>Copied Object:</p>
	 	<p id="copiedObject"></p>
	 	<script>
	 	 	 const originalObject = { name: "Bob", hobbies: ["reading", "coding"] };
	 	 	 const copiedObject = Object.assign({}, originalObject, { hobbies: originalObject.hobbies.slice() });
	 	 	 document.getElementById("originalObject").textContent = JSON.stringify(originalObject);
	 	 	 document.getElementById("copiedObject").textContent = JSON.stringify(copiedObject);
	 	</script>
</body>
</html>

示例 4：使用嵌套对象进行浅表复制

在此示例中，我们演示了如何使用 JavaScript 的 JSON.stringify 和 JSON.parse 方法创建具有嵌套属性的对象的浅表副本。原始对象包含一个嵌套结构，该结构具有 name 和 address 等属性。Address 还包括 street 和 city 等属性。然后我们使用 JSON.stringify 将原始对象转换为 JSON 格式的字符串，然后应用 JSON.parse 将字符串解析回新对象，从而创建一个浅拷贝。


<!DOCTYPE html>
<html>
<body>
	 	<h2>Shallow Copy with Nested objects using JSON.stringify & JSON.parse</h2>
	 	<p>Original Object:</p>
	 	<pre id="originalObject"></pre>
	 	<p>Copied Object:</p>
	 	<pre id="copiedObject"></pre>
	 	<script>
	 	 	 const originalObject = {
	 	 	 	 	name: "Charlie",
	 	 	 	 	address: {
	 	 	 	 	 	 street: "123 Main St",
	 	 	 	 	 	 city: "New York"
	 	 	 	 	}
	 	 	 };

	 	 	 const copiedObject = JSON.parse(JSON.stringify(originalObject));

	 	 	 document.getElementById("originalObject").textContent = JSON.stringify(originalObject, null, 2);
	 	 	 document.getElementById("copiedObject").textContent = JSON.stringify(copiedObject, null, 2);
	 	</script>
</body>
</html>

示例 5：修改的浅层复制影响

为了说明修改对通过 JavaScript 的 Object.assign（） 方法创建的浅表副本的影响，下面的代码最初呈现一个原始对象。原始对象具有名为 “name” 和 “age” 的属性，与其相应的浅表副本并排排列。接下来，我们观察此代码如何更改复制对象的 “age” 属性。随后，该代码对原始对象和复制对象在修改后的状态进行了说明。此实例强调，尽管在其复制对象中隔离，但对浅层副本的更改不会影响基本对象;因此，它证实了一种奇特的行为，其中顶级属性由浅层副本捕获，同时保持主实例和辅助实例之间的独立性。


<!DOCTYPE html>
<html>
<body>
	 	<h2>Shallow Copy impact of modification</h2>
	 	<h3>Before Modification</h3>
	 	<p>Original Object</p>
	 	<pre id="originalObjectBefore"></pre>
	 	<p>Copied Object</p>
	 	<pre id="copiedObjectBefore"></pre>
	 	<h3>After Modification</h3>
	 	<p>Original Object</p>
	 	<pre id="originalObjectAfter"></pre>
	 	<p>Copied Object</p>
	 	<pre id="copiedObjectAfter"></pre>
	 	<script>
	 	 	 const originalObject = { name: "Alice", age: 30 };
	 	 	 const copiedObject = Object.assign({}, originalObject);

	 	 	 document.getElementById("originalObjectBefore").textContent = JSON.stringify(originalObject, null, 2);
	 	 	 document.getElementById("copiedObjectBefore").textContent = JSON.stringify(copiedObject, null, 2);

	 	 	 copiedObject.age = 40;

	 	 	 document.getElementById("originalObjectAfter").textContent = JSON.stringify(originalObject, null, 2);
	 	 	 document.getElementById("copiedObjectAfter").textContent = JSON.stringify(copiedObject, null, 2);
	 	</script>
</body>
</html>

浅层复制的重要性

为了保留原始数据结构并有效地管理内存，必须批判性地理解 JavaScript 中的浅层复制：它复制顶级元素，这是一个实现平衡的概念。这种理解赋予了非破坏性操作任务的能力;例如，数组排序。此外，它还简化了撤消/重做功能等功能实现过程，同时显著增强了整体用户体验——这确实是一个不可或缺的作用。浅拷贝具有在实际应用中熟练处理更改的能力，可以保持数据完整性：在某些情况下，将修改与原始对象隔离开来时，这是一个至关重要的方面。

打印本页
上一页
下一页