JS一维数组浅拷贝：slice、concat与展开运算符用法

一、核心认知：一维数组浅拷贝的物理隔离本质

要掌握一维数组的浅拷贝，首先需要明确一个核心结论：当一维数组中的全部元素均为基本数据类型（如 Number、String、Boolean、null、undefined 等）时，浅拷贝所产生的新数组与原数组在内存中是完全隔离、互不影响的独立个体。

JavaScript 中数据的存储分为栈内存（Stack）和堆内存（Heap）：

• 引用赋值（const b = a）：根本不发生数据复制，仅仅是在栈上新建了一个变量指针 b，直接指向 a 在堆内存中已有的同一个数组实例。只要通过任一变量修改元素，另一方必定发生联动。
• 浅拷贝（Shallow Copy）：JavaScript 引擎会在堆内存中开辟一段全新的连续空间，实例化一个新的 Array 对象，并将源数组对应索引槽位上的数值逐项读取并写入新空间。

因此，对于存储纯基础数值的一维数组，只要通过浅拷贝切断了外层数组的引用连接，后续对任何元素的修改、追加或删除，都不会污染原数组。

二、方法一：使用 Array.prototype.slice() 复制

slice() 是 JavaScript 自 ECMAScript 3（1999年）便引入的经典原型方法。其本意是按索引区间从数组中截取子集并返回新数组，但当不传参数或参数为 0 时，它将完整遍历从索引 0 到末尾的全部元素，从而实现完美的浅拷贝。

1. 语法与调用规范

// 语法一：完全不传参数（最为常用）
const copy1 = original.slice();

// 语法二：显式传入起始索引 0（语义明确）
const copy2 = original.slice(0);

2. 完整实测示例

const scores = [85, 92, 78, 96];

// 执行浅拷贝
const copiedScores = scores.slice();

// 修改副本数组中的元素
copiedScores[0] = 100;
copiedScores.push(60);

// 验证结果
console.log(copiedScores); // 示例输出: [100, 92, 78, 96, 60]
console.log(scores);       // 示例输出: [85, 92, 78, 96] (原数组未被改动)
console.log(copiedScores === scores); // 示例输出: false (内存指针不同)

三、方法二：使用 Array.prototype.concat() 复制

concat() 同样是 ES3 规范的原生方法，其设计初衷是用于连接两个或多个数组。由于 concat() 在执行时会先将调用者自身的全部元素复制到一个新建的数组实例中，若在调用时不传入任何实参，其最终产物恰好就是原数组的完整浅拷贝副本。

1. 语法与调用规范

// 形式一：直接调用原数组的 concat 方法（推荐）
const copy1 = original.concat();

// 形式二：空数组作为调用主体进行拼接（效果等价）
const copy2 = [].concat(original);

2. 完整实测示例

const tags = ['js', 'array', 'copy'];

// 执行浅拷贝
const clonedTags = tags.concat();

// 修改副本数组
clonedTags[1] = 'vector';
clonedTags.push('v8');

// 验证结果
console.log(clonedTags); // 示例输出: ['js', 'vector', 'copy', 'v8']
console.log(tags);       // 示例输出: ['js', 'array', 'copy'] (原数组完好)
console.log(clonedTags === tags); // 示例输出: false

四、方法三：使用 ES6 展开运算符（Spread Operator）复制

随着 ECMAScript 2015（ES6）标准的落地，展开运算符 ... 成为现代 JavaScript 中最推荐、使用率最高的数组浅拷贝方案。它通过迭代器协议（Iteration Protocol）访问数组内部的可迭代元素，并在全新的数组字面量 [] 中将其依次解构成独立元素。

1. 语法与调用规范

// 基础浅拷贝：在空数组字面量中展开原数组
const copy = [...original];

// 复合用法：在浅拷贝的同时在首尾插入新元素
const extendedCopy = ['head', ...original, 'tail'];

2. 完整实测示例

const colors = ['red', 'green', 'blue'];

// 执行展开浅拷贝
const copyColors = [...colors];

// 操作副本
copyColors[0] = 'yellow';
copyColors.pop();

// 验证独立性
console.log(copyColors); // 示例输出: ['yellow', 'green']
console.log(colors);     // 示例输出: ['red', 'green', 'blue'] (原数组不变)
console.log(copyColors === colors); // 示例输出: false

展开运算符不仅语法极其精炼，且符号 [...] 能够向代码阅读者传达明确的意图——“正在构造一个全新的独立数组实例”。在 React 的不可变状态更新（如 setState([...items, newItem])）以及 Vue 响应式数据处理中，展开运算符已是事实上的行业通用标准。

五、横向对比：三种方法的特性与适用场景

这三种方法在针对一维基础类型数组时，拷贝效果完全等价，均能生成内存独立的数组实例。但在实际工程落地中，开发者应结合运行环境、语法表现力以及是否需要复合操作来做出合理选择：

在底层性能方面，现代 JavaScript 引擎（如 Google Chrome/Node.js 的 V8、Firefox 的 SpiderMonkey）对这三种操作都进行了高度优化：

• 如果数组元素都是连续的数值（Fast Packed Elements），引擎会在底层调用内存段复制指令（如 memcpy 级别优化），其耗时差距通常在微秒级别，业务代码中无需过度纠结性能差异。
• 在百万级大型数据量时，slice() 与现代优化的 [...] 执行速度相近，且略微领先于需要解析可变入参列表的 concat()。

六、边界与避坑提醒：浅拷贝对嵌套对象的限制

之所以在标题中着重强调“一维数组”，是因为浅拷贝的机制决定了它只复制数组第一层的元素。如果数组中存在第二层嵌套引用（例如包含了 Plain Object 或嵌套 Array），必须警惕以下副作用：

1. 嵌套对象引用的联动陷阱

// 数组第一层包含对象引用
const users = [
  'admin',                    // 基本类型
  { id: 101, name: 'Tom' }   // 引用类型（对象）
];

// 使用展开运算符进行浅拷贝
const usersCopy = [...users];

// 1. 修改第一层基本类型元素 -> 互不影响
usersCopy[0] = 'guest';
console.log(users[0]); // 示例输出: 'admin' (原数组安全)

// 2. 修改第二层对象的属性 -> 原数组惨遭连带修改！
usersCopy[1].name = 'Jerry';
console.log(users[1].name); // 示例输出: 'Jerry' (原数组内部对象也被篡改！)

原因解释：浅拷贝仅开辟了第一层数组的新堆空间，而在遍历写入第二项时，它仅仅将对象 { id: 101, name: 'Tom' } 的内存指针地址复制给了新数组。原数组和新数组中的第二项依然指向同一个堆对象实体。

2. 解决方案建议

如果业务中的一维数组可能包含嵌套对象，或者数据结构是多维数组，浅拷贝将不再安全。此时应选用深拷贝手段：

• 现代标准 API：直接使用原生全局方法 structuredClone(complexArray)，它支持循环引用并能精确克隆各类内置数据结构。
• 工具库方案：引入经过充分实战检验的工具库，如 lodash.cloneDeep(complexArray)。

七、总结与选型决策指南

掌握 JavaScript 一维数组的浅拷贝，能够有效帮助开发者避免因对象引用共享而产生的难以排查的“幽灵 Bug”。在实际编码时，可以遵循如下简洁的选型原则：

1. 现代业务开发（首选）：在 React、Vue、Node.js 等支持 ES6+ 的现代工程中，统一优先采用展开运算符 [...arr]。其语义直观，符合声明式编程习惯，并且前后拼装新元素格外便捷。
2. 类库开发与向下兼容：如果正在编写通用的底层 SDK、开源插件，或者需要保证在没有构建转译环境下的旧设备中平稳运行，请采用 arr.slice()。
3. 链式组合场景：如果需要在完成浅拷贝的当下合并一个或多个额外的子数组或离散元素，选用 arr.concat() 最为流畅。