TypeScript
语言中,数组中的元素通常只能是由相同数据类型组成(any[]
除外),若是咱们想要存储不一样类型的元素,则可使用元组。数组
TypeScript
中的元组(Tuple)从外形上来看和数组相差很少, 可是元组中容许存储不一样类型的元素,数组中的元素必须是相同的类型。url
声明元组
声明元组的语法:.net
let tuple_name = [value1,value2,value3,…value n]
示例:
例如声明一个由数字类型、字符串类型、布尔类型构成的元素:code
let tup1:[number, string, boolean] = [1, 'a', true]; console.log(tup1);
编译成 JavaScript
代码:blog
var tup1 = [1, 'a', true]; console.log(tup1); // [ 1, 'a', true ]
输出:索引
[ 1, 'a', true ]
这样声明的元组,元素的类型必须一一对应,例如右边中括号内第一个元素必须是 number
类型的数据, 第二个元素必须是 string
类型的数据,第三个必须是 boolean
类型,若是没有一一对应,则会报错。ip
示例:
下图中是一段示例代码,当元素与对应位置的数据类型没有一一对应,会产生错误: element
访问元组
和数组同样,元组中元素也可使用索引来访问,元组中的索引值一样从 0 开始,第一个元素为 0,第二个为 1,以此类推第 n
个为 n-1
。字符串
示例:
经过索引访问一个元素时,能够获得这个元素的值:get
let tup1: [string, number, number] = ['xkd', 1, 3]; console.log("第三个元素的值为:" + tup1[2]); console.log("第三个元素的类型为:" + typeof tup1[2]);
编译为 JavaScript
代码:
var tup1 = ['xkd', 1, 3]; console.log("第三个元素的值为:" + tup1[2]); console.log("第三个元素的类型为:" + typeof tup1[2]);
输出:
第三个元素的值为:3 第三个元素的类型为:number
须要注意的是,在访问元组中的元素时,不能够越界访问。例如上面数组中只有三个元素,那么若是咱们访问索引为 3 的元素:
let tup1: [string, number, number] = ['xkd', 1, 3]; console.log(tup1[3]);
输出:
Tuple type '[string, number, number]' of length '3' has no element at index '3'.
可选元素类型
咱们在声明一个元组时,能够在元素类型后缀一个问号 ?
来讲明元素是可选的。
示例:
下面元组中,第二个元素和第三个元素为可选元素:
let tup1: [string, number?, number?]; tup1 = ['a']; tup1 = ['a', 1]; tup1 = ['a', 1, 3]
有一点很重要,就是可选元素类型必须在必选元素类型后面。也就是说,若是一个元素类型后面后缀了一个问号 ?
,那么这个元素以后的全部元素类型都要后缀一个问号。
示例:
下图中第二个元素为可选元素,第三个元素若是不是可选元素,就会致使报错:
元组操做
TypeScript
中元组也支持各类操做,例如咱们可使用 push()
方法向元组添加元素,使用pop()
方法移除元组中的最后一个元素。其实使用起来就和数组中相似。
示例:
首先声明一个元组:
let mytup:[number, number, string, string] = [7, 36, 'summer', 'xkd'];
而后咱们可使用 push()
方法向这个元组中添加新的元素(建议最好不要这样作),以下所示:
let mytup:[number, number, string, string] = [7, 36, 'summer', 'xkd']; mytup.push('mark'); console.log(mytup); // 输出:[ 7, 36, 'summer', 'xkd', 'mark' ]
也可使用 pop()
方法删除元组中最后一个元素:
mytup.pop(); console.log(mytup); // 输出:[ 7, 36, 'summer' ]
更新或修改元组元素
元组是可变的,这表示咱们能够更新或更改元组中的元素值,要修改元组中的元素,须要用到索引和赋值运算符 =
。
示例:
例如将元组中索引为 1 的元素值修改成'aaa':
let mytup:[number, string] = [7, 'xkd']; mytup[1] = 'aaa'; console.log(mytup);
编译成 JavaScript 代码:
var mytup = [7, 'xkd']; mytup[1] = 'aaa'; console.log(mytup);
输出:
[ 7, 'aaa' ]
解构元组
咱们能够解构元组中的元素,例如:
let mytup:[number, string, boolean] = [7, 'summer', true]; let [a, b, c] = mytup; console.log(a); console.log(b); console.log(c);
编译成 JavaScript 代码:
var mytup = [7, 'summer', true]; var a = mytup[0], b = mytup[1], c = mytup[2]; console.log(a); console.log(b); console.log(c);
输出:
7 summer true
若是咱们不须要解构元组中的所有元素,就能够像下面这样解构:
let mytup:[number, string, boolean] = [7, 'summer', true]; let [a, ...arg] = mytup; console.log(a); console.log(arg);
编译成 JavaScript 代码:
var mytup = [7, 'summer', true]; var a = mytup[0], arg = mytup.slice(1); console.log(a); console.log(arg);
输出:
7 [ 'summer', true ]
动手练习
- 请定义一个元组,这个元组中第一个元素为字符串类型,第二个元素为布尔类型,第三个元素为可选的数字类型?
- 请将下面这个元组中第三个元素的值修改成 “可乐”?
let mytup: [string, number, string, boolean] = ['牛肉', 100, '雪碧', true];