TypeScript 数组怎么用?有哪些常见操作和方法?

文章导读
Previous Quiz Next 使用变量存储值存在以下限制 −
📋 目录
  1. 数组的特性
  2. 声明和初始化数组
  3. 访问数组元素
  4. Array 对象
  5. Array 方法
  6. Array 解构
  7. 使用 forin 循环遍历数组
  8. TypeScript 中的数组
A A

TypeScript - 数组



Previous
Quiz
Next

使用变量存储值存在以下限制 −

  • 变量本质上是标量。换句话说,变量声明一次只能包含单个值。这意味着要在程序中存储 n 个值,需要 n 个变量声明。因此,当需要存储大量值集合时,使用变量不可行。

  • 程序中的变量以随机顺序分配内存,从而难以按照声明顺序检索/读取值。

TypeScript 引入了数组的概念来解决这些问题。数组是同质的值集合。简而言之,数组是相同数据类型的值的集合。它是用户定义的类型。

数组的特性

以下是数组的特性列表 −

  • 数组声明会分配连续的内存块。

  • 数组是静态的。这意味着一旦初始化,数组就无法调整大小。

  • 每个内存块代表一个数组元素。

  • 数组元素由称为元素下标/索引的唯一整数来标识。

  • 像变量一样,数组在使用前也必须声明。使用 var 关键字声明数组。

  • 数组初始化指的是填充数组元素。

  • 数组元素的值可以更新或修改,但不能删除。

声明和初始化数组

在 TypeScript 中声明并初始化数组使用以下语法 −

语法

var array_name[:datatype];        //declaration 
array_name = [val1,val2,valn..]   //initialization

没有数据类型的数组声明被视为 any 类型。此类数组的类型会在初始化时从其第一个元素的データ类型推断得出。

例如,像 var numlist:number[] = [2,4,6,8] 这样的声明将创建如下所示的数组 −

Declaring and Initializing Arrays

数组指针默认指向第一个元素。

数组可以在单个语句中声明并初始化。语法如下 −

var array_name[:data type] = [val1,val2valn]

注意 − [] 一对被称为数组的维度。

访问数组元素

数组名称后跟下标用于引用数组元素。其语法如下 −

array_name[subscript] = value

示例:简单数组

var alphas:string[]; 
alphas = ["1","2","3","4"] 
console.log(alphas[0]); 
console.log(alphas[1]);

编译后,将生成以下 JavaScript 代码 −

var alphas;
alphas = ["1", "2", "3", "4"];
console.log(alphas[0]);
console.log(alphas[1]);

上述代码的输出如下 −

1 
2 

示例:单语句声明和初始化

var nums:number[] = [1,2,3,3] 
console.log(nums[0]); 
console.log(nums[1]); 
console.log(nums[2]); 
console.log(nums[3]);

编译后,将生成以下 JavaScript 代码 −

var nums = [1, 2, 3, 3];
console.log(nums[0]);
console.log(nums[1]);
console.log(nums[2]);
console.log(nums[3]);

其输出如下 −

1 
2 
3 
3 

Array 对象

也可以使用 Array 对象来创建数组。可以向 Array 构造函数传递参数。

  • 表示数组大小的数值,或者

  • 逗号分隔的值列表。

下面的示例展示了如何使用这种方法创建数组。

示例

var arr_names:number[] = new Array(4)  

for(var i = 0;i<arr_names.length;i++) { 
   arr_names[i] = i * 2 
   console.log(arr_names[i]) 
}

编译后,将生成以下 JavaScript 代码。

var arr_names = new Array(4);

for (var i = 0; i < arr_names.length; i++) {
   arr_names[i] = i * 2;
   console.log(arr_names[i]);
}

其输出如下 −

0 
2 
4 
6 

示例:Array 构造函数接受逗号分隔的值

var names:string[] = new Array("Mary","Tom","Jack","Jill") 

for(var i = 0;i<names.length;i++) { 
   console.log(names[i]) 
}

编译后,将生成以下 JavaScript 代码 −

var names = new Array("Mary", "Tom", "Jack", "Jill");
for (var i = 0; i < names.length; i++) {
   console.log(names[i]);
}

其输出如下 −

Mary 
Tom 
Jack 
Jill

Array 方法

下面列出了 Array 对象的方法及其描述。

序号 方法及描述
1. concat()

返回一个新数组,该数组由当前数组与其他数组和/或值连接而成。

2. every()

如果当前数组中的每个元素都满足提供的测试函数,则返回 true

3. filter()

创建一个新数组,其中包含当前数组中所有满足提供的过滤函数返回 true 的元素。

4. forEach()

为数组中的每个元素调用一个函数。

5. indexOf()

返回数组中等于指定值的元素的第一个(最小)索引,如果未找到则返回 -1。

6. join()

将数组的所有元素连接成一个字符串。

7. lastIndexOf()

返回数组中等于指定值的元素的最后一个(最大)索引,如果未找到则返回 -1。

8. map()

创建一个新数组,其中包含对当前数组中每个元素调用提供的函数的结果。

9. pop()

从数组中移除最后一个元素并返回该元素。

10. push()

向数组末尾添加一个或多个元素,并返回数组的新长度。

11. reduce()

从左到右同时对数组的两个值应用一个函数,以将其归约为单个值。

12. reduceRight()

从右到左同时对数组的两个值应用一个函数,以将其归约为单个值。

13. reverse()

反转数组元素的顺序——第一个变为最后一个,最后一个变为第一个。

14. shift()

从数组中移除第一个元素并返回该元素。

15. slice()

提取数组的一个部分并返回一个新数组。

16. some()

如果当前数组中至少有一个元素满足提供的测试函数,则返回 true

17. sort()

对数组的元素进行排序。

18. splice()

向数组添加和/或移除元素。

19. toString()

返回表示数组及其元素的字符串。

20. unshift()

向数组前端添加一个或多个元素,并返回数组的新长度。

Array 解构

指的是分解实体的结构。TypeScript 在数组上下文中支持解构。

示例

var arr:number[] = [12,13] 
var[x,y] = arr 
console.log(x) 
console.log(y)

编译后,将生成以下 JavaScript 代码。

var arr = [12, 13];
var x = arr[0], y = arr[1];
console.log(x);
console.log(y);

其输出如下 −

12 
13

使用 forin 循环遍历数组

可以使用 forin 循环来遍历数组。

var j:any; 
var nums:number[] = [1001,1002,1003,1004] 

for(j in nums) { 
   console.log(nums[j]) 
} 

该循环执行基于索引的数组遍历。

编译后,将生成以下 JavaScript 代码。

var j;
var nums = [1001, 1002, 1003, 1004];

for (j in nums) {
   console.log(nums[j]);
}

上述代码的输出如下所示 −

1001 
1002 
1003 
1004

TypeScript 中的数组

TypeScript 支持以下数组概念 −

序号 概念与描述
1. 多维数组

TypeScript 支持多维数组。多维数组的最简单形式是二维数组。

2. 将数组传递给函数

可以通过指定数组名称而不带索引来向函数传递数组的指针。

3. 从函数返回数组

允许函数返回一个数组