如何在 TypeScript 中合并数组

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

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

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

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

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

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

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

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

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

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

使用扩展语法时,解析数组的顺序很重要。

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);

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

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<string>'.ts(2769)
const arr3 = arr1.concat(arr2);

如何在 TypeScript 中合并数组

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

类型限定 期望我们只将与参数相同类型的数组传递给 concat 方法。

使用扩展语法 (...) 时情况并非如此,后者更加灵活。

免责声明:
1.本站所有内容由本站原创、网络转载、消息撰写、网友投稿等几部分组成。
2.本站原创文字内容若未经特别声明,则遵循协议CC3.0共享协议,转载请务必注明原文链接。
3.本站部分来源于网络转载的文章信息是出于传递更多信息之目的,不意味着赞同其观点。
4.本站所有源码与软件均为原作者提供,仅供学习和研究使用。
5.如您对本网站的相关版权有任何异议,或者认为侵犯了您的合法权益,请及时通知我们处理。
火焰兔 » 如何在 TypeScript 中合并数组