数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何在 TypeScript 中合并多个数组？
数组在 TypeScript 中存储不同数据类型的元素。它是一个元素集合，我们可以用它来存储和访问数据，以备不时之需。
在处理多个数组时，我们需要将两个或多个数组组合起来。在 TypeScript 中，有多种方法可以组合多个数组，我们将在本 TypeScript 教程中介绍所有方法。此外，我们还将讨论最后应该使用哪种方法才是最好的。
使用 For 循环连接两个数组
我们可以采用使用 for-of 循环连接两个数组的传统方法。我们可以遍历数组并将每个元素推送到另一个数组中以连接两者。
语法
用户可以按照以下语法使用 for-of 循环在 TypeScript 中连接两个或多个数组。
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 个元素，4 个是它自己的元素，3 个是 array2 的元素。
// 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 ]
使用扩展运算符连接 N 个数组
扩展运算符的符号是三个点 (...)。在 TypeScript 中，我们可以使用扩展运算符一次性复制可迭代对象（如数组、字符串等）的所有元素。
在我们的例子中，我们将使用扩展运算符来连接 N 个不同的数组。
语法
用户可以按照以下语法使用扩展运算符将 N 个数组连接到单个数组中。
let first = []; let second = []; let result = [...first, ...second, ...arrayN];
示例
在本例中，我们定义了第一个和第二个数组。使用扩展运算符，我们定义了 result 变量来存储连接第一个和第二个数组后的结果数组。我们还多次连接了第一个和第二个数组，这展示了如何连接 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);
编译后，它将生成以下 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;
};
// 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);
编译后，它将生成以下 JavaScript 代码：
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' ]
我们学习了三种不同的方法来连接两个或多个数组。此外，还有其他方法可以连接数组。例如，我们可以使用 reduce 方法来连接多个数组。此外，我们还可以使用扩展运算符和 push 方法来连接数组。
连接多个数组的最佳和最现代的方法是使用扩展运算符；这样，我们需要编写的代码更少。concat() 方法效率也很高。在开发中不建议使用 for-of 循环来合并多个数组。我们添加了这种方法来展示 concat() 方法的内部工作原理。
3K+ 次查看
