常见类型-2：数组和元组

常见类型-2：数组和元组

1.  创建资源

开始实验之前，您需要先创建实验相关资源。

1. 在实验室页面，单击创建资源。
   
2. （可选）在实验室页面左侧导航栏中，单击云产品资源列表，可查看本次实验资源相关信息（例如IP地址、子用户信息等）。
   

说明：资源创建过程需要3～5分钟（视资源不同开通时间有所差异，ACK等资源开通时间较长）。完成实验资源的创建后，您可以在云产品资源列表查看已创建的资源信息，例如：子用户名称、子用户密码、AK ID、AK Secret、资源中的项目名称等。

实验环境一旦开始创建则进入计时阶段，建议学员先基本了解实验具体的步骤、目的，真正开始做实验时再进行创建。

资源创建成功，可在左侧的资源卡片中查看相关资源信息以及RAM子账号信息

2.  实验环境操作指南

在本系列实验中，有两种方法可以进行操作。一种是控制台方式，另一种是远程桌面的方式。接下来我们分别介绍这两种操作方式。

控制台方式

使用控制台方式操作实验，上手比较简单，对网络带宽的要求也不高。但是在编辑代码时，需要使用Vim工具进行文本编辑。对于初学者来说使用Vim工具需要熟悉其操作模式。

进入控制台环境

资源创建成功后，我们在右侧选择切换到Web Terminal。

切换到dev用户

本次实验的开发环境部署在dev用户的~/web目录中。因此我们执行这两条命令即可进入实验环境

su dev
cd ~/web

Vim工具的用法

vim是一个命令行下的文本编译器。使用vim编辑文件时。我们只需要通过快捷键，而不需要鼠标就可以对文本文件进行编辑。但是这种文本编辑器的用法和常见的图形界面编辑器使用习惯差别较大。接下来我们简单介绍vim的使用。

3.1 进入Vim

在命令行中输入vim即可进入操作界面，这时的Vim没有打开任何文件。

vim

3.2 Vim的三种模式

和普通编译器不同的是，Vim包含了三种操作模式。分别是命令模式，编辑模式，末行模式。接下来我们来简单介绍一下三种模式的用法。

3.3 命令模式

在刚进入界面的时候，vim默认状态为命令模式。这种模式下，无法编辑文件，键盘输入也不会在屏幕上有任何显示，这种情况往往会让使用者感到困惑。这时候我们可以输入大写的ZZ，即可退出Vim。

3.4 编辑模式

我们继续输入vim回到编辑器。在命令模式下我们按下小写的i。此时我们会发现下部的提示已经变成了插入。这表示vim已经进入了编辑模式。

在编辑模式下我们就可以像正常的编辑器一样编辑文件。此处我们输入hello world。

        在编辑完成之后，如果我们想退回命令模式，只需要按ECS键即可。按下该按钮之后我们会发现下部的插入提示消失了，这就表示vim回到了命令模式。

3.5 末行模式

回到命令模式之后，我们按下:键，这时下部的提示会变成:，这就表示vim进入了末行模式。在末行模式下，我们同样使用快捷命令操作vim，但是和命令模式不同的是，末行模式中输入的命令会显示的屏幕的最后一行。

接下来我们继续输入w demo.txt并按回车。会提示显示为如下内容。表示上面的内容已经保存到了demo.txt中。

最后我们按:q，该命令也可以退出vim。

4. 编辑index.js文件

4.1 创建新文件

当我们希望编辑特定文件时，我们可以输入vim 文件名。这时候在下部会看到"index.ts" [新]。表示vim自动创建了新文件。

vim index.ts

4.2 复制粘贴

在编辑模式下，vim同样可以使用ctrl+v进行粘贴。我们按i进入编辑模式之后，将下列内容粘贴到vim中。

//vim编辑模式和命令模式的常用命令:
//在编辑模式中：可以使用 上 下 左 右 按键移动光标
//在命令模式中：可以使用 h j k l 命令移动光标
//在编辑模式中：可以使用退格或者DEL键删除字符
//在命令模式中：可以使用 x 命令删除字符
//在命令模式中：可以使用 dd 命令删除整行文字（谨慎使用！）
//在命令模式中：可以使用 ggdG 命令删除全部文字（谨慎使用！）
//在命令模式中：可以使用 u 命令撤销操作
//在命令模式中：可以使用 ctrl + r 命令重做操作。

4.3 文件内容的查找

在命令模式下，除了按:命令之外，还可以使用/命令进入末行模式，通过/进入末行模式之后，输入相关的内容即可进行全文检索。我们在命令模式下输入/dd。

光标就会移动到相关字符上。

4.3 文件的保存和放弃

当我们编辑完成之后，可以在命令模式中通过ZZ命令直接保存并退出编辑器，也可以通过在末行模式中通过:w单独保存文件。如果我们希望通过末行模式保存并退出，可以使用:wq。

但是需要注意的时，如果文件在修改之后没有保存，是无法通过:q退出的。如果编辑过的文件是只读属性也无法通过ZZ退出。这时我们就可以使用:q!命令放弃所有的编辑内容，强制退出vim。

远程桌面方式

使用远程桌面方式进行实验是，可以使用VS Code编译器进行代码的编写和操作，相对控制台方式更加的直观。但是这种方式对网络带宽的要求比较高。

进入网页环境

1.1 进入远程桌面

资源创建成功后，我们在右侧选择切换到远程桌面。

1.2 启动浏览器

在远程桌面页面中，点击Chromium网页浏览器。

登录RAM用户

2.1 打开网页

浏览器启动后会默认打开阿里云的RAM用户登录页。在登录页面中我们点击下一步按钮。

2.2 获取密码

接下来我们需要输入RAM用户的密码。密码显示在实验控制台左侧，我们点击子用户密码右侧的复制按钮。

复制完成后，我们在用户密码框中按Ctrl + V 复制密码，然后点击登录按钮

进入ECS的远程连接。

3.1 进入ECS控制台

登录成功后，页面跳转到控制台，我们在控制台的搜索框中输入ECS，然后点击云服务器ECS进入云服务器控制台。

3.2 进入远程连接界面

在ECS控制台中，我们找到实验创建的ECS，点击右侧的远程连接按钮。

3.3 选择VNC远程连接

在远程连接中选择通过VNC远程连接中的立即登录如果没有显示该选项，则可点击展开其他登录方式按钮。

登录VNC远程连接

4.1 初始化VNC密码

初次登录VNC远程连接时需要先设置VNC密码。点击重置VNC密码按钮。

输入两次新的VNC密码，并点击确认。

4.2 登录VNC

VNC密码设置成功后，输入密码并点击确认。

4.4 进入图形界面

VNC登录成功后会看到实验ECS的登录界面，在登陆界面中我们点击DEV用户图标

4.5 在图形界面中登录

在密码框中输入默认登录密码Dev12345。即可进入图形实验环境

使用VS Code编辑器

登录图形实验环境之后，接下来我们来启动VS Code 编辑器。

5.1 进入应用程序列表

首先我们点击界面的下方的显示应用程序按钮。

5.2 启动VS Code

在应用程序列表中选择最后一页

然后点击VS Code应用图标

5.3 选择文件

在VS Code 编译器中，左边区域为文件列表，可以选择要编辑的文件

5.4 编辑文件

在VS Code中，右上区域为文件编辑区，可以进行文件内容编辑

5.5 操作终端

在右下区域的终端选项卡，为控制台区域，可以进行命令输入执行

3.  数组类型

在前面个实验中。我们介绍了TypeScript的基本用法。在本实验中我们将继续为大家介绍TypeScript中的常用数据类型。

TypeScript的默认数据结构中除了包含了numberstringboolean 等简单类型之外，数组也是一个非常常用的数据结构，本小节我们将为大家介绍数组元组以及相关的遍历函数。

1. 数组的定义和访问
   

TypeScript中的数组类型用来表示一类相同类型元素的集合，也就是说数组的元素必须是同一种类型，数组的定义使用数组中的元素类型[]语法。数组元素的初始化使用[元素1，元素2...]的方法。注意数组中的下标从0开始计算。

var arr:number[]
arr = [1, 100, 20, 50];
console.log(arr)
console.log(arr[0])//
arr[1] = 200
console.log(arr[1])

在终端选项卡输入如下命令编译并查看。

tsc
node index.js

2. 数组长度
   

在TypeScript中，数组和字符串都是比较常用得数据类型，因此两者也有很多相似得内置属性和内置方法。其中length属性就是最有代表性得一个。在数组中它用来表示数字中元素得个数。我们修改index.ts文件为如下内容

console.log([1, 2, 3].length)

在终端选项卡输入如下命令编译并查看。

tsc
node index.js

3. 数组访问得限制
   

在读取或者修改数组中的元素时，可以使用数组名[下标(元素在数组中的的位置)]语法访问。需要注意的是，如果我们指定的下表超过了数组的长度，那么读取元素的返回值将是undefined。也就是会破话TypeScript的空值检测逻辑。我们修改index.ts文件为如下内容

var arr:string[] = ["元素1"]
var s:string = ""
s = arr[1];
console.log(s)

4.  追加和移除元素

在之前的字符串实验的时候，我们了解到TypeScript的字符串采用的是不可变策略也就是创建之后内容不可修改，但是在数组中采用的可变测率，到当数组创建之后，我们可以通过[]关键字对内容进行修改。除了修改数组的内容之外，我们还可以修改数组的元素个数。

而修改元素又可以分为顺序修改和任意位置修改，本小节我们先来学习顺序修改元素个数的方法。

1. 数组添加元素
   

所谓顺序修改就是数组元素的添加和移除都是从，数组的头部或者尾部进行的。当我们需要向数组尾部追加元素时，我们可以使用push方法。当我们需要向数组头部追加元素时，我们可以使用unshift方法。

通过这两个函数向数组中添加元素时，可一次添加多个元素。函数返回值为添加成功的元素个数。我们修改index.ts文件为如下内容。

var arr:string[] = ['苹果', '香蕉', '橙子'];
var n:number = arr.push('樱桃', '椰子');
console.log(n);
console.log(arr);
var n:number = arr.unshift('草莓', '葡萄');
console.log(n);
console.log(arr);

在终端选项卡输入如下命令编译并查看。

tsc
node index.js

2. 数组移除元素
   

当我们希望从尾部移除元素时，我们可以使用pop方法。从头部移除元素时，可以使用shift方法。这两个函数的返回值为移除的元素。

需要注意的是，当数组的长度为0的时候，在使用pop或者shift函数的时候，由于没有元素可以被移除，此时函数只能返回undefined。因此pop和shift函数的返回值类型需要设置为元素类型和undefined的联合类型。我们修改index.ts文件为如下内容。

var arr:string[] = ['头元素', '尾元素'];
var item:string | undefined = arr.pop();
console.log(item);
console.log(arr);
var item:string | undefined = arr.shift();
console.log(item);
console.log(arr);
var item:string | undefined = arr.pop();
console.log(item);

5.  元组类型

1. 元组类型
   

元组类型是指包含了多个类型的集合类型，他的写法和用法类似数组，也是通过[]关键字定义和访问内部元素。但是和数组不同的时，元组中的元素可以是不同的类型。由于元素的类型不同，因此在定义元组时，我们需要指定每一个元素的具体类型；同时在初始化和使用元组时，元组中的元素的个数和类型必须和定义时的一致。我们修改index.ts文件为如下内容

var tuple:[number, string, boolean];
tuple = [1, "name", true];
console.log(tuple)
console.log(tuple[0])
tuple[1] = "age"
console.log(tuple[1])

在终端选项卡输入如下命令编译并查看。

tsc
node index.js
cat index.js

2. 类型检查的局限性
   

再上一个步骤的最后，我们使用cat命令查看元组编译后的结果，可以看到元组在编译之后会转换成JavaScript中的数组。因此TypeScript种的元组的本质就是包含了编译器类型检查的数组。

但是编译器类型检查有一定局限性。例如元组下标是函数的参数时，编译器就无法确定元素的类型。当编译器无法确认类型的时候，会将元组元素定义为元组中所有元素类型的联合类型。

同时我们也可以将元组中的元素设置成联合类型中的任意一种类型的。我们修改index.ts文件为如下内容

function setVal(tuple:[number, string, boolean], n:number)
{
    var s: string | number | boolean = tuple[n];
    tuple[n] = "" + n
}
var tuple:[number, string, boolean];
tuple = [1, "name", true];
setVal(tuple, 0)
console.log(tuple)
setVal(tuple, 2)
console.log(tuple)

3. 元组的数据的修改
   

元组类型同样支持push，pop，unshift，shift方法修改元素内容。在使用这些方法操作元组时，由于编译器无法进行编译检查。因此此时的元组可以看作是联合类型的数组。同样当我们使用pop或者unshift函数时，函数的返回值应该为联合类型再加上undefined。我们修改index.ts文件为如下内容。

var tuple:[number, string];
tuple = [1, "name"];
var item:number | string | undefined = tuple.pop();
console.log(item);
var n:number = tuple.push(20, "age");
console.log(n);
console.log(tuple);

在终端选项卡输入如下命令编译并查看。

tsc
node index.js

6.  for循环语法

在实际开发中使用数组类型时，经常用到的操作通过for循环的方式遍历数组。在TypeScript提供了多种for循环的编写语法方法，在本小节中我们就来学习一下这些for循环的编写语法。

1. 基本for循环
   

首先来看一个标准的for循环写法，在TypeScript中标准的for循环采用的时类C语言的语法，分为初始化，循环条件，布增逻辑三部分。我们修改index.ts文件为如下内容

var arr:number[] = [1, 100, 20, 50];
for( var i = 0; i < arr.length; i++){
  console.log("index: " + i + ", val: " + arr[i]);
}

在终端选项卡输入如下命令编译并查看。

tsc
node index.js

2. for in循环
   

标准for循环的写法可以手动控制循环条件和布增逻辑，具有很强的灵活性。但是绝大多数情况下，我们对数组的访问只是简单的遍历整个数组，采用标准for写法就会比较冗余。

这种情况下，我们就可以使用for in循环的写法，使用for in语法时，我们只需要定义一个数组下标变量，for in就会从0开始自动增长下标，直到数组的长度。我们修改index.ts文件为如下内容。

var arr:number[] = [1, 100, 20, 50];
for( var i in arr)
{
  console.log("index: " + i + ", val: " + arr[i]);
}

在终端选项卡输入如下命令编译并查看。

tsc
node index.js

3. for of循环
   

通过for in遍历数字可以省略循环的终止条件和循环的步增逻辑。但是for in获得的变量是数组的下标，我们需要通过数组[下标]的方式才能获得数组元素的具体值。如果开发者不需要获得下标，希望直接获得数组的值的时候，则可以使用for of循环的写法。

for of语法和for in类似，区别是我们只需要顶一个一个数组元素值得变量，for of就会自动进行遍历。我们修改index.ts文件为如下内容。

var arr:number[] = [1, 100, 20, 50];
  for( var v of arr){
    console.log("val: " + v);
  }

在终端选项卡输入如下命令编译并查看。

tsc
node index.js

4. forEach方法
   

除了传统的for语法之外，数组和元组还提供了回调函数遍历方法forEach，其他遍历方式不同的是forEach接受的参数是一个回调函数，这种做法的特点是可以将对元素的处理逻辑封装成独立的方法。

例如我们编写一个将字符串中首字母大写，其他字母小写的print方法。然后用分别用这个方法输出单个字符串和字符串数组，我们会发现使用forEach方法，比使用for of方法的代码更加简介。我们修改index.ts文件为如下内容。

function print(s:string)
    {
    var first:string = s.charAt(0).toLocaleUpperCase();
    var other:string = s.slice(1).toLocaleLowerCase();
    console.log(first + other);
}
print("HelloWorld")
var arr:string[] = ["apple", "ORange", "BANANA"];
arr.forEach(print)

在终端选项卡输入如下命令编译并查看。可以看到forEach在执行时会将每一个数组元素作为参数，反复执行了回调函数。

tsc
node index.js

实验链接：https://developer.aliyun.com/adc/scenario/a0fa9a6cc9c54d5d920ba6893096646b