关于typescript:TypeScript-数组类型

33次阅读

共计 5918 个字符，预计需要花费 15 分钟才能阅读完成。

和 JavaScript 语言一样，TypeScript 中也有数组类型。

数组指的是有序的元素序列，例如 [1, 2, 3] 这样的就是一个数组，1、2、3 就是数组中的元素，中括号 [] 内能够由任意数量的元素。然而每个元素之间的类型必须雷同，比方数组中的是数字类型就必须全副元素都是数组类型，像 [1, 2, '3'] 这样忽然夹杂一个字符串类型是不被容许的。

数组是动态的，这意味着数组一旦初始化就无奈调整大小。

申明和初始化数组

在 TypeScript 中申明和初始化数组也很简略，和申明数字类型和字符串类型的变量也差不多，只不过在指定数组类型时要在类型前面加上一个中括号 []。

语法格局：

let array_name[:datatype] = [val1,val2…valn]

等号右边是申明数组，指定数组的类型，等号左边是给数组初始化赋值。如果申明数组时，没有给数组指定数据类型，则这个数组为 any 类型，在初始化时会依据数组中第一个元素的类型来推断数组的类型。

示例：

例如创立一个字符串类型的数组，数组中是《神雕侠侣》中的人物名称：

let character:string[] = ["杨过", "小龙女", "郭襄", "郭靖", "黄蓉", "李莫愁"];
console.log(character);

须要留神的是，当咱们指定了一个数组的类型，那么这个数组中的元素也必须是这个类型，否则会导致报错。上述代码中，咱们指定了数组为字符串类型，数组元素只能是字符串类型的。

示例：

例如在一个字符串类型数组中，如何有一个元素是数字类型的：

let character:string[] = ["杨过", "小龙女", "郭襄", "郭靖", "黄蓉", "李莫愁", 1];
console.log(character);

执行代码，提醒咱们编译失败，输入如下所示：

Type 'number' is not assignable to type 'string'.

除了应用中括号 [] 的办法来申明数组，咱们还能够应用数组泛型来定义数组。

语法如下所示：

let array_name:Array<datatype>;
示例：

例如申明一个数字类型的数组：

let numArr:Array<number> = [1, 2, 3, 4, 5];  
console.log(numArr);

Array 对象

咱们能够通过 Array 对象来创立数组。Array 对象的构造函数承受以下两种值：

  • 一个数值，示意数组的大小。
  • 初始化的数组列表，元素应用逗号分隔。
示例：

例如咱们定义一个大小为 4 的数组，能够应用 for 循环向数组中赋值：

let numArr:number[] = new Array(4);  //示意数组的大小为4

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

编译成 JavaScript 代码：

var numArr = new Array(4);//示意数组的大小为4
for (var i = 0; i < numArr.length; i++) {numArr[i] = i;
}
console.log(numArr);

输入：

[0, 1, 2, 3]

或者能够间接在 Array 对象的构造函数中初始化数组列表：

let myName:string[] = new Array("xkd","summer","Iven") 
console.log(myName);

编译成 JavaScript 代码：

var myName = new Array("xkd", "summer", "Iven");
console.log(myName);

输入：

['xkd', 'summer', 'Iven']

拜访数组元素

咱们来看上面这个数组：

["杨过", "小龙女", "郭襄", "郭靖", "黄蓉", "李莫愁"]

在这个数组中，第一个元素“杨过”的索引值为 0，第二个元素“小龙女”的索引值为 1，第三个元素“郭襄”的索引值为 2，前面的顺次类推。

那么晓得数组中元素的索引值有什么作用呢，咱们能够通过对应的索引来拜访数组元素。

示例：

例如咱们想要获取数组中的第一个元素的值，就能够通过索引 0 来实现：

let character:string[] = ["杨过", "小龙女", "郭襄", "郭靖", "黄蓉", "李莫愁"];
// 第一个元素的索引为 0
console.log(character[0]);

编译上述代码，失去的 JavaScript 代码如下所示：

var character = ["杨过", "小龙女", "郭襄", "郭靖", "黄蓉", "李莫愁"];
// 第一个元素的索引为 0
console.log(character[0]);

输入后果为：

 杨过

那如果咱们想要拜访数组中第二个、第三个、第四个 … 元素呢，只须要将中括号 [] 外面的索引值变为与元素对应的索引即可，如下所示：

console.log(character[1]);   // 小龙女
console.log(character[2]);   // 郭襄
console.log(character[3]);   // 郭靖
console.log(character[4]);   // 黄蓉
console.log(character[5]);   // 李莫愁

数组 character 中最初一个元素的索引为 5，那假如咱们拜访索引 6 对应的元素会失去什么呢，能够试试看：

console.log(character[6]);   // undefined

很显著，输入后果为 undefined，示意没有与这个索引值对应的元素。

那如果咱们心愿索引 6 也能对应一个元素值呢，要怎么做？咱们能够通过索引给元素赋值。

示例：

数组中没有与索引为 6 对应的元素，那咱们能够给数组中的索引为 6 的元素赋值为”一灯“：

let character:string[] = ["杨过", "小龙女", "郭襄", "郭靖", "黄蓉", "李莫愁"];
character[6] = "一灯";
console.log(character);

输入：

['杨过', '小龙女', '郭襄', '郭靖', '黄蓉', '李莫愁', '一灯']

这样数组 character 中的元素就由 6 个变为了 7 个，新增了一个元素”一灯“。

数组元素的批改

通过数组的索引，咱们除了能够拜访数组中的元素，还能够批改数组中元素的值。

示例：

例如将数组中第一个元素的值批改为”金轮法王“：

let character:string[] = ["杨过", "小龙女", "郭襄", "郭靖", "黄蓉", "李莫愁"];
character[0] = "金轮法王";
console.log(character);

编译成 JavaScript 代码：

var character = ["杨过", "小龙女", "郭襄", "郭靖", "黄蓉", "李莫愁"];
character[0] = "金轮法王";
console.log(character);

输入：

['金轮法王', '小龙女', '郭襄', '郭靖', '黄蓉', '李莫愁']

能够看到，输入后果中将数组外面第一个元素从本来的”杨过“，批改为了”金轮法王“。

数组元素的增加

咱们能够间接应用 push() 办法向数组增加元素，通过此办法能够一次向数组增加任意数量的元素。

语法：

array.push(element1, ..., elementN);

push() 办法能够将指定的元素增加到数组的最初，并返回新数组的长度。其中参数就示意要增加到数组开端的元素。

示例：

向数组中增加三个元素：

let numArr:number[] = [1, 2, 3];
console.log(numArr);  // 原数组
numArr.push(4, 5, 6);
console.log(numArr);  // 新数组

编译成 JavaScript 代码：

var numArr = [1, 2, 3];
console.log(numArr);  // 原数组
numArr.push(4, 5, 6);
console.log(numArr);  // 新数组

输入：

[1, 2, 3]
[1, 2, 3, 4, 5, 6]

数组元素的删除

删除数组中的元素能够应用 pop()、shift()、splice() 等办法。

  • pop()：用于删除并返回数组的最初一个元素。
  • shift()：用于删除数组的第一个元素，并返回第一个元素的值。
  • splice()：从数组中删除元素，而后返回被删除的元素。
示例：
let numArr:number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
console.log(numArr);
// 删除数组中的最初一个元素
numArr.pop();
console.log(numArr);

// 删除数组的第一个元素
numArr.shift();
console.log(numArr);

// 删除数组索引为 2，3 的元素
numArr.splice(2, 2);
console.log(numArr);

编译成 JavaScript 代码：

var numArr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
console.log(numArr);
// 删除数组中的最初一个元素
numArr.pop();
console.log(numArr);
// 删除数组的第一个元素
numArr.shift();
console.log(numArr);
// 删除数组索引为 2，3 的元素
numArr.splice(2, 2);
console.log(numArr);

输入：

[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
[1, 2, 3, 4, 5,6, 7, 8, 9]
[2, 3, 4, 5, 6, 7, 8, 9]
[2, 3, 6, 7, 8, 9]

数组解构

TypeScript 反对数组解构，解构是一种表达式，将数组或者对象中的数据赋予另一个变量。

示例：

咱们将数组 numArr 解构：

let numArr:number[] = [1, 2, 3];

var[a, b, c] = numArr; 
console.log(a);
console.log(b);
console.log(c);

编译成 JavaScript 代码：

var numArr = [1, 2, 3];
var a = numArr[0], b = numArr[1], c = numArr[2];
console.log(a);
console.log(b);
console.log(c);

输入：

1
2
3

多维数组

TypeScript 反对多维数组。一个数组的元素能够是另外一个数组，这样就形成了多维数组。多维数组的最简略模式是二维数组。

语法：

var arr_name:datatype[][]=[[val1,val2,val3],[v1,v2,v3] ]
示例：

申明一个二维数组：

let mulArr:number[][] = [[1, 2, 3], [100, 200, 300]];

console.log(mulArr);

如果要拜访这个二维数组中的元素，同样能够通过索引来拜访，然而要留神二维数组有两个索引值，一个是外层数组的索引，一个是内层数组的索引：

let mulArr:number[][] = [[1, 2, 3], [100, 200, 300]];

console.log(mulArr[0][0]);
console.log(mulArr[0][1]);
console.log(mulArr[0][2]);
console.log(mulArr[1][0]);
console.log(mulArr[1][1]);
console.log(mulArr[1][2]);

编译成 JavaScript 代码：

var mulArr = [[1, 2, 3], [100, 200, 300]];
console.log(mulArr[0][0]);
console.log(mulArr[0][1]);
console.log(mulArr[0][2]);
console.log(mulArr[1][0]);
console.log(mulArr[1][1]);
console.log(mulArr[1][2]);

输入：

1
2
3
100
200
300

将数组传递给函数

咱们能够将数组作为参数传递给函数。

示例：

例如定义一个数组 myNames，而后将其传递给函数 show()：

let myNames:string[] = new Array("郭靖","黄蓉","杨过","小龙女");

function show(arr_names:string[]) {for(var i = 0; i < arr_names.length; i++) {console.log(myNames[i]) 
   }  
}  
show(myNames);

编译成 JavaScript 代码：

var myNames = new Array("郭靖", "黄蓉", "杨过", "小龙女");
function show(arr_names) {for (var i = 0; i < arr_names.length; i++) {console.log(myNames[i]);
    }
}
show(myNames);

输入后果：

 郭靖
黄蓉
杨过
小龙女

要留神一下，数组的类型要与函数中的参数类型一一对应。

从函数返回数组

数组能够作为函数的返回值。

示例：

上面咱们间接通过 Array 对象来创立数组，来作为函数 show 的返回值，也要留神一下数组的类型与返回值的类型要对应：

function show():string[] {return new Array("郭靖", "黄蓉", "杨过", "小龙女") 
 } 
  
 let myNames:string[] = show() 
 for(var i in myNames) {console.log(myNames[i]) 
 }

编译成 JavaScript 代码：

function show() {return new Array("郭靖", "黄蓉", "杨过", "小龙女");
}
var myNames = show();
for (var i in myNames) {console.log(myNames[i]);
}

输入：

 郭靖
黄蓉
杨过
小龙女

总结

本节对于数组的知识点还是挺多的，咱们来梳理一下。首先弄清楚什么是数组？咱们能够了解为数组就是一个由任意数量，雷同类型的值组成的一个变量。而后学习怎么申明数组、通过索引拜访数组、批改数组中的元素、删除数组中的元素、什么是多维数组等等。你学到这里有没有将上述讲到的知识点都弄清呢？咱们能够做几个小练习来验证一下。

入手练习

  1. 申明一个字符串类型的数组，这个数组中有 5 个元素，别离是“苹果”、“西瓜”、”香蕉“、“樱桃”、”梨子“。
  2. 通过索引获取上一题中的第三个元素的值？
  3. 删除下面数组中的最初一个元素？
  4. 上面是一个三维数组，如何通过索引来获取值为 8 的元素？
let moreArr = [[[1, 2,], 3], [[4, 5, 6]], [7, [8, 9]]];

链接：https://www.9xkd.com/

正文完
typescript
发表至： typescript
2021-09-06
 0
关于typescript:TypeScript-新特性介绍
关于typescript:超详细的-TypeScript-入门总结
关于typescript:TypeScript-reflectmetadata-结合方法装饰器实现的一个自定义语法检查的例子
关于typescript:TypeScript-的-generic-函数