如何在 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);
上面的示例导致类型检查器抛出错误,因为我们在字符串数组上调用了 concat()
方法并将其传递给了一个数字数组。
类型限定
期望我们只将与参数相同类型的数组传递给 concat 方法。
使用扩展语法 (...)
时情况并非如此,后者更加灵活。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布,任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站。本站所有源码与软件均为原作者提供,仅供学习和研究使用。如您对本站的相关版权有任何异议,或者认为侵犯了您的合法权益,请及时通知我们处理。