JavaScript 数组连接方法

在 JavaScript 中，有多种方法可以连接数组。每种方法都有其自身的优点和缺点。常见的方法包括 concat()、扩展运算符(...)、push()、splice()、slice()、join()、forEach()、reduce() 以及 Array.from() 等。下面是这些方法的详细说明和示例代码。

1. concat()

concat() 方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。

示例代码

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const result = array1.concat(array2);
console.log(result); // [1, 2, 3, 4, 5, 6]

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

扩展运算符可以用于合并数组，语法简洁直观。它不会更改现有数组，而是生成一个新数组。

示例代码

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const result = [...array1, ...array2];
console.log(result); // [1, 2, 3, 4, 5, 6]

3. push()

push() 方法可以将一个数组的元素逐个添加到另一个数组中。此方法会更改原始数组。

示例代码

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
array1.push(...array2);
console.log(array1); // [1, 2, 3, 4, 5, 6]

4. splice()

splice() 方法可以在指定位置插入一个数组的元素到另一个数组中。此方法会更改原始数组。

示例代码

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
array1.splice(array1.length, 0, ...array2);
console.log(array1); // [1, 2, 3, 4, 5, 6]

5. slice()

slice() 方法可以用于创建一个新数组，该数组是现有数组的一部分。虽然它不是直接用于连接数组的方法，但可以用于数组的部分连接。

示例代码

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const result = array1.slice().concat(array2);
console.log(result); // [1, 2, 3, 4, 5, 6]

6. join()

join() 方法将数组的所有元素连接成一个字符串。此方法不常用于数组的合并，但可以用于将多个数组转换为一个字符串。

示例代码

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const result = array1.join(',') + ',' + array2.join(',');
console.log(result); // "1,2,3,4,5,6"

7. forEach()

forEach() 方法可以用于遍历一个数组并将其元素逐个添加到另一个数组中。

示例代码

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
array2.forEach(item => array1.push(item));
console.log(array1); // [1, 2, 3, 4, 5, 6]

8. reduce()

reduce() 方法可以用于将数组连接成一个新数组。

示例代码

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const result = array2.reduce((acc, item) => {
  acc.push(item);
  return acc;
}, array1.slice());
console.log(result); // [1, 2, 3, 4, 5, 6]

9. Array.from()

Array.from() 方法用于从类数组对象创建一个新的数组实例。虽然不常用于合并数组，但可以用于处理类数组对象。

示例代码

const arrayLike = {0: 1, 1: 2, 2: 3, length: 3};
const array2 = [4, 5, 6];
const result = Array.from(arrayLike).concat(array2);
console.log(result); // [1, 2, 3, 4, 5, 6]

总结

方法	语法	是否修改原数组	返回值类型	优点	缺点
concat()	array1.concat(array2)	否	新数组	简单易用，不修改原数组	性能可能不如扩展运算符
扩展运算符	[...array1, ...array2]	否	新数组	语法简洁，性能较好	需要较新的 JavaScript 版本支持
push()	array1.push(...array2)	是	数组长度	可以在原数组上追加元素，适合连接到现有数组尾部	修改原数组，语法不如扩展运算符简洁
splice()	array1.splice(index, 0, ...array2)	是	被删除元素	可以在数组的任意位置插入新元素	修改原数组，语法复杂
slice()	array1.slice().concat(array2)	否	新数组	不修改原数组，可以配合其他方法使用	需要额外的 concat 操作
join()	array1.join(',') + ',' + array2.join(',')	否	字符串	将数组转换为字符串，可以用于创建连接后的字符串表示	不适用于实际数组连接，只适用于字符串处理
forEach()	array2.forEach(item => array1.push(item))	是	undefined	适合需要对每个元素进行处理后再连接的场景	修改原数组，语法较繁琐
reduce()	array2.reduce((acc, item) => { acc.push(item); return acc; }, array1.slice())	否	新数组	适用于复杂的数组连接和处理场景	语法复杂，性能可能不如其他方法
Array.from()	Array.from(arrayLike).concat(array2)	否	新数组	可以处理类数组对象，灵活性高	主要用于类数组对象处理，不常用于普通数组连接