如何在 TypeScript 中连接多个数组?
在 TypeScript 中，数组存储不同数据类型的元素。它是一个元素的集合，我们可以在需要时使用它来存储和访问数据。
处理多个数组时，我们需要组合两个或多个数组。在 TypeScript 中，组合多个数组的方法有很多种，我们将在本教程中介绍所有方法。此外，我们还会讨论何时应该使用哪种方法最佳。
使用 For 循环连接两个数组
我们可以按照传统的 for-of 循环方式连接两个数组。我们可以遍历数组，并将每个元素推送到另一个数组，从而连接两个数组。
语法
用户可以按照以下语法在 TypeScript 中使用 for-of 循环连接两个或多个数组。
let array1 = [ ];
let array2 = [ ];
for (let element of array2) {
array1.push(element);
}
算法
步骤 1 − 创建两个或多个数组。
步骤 2 − 使用 for-of 循环遍历第二个数组的每个元素。
步骤 3 − 在 for-of 循环中，使用 push() 方法将第二个数组的每个元素推送到第一个数组。
步骤 4 − 当 for-of 循环迭代完成后，第一个数组包含两个数组的元素。
示例
在此示例中，我们创建了两个数字数组。之后，我们使用 for-of 循环遍历 array2，将其合并到 array1 中。
在输出中，用户可以观察到 array1 总共包含 7 个元素，其中 array1 自身有 4 个元素，array2 有 3 个元素。
// 定义两个数字数组并用一些数值初始化它们
let array1: Array<number> = [10, 20, 30, 40];
let array2: Array<number> = [50, 60, 70];
// 遍历 array2 的每个元素并将其推送到 array1
for (let element of array2) {
array1.push(element);
}
console.log("将 array1 和 array2 合并到 array1 之后的 array1");
console.log(array1);
编译后将生成以下 JavaScript 代码:
// 定义两个数字数组并用一些数值初始化它们
var array1 = [10, 20, 30, 40];
var array2 = [50, 60, 70];
// 遍历 array2 中的每个元素并将其推送到 array1
for (var _i = 0, array2_1 = array2; _i < array2_1.length; _i++) {
var element = array2_1[_i];
array1.push(element);
}
console.log("将数组 1 和数组 2 合并后得到的数组 1");
console.log(数组 1);
输出
上述代码将产生以下输出 −
将数组 1 和数组 2 合并后得到的数组 1 [ 10, 20, 30, 40, 50, 60, 70 ]
使用扩展运算符合并 N 个数组
扩展运算符的符号是三个点 (...)。在 TypeScript 中，我们可以使用展开运算符一次性复制可迭代对象(例如数组、字符串等)的所有元素。
在本例中，我们将使用展开运算符连接 N 个不同的数组。
语法
用户可以按照以下语法使用展开运算符将 N 个数组连接成一个数组。
let first = []; let second = []; let result = [...first, ...second, ...arrayN];
示例
在此示例中，我们定义了第一个数组和第二个数组。使用扩展运算符，我们定义了 result 变量来存储连接第一个数组和第二个数组后的结果数组。我们还多次连接了第一个数组和第二个数组，这展示了如何连接 N 个相同或不同的数组。
此外，我们还连接了第三个数组和第一个数组，而无需使用额外的内存空间。
// 分别创建两个数字和布尔值数组
let first: Array<number> = [302, 560, 767, 8];
let second: Array<boolean> = [true, false, true];
// 使用扩展运算符合并第一个数组和第二个数组
let result = [...first, ...second];
console.log("合并第一个数组和第二个数组后。");
console.log(result);
// 使用扩展运算符合并 N 个数组
result = [...first, ...second, ...first];
console.log("多次合并第一个和第二个数组后。");
console.log(result);
// 原地合并，不使用额外空间
let third: Array = [98, 65, 6, 3];
third = [...third, ...first];
console.log("合并第一个数组到第三个数组后，不使用额外内存。");
console.log(third);
编译后，它将生成以下 JavaScript 代码 -
var __spreadArrays = (this && this.__spreadArrays) || function () {
for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
for (var r = Array(s), k = 0, i = 0; i < il; i++)
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
r[k] = a[j];
return r;
};
// 分别创建两个数字和布尔值数组
var first = [302, 560, 767, 8];
var second = [true, false, true];
// 使用扩展运算符合并第一个和第二个数组
var result = __spreadArrays(first, second);
console.log("合并第一个和第二个数组后。");
console.log(result);
// 使用扩展运算符合并 N 个数组
result = __spreadArrays(first, second, first);
console.log("多次合并第一个和第二个数组后。");
console.log(result);
// 原地合并，不使用额外空间
var third = [98, 65, 6, 3];
third = __spreadArrays(third, first);
console.log("合并第一个数组和第三个数组后，不使用额外内存。");
console.log(third);
输出
上述代码将产生以下输出 -
合并第一个和第二个数组后。 [ 302, 560, 767, 8, true, false, true ] 多次合并第一个和第二个数组后。 [ 302, 560, 767, 8, true, false, true, 302, 560, 767, 8 ] 将第一个数组合并到第三个数组后，无需使用额外内存 [ 98, 65, 6, 3, 302, 560, 767, 8 ]
使用 Concat() 方法连接多个数组
concat() 方法是内置库，用于连接或合并多个数组，也是一种高效的连接方法。我们可以通过将数组实例作为引用来调用 contact() 方法，并将需要连接的其他数组作为 contact 方法的参数传递。
语法
用户可以按照以下语法在 TypeScript 中使用 concat() 方法连接多个数组。
let arr1 = []; let arr2 = []; let result = arr1.concat(arr2,...,arrN);
参数
arr2, arr3, …, arrN − 这是一个需要与 arr1 合并的数组。
返回值
concat() 方法在合并作为参数传递给引用数组的数组后返回新数组。它按照我们传入参数的顺序合并数组。
示例
在此示例中，我们创建了三个不同的数组，分别名为 arr1、arr2 和 arr3。首先，我们将 arr2 和 arr3 合并到 arr1。之后，我们将 arr3 和 arr1 合并到 arr2。
在输出中，用户可以观察到结果数组的顺序，它首先包含引用数组的元素，然后是其他数组元素，因为我们已将数组传递到参数中。
// 定义包含不同数据类型值的三个数组
let arr1 = [20, 30, true, "Hello"];
let arr2 = ["Hi", false, Infinity, NaN];
let arr3 = ["T", "u", "T", "o", "r", "i", "a", "l"];
// 将 arr2 和 arr3 合并到 arr1
let result = arr1.concat(arr2, arr3);
console.log("将 arr2 和 arr3 合并到 arr1 后。");
console.log(result);
// 更改顺序以连接数组
result = arr2.concat(arr3, arr1);
console.log("将 arr3 和 arr1 合并到 arr2 后。");
console.log(result);
编译后，它负责生成以下 JavaScript 代码 -
var arr1 = [20, 30, true, "Hello"];
var arr2 = ["Hi", false, Infinity, NaN];
var arr3 = ["T", "u", "T", "o", "r", "i", "a", "l"];
// 将 arr2 和 arr3 合并到 arr1
var result = arr1.concat(arr2, arr3);
console.log("将 arr2 和 arr3 合并到 arr1 后。");
console.log(result);
// 改变顺序以连接数组
result = arr2.concat(arr3, arr1);
console.log("将 arr3 和 arr1 合并到 arr2 后。");
console.log(result);
输出
上述代码将产生以下输出 -
将 arr2 和 arr3 合并到 arr1 后。 [ 20, 30, true, 'Hello', 'Hi', false, Infinity, NaN, 'T', 'u', 'T', 'o', 'r', 'i', 'a', 'l' ] 将arr3和arr1合并到arr2之后。 [ 'Hi', false, Infinity, NaN, 'T', 'u', 'T', 'o', 'r', 'i', 'a', 'l', 20, 30, true, 'Hello' ]
我们已经学习了三种不同的方法来连接两个或多个数组。此外，还有其他方法来连接数组。例如，我们可以使用 reduce 方法来连接多个数组。此外，我们还可以使用扩展运算符和 push 方法来连接数组。
连接多个数组的最佳和最现代的方法是使用扩展运算符;使用这种方法，我们需要编写的代码要少得多。concat() 方法也很高效。在开发过程中，不建议使用 for-of 循环来合并多个数组。我们添加了这种方法来展示 concat() 方法的内部工作原理。
