数组的合并与拆分技巧

在JavaScript开发中，数组是最常用的数据结构之一。掌握数组的合并与拆分技巧能显著提高代码效率和可读性。本文将详细介绍JavaScript中数组合并与拆分的各种方法及其适用场景。

一、数组合并方法

1. concat()方法

concat()是最基础的数组合并方法，它不会改变原数组，而是返回一个新数组。

javascript 复制代码

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = arr1.concat(arr2);
// 结果: [1, 2, 3, 4, 5, 6]

2. 扩展运算符(...)

ES6引入的扩展运算符提供了一种更简洁的数组合并方式。

javascript 复制代码

const arr1 = [1, 2];
const arr2 = [3, 4];
const combined = [...arr1, ...arr2];
// 结果: [1, 2, 3, 4]

3. push()结合扩展运算符

如果需要将一个数组的元素添加到另一个数组的末尾，可以使用push()结合扩展运算符。

javascript 复制代码

const arr1 = [1, 2];
const arr2 = [3, 4];
arr1.push(...arr2);
// arr1现在为: [1, 2, 3, 4]

4. 数组合并去重

合并数组时去除重复元素：

javascript 复制代码

const arr1 = [1, 2, 3];
const arr2 = [2, 3, 4];
const uniqueCombined = [...new Set([...arr1, ...arr2])];
// 结果: [1, 2, 3, 4]

二、数组拆分方法

1. slice()方法

slice()方法返回数组的一部分浅拷贝，不改变原数组。

javascript 复制代码

const arr = [1, 2, 3, 4, 5];
const part1 = arr.slice(0, 2); // [1, 2]
const part2 = arr.slice(2);    // [3, 4, 5]

2. splice()方法

splice()会改变原数组，可用于删除或替换数组元素。

javascript 复制代码

const arr = [1, 2, 3, 4, 5];
const removed = arr.splice(2, 2); // 从索引2开始删除2个元素
// arr变为: [1, 2, 5]
// removed为: [3, 4]

3. 按条件拆分数组

使用filter()方法根据条件拆分数组：

javascript 复制代码

const numbers = [1, 2, 3, 4, 5, 6];
const evens = numbers.filter(n => n % 2 === 0);
const odds = numbers.filter(n => n % 2 !== 0);
// evens: [2, 4, 6]
// odds: [1, 3, 5]

4. 将数组拆分为固定大小的块

javascript 复制代码

function chunkArray(arr, size) {
  return Array.from({ length: Math.ceil(arr.length / size) }, (_, i) =>
    arr.slice(i * size, i * size + size)
  );
}

const result = chunkArray([1, 2, 3, 4, 5, 6], 2);
// 结果: [[1, 2], [3, 4], [5, 6]]

三、实际应用场景

分页处理：将大数据数组拆分为多个小数组实现分页显示
批量处理：合并多个API返回的数据数组进行统一处理
数据转换：拆分数组后分别进行不同处理再合并
状态管理：在Redux等状态管理中合并或拆分状态数组

四、性能考虑

对于大型数组，concat()通常比扩展运算符性能更好
splice()会修改原数组，可能影响其他引用该数组的代码
链式调用多个数组方法（如filter().map()）会创建中间数组，可能影响性能

掌握这些数组操作技巧，能够让你在处理数据时更加得心应手，写出更简洁高效的JavaScript代码。