如何在 TypeScript 中连接多个数组

数组在TypeScript中存储不同数据类型的元素。它是一个元素的集合，我们可以在需要的时候用它来存储和访问数据。

在处理多个数组时，我们需要结合两个或多个数组。在TypeScript中，有几种方法可以组合多个数组，我们将在这个TypeScript教程中查看所有方法。同时，我们将讨论什么时候应该使用哪种方式是最好的，最后。

使用For循环来连接两个数组

我们可以按照传统的方式，使用for-of-loop来连接两个数组。我们可以遍历数组，并将每个元素推送到另一个数组中，以连接这两个数组。

语法

用户可以按照下面的语法，在TypeScript中使用for-of-loop来连接两个或多个数组。

let array1 = [ ];
let array2 = [ ];
for (let element of array2) {
   array1.push(element);
}

算法

第1步 – 创建两个或多个数组。
第2步 – 使用for-of-loop遍历第二个数组的每个元素。
第3步 – 在for-of循环中，使用push()方法将第二个数组的每个元素推送到第一个数组。
第4步 – 当for-of循环的迭代完成后，第一个数组包含两个数组的元素。

示例

在这个例子中，我们已经创建了两个数字数组。之后，我们使用for-of循环遍历数组2，将其合并到数组1。

在输出中，用户可以观察到数组1总共包含7个元素，4个自己的元素，3个数组2的元素。

// defining the two array of numbers and initializing them with some number values
let array1: Array<number> = [10, 20, 30, 40];
let array2: Array<number> = [50, 60, 70];

// Iterate through the every element of array2 and push them to array1
for (let element of array2) {
   array1.push(element);
}

console.log("The array1 after joining the array1 and array2 in the array1");
console.log(array1);

编译时，它将生成以下JavaScript代码。

// defining the two array of numbers and initializing them with some number values
var array1 = [10, 20, 30, 40];
var array2 = [50, 60, 70];

// Iterate through the every element of array2 and push them to array1
for (var _i = 0, array2_1 = array2; _i < array2_1.length; _i++) {
   var element = array2_1[_i];
   array1.push(element);
}

console.log("The array1 after joining the array1 and array2 in the array1");
console.log(array1);

输出

上述代码将产生以下输出 —

The array1 after joining the array1 and array2 in the array1
[ 10, 20, 30, 40, 50, 60, 70 ]

使用spread操作符来连接N个数组

传播操作符的符号是三个点（…）。在TypeScript中，我们可以使用传播操作符来复制可迭代对象的所有元素，如数组、字符串等，一气呵成。

在我们的案例中，我们将使用传播操作符来连接N个不同的数组。

语法

用户可以按照下面的语法，用spread运算符将N个数组连接成一个数组。

let first = [];
let second = [];
let result = [...first, ...second, ...arrayN];

示例

在这个例子中，我们已经定义了第一个和第二个数组。使用传播操作符，我们定义了结果变量来存储连接第一和第二数组后的结果数组。我们还多次连接了第一个和第二个数组，这说明了如何连接N个相同或不同的数组。

另外，我们把第三个和第一个数组连接起来，没有使用额外的内存空间。

// Creating the two arrays of numbers and booleans respectively
let first: Array<number> = [302, 560, 767, 8];
let second: Array<boolean> = [true, false, true];

// merging first and second array using the spread operator
let result = [...first, ...second];
console.log("After merging the first and second array.");
console.log(result);

// N array merging using spread operator
result = [...first, ...second, ...first];
console.log("After merging the first and second array multiple times.");
console.log(result);

// In place merging, without using extra space
let third: Array<number> = [98, 65, 6, 3];
third = [...third, ...first];
console.log("After merging to first array to third wihtout using extra memory");
console.log(third);

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;
};
// Creating the two arrays of numbers and booleans respectively
var first = [302, 560, 767, 8];
var second = [true, false, true];

// merging first and second array using the spread operator
var result = __spreadArrays(first, second);
console.log("After merging the first and second array.");
console.log(result);

// N array merging using spread operator
result = __spreadArrays(first, second, first);
console.log("After merging the first and second array multiple times.");
console.log(result);

// In place merging, without using extra space
var third = [98, 65, 6, 3];
third = __spreadArrays(third, first);
console.log("After merging to first array to third wihtout using extra memory");
console.log(third);

输出

上述代码将产生以下输出 —

After merging the first and second array.
[ 302, 560, 767, 8, true, false, true ]
After merging the first and second array multiple times.
[ 302, 560, 767, 8, true, false, true, 302, 560, 767, 8 ]
After merging to first array to third wihtout using extra memory
[ 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。

在输出中，用户可以观察到结果数组的顺序，它首先包含参考数组的元素，然后是其他数组元素，因为我们在参数中传递了数组。

// Defining the three arrays containing the values of the different data types
let arr1 = [20, 30, true, "Hello"];
let arr2 = ["Hi", false, Infinity, NaN];
let arr3 = ["T", "u", "T", "o", "r", "i", "a", "l"];

// Merging the arr2, and arr3 to arr1
let result = arr1.concat(arr2, arr3);
console.log("After merging the arr2, and arr3 to arr1. ");
console.log(result);

// changing the order to concat the array
result = arr2.concat(arr3, arr1);
console.log("After merging the arr3, and arr1 to arr2. ");
console.log(result);

// Defining the three arrays containing the values of the different data types
var arr1 = [20, 30, true, "Hello"];
var arr2 = ["Hi", false, Infinity, NaN];
var arr3 = ["T", "u", "T", "o", "r", "i", "a", "l"];

// Merging the arr2, and arr3 to arr1
var result = arr1.concat(arr2, arr3);
console.log("After merging the arr2, and arr3 to arr1. ");
console.log(result);

// changing the order to concat the array
result = arr2.concat(arr3, arr1);
console.log("After merging the arr3, and arr1 to arr2. ");
console.log(result);

输出

上述代码将产生以下输出 —

After merging the arr2, and arr3 to arr1.
[ 
   20,
   30,
   true,
   'Hello',
   'Hi',
   false,
   Infinity,
   NaN,
   'T',
   'u',
   'T',
   'o',
   'r',
   'i',
   'a',
   'l' ]
After merging the arr3, and arr1 to arr2.
   [ 'Hi',
   false,
   Infinity,
   NaN,
   'T',
   'u',
   'T',
   'o',
   'r',
   'i',
   'a',
   'l',
   20,
   30,
   true,
   'Hello' 
]