解密 JavaScript 的 ... 魔法：浅拷贝还是深拷贝？带你一探究竟！

原创已于 2025-03-17 20:29:01 修改 · 876 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

于 2025-03-17 20:22:03 首次发布

JS 专栏收录该内容

35 篇文章

订阅专栏

🚀 解密 JavaScript 的 `...` 魔法：浅拷贝还是深拷贝？带你一探究竟！🧙‍♂️

Hey，大家好！今天我们要聊聊 JavaScript 中一个看似简单却藏着玄机的小代码片段：...(data.id ? { id: data.id } : {})。它出现在一个保存假货登记的函数中，既优雅又高效，但它到底在干什么？跟浅拷贝、深拷贝有啥关系？别急，带上你的好奇心，我们一起来拆解这块“魔法代码”！✨

🎯 故事的起点：一段真实的代码

先来看看我们的主角，它出自一个微信小程序的函数，用于保存或修改假货登记数据：

const fakeRegistration = {
  ...(data.id ? { id: data.id } : {}),
  productName: data.productName,
  productId: data.productId,
  // ... 其他属性
};

这个函数的任务是根据传入的 data 对象，构建一个新的 fakeRegistration 对象，用于发送到后端 API。你可能会问：那个 ... 和三元运算符是在玩什么花样？别慌，我们一步步揭开它的面纱！😎

🧩 拆解魔法：`...` 和三元运算符的组合拳

1. 三元运算符：条件选择器 ⚡

data.id ? { id: data.id } : {} 是一个经典的三元运算符：

如果 data.id 存在（比如 "123"），返回 { id: "123" }。
如果 data.id 不存在（比如 undefined），返回 {}。

简单来说，它决定是否在结果对象中包含 id 属性。新增记录没有 id，修改记录有 id，逻辑清晰得很！

2. 展开运算符：属性“搬运工” 📦

... 是 ES6 的对象展开运算符（spread operator），它的作用是把一个对象的属性“展开”到新对象中。比如：

...{ id: "123" } 相当于直接写 id: "123"。
...{} 相当于啥也没加。

结合起来，...(data.id ? { id: data.id } : {}) 就是在说：

有 id 就加 { id: data.id }。
没 id 就啥也不加。

示例时间！🌟

输入：data = { id: "123", productName: "Test" }
输出：{ id: "123", productName: "Test" }
输入：data = { productName: "Test" }
输出：{ productName: "Test" }

够简洁吧？但问题来了：这跟拷贝有啥关系？🤔

🗂️ 浅拷贝 vs 深拷贝：一场“复制”的较量

在聊代码之前，先搞清楚两个关键概念：

浅拷贝（Shallow Copy）

只复制对象的第一层属性。
基本类型（如字符串、数字）直接复制值。
引用类型（如对象、数组）只复制引用地址。
修改浅拷贝对象的引用属性，会影响原对象。

深拷贝（Deep Copy）

递归复制所有层级，创建完全独立的对象。
修改深拷贝对象不会影响原对象。

`...` 是浅拷贝的代言人！🖐️

... 是一个典型的浅拷贝工具。比如：

const obj = { a: 1, b: { c: 2 } };
const copy = { ...obj };
copy.b.c = 3;
console.log(obj.b.c); // 输出 3，说明 b 是引用

但在我们的代码中，data.id 通常是基本类型（比如字符串），所以浅拷贝就够用了！

🔍 代码中的拷贝行为：浅还是深？

只看 `...(data.id ? { id: data.id } : {})`

它是浅拷贝：只复制了 { id: data.id } 或 {} 的第一层。
但 id 是基本类型（比如 "123"），复制的就是值本身，没引用问题。
如果 id 是个对象（比如 { value: "123" }），浅拷贝只复制引用，改动会影响原对象。但实际场景中，id 不会这么复杂。

整个 `fakeRegistration` 对象呢？

看看其他字段：

基本类型（如 productName、productId）：直接赋值，值的复制，没啥争议。

引用类型（如 productPhotos）：

productPhotos: data.productPhotos ? JSON.stringify((data.productPhotos || []).map(url => {
  const pathStart = url.indexOf('/', url.indexOf('//') + 2);
  return pathStart !== -1 ? url.substring(pathStart + 1) : url;
})) : undefined,