必须掌握的技巧 —— 使用 ES2021 的 Array.concat() 方法-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，数组是最常见的数据类型之一。而对于数组的操作，也是我们日常工作中经常用到的一部分。其中一个重要方法就是 Array.concat()，它可以将两个或多个数组合并成一个新数组。本文将详细介绍 Array.concat() 方法的使用和常见应用场景。

基本使用

Array.concat() 方法可以接受任意数量的参数，每个参数都可以是一个数组或者一个普通值。它返回一个新数组，其中包含所有传入参数的值。

例如，我们有两个数组 a 和 b：

const a = [1, 2, 3];
const b = [4, 5, 6];

我们可以使用 concat() 方法将它们合并成一个新数组：

const c = a.concat(b);
console.log(c); // [1, 2, 3, 4, 5, 6]

concat() 方法不会修改原始数组，而是返回一个新数组，所以原始数组 a 和 b 的值不变。

合并多个数组

除了合并两个数组，concat() 方法还可以合并任意数量的数组。例如：

const a = [1, 2];
const b = [3, 4];
const c = [5, 6];
const d = [7, 8];

const result = a.concat(b, c, d);
console.log(result); // [1, 2, 3, 4, 5, 6, 7, 8]

添加元素

除了合并数组，我们还可以使用 concat() 方法向数组中添加元素。例如，我们可以使用如下代码向数组 a 中添加一个元素：

const a = [1, 2, 3];
const result = a.concat(4);
console.log(result); // [1, 2, 3, 4]

不修改原始数组

concat() 方法不会修改原始数组，它总是返回一个新数组。例如：

const a = [1, 2, 3];
const b = [4, 5, 6];
const c = a.concat(b);

console.log(a); // [1, 2, 3]
console.log(b); // [4, 5, 6]
console.log(c); // [1, 2, 3, 4, 5, 6]

处理嵌套数组

concat() 方法可以处理嵌套数组，它会将嵌套数组展开。例如：

const a = [1, [2, 3]];
const b = [4, 5];
const c = a.concat(b);

console.log(c); // [1, [2, 3], 4, 5]

但是，如果嵌套数组是一个深层次嵌套的数组，concat() 方法就无法展开它们。例如：

const a = [1, [2, [3, [4]]]];
const b = [5, 6];
const c = a.concat(b);

console.log(c); // [1, [2, [3, [4]]], 5, 6]

拓展运算符

除了使用 concat() 方法，我们还可以使用拓展运算符 ... 来合并数组。例如：

const a = [1, 2, 3];
const b = [4, 5, 6];
const c = [...a, ...b];

console.log(c); // [1, 2, 3, 4, 5, 6]

拓展运算符和 concat() 方法相比，更简单易用，还支持展开嵌套数组。因此，如果你的浏览器支持 ES2015 （即 ECMAScript 6），我建议你使用拓展运算符。

总结

Array.concat() 方法是一个非常实用的方法，它可以将两个或多个数组合并成一个新数组，也可以向数组中添加新元素。我们还讨论了 concat() 方法的其他用法，如合并多个数组和处理嵌套数组。最后，我们还介绍了拓展运算符，它是一个更简单和常用的方法来合并数组。

了解 Array.concat() 方法的使用和常见应用场景是掌握 JavaScript 数组操作的重要一步。希望这篇文章能够帮助你更好地理解和使用该方法。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65b31f20add4f0e0ffc300d9