如何在 TypeScript 中合并数组

作者

在 TypeScript 中合并数组

How to merge Arrays in TypeScript

使用扩展语法在 TypeScript 中合并数组，例如
const arr3 = [...arr1, ...arr2]. 展开语法会将数组的值解包到一个新数组中。最终数组的类型将反映所提供数组中值的类型。

索引.ts
const arr1 = ['a', 'b'];
const arr2 = ['c', 'd'];

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

我们使用
扩展语法 (…)
将 2 个数组的元素解包到第三个数组中。

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

索引.ts
const arr1 = ['a', 'b'];
const arr2 = [1, 2];

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

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

我们使用扩展语法 (…) 将字符串和数字数组解包到第三个数组中。

第三个数组的类型是一个
联合
，表示一个字符串和数字的数组。

使用展开语法时，解包数组的顺序很重要。

索引.ts
const arr1 = ['a', 'b'];
const arr2 = ['c', 'd'];

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

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

可以根据需要对尽可能多的阵列重复此过程。

索引.ts
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);

您可能还会看到
Array.concat
方法用于在 TypeScript 中合并数组。

索引.ts
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方法还合并两个或多个数组。该方法将一个或多个数组作为参数，并将它们合并到调用它的数组中。

但是，您应该坚持使用扩展语法 (…)，因为concatTypeScript 中方法的输入并不那么直观。

索引.ts
const arr1 = ['a', 'b'];
const arr2 = [1, 2];

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

上面的示例导致类型检查器抛出错误，因为我们concat()在字符串数组上调用了该方法并向它传递了一个数字数组。

打字期望您只将与参数相同类型的数组传递给 concat 方法。

使用扩展语法 (…) 时情况并非如此，它更加灵活。

–

发表评论