ES10 中的 Array.concat() 方法详解及使用注意点

Array.concat() 方法是 JavaScript 中经常用到的数组拼接方式，而在 ECMAScript 2019 (ES10) 中，该方法有了些许升级与变化，本文将详细介绍 ES10 中的 Array.concat() 方法，以及使用注意点。

Array.concat() 方法的基本用法

在 ES5 中，我们常常用 Array.concat() 方法来对两个或多个数组进行拼接：

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = arr1.concat(arr2);

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

在上面的示例中，首先定义了两个数组 arr1 和 arr2，然后通过 arr1.concat(arr2) 的方式将两个数组拼接，在将结果赋值给了 arr3。

Array.concat() 方法的实现方式变化

在 ES10 中，Array.concat() 方法的实现方式发生了变化，它可以直接将数组拼接到一个数组中：

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [7, 8, 9, ...arr1, ...arr2];

console.log(arr3); // [7, 8, 9, 1, 2, 3, 4, 5, 6]

在上面的示例中，我们可以看到，通过在数组中使用 ... 将 arr1 和 arr2 展开，然后在数组中直接拼接。

Array.concat() 方法的使用注意点

在使用 Array.concat() 方法时，我们需要注意以下几点：

1. Array.concat() 方法不会改变原始数组

在 ES5 中，我们直接使用 concat() 方法拼接数组时，其不会改变原始数组，而是返回一个新的数组。在 ES10 中，虽然我们可以直接在数组中使用 ... 进行拼接，但 concat() 方法也不会改变原始数组：

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = arr1.concat(arr2);

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

2. Array.concat() 方法可以接收多个参数

在 ES5 中，我们需要使用多个 concat() 方法来拼接多个数组，而在 ES10 中，我们可以一次性将多个数组拼接到同一个数组中：

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [7, 8, 9];
const arr4 = [].concat(arr1, arr2, arr3);

console.log(arr4); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

在上面的示例中，我们可以看到，通过使用 concat() 方法将 arr1、arr2 和 arr3 拼接到一个空数组中，从而得到了新的数组。

3. Array.concat() 方法可以合并不同类型的数据

在 ES10 中，concat() 方法不仅可以拼接数组，还可以合并字符串、数字和对象等不同类型的数据：

const arr1 = [1, 2, 3];
const str1 = 'hello';
const num1 = 123;

const arr2 = arr1.concat(str1, num1);

console.log(arr2); // [1, 2, 3, 'h', 'e', 'l', 'l', 'o', 123]

在上面的示例中，我们可以看到，通过使用 concat() 方法将数组、字符串和数字拼接到一起，从而得到一个新的数组。

总结

在 ES10 中，Array.concat() 方法实现方式有所变化，我们可以直接在数组中使用 ... 将多个数组拼接，它也可以接收多个参数，而且还可以合并不同类型的数据。在使用 concat() 方法时，我们需要注意该方法不会改变原始数组。通过本文的介绍，我们可以更好的理解如何使用 Array.concat() 方法，并在实际开发中更加灵活的运用它。

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