JavaScript - 浅拷贝：初学者指南

你好，未来的JavaScript魔法师们！今天，我们将踏上一段激动人心的旅程，探索JavaScript中的浅拷贝世界。如果你是编程新手，不用担心——我会成为你的友好向导，一步步解释所有内容。所以，拿起一杯咖啡（或者你最喜欢的饮料），让我们一起深入了解一下！

JavaScript - Shallow Copy

什么是浅拷贝？

在我们深入了解浅拷贝的细节之前，让我们从一个简单的类比开始。想象你有一幅美丽的画作，你想复制它。你有两个选择：

拍一张画作的照片（浅拷贝）
从头开始重画整个画作（深拷贝）

在JavaScript中，浅拷贝就像拍照片。它创建了一个新的对象或数组，但其中的元素仍然引用原始对象中的相同元素。

浅拷贝是如何工作的

当你创建一个浅拷贝时：

创建了一个新的对象或数组
复制了最顶层的属性
嵌套的对象或数组仍然引用原始对象

让我们通过一些代码来看看它是如何工作的！

// 原始对象
let original = {
name: "Alice",
age: 30,
hobbies: ["reading", "swimming"]
};

// 浅拷贝
let shallowCopy = Object.assign({}, original);

// 修改拷贝
shallowCopy.name = "Bob";
shallowCopy.hobbies.push("coding");

console.log(original);
console.log(shallowCopy);

如果你运行这段代码，你会看到一些有趣的现象：

{name: "Alice", age: 30, hobbies: ["reading", "swimming", "coding"]}
{name: "Bob", age: 30, hobbies: ["reading", "swimming", "coding"]}

注意，改变name只影响了拷贝，但修改hobbies影响了两个对象。这就是浅拷贝的本质！

深拷贝与浅拷贝

现在我们理解了浅拷贝，让我们将其与其兄弟，深拷贝，进行比较。

特性	浅拷贝	深拷贝
新对象创建	是	是
复制顶层属性	是	是
复制嵌套对象/数组	否（引用原始）	是（创建新的拷贝）
性能	更快	更慢
内存使用	更少	更多

何时使用浅拷贝

浅拷贝在以下情况下很好用：

你只需要修改顶层属性
性能是一个考虑因素
你想为对象创建一个新的引用

何时使用深拷贝

深拷贝在以下情况下更好：

你需要修改嵌套属性而不影响原始对象
你想要一个完全独立的对象拷贝

JavaScript中的浅拷贝示例

让我们探索一些在JavaScript中创建浅拷贝的常见方法！

1. Object.assign()

let original = { a: 1, b: { c: 2 } };
let copy = Object.assign({}, original);

copy.a = 5;
copy.b.c = 10;

console.log(original); // { a: 1, b: { c: 10 } }
console.log(copy);     // { a: 5, b: { c: 10 } }

在这里，Object.assign()创建了一个浅拷贝。改变a只影响拷贝，但改变b.c会影响两个对象，因为它是嵌套属性。

2. 扩展运算符 (...)

let fruits = ["apple", "banana", ["grape", "orange"]];
let fruitsCopy = [...fruits];

fruitsCopy[0] = "pear";
fruitsCopy[2].push("kiwi");

console.log(fruits);     // ["apple", "banana", ["grape", "orange", "kiwi"]]
console.log(fruitsCopy); // ["pear", "banana", ["grape", "orange", "kiwi"]]

扩展运算符创建了一个数组的浅拷贝。修改第一个元素只影响拷贝，但向嵌套数组添加元素会影响两个数组。

3. Array.from()

let numbers = [1, 2, [3, 4]];
let numbersCopy = Array.from(numbers);

numbersCopy[0] = 10;
numbersCopy[2].push(5);

console.log(numbers);     // [1, 2, [3, 4, 5]]
console.log(numbersCopy); // [10, 2, [3, 4, 5]]

Array.from()也创建了一个浅拷贝。第一级元素被复制，但嵌套数组仍然被引用。

浅拷贝的重要性

你可能在想，“我们为什么需要浅拷贝？”这是个好问题！浅拷贝在许多场景中非常有用：

性能：浅拷贝比深拷贝更快，使用的内存更少，对于大型对象或频繁操作来说，它们是理想的。
不可变性：它们帮助你维持代码中的不可变性，这对于现代JavaScript框架中的可预测状态管理至关重要。
避免副作用：浅拷贝允许你修改一个对象而不直接改变原始对象，减少了代码中的意外副作用。
React和Redux：在React和Redux应用中，浅拷贝通常用于触发重新渲染和更新状态，而不会改变原始数据。

这里有一个现实世界的例子：

function updateUserProfile(user, newName) {
// 创建用户对象的一个浅拷贝
let updatedUser = Object.assign({}, user);

// 更新名称
updatedUser.name = newName;

return updatedUser;
}

let user = {
name: "Alice",
age: 30,
address: {
city: "Wonderland",
street: "Rabbit Hole Lane"
}
};

let updatedUser = updateUserProfile(user, "Alicia");

console.log(user);        // 原始用户对象未改变
console.log(updatedUser); // 新对象，名称已更新

在这个例子中，我们在不修改原始对象的情况下更新了用户的名称。这是在状态管理和数据完整性维护中常见的模式。

结论

恭喜你！你已经迈出了探索JavaScript中浅拷贝世界的第一步。记住，浅拷贝就像快速拍照——它们快速高效，但不会捕捉到所有细节。

在你继续你的JavaScript之旅时，你会发现许多情况下浅拷贝都非常有用。它是你编程工具箱中的强大工具，特别是在处理复杂数据结构和状态管理时。

继续练习，保持好奇心，不要害怕尝试。在你意识到之前，你将能够像专业人士一样创建和操作对象！

快乐编码，愿你的拷贝总是如你所需要的那么浅（或深）！ ?

Credits: Image by storyset