使用浅拷贝数组+深拷贝日期对象可安全复制时间范围数组；扩展运算符或slice()仅浅拷贝数组，date引用未隔离，修改会污染原值；推荐const copiedrange = originalrange.map(date => new date(date.gettime()))。
在日期选择器组件中，如果需要复制选中的时间范围数组（比如 [startDate, endDate]），使用浅拷贝即可满足大多数场景——因为日期对象本身是引用类型，浅拷贝会复制数组容器，但内部的 Date 实例仍保持原引用。不过要注意：**若后续需独立修改起止时间而不影响原始值，必须对每个 Date 实例也做拷贝（即“浅拷贝数组 + 深拷贝日期”）**。
为什么直接用扩展运算符或 slice() 不够安全？
日期选择器常以 [new Date('2024-01-01'), new Date('2024-01-10')] 形式存储时间范围。此时：
-
[...originalRange]或originalRange.slice()只复制了数组，两个元素仍是原Date对象的引用 - 修改新数组里的
Date（如copied[0].setDate(5)）会同步影响原始数组 - 这在表单编辑、撤销操作、临时预览等场景中容易引发意外副作用
推荐做法：浅拷贝数组 + 独立克隆每个 Date 对象
只需一行代码即可安全复制时间范围数组：
const copiedRange = originalRange.map(date => new Date(date.getTime()));
说明：
-
map()创建新数组（浅拷贝容器） -
new Date(date.getTime())基于毫秒数新建独立的Date实例，彻底隔离修改影响 - 兼容所有标准日期对象，包括
new Date()、new Date('2024-01-01')、new Date(1704067200000)
其他可用方式（按推荐度排序）
-
结构赋值 + 构造新 Date：
const [start, end] = originalRange; const copied = [new Date(start), new Date(end)];—— 语义清晰，适合固定两元素场景 -
JSON 序列化反序列化（仅限纯时间值）：
JSON.parse(JSON.stringify(originalRange))—— 简单但丢失时区信息，且不支持Date以外的复杂类型 -
避免使用：
Object.assign([], originalRange)或Array.from(originalRange)—— 它们仍是浅拷贝，未处理Date引用问题
在组件中实际应用示例
比如在 Vue 的日期范围选择器中响应式更新前备份：
data() { return { selectedRange: [new Date('2024-01-01'), new Date('2024-01-10')] }; },
methods: {
onRangeChange(newRange) {
// 安全备份当前值用于撤销
this.previousRange = newRange.map(d => new Date(d.getTime()));
this.selectedRange = newRange;
}
}
这样后续调用 this.previousRange[0].setMonth(5) 不会影响 this.selectedRange 中的原始日期。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
