javascript 6种连接数组的方法和对比

在 JavaScript 中，有多种方法可以用来连接数组，以下是常见的几种：

1. concat() 方法

用于连接两个或多个数组，返回一个新的数组，不修改原数组。

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

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

使用扩展运算符将多个数组展开并合并为一个新数组。

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

3. push() 方法

将一个数组的元素逐一推入另一个数组中，会修改目标数组。

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

4. splice() 方法

将一个数组插入到另一个数组的指定位置，修改目标数组。

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

5. reduce() 方法

使用数组的 reduce() 方法手动合并数组。

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const result = [arr1, arr2].reduce((acc, curr) => acc.concat(curr), []);
console.log(result); // [1, 2, 3, 4, 5, 6]

6. Array.prototype.flat()

当有嵌套数组时，可以使用 flat() 方法将数组展平（适用于 ES2019 及以上版本）。

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const result = [arr1, arr2].flat();
console.log(result); // [1, 2, 3, 4, 5, 6]

选择方法的注意事项

是否需要修改原数组：

使用 push() 或 splice() 会修改原数组。 使用 concat()、扩展运算符、或 reduce() 不会修改原数组。

性能考虑：

对于少量数据，方法间性能差异不大。 对于大量数据，扩展运算符和 concat() 通常表现更优。

可以根据具体需求选择最适合的方法。

更新于：1个月前