Javascript 简明教程
JavaScript - Shallow Copy
Shallow Copy
在 JavaScript 中，浅拷贝是数组或对象的重复，复制其顶级元素，但不是其嵌套结构。创建数组的浅拷贝时，常用方法包括使用展开运算符 ([…]), Array.from() 或 slice() 方法。
对于对象，展开运算符 ({…}) 和 Object.assign() 常用于执行此操作。需要注意的是，虽然顶级语句正在被复制，但原始结构中的任何嵌套对象或数组不会被克隆，而是在浅拷贝中保留它们的引用。
因此，在复制版本中对嵌套结构的修改会影响原始版本，反之亦然。对于深度克隆，即嵌套结构也被复制，需要 lodash 的 _.cloneDeep 等备用技术或库。
Deep Copy vs. Shallow Copy
存在两种复制对象或数组的方法：深度复制和浅复制。深度复制创建一个完全独立的副本，甚至包括嵌套结构；相反，浅复制只复制顶级元素，同时保留对嵌套元素的引用。
虽然深度复制保证完全独立，但浅复制证明了更高的内存效率和速度，但代价是：嵌套结构中的修改会影响原始对象和复制的对象。任务要求决定了选择：对于完全独立，深度复制是首选；但是，当效率至上并且可以保留嵌套引用时，浅复制成为最佳选择。
Examples
Example 1: Shallow copy using Object assign() method
在以下示例中，我们使用 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>Example 2: Shallow copy using spread operator
在此示例中，我们使用展开运算符 (…) 创建数组的浅拷贝。
<!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>Example 3:Shallow copy of object with array
在下面的示例中，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>Example 4: Shallow Copy with Nested Objects
在本示例中，我们将演示如何使用 JavaScript 的 JSON.stringify 和 JSON.parse 方法创建具有嵌套属性的对象的浅拷贝。原始对象包含具有诸如 name 和 address 等属性的嵌套结构。地址进一步由诸如街道和城市等属性组成。然后，我们使用 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>Example 5: Shallow copy impact of modification
说明通过 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>