TypeScript 数组类型-低调大师

TypeScript 数组类型

2021-03-22 495

和 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);  /／表示数组的大小为４

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

编译成 JavaScript 代码：

var numArr = new Array(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]);

输出：

将数组传递给函数

我们可以将数组作为参数传递给函数。

示例：

例如定义一个数组 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]);
}

输出：

郭靖
黄蓉
杨过
小龙女

总结

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

动手练习

声明一个字符串类型的数组，这个数组中有5个元素，分别是“苹果”、“西瓜”、”香蕉“、“樱桃”、”梨子“。
通过索引获取上一题中的第三个元素的值？
删除上面数组中的最后一个元素？
下面是一个三维数组，如何通过索引来获取值为8的元素？

let moreArr = [[[1, 2,], 3], [[4, 5, 6]], [7, [8, 9]]];

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

微信关注我们

原文链接：https://my.oschina.net/u/4072026/blog/4993709

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

分布式监控系统 WGCLOUD v3.3.1 发布，新增硬盘 smart 健康检测

WGCLOUD，server端基于springboot开发，agent端使用go编写。支持高并发高性能，核心模块包括：主机监控，ES集群管理，CPU监控，CPU温度监控，内存监控，数据监控，docker监控，网络流量监控，服务接口心跳检测，应用进程管理，磁盘IO监控，系统负载监控，端口监控，大屏可视化，日志文件监控，硬盘smart健康检测，监控告警信息（默认邮件，支持钉钉微信集成）推送。另外我们计划在下个版本集成堡垒机能力，目前处于计划调研中。 WGCLOUD-v3.3.1更新说明，2021-03-23： 1.新增，硬盘smart健康检测能力，需要在监控主机安装smartmontools工具 2.新增，可配置不需要告警的主机集合，在/server/config/application.yml配置选项blockIps 3.新增，改造【主机列表】，增加接收、发送KB/秒指标、主机画像 4.新增，端口监控机制优化，有些主机localhost未开启，所以增加配置选项，使用telnet ip 端口或telnet localhost 端口检测 5.新增，主机下线判定原来10分钟，提升为5分钟，更...

2021-03-23

499

前言 JavaScript中的变量是松散类型的，没有规则定义它必须包含什么数据类型，它的值和数据类型在执行期间是可以改变的。这样的设计规则很强大，但是也会引发不少的问题，比如我们本文即将要讨论的作用域与闭包，欢迎各位感兴趣的开发者阅读本文。原理解析理解作用域与闭包之前，我们需要先来深入解析下变量。变量的原始值与引用值变量可以存储两种不同类型的数据：原始值与引用值用基础包装类型创建的值就是原始值用引用类型创建的值就是引用值我们来看下基础包装类型与引用类型都有什么：基础包装类型：Number、String、Boolean、Undefined、Null、Symbol、BigInt 引用类型：Array ，Function， Date， RegExp 等在把一个值赋给变量时，JavaScript引擎必须确定这个值是原始值还是引用值：保存原始值的变量是按值访问的，它保存在栈内存里。保存引用值的变量是按引用访问的，它保存在堆内存里。引用值就是保存在内存中的对象，JavaScript不允许直接访问内存位置，因此不能直接操作对象所在的内存空间。在操作...

2021-03-22

589

资源下载

更多资源

Mario

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长，特征是大鼻子、头戴帽子、身穿背带裤，还留着胡子。与他的双胞胎兄弟路易基一起，长年担任任天堂的招牌角色。

腾讯云软件源

为解决软件依赖安装时官方源访问速度慢的问题，腾讯云为一些软件搭建了缓存服务。您可以通过使用腾讯云软件源站来提升依赖包的安装速度。为了方便用户自由搭建服务架构，目前腾讯云软件源站支持公网访问和内网访问。

Spring

Spring框架（Spring Framework）是由Rod Johnson于2002年提出的开源Java企业级应用框架，旨在通过使用JavaBean替代传统EJB实现方式降低企业级编程开发的复杂性。该框架基于简单性、可测试性和松耦合性设计理念，提供核心容器、应用上下文、数据访问集成等模块，支持整合Hibernate、Struts等第三方框架，其适用范围不仅限于服务器端开发，绝大多数Java应用均可从中受益。

Sublime Text

Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。