展开运算符，这个在Ja vaScript里大家再熟悉不过的工具，本质上只是一个浅拷贝的“搬运工”。它本身并不理解“平移”这个概念。那么，我们常说的对地图坐标对象进行“平移式浅拷贝”，到底是什么意思呢？
简单来说，其核心目标是在保持原始坐标数据结构完整的前提下，精准地只更新那些代表位置的字段（比如 lng 和 lat），而其他所有不变的字段则被原封不动地复用。这样做，既能实现坐标的位移，又能避免因创建全新的对象引用而触发不必要的组件重渲染。所以，真正的技巧不在于“展开”这个动作本身，而在于“如何展开”以及“展开后如何修改”。
明确坐标对象结构，只 shallow-copy 可变字段
地图坐标对象通常具有类似这样的结构：
const origin = { lng: 116.4, lat: 39.9, zoom: 12, meta: { source: 'user', id: 'abc' } };
在这个对象里，lng 和 lat 是需要被平移的可变字段，而像 meta 这样的元数据往往是只读的。如果直接使用 {...origin}，虽然会复制整个对象，但 meta 内部的引用其实没有改变——这本身不是问题。关键在于，我们需要控制更新过程，确保只有 lng 和 lat 参与位移计算，其他字段则被高效地复用。
- ✅ 推荐写法（复用不可变字段 + 精准更新可变字段）：
const shifted = { ...origin, lng: origin.lng + 0.1, lat: origin.lat - 0.05 }; - ❌ 避免嵌套展开或冗余构造：
const bad = { ...origin, meta: { ...origin.meta } }; —— meta 本身不需要克隆，这样做只会徒增一层不必要的对象创建。
配合 React.memo 或 Vue 的 shallowRef，防止无效重渲染
即使你正确地使用了 {...origin, lng: ...} 来创建新对象，如果父组件在每次渲染时都生成一个新的对象，那么接收这个坐标作为 props 的子组件（例如一个
- React 场景：使用
React.memo来包裹接收坐标 props 的子组件，并确保其更新逻辑只依赖于lng/lat值的变化。 - Vue 3 场景：可以将坐标对象定义为
shallowRef，或者使用toRefs解构后，仅对关键字段进行响应式追踪，从而避免整个对象被深度袋里。 - 通用建议：尽量将平移操作封装到单一的 Hook（React）或 Composable（Vue）中，统一返回经过记忆化（memoized）处理的对象，而不是在 JSX 模板或渲染函数里现场进行展开和计算。
处理嵌套坐标数组（如 GeoJSON Point 列表）
当需要批量平移多个点时，展开运算符可以配合 map 方法使用。但这里需要注意避免“双重浅拷贝”带来的冗余开销。
const points = [ { lng: 116.4, lat: 39.9 }, { lng: 116.5, lat: 39.8 } ];
const shiftedPoints = points.map(p => ({ ...p, lng: p.lng + dx, lat: p.lat + dy }));
- ✅ 正确做法：对数组中的每个点对象单独进行展开和更新。这样结构扁平，不会引入深层的、不必要的引用变化。
- ⚠️ 注意性能：如果
points数组本身来自 props，并且这个 map 操作被频繁调用，那么建议使用useMemo（React）或computed（Vue）来缓存计算结果，避免在每次渲染时都重建整个数组。 - ? 一个常见的误区：使用
[...points].map(...)。先对数组进行浅拷贝再 map 是毫无意义的，这只会增加额外的性能开销，因为 map 方法本身就会返回一个新数组。
