如何在TypeScript中合并数组?

在 TypeScript 中合并数组

使用展开语法...在 TypeScript 中合并数组。排列语法将把数组的值解压到一个新数组中。

新数组的类型将反映所提供数组中值的类型。

const arr1 = ['mybj', '123'];
const arr2 = ['.', 'com'];

// 👇️ const arr3: string[]
const arr3 = [...arr1, ...arr2];

console.log(arr3); // 👉️ [ 'mybj', '123', '.', 'com' ]

我们使用展开语法（…）将 2 个数组的元素解构为第三个数组。

最终数组的类型将反映所提供数组的类型。

const arr1 = ['mybj', '123'];
const arr2 = [1, 2];

// 👇️ const arr3: (string | number)[]
const arr3 = [...arr1, ...arr2];

// 👇️ [ 'mybj', '123', 1, 2 ]
console.log(arr3);

我们使用展开语法（…）将字符串和数字数组解构缩为第三个数组。

第三个数组的类型是表示字符串和数字数组的并集。

下面是一个显式键入数组的示例。

const arr1: string[] = ['mybj', '123'];
const arr2: number[] = [1, 2];

// 👇️ const arr3: (string | number)[]
const arr3: (string | number)[] = [...arr1, ...arr2];

// 👇️ [ 'mybj', '123', 1, 2 ]
console.log(arr3);

如果试图将指定类型以外的任何其他类型的值添加到数组中，类型检查器将抛出错误。

语法(string | number)[]称为并集，表示数组可以包含字符串和数字。

请注意，在 TypeScript 中键入数组的语法是type[]，而不是[type]。

• [type]语法用于声明包含单个类型元素的元组。
• type[]语法用于声明一个数组，该数组包含零个或多个类型为的元素。

使用展开语法时，对数组进行解构的顺序很重要。

const arr1 = ['a', 'b'];
const arr2 = ['c', 'd'];

// 👇️ const arr3: string[]
const arr3 = [...arr2, ...arr1];

// 👇️ ['c', 'd', 'a', 'b']
console.log(arr3);

根据需要，可以使用任意多个数组重复此过程。

const arr1 = ['a', 'b'];
const arr2 = ['c', 'd'];
const arr3 = ['e', 'f'];

// 👇️ const arr3: string[]
const arr4 = [...arr1, ...arr2, ...arr3];

// 👇️ ['a', 'b', 'c,' 'd', 'e', 'f']
console.log(arr4);

使用 concat()合并 TypeScript 中的数组

我们还可以在 TypeScript 中看到用于合并数组的Array.concat()方法。

const arr1 = ['a', 'b'];
const arr2 = ['c', 'd'];
const arr3 = ['e', 'f'];

// 👇️ const arr3: string[]
const arr4 = arr1.concat(arr2, arr3);

// 👇️ ['a', 'b', 'c,' 'd', 'e', 'f']
console.log(arr4);

concat()方法还可以合并两个或多个数组。该方法将一个或多个数组作为参数，并将它们合并到调用该方法的数组中。

但是，我个人推荐还是使用展开语法（…），因为 TypeScript 中concat()方法的显得不那么直观。

const arr1 = ['a', 'b'];
const arr2 = [1, 2];

// ⛔️  Type 'number[]' is not assignable to
// type 'ConcatArray'.ts(2769)
const arr3 = arr1.concat(arr2);

上面代码导致类型检查器抛出错误，因为我们对字符串数组调用了concat()方法，并向其传递了一个数字数组。

代码中希望只将与参数类型相同的数组传递给 concat()方法。

当我们使用更灵活的展开语法（…）时，情况并非如此。