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 中的浅拷贝：它复制顶层元素，这是一个取得平衡的概念。这种理解赋予了非破坏性操作任务的权力；例如，数组排序。此外，它简化了功能实现过程，如撤消/重做功能，同时显着增强了整体用户体验——这确实是不可或缺的作用。能够熟练处理实际应用中更改的浅拷贝维护数据完整性：当在某些情况下需要将修改与原始对象隔离时，这是一个至关重要的方面。

打印页面