网站首页 > 基础教程 正文
数组对象是使用单独的变量名来存储一系列的值。TypeScript 的数组对象提供了强大的类型支持,确保数组操作的类型安全。
数组类型声明
两种写法等效:类型[] 或 Array<类型>。
let numbers: number[] = [1, 2, 3];
let strings: Array<string> = ["a", "b"];
类型推断:初始化时未指定类型,TypeScript 自动推断。
let arr = [1, 2, 3]; // 推断为 number[]
只读数组
- 使用 readonly 或 ReadonlyArray 防止修改。
const readOnlyArr: readonly number[] = [1, 2, 3];
// readOnlyArr.push(4); // 错误:push 方法不存在
5. 类型守卫与类型断言
- 处理混合类型数组时,使用类型守卫缩小类型。
类型守卫(Type Guards)是 TypeScript 中的一种机制,用于在运行时检查变量的类型,并根据检查结果缩小类型范围。它允许开发者在处理联合类型(Union Types)或不确定类型(如 unknown 或 any)时,动态地推断出更具体的类型,从而提升代码的安全性和可读性。
const mixed: (string | number)[] = ["a", 2];
mixed.forEach(item => {
if (typeof item === "string") {
console.log(item.toUpperCase());
} else {
console.log(item.toFixed(2));
}
});
Array 对象
我们也可以使用 Array 对象创建数组。
Array 对象的构造函数接受以下两种值:表示数组大小的数值和初始化的数组列表,元素使用逗号分隔值。
var arr_names:number[] = new Array(4)
var sites:string[] = new Array("A","B","C","D")
数组解构
把数组元素赋值给变量,如下所示:
var arr:number[] = [12,13]
var[x,y] = arr // 将数组的两个元素赋值给变量 x 和 y
console.log(x)
console.log(y)
数组迭代
我们可以使用 for 语句来循环输出数组的各个元素:
var j:any;
var nums:number[] = [1001,1002,1003,1004]
for(j in nums) {
console.log(nums[j])
}
多维数组
一个数组的元素可以是另外一个数组,这样就构成了多维数组(Multi-dimensional Array)。
最简单的多维数组是二维数组,定义方式如下:
var arr_name:datatype[][]=[ [val1,val2,val3],[v1,v2,v3] ]
数组方法类型检查
- 方法如 push, map 受类型约束。
numbers.push(4); // 正确
numbers.push("test"); // 错误:类型不匹配
数组对象方法
concat():连接两个或更多的数组,并返回结果。 |
every():检测数值元素的每个元素是否都符合条件。 |
filter():检测数值元素,并返回符合条件所有元素的数组。 |
forEach():数组每个元素都执行一次回调函数。 |
indexOf():搜索数组中的元素,并返回它所在的位置。如果搜索不到,返回值 -1,代表没有此项。 |
join():把数组的所有元素放入一个字符串。 |
lastIndexOf():返回一个指定的字符串值最后出现的位置,在一个字符串中的指定位置从后向前搜索。 |
map():通过指定函数处理数组的每个元素,并返回处理后的数组。 |
pop():删除数组的最后一个元素并返回删除的元素。 |
push():向数组的末尾添加一个或更多元素,并返回新的长度。 |
reduce():将数组元素计算为一个值(从左到右)。 |
reduceRight():将数组元素计算为一个值(从右到左)。 |
reverse():反转数组的元素顺序。 |
shift():删除并返回数组的第一个元素。 |
slice():选取数组的的一部分,并返回一个新数组。 |
some():检测数组元素中是否有元素符合指定条件。 |
sort():对数组的元素进行排序。 |
splice():从数组中添加或删除元素。 |
toString():把数组转换为字符串,并返回结果。 |
unshift():向数组的开头添加一个或更多元素,并返回新的长度。 |
猜你喜欢
- 2025-05-08 最全的 Vue 面试题+详解答案(vue的一些面试题)
- 2025-05-08 Array类型简介(array常用的几种方法)
- 2025-05-08 2021最全VUE面试题,奥利给(vue 面试题 2021)
- 2025-05-08 Vue3基础难点总结(vue3技巧)
- 2025-05-08 使用Axios 拦截器解决「 前端并发冲突 」 问题
- 2025-05-08 浅析vue封装自定义插件(vue自己封装组件)
- 2025-05-08 perl基础——数组(perl数组初始化)
- 2025-05-08 如何在控制台打印出一个表格?cli-table3了解一下
- 2025-05-08 ES6史上最全数JS数组方法合集-02-数组操作
- 2025-05-08 3个 Vue $set 的应用场景(vue中的set方法)
- 最近发表
- 标签列表
-
- jsp (69)
- pythonlist (60)
- gitpush (78)
- gitreset (66)
- python字典 (67)
- dockercp (63)
- gitclone命令 (63)
- dockersave (62)
- linux命令大全 (65)
- pythonif (68)
- pythonifelse (59)
- deletesql (62)
- c++模板 (62)
- c#event (59)
- linuxgzip (68)
- 字符串连接 (73)
- nginx配置文件详解 (61)
- html标签 (69)
- c++初始化列表 (64)
- mysqlinnodbmyisam区别 (63)
- arraylistadd (66)
- console.table (62)
- mysqldatesub函数 (63)
- window10java环境变量设置 (66)
- c++虚函数和纯虚函数的区别 (66)