TypeScript 元组

我们知道数组中元素的数据类型都一般是相同的(any[] 类型的数组可以不同),如果存储的元素数据类型不同,则需要使用元组。

元组中允许存储不同类型的元素,元组可以作为参数传递给函数。

创建元组的语法格式如下:

var tuple_name = [value1,value2,value3,…value n]

实例

声明一个元组并初始化:

var mytuple = [10,"Runoob"];

或者我们可以先声明一个空元组,然后再初始化:

var mytuple = [];
mytuple[0] = 120
mytuple[1] = 234

访问元组

元组中元素使用索引来访问,第一个元素的索引值为 0,第二个为 1,以此类推第 n 个为 n-1,语法格式如下:

tuple_name[index]

实例

以下实例定义了元组,包含了数字和字符串两种类型的元素:

TypeScript

var mytuple = [10,"Runoob"]; // 创建元组 console.log(mytuple[0]) console.log(mytuple[1])

编译以上代码,得到以下 JavaScript 代码:

JavaScript

var mytuple = [10, "Runoob"]; // 创建元组 console.log(mytuple[0]); console.log(mytuple[1]);

输出结果为:

10
Runoob

元组运算

我们可以使用以下两个函数向元组添加新元素或者删除元素:

  • push() 向元组添加元素,添加在最后面。

  • pop() 从元组中移除元素(最后一个),并返回移除的元素。

TypeScript

var mytuple = [10,"Hello","World","typeScript"]; console.log("添加前元素个数:"+mytuple.length) // 返回元组的大小 mytuple.push(12) // 添加到元组中 console.log("添加后元素个数:"+mytuple.length) console.log("删除前元素个数:"+mytuple.length) console.log(mytuple.pop()+" 元素从元组中删除") // 删除并返回删除的元素 console.log("删除后元素个数:"+mytuple.length)

编译以上代码,得到以下 JavaScript 代码:

JavaScript

var mytuple = [10, "Hello", "World", "typeScript"]; console.log("添加前元素个数:" + mytuple.length); // 返回元组的大小 mytuple.push(12); // 添加到元组中 console.log("添加后元素个数:" + mytuple.length); console.log("删除前元素个数:" + mytuple.length); console.log(mytuple.pop() + " 元素从元组中删除"); // 删除并返回删除的元素 console.log("删除后元素个数:" + mytuple.length);

输出结果为:

添加前元素个数:4
添加后元素个数:5
删除前元素个数:5
12 元素从元组中删除
删除后元素个数:4

更新元组

元组是可变的,这意味着我们可以对元组进行更新操作:

TypeScript

var mytuple = [10, "Runoob", "Taobao", "Google"]; // 创建一个元组 console.log("元组的第一个元素为:" + mytuple[0]) // 更新元组元素 mytuple[0] = 121 console.log("元组中的第一个元素更新为:"+ mytuple[0])

编译以上代码,得到以下 JavaScript 代码:

JavaScript

var mytuple = [10, "Runoob", "Taobao", "Google"]; // 创建一个元组 console.log("元组的第一个元素为:" + mytuple[0]); // 更新元组元素 mytuple[0] = 121; console.log("元组中的第一个元素更新为:" + mytuple[0]);

输出结果为:

元组的第一个元素为:10
元组中的第一个元素更新为:121

解构元组

我们也可以把元组元素赋值给变量,如下所示:

TypeScript

var a =[10,"Runoob"] var [b,c] = a console.log( b ) console.log( c )

编译以上代码,得到以下 JavaScript 代码:

JavaScript

var a = [10, "Runoob"]; var b = a[0], c = a[1]; console.log(b); console.log(c);

输出结果为:

10
Runoob

TypeScript 元组的更多相关文章

  1. TypeScript tuple 元组

    TypeScript tuple 元组 元组类型允许您用固定数量的元素表示数组,这些元素的类型是已知的,但不必相同. "use strict"; /** * * @author x ...

  2. TypeScript学习——数组、元组、接口(2)

    数组 数组类型注解 const numberArr: (number | string)[] = [1, '2', 3]; //既可以是number 也可以是string const stringAr ...

  3. TypeScript 素描-基础类型

    博文读自 TypeScript 官方文档而来,不具有学习性,仅是本人学习时记录以供日后翻阅 ,有学习TypeScript的朋友还请去看更为详细的官方文档 TypeScript官网文档中的基础类型, T ...

  4. Typescript基础类型

    1.布尔值__boolean 2.数字__number----除了支持十进制和十六进制字面量,Typescript还支持ECMAScript 2015中引入的二进制和八进制字面量. 3.字符串__st ...

  5. 《TypeScript 中文入门教程》 1、基础数据类型

    转载:https://github.com/MyErpSoft/TypeScript-Handbook/blob/master/pages/zh-CHS/Basic%20Types.md 概述 为了让 ...

  6. 浅谈TypeScript

    TypeScript为JavaScript的超集(ECMAScript6), 这个语言添加了基于类的面向对象编程.TypeScript作为JavaScript很大的一个语法糖,本质上是类似于css的l ...

  7. TypeScript 学习一 参数,函数,析构表达式

    1,TypeScript是由谷歌开发的,并且新出的Angular2框架就是谷歌公司由TypeScript语言编写的,所以现在TypeScript是有微软和谷歌一起支持的: 2,TypeScript在j ...

  8. TypeScript入门-基本数据类型

    ▓▓▓▓▓▓ 大致介绍 TypeScript是由C#语言之父Anders Hejlsberg主导开发的一门编程语言,TypeScript本质上是向JavaScript语言添加了可选的静态类型和基于类的 ...

  9. TypeScript 零基础入门

    前言 2015 年末看过一篇文章<ES2015 & babel 实战:开发 npm 模块>,那时刚接触 ES6 不久,发觉新的 ES6 语法大大简化了 JavaScript 程序的 ...

  10. TypeScript基础数据类型

    Typescript与Javascript 二者的区别 作为前端开发的基础语言javascript已经深入人心,人人皆知.作为变成入门的最简单语言,Javascript语言以动态.弱类型语言而著名,学 ...

随机推荐

  1. c-->static关键字的使用

    static关键字的使用 static:静态 未使用static 在下列代码中变量a是有生命周期的,调用完后就会被销毁 所以for循环每次调用test函数打印的结果都是2 #include <s ...

  2. 如何给img标签指定默认显示的图片?(已解决)

    1. 使用场景 页面上有很多图片,或者图片很大,这都会使加载的时候出现大片空白,影响用户体验. 2. 解决办法 在CSS里给img指定默认显示的图片,以下是代码: { //**** backgroun ...

  3. 2023-03-01 react-native 实现 复制功能 @react-native-community/clipboard 报错:TypeError: null is not an object (evaluating 'NativeClipboard_1.default.setString')。

    我的react-native(下称rn)版本为0.68,要实现这个功能主要用到rn的clipboard,在21年的时候他就已经提示clipboard会在未来的版本中上去掉,官方的建议是不要再从reac ...

  4. 004 jmeter断言、集合点、函数、分布式

    1.断言 *定义:断言就是让程序代替人工去判断程序响应数据是否达到预期结果. *断言可以检查返回数据的正确性与完整性 *常见的断言 *响应断言(断言状态码+断言文本值)哪个接口需要断言就在哪一个接口后 ...

  5. AWT+Swing区别

    AWT 是Abstract Window ToolKit (抽象窗口工具包)的缩写,这个工具包提供了一套与本地图形界面进行交互的接口.AWT 中的图形函数与操作系统所提供的图形函数之间有着一一对应的关 ...

  6. layui多图片上传

    <div> <button type="button" class="layui-btn" id="mulUpload"& ...

  7. vagrant搭建centos7

    准备工作 下载安装vagrant https://releases.hashicorp.com/vagrant/2.3.4/vagrant_2.3.4_windows_amd64.msi 选择自己需要 ...

  8. oracle学习之undo的基本知识及事务与undo、数据块的关联

    通过自己学习总结的这些undo知识能够让大家都能深刻了解oracle的undo相关原理. 一.undo撤销表空间的作用 撤销表空间通常称为undo表空间:undo表空间的段也称为撤销段或undo段.回 ...

  9. 初始化centos环境脚本

    #! /bin/bashecho "java环境初始化开始"#功能描述: Centos8.5系统自动初始化脚本#自动配置:IP地址\Yum源\docer\docker-compos ...

  10. rsyslog由于RateLimit丢失日志的处理

    问题 问题的发现:在我们的docker应用中,配置了rsyslog作为日志输出:当应用产生的日志在某段时间内量比较大时,就发现会丢日志. 原因 问题的原因:日志的输出路径,应用程序把日志输出到syst ...