TypeScript 数组类型

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/

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,386评论 6 479
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,939评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,851评论 0 341
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,953评论 1 278
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,971评论 5 369
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,784评论 1 283
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,126评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,765评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,148评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,744评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,858评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,479评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,080评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,053评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,278评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,245评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,590评论 2 343

推荐阅读更多精彩内容