极客教程如何在 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'
]
我们已经学习了三种不同的方法来连接两个或多个数组。此外，还有其他方法来连接数组。例如，我们可以使用减少方法来连接多个数组。另外，我们还可以使用传播操作符和推送方法来连接数组。
连接多个数组的最好和最现代的方法是使用spread运算符；有了它，我们需要写的代码就少多了。concat()方法也很有效。在开发中不建议使用for-of循环来合并多个数组。我们加入这种方法是为了展示concat()方法的内部工作方式。