常见类型-3：数组元组的方法
1. 创建资源
开始实验之前，您需要先创建实验相关资源。
在实验室页面，单击创建资源。
（可选）在实验室页面左侧导航栏中，单击云产品资源列表，可查看本次实验资源相关信息（例如IP地址、子用户信息等）。
说明：资源创建过程需要3～5分钟（视资源不同开通时间有所差异，ACK等资源开通时间较长）。完成实验资源的创建后，您可以在云产品资源列表查看已创建的资源信息，例如：子用户名称、子用户密码、AK ID、AK Secret、资源中的项目名称等。
实验环境一旦开始创建则进入计时阶段，建议学员先基本了解实验具体的步骤、目的，真正开始做实验时再进行创建。
资源创建成功，可在左侧的资源卡片中查看相关资源信息以及RAM子账号信息
2. 进入VNC实验环境
进入网页环境
1.1 资源创建成功后，我们在右侧选择切换到远程桌面。
1.2 在远程桌面页面中，点击Chromium网页浏览器。
登录RAM用户
2.1 浏览器启动后会默认打开阿里云的RAM用户登录页。在登录页面中我们点击下一步按钮。
2.2 接下来我们需要输入RAM用户的密码。密码显示在实验控制台左侧，我们点击子用户密码右侧的复制按钮。
复制完成后，我们在用户密码框中按Ctrl + V 复制密码，然后点击登录按钮
进入ECS的远程连接。
3.1 登录成功后，页面跳转到控制台，我们在控制台的搜索框中输入ECS，然后点击云服务器ECS进入云服务器控制台。
3.2 在ECS控制台中，我们找到实验创建的ECS，点击右侧的远程连接按钮。
3.3 在远程连接中选择通过VNC远程连接中的立即登录如果没有显示该选项，则可点击展开其他登录方式按钮。
登录VNC远程连接
4.1 初次登录VNC远程连接时需要先设置VNC密码。点击重置VNC密码按钮。
4.2 输入两次新的VNC密码，并点击确认。
4.3 VNC密码设置成功后，输入密码并点击确认。
4.4 VNC登录成功后会看到实验ECS的登录界面。
3. 常用方法1
在前面得实验中，我们讲解了数组和元组基本用法，在学习得过程中我们了解到，数组和元组本质上都是原生JavaScript数组得一种封装。因此数组和元组无论是使用，还是内置方法基本都大同小异。在本节实验中。我们将以数组为例，继续学习数组和元组得内置方法。
查找元素
首先我们来看比较简单的includes方法。他的作用只是判断数组中是否包含特定元素。我们修改index.ts文件为如下内容
var arr:number[] = [1, 2, 1, 2, 3, 2, 1]; console.log(arr.includes(0)) console.log(arr.includes(2))
在终端选项卡输入如下命令编译并查看。
tsc node index.js
定位元素
在数组中也提供了查询元素得方法indexOf和lastIndexOf。这两个方法得参数和string也比较相似，indexOf为从前往后查找第一个出现的元素，lastIndexOf为从前往后查找第一个出现的元素。
该函数的参数分别是需要查找得元素，和开始查找得位置。如果找到了元素该函数的返回值为元素的下标，如果没有找到元素则返回-1。我们修改index.ts文件为如下内容
var arr:number[] = [1, 2, 1, 2, 3, 2, 1]; console.log(arr.indexOf(2, 0)) console.log(arr.indexOf(2, 3)) console.log(arr.lastIndexOf(2, 0))
在终端选项卡输入如下命令编译并查看。
tsc node index.js
子数组
通过数组中得slice方法，我们可以根据源数组中一部分元素，构建一个新的数组。需要注意的是，这里数组的slice方法和字符串的逻辑相似，都是并不改变原对象的内容，而是创建新内容。
slice方法有时候会和indexOf方法共同使用。下面的例子中：学校学生的信息以数组的形式排列，每个学生所包含元素长度是固定的，当我们想获得某个学生的信息的时候，我们就可以先查找学生的名字，然后截取属于这个学生的全部元素。我们修改index.ts文件为如下内容
var arr:string[] = ["张三", "汉族", "李四", "回族", "王五", "满族"]; var i:number = arr.indexOf("李四", 0); console.log(arr.slice(i, i + 2))
在终端选项卡输入如下命令编译并查看。
tsc node index.js
4. 常用方法2
数组连接
接下来我们来看数组连接方法concat。这个方法可以将多个数组连接在一起，比较类似于string中的+运算符。这里需要注意的是，数组的concat方法的逻辑和字符串类似，也就是调用该函数不会对源数组的内容造成影响。
在这里我们使用元组来演示案例，该案例的逻辑上上一个小节的案例相反，是将多个用户的元组信息拼接在一起。在拼接完成之后，我们会发现concat在拼接完成后会生成一个新的元组，而原本的元组中的数据并没有被改变。我们修改index.ts文件为如下内容
var tunple:[string, string, number] = ["张三", "汉族", 19]; var users = tunple.concat(["李四", "回族", 20], ["王五", "满族", 18]); console.log(tunple); console.log(users);
在终端选项卡输入如下命令编译并查看。
tsc node index.js
元素拼接
在之前的字符串实验中我们讲解过了split方法，该方法可以通过分隔符将一个字符串拆分成字符串数组。而在数组中则包含了一个和split函数相反的方法join。这个方法可以将一个数组通过分割符号拼接成一个字符串。
我们继续通过上面的案例进行演示，将已经连接好的数组生成字符串。
var tunple:[string, string, number] = ["张三", "汉族", 19]; var users = tunple.concat(["李四", "回族", 20], ["王五", "满族", 18]); console.log(tunple); console.log(users); console.log(users.join(","))
在终端选项卡输入如下命令编译并查看。
tsc node index.js
数组反序
数组反序的方法reverse的功能比较简单，也就是将数组[1,2,3]变成[3,2,1]。需要注意的是该方法执行之后不会生成新的数字，而是会修改源数组的内容。
这里我们看这样一个例子，在某些情况下，我们需要将输入的域名反序，比如将www.aliyun.com变成com.aliyun.www。这时候我们就可以组合使用splie，reverse，join函数来完成这个功能。我们修改index.ts文件为如下内容
var url:string = "www.aliyun.com" var arr:string[] = url.split(".") arr.reverse(); console.log(arr.join("."))
在终端选项卡输入如下命令编译并查看。
tsc node index.js
5. 任意位置修改
在之前的实验中，我们学习了push和pop等顺序修改数组元素的方法。这些方法都属顺序修改方法，也就是只能在指定位置对数组中的元素进行编辑，除此之外数组中还有一种方法splice。可以对数组的任意位置进行编辑。在本小节中我们就来学习这个方法的使用。
任意插入
首先我们来学习，任意插入的用法。splice函数插入元素的调用格式为splice(插入的位置，0，要插入的元素列表)。我们修改index.ts文件为如下内容。
var arr:string[] = ["元素1", "元素2", "元素3", "元素4"]; arr.splice(2, 0, "插入1", "插入2"); console.log(arr);
在终端选项卡输入如下命令编译并查看结果。
tsc node index.js
任意删除
除了插入之外，我们还可以通过splice方法在数组的任意位置删除元素。接下来我们再来看删除元素的用法，删除元素的调用格式为splice(需要删除的位置，需要删除的元素的个数)，我们在上面例子的基础上继续编辑，我们修改index.ts文件为如下内容。
var arr:string[] = ["元素1", "元素2", "元素3", "元素4"]; arr.splice(2, 0, "插入1", "插入2"); console.log(arr); arr.splice(3, 2); console.log(arr);
在终端选项卡输入如下命令编译并查看。会看到位置3后面两个元素被删除了。
tsc node index.js
任意替换
splice方法除了可以实现插入和删除之外，还可以用于数组元素的替换。替换的调用格式为splice(需要替换的位置，被替换的元素的个数，替换上去的元素列表)。
实际上splice方法的含义就是在任意位置替换，而添加和删除只是替换的一种特殊形式。当我们插入时实际上是用需要插入的元素列表在指定位置替换0个元素。而删除则是将指定位置需要删除的元素替换成0个元素。我们修改index.ts文件为如下内容。
var arr:string[] = ["元素1", "元素2", "元素3", "元素4"]; arr.splice(1, 3, "替换1", "替换2"); console.log(arr);
在终端选项卡输入如下命令编译并查看。会看到位置1后面的3个元素被替换了。
tsc node index.js
6. 数组排序
最后我们再来学习数组中另一个非常重要的方法，也就是排序。数组排序是一个非常常见的数据结构算法，在TypeScript中，提供了sort方法进行排序操作。在本小节我们来学习排序和回调函数的知识。
数组的排序
在使用sort方法时，我们需要提供了比较两个元素大小的回调函数。我们尝试来排序一组生日字符串，首先我们生成一个排序比较函数age，在该函数中我们使用string的localeCompare方法进行字符串的比较。接下来我们使用sort函数进行排序。我们修改index.ts文件为如下内容。
var arr:string[] = ["2000-08-03", "1985-07-06", "1954-01-18", "1985-11-26", "1977-01-19", "1985-07-06"] function age(first:string, second:string):number{ return first.localeCompare(second); } arr.sort(age) console.log(arr)
在终端选项卡输入如下命令编译并查看。会看到调用sort方法之后，数组中元素的顺序被改变了。
tsc node index.js
比较回调函数
接下来我们来看一下sort中的回调函数的编写方法。根据sort函数的定义，sort函数在排序是会多次调用比较回调函数，在调用的时候，会将数组中的2个元素作为参数传给比较函数，如果我们认为参与比较的两个参数中，第一个参数应该放在第二个参数的后面，那么就返回一个正数，如果第一个参数放在第二个参数的前面就返回一个负数，如果两者相等就返回0。
接下来我们使用一个变量来保存localeCompare的返回值，然后将两个参数和返回值进行输出。在输出结果中，我们发现sort函数一共执行了11次比较函数，在比较函数中第一个参数的日期大则返回了1，第一个参数小返回了-1。相等返回了0。我们修改index.ts文件为如下内容。
var arr:string[] = ["2000-08-03", "1985-07-06", "1954-01-18", "1985-11-26", "1977-01-19", "1985-07-06"] function age(first:string, second:string):number{ var n:number = first.localeCompare(second); console.log("第一个参数:" + first + " 第二个参数:" + second + " 比较结果:" + n) return n; } arr.sort(age) console.log(arr)
在终端选项卡输入如下命令编译并查看。
tsc node index.js
降序排序
在上面的例子中，我们的日期是按照从小到大的顺序进行排序。如果我们希望日期按照从大到小降序排序，我们可以修改排序中的比较函数。根据比较函数的返回值要求，如果第一个参数小则需要将他放在后面，这时返回负数，反之第一个参数大则将他放在前面，返回正数。如果相等则返回0不变。
这时我们就可以使用一个数学技巧，我们将正序排序比较函数的返回值取负数，这样最终结果就会满足我们期望要求，将数组降序排序。我们修改index.ts文件为如下内容。
var arr:string[] = ["2000-08-03", "1985-07-06", "1954-01-18", "1985-11-26", "1977-01-19", "1985-07-06"] function age(first:string, second:string):number{ return first.localeCompare(second); } function ageDesc(first:string, second:string):number{ return - first.localeCompare(second); } arr.sort(age) console.log(arr) arr.sort(ageDesc) console.log(arr)
在终端选项卡输入如下命令编译并查看。会看到修改了排序方法之后，sort方法按照降序进行了排序。
tsc node index.js
实验链接：https://developer.aliyun.com/adc/scenario/78d5177fbf02435e9d69dd44fab5d567
