浅拷贝概述
在 JavaScript 中，浅拷贝是对数组或对象的一种复制方式，这种复制仅复制顶层元素而不复制其嵌套结构。当创建数组的浅拷贝时，常用的方法包括使用扩展运算符（[...]）、Array.from() 或 slice() 方法。
对于对象来说，通常使用的有扩展运算符（{...}）和 Object.assign()。需要注意的是，尽管顶层语句会被复制，但是任何位于原始结构内的嵌套对象或数组并不会被克隆，而是保留其引用。
因此，对浅拷贝版本中嵌套结构的修改也会影响到原始对象，反之亦然。对于需要深拷贝的情况，即嵌套结构也需要被复制的情况，则需要其他技术或库如 lodash 的 _.cloneDeep 方法。
深拷贝与浅拷贝对比
存在两种复制对象或数组的方法：深拷贝和浅拷贝。深拷贝即使包括嵌套结构也能创建完全独立的副本；相反，浅拷贝仅复制顶层元素，同时保持对嵌套元素的引用。
虽然深拷贝保证了完全独立性，但是浅拷贝更加节省内存且速度更快，代价是修改嵌套结构会影响原始对象和拷贝对象。任务需求决定了选择：如果需要完全独立则选择深拷贝；然而，当效率最为重要且可以保留嵌套引用时，浅拷贝就成了最优的选择。
示例
示例 1：使用 Object.assign() 方法进行浅拷贝
在下面的例子中，我们使用 Object.assign() 方法创建对象的浅拷贝。
<!DOCTYPE html>
<html>
<body>
<h2>使用 `Object.assign()` 方法进行浅拷贝</h2>
<p>原始对象:</p>
<p id="originalObject"></p>
<p>拷贝对象:</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>使用扩展运算符（`...`）进行浅拷贝</h2>
<p>原始数组:</p>
<p id="originalArray"></p>
<p>拷贝对象:</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>使用 `Array.prototype.slice()` 方法进行浅拷贝</h2>
<p>原始对象:</p>
<p id="originalObject"></p>
<p>拷贝对象:</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 方法创建含有嵌套属性的对象的浅拷贝。原始对象包含一个嵌套结构，其中包含像名字和地址这样的属性。地址进一步由街道和城市这样的属性组成。然后我们使用 JSON.stringify 将原始对象转换成 JSON 格式的字符串，并使用 JSON.parse 解析字符串回到一个新的对象，从而创建一个浅拷贝。
<!DOCTYPE html>
<html>
<body>
<h2>使用 `JSON.stringify` 和 `JSON.parse` 进行含有嵌套对象的浅拷贝</h2>
<p>原始对象:</p>
<pre id="originalObject"></pre>
<p>拷贝对象:</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>浅拷贝修改的影响</h2>
<h3>修改前</h3>
<p>原始对象</p>
<pre id="originalObjectBefore"></pre>
<p>拷贝对象</p>
<pre id="copiedObjectBefore"></pre>
<h3>修改后</h3>
<p>原始对象</p>
<pre id="originalObjectAfter"></pre>
<p>拷贝对象</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 中的浅拷贝：它复制顶层元素，这一概念达到了平衡。这种理解赋予了非破坏性的操作任务能力；例如，数组排序。此外，它简化了如撤销/重做功能等特性的实现过程，同时极大地增强了整体用户体验——这是一个不可或缺的角色。浅拷贝有能力巧妙地处理实际应用中的改动，同时保持数据完整性：在某些情况下，当需要将修改与原始对象隔离时，这是至关重要的方面。