js怎么复制数组一部分

# JS怎么复制数组一部分

在JavaScript开发中，经常需要复制数组的某一部分进行操作而不影响原数组。本文将详细介绍7种实现数组部分复制的方法，并分析各种方案的性能特点和适用场景。

## 一、slice() 方法（最常用）

`slice()` 是数组部分复制的首选方法，返回原数组的浅拷贝新数组。

```javascript
const arr = [1, 2, 3, 4, 5];
const partial = arr.slice(1, 4); // [2, 3, 4]

特点：

• 参数：start（包含）、end（不包含）
• 不修改原数组
• 时间复杂度：O(n)
• 浅拷贝（嵌套对象会共享引用）

二、splice() 方法（会修改原数组）

虽然主要用途是删除/替换元素，但可以间接实现部分复制：

const arr = [1, 2, 3, 4, 5];
const partial = [...arr].splice(1, 3); // [2, 3, 4]

注意事项：

• 需要先创建副本（如使用展开运算符）
• 第二个参数是数量而非结束索引
• 会修改操作的数组

三、filter() 方法（条件筛选）

适合基于条件而非索引的复制：

const arr = [10, 20, 30, 40];
const partial = arr.filter((_, index) => index >= 1 && index <= 2); // [20, 30]

四、for循环手动复制

基础但灵活的实现方式：

function sliceArray(arr, start, end) {
  const result = [];
  for (let i = start; i < end; i++) {
    result.push(arr[i]);
  }
  return result;
}

适用场景：

• 需要特殊处理元素时
• 在性能敏感场景可优化循环

五、Array.from() + slice

结合两种特性的方案：

const arr = [1, 2, 3, 4];
const partial = Array.from(arr).slice(1, 3); // [2, 3]

六、扩展运算符 + slice

ES6+的简洁写法：

const arr = ['a', 'b', 'c', 'd'];
const partial = [...arr].slice(1, 3); // ['b', 'c']

七、TypedArray子数组（特殊场景）

处理类型化数组时：

const typedArray = new Uint8Array([10, 20, 30, 40]);
const partial = typedArray.subarray(1, 3); // Uint8Array [20, 30]

性能对比

通过jsPerf测试（百万次操作）：

深浅拷贝问题

所有方法都是浅拷贝：

const nested = [{id: 1}, {id: 2}];
const copy = nested.slice(0, 1);
copy[0].id = 99; // 原数组也会被修改

深拷贝解决方案：

const deepCopy = JSON.parse(JSON.stringify(nested)).slice(0, 1);

实际应用场景

1. 分页加载：data.slice((page-1)*pageSize, page*pageSize)
2. 批量操作：复制部分数据单独处理
3. 状态管理：Redux reducer中避免直接修改state

边界情况处理

1. 处理负数索引：

   
   arr.slice(-3, -1) // 倒数第3到倒数第1（不含）
   

2. 自动校正越界：

   
   [1,2,3].slice(1, 100) // [2,3]
   

总结建议

1. 优先使用slice()：语法简洁、性能最优
2. 需要过滤时用filter()
3. 特殊需求考虑手动循环
4. 注意浅拷贝特性，必要时使用深拷贝

通过合理选择数组复制方法，可以使代码更加高效和可维护。 “`

文章包含： - 7种具体实现方案 - 代码示例和参数说明 - 性能对比数据 - 深浅拷贝注意事项 - 实际应用场景 - 边界情况处理 - 总结建议 总字数约950字，采用Markdown格式，包含代码块和表格等元素。