【零基础入门TypeScript】数组

目录

数组的特点

声明和初始化数组

句法

访问数组元素

示例:简单数组

示例:单语句声明和初始化

数组对象

例子

示例:数组构造函数接受逗号分隔值

数组方法

数组解构

例子

使用 for…in 循环遍历数组

TypeScript 中的数组


使用变量来存储值有以下限制 -

  • 变量本质上是标量。换句话说,变量声明一次只能包含一个。这意味着要在程序中存储 n 个值,需要 n 个变量声明。因此,当需要存储更大的值集合时,使用变量是不可行的。

  • 程序中的变量以随机顺序分配内存,因此很难按照声明的顺序检索/读取值。

TypeScript 引入了数组的概念来解决这个问题。数组是同质值的集合。简单来说,数组是相同数据类型的值的集合。它是用户定义的类型。

数组的特点

这是数组的特征列表 -

  • 数组声明分配连续的内存块。

  • 数组是静态的。这意味着数组一旦初始化就无法调整大小。

  • 每个内存块代表一个数组元素。

  • 数组元素由称为元素下标/索引的唯一整数标识。

  • 与变量一样,数组也应该在使用之前声明。使用 var 关键字声明数组。

  • 数组初始化是指填充数组元素。

  • 数组元素值可以更新或修改,但不能删除。

声明和初始化数组

要在 Typescript 中声明初始化数组,请使用以下语法 -

句法

var array_name[:datatype];        //declaration 
array_name = [val1,val2,valn..]   //initialization

没有数据类型的数组声明被认为是 any 类型。此类数组的类型是在初始化期间根据数组第一个元素的数据类型推断出来的。

例如,像这样的声明 - var numlist:number[] = [2,4,6,8]将创建一个数组,如下所示 -

声明和初始化数组

数组指针默认指向第一个元素。

数组可以在一条语句中声明和初始化。其语法是 -

var array_name[:data type] = [val1,val2…valn]

注意- [] 对称为数组的维数。

访问数组元素

数组名后跟下标用于引用数组元素。其语法如下 -

array_name[subscript] = value

示例:简单数组

var alphas:string[]; 
alphas = ["1","2","3","4"] 
console.log(alphas[0]); 
console.log(alphas[1]);

编译时,它将生成以下 JavaScript 代码 -



//Generated by typescript 1.8.10 
var alphas; 
alphas = ["1", "2", "3", "4"]; 
console.log(alphas[0]); 
console.log(alphas[1]);

上述代码的输出如下 -

1 
2 

示例:单语句声明和初始化



var nums:number[] = [1,2,3,3] 
console.log(nums[0]); 
console.log(nums[1]); 
console.log(nums[2]); 
console.log(nums[3]);

编译时,它将生成以下 JavaScript 代码 -



//Generated by typescript 1.8.10 
var nums = [1, 2, 3, 3]; 
console.log(nums[0]); 
console.log(nums[1]); 
console.log(nums[2]); 
console.log(nums[3]);

其输出如下 -

1 
2 
3 
3 

数组对象

还可以使用 Array 对象创建数组。可以传递 Array 构造函数。

  • 表示数组大小的数值或

  • 逗号分隔值的列表。

以下示例展示了如何使用此方法创建数组。

例子




var arr_names:number[] = new Array(4) for(var i = 0;i<arr_names.length;i++) { 
arr_names[i] = i * 2 console.log(arr_names[i]) 
}

编译时,它将生成以下 JavaScript 代码。



//Generated by typescript 1.8.10 
var arr_names = new Array(4); 
for (var i = 0; i < arr_names.length; i++) { 
arr_names[i] = i * 2; 
console.log(arr_names[i]); 
}

其输出如下 -

0 
2 
4 
6 

示例:数组构造函数接受逗号分隔值



var names:string[] = new Array("Mary","Tom","Jack","Jill") for(var i = 0;i<names.length;i++) { 
console.log(names[i]) 
}

编译时,它将生成以下 JavaScript 代码 -



//Generated by typescript 1.8.10 
var names = new Array("Mary", "Tom", "Jack", "Jill"); 
for (var i = 0; i < names.length; i++) { 
console.log(names[i]); 
}

其输出如下 -

Mary 
Tom 
Jack 
Jill

数组方法

下面给出了 Array 对象的方法列表及其描述。

S.No.Method & Description
1.concat()

Returns a new array comprised of this array joined with other array(s) and/or value(s).

2.every()

Returns true if every element in this array satisfies the provided testing function.

3.filter()

Creates a new array with all of the elements of this array for which the provided filtering function returns true.

4.forEach()

Calls a function for each element in the array.

5.indexOf()

Returns the first (least) index of an element within the array equal to the specified value, or -1 if none is found.

6.join()

Joins all elements of an array into a string.

7.lastIndexOf()

Returns the last (greatest) index of an element within the array equal to the specified value, or -1 if none is found.

8.map()

Creates a new array with the results of calling a provided function on every element in this array.

9.pop()

Removes the last element from an array and returns that element.

10.push()

Adds one or more elements to the end of an array and returns the new length of the array.

11.reduce()

Apply a function simultaneously against two values of the array (from left-to-right) as to reduce it to a single value.

12.reduceRight()

Apply a function simultaneously against two values of the array (from right-to-left) as to reduce it to a single value.

13.reverse()

Reverses the order of the elements of an array -- the first becomes the last, and the last becomes the first.

14.shift()

Removes the first element from an array and returns that element.

15.slice()

Extracts a section of an array and returns a new array.

16.some()

Returns true if at least one element in this array satisfies the provided testing function.

17.sort()

Sorts the elements of an array.

18.splice()

Adds and/or removes elements from an array.

19.toString()

Returns a string representing the array and its elements.

20.unshift()

Adds one or more elements to the front of an array and returns the new length of the array.

数组解构

指打破实体的结构。在数组上下文中使用时,TypeScript 支持解构。

例子

var arr:number[] = [12,13] 
var[x,y] = arr
console.log(x)
console.log(y)

编译时,它将生成以下 JavaScript 代码。

//Generated by typescript 1.8.10
var arr = [12, 13];
var x = arr[0], y = arr[1];
console.log(x);
console.log(y);

其输出如下 -

12 
13

使用 for…in 循环遍历数组

可以使用for...in循环来遍历数组。

var j:any; 
var nums:number[] = [1001,1002,1003,1004] for(j in nums) { 
console.log(nums[j]) 
}

该循环执行基于索引的数组遍历。

编译时,它将生成以下 JavaScript 代码。

//Generated by typescript 1.8.10 
var j; 
var nums = [1001, 1002, 1003, 1004]; 
for (j in nums) { 
console.log(nums[j]); 
}

上述代码的输出如下 -

1001 
1002 
1003 
1004

TypeScript 中的数组

TypeScript 支持数组中的以下概念 -

编号概念与描述
1.多维数组

TypeScript 支持多维数组。多维数组最简单的形式是二维数组。

2.将数组传递给函数

您可以通过指定不带索引的数组名称来将指向数组的指针传递给函数。

3.从函数返回数组

允许函数返回数组

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/341751.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

vue:element-ui表单动态验证规则

一、需求&#xff1a; 实现当是否发送消息选择是时&#xff0c;业务类型字段必填。 二、实现&#xff1a; 当你在一个表单中使用 el-form 和 el-form-item 来创建表单项时&#xff0c;el-form-item 的 :rules 属性可以用来设置该表单项的验证规则。我们希望根据用户在 "…

前端JS加密与Buspsuite的坦诚相待

前端JS加密测试场景下的困惑 在渗透测试过程中经常会遇到JS前端加密的场景&#xff0c;假如不借助任何工具的情况下&#xff0c;我们一般是把JS代码进行扣取&#xff0c;本地进行加解密生成Payload&#xff0c;然后在Burpsuite里进行Payload替换。这种方式就存在一个很明显的问…

机器学习:什么是监督学习和无监督学习

目录 一、监督学习 &#xff08;一&#xff09;回归 &#xff08;二&#xff09;分类 二、无监督学习 聚类 一、监督学习 介绍&#xff1a;监督学习是指学习输入到输出&#xff08;x->y&#xff09;映射的机器学习算法&#xff0c;监督即理解为&#xff1a;已知正确答案…

【Web前端开发基础】CSS的定位和装饰

CSS的定位和装饰 目录 CSS的定位和装饰一、学习目标二、文章内容2.1 定位2.1.1 定位的基本介绍2.1.2 定位的基本使用2.1.3 静态定位2.1.4 相对定位2.1.5 绝对定位2.1.6 子绝父相2.1.7 固定定位2.1.8元素的层级关系 2.2 装饰2.2.1 垂直对齐方式2.2.2 光标类型2.2.3 边框圆角2.2.…

Keepalived + Nginx双主架构

Keepalived Nginx双主架构 环境准备&#xff1a; keepalived_master1服务器nginx&#xff1a;172.20.26.167 keepalived_master2服务器nginx&#xff1a;172.20.26.198 各服务器关闭selinux、防火墙等服务。 开机安装部署nginx 在172.20.26.167服务器上 yum install ngi…

基于ADAS的车道线检测算法matlab仿真

目录 1.课题概述 2.系统仿真结果 3.核心程序与模型 4.系统原理简介 4.1 图像预处理 4.2 车道线特征提取 4.3 车道线跟踪 5.完整工程文件 1.课题概述 基于ADAS的车道线检测算法,通过hough变换和边缘检测方法提取视频样板中的车道线&#xff0c;然后根据车道线的弯曲情况…

在Excel中批量添加前后缀的三种方法,总有一种适合 你

你可以使用高级Excel函数将前缀和后缀快速应用于列。在使用大型电子表格时,为每个单元格添加后缀或前缀可能会花费很长时间,并使你疲惫不堪。 在这里,你可以通过几种快速简单的方式添加后缀或前缀,从而减少所需的手动操作。​我们将通过三种不同的方法向Excel电子表格添加…

互联网盲盒小程序,解锁了盲盒全新模式!

随着潮流玩具的兴起&#xff0c;盲盒因此产生&#xff0c;在时间的推移下&#xff0c;盲盒的发展正处于鼎盛时期。在今年&#xff0c;盲盒市场也将迎来300亿元的市场规模&#xff0c;而盲盒的受众群体也在收入能力较高的年轻人中。 盲盒具有独特的购买方式&#xff0c;它能够让…

硬件监测和系统诊断 -- TechTool Pro 18 中文

TechTool Pro 18是一款功能强大的硬件和软件诊断工具&#xff0c;它提供了多种功能来帮助用户维护和优化Mac电脑的性能。这些功能包括&#xff1a;硬盘检测和修复、内存测试、驱动器克隆、数据恢复、网络和连接测试、系统健康检查以及定期维护等。 TechTool Pro 18还具有直观的…

k8s--helm

什么是helm&#xff1f;在没有这个helm之前&#xff0c;deployment service ingress helm的作用 通过打包的方式&#xff0c;把deployment service ingress等打包在一块&#xff0c;一键式的部署服务&#xff0c;类似yum安装 官方提供的一个类似与安装仓库额功能&#xff0c;…

写着玩的程序:pycharm实现无限弹窗程序(非病毒程序,仅整蛊使用)

运行环境 PyCharm 2023.2.1 python3.11 具体内容 源代码 import tkinter as tk from tkinter import messagebox import threadingclass PopupGenerator:def __init__(self):self.root tk.Tk()self.root.geometry("200x120")self.root.title("无限弹窗&qu…

C# CefSharp 根据输入日期段自动选择日期

1&#xff0c;前言 搞这个Demo整整搞几天通宵&#xff0c;爆肝了。后做的效果出来&#xff0c;还是不错的。给小伙伴看看效果图。 2, 遇到的问题 日期之间相差多少个月数。开始时间框点击对应月份要点击多少次&#xff0c;结束时间框点击对应月份要点击多少次Xpath获取问题。…

理解LSTM一种递归神经网络(RNN)

1 递归神经网络结构 一个简单的传统神经网络结构如下图所示&#xff1a; 给他一些输入x0,x1,x2 … xt, 经过神经元作用之后得到一些对应的输出h0,h1,h2 … ht。每次的训练&#xff0c;神经元和神经元之间不需要传递任何信息。 递归神经网络和传统神经网络不同的一个点在于&am…

智能配电监控系统

摘要&#xff1a;利用微机综合保护测控装置 、控制单元、电力监测仪 、摄像机 &#xff0c;设计开发出一套智能配电远程监控系统 &#xff0c;实现配电室的无人值守 &#xff0c;从而提高变配电运行现代化管理水平。 关键词&#xff1a;智能配电&#xff1b;现场监控&#xff…

IMX6ULL|GPIO子系统

一.GPIO子系统 GPIO是General Purpose I/O的缩写&#xff0c;即通用输入输出端口&#xff0c;简单来说就是MCU/CPU可控制的引脚&#xff0c;这些引脚通常有多种功能&#xff0c;最基本的是高低电平输入检测和输出&#xff0c;部分引脚还会与主控器的片上外设绑定&#xff0c;如…

性能篇:解密Stream,提升集合遍历效率的秘诀!

大家好&#xff0c;我是小米&#xff0c;一个热爱技术分享的小伙伴。今天我们来聊一聊 Java 中的 Stream&#xff0c;以及如何通过 Stream 来提高遍历集合的效率。 什么是Stream&#xff1f; 在开始深入讨论之前&#xff0c;我们先来了解一下什么是 Stream。 Stream 是 Java…

微信如何批量自动加好友?用它就对了!

你还在手动逐一输入号码&#xff0c;再搜索添加好友吗&#xff1f;这样实在是太麻烦了&#xff0c;还很费时间&#xff0c;稍不注意就会出错。不妨试试这个微信批量自动添加好友工具&#xff0c;解放双手&#xff0c;提高加人效率&#xff01; 下面一起来看看如何操作吧&#…

(十一)Head first design patterns状态模式(c++)

状态模式 如何去描述状态机&#xff1f; 假设你需要实例化一台电梯&#xff0c;并模仿出电梯的四个状态&#xff1a;开启、关闭、运行、停止。也许你会这么写 class ILift{ public:virtual void open(){}virtual void close(){}virtual void run(){}virtual void stop(){} }…

机器学习实验1——朴素贝叶斯和逻辑回归分类Adult数据集

文章目录 &#x1f9e1;&#x1f9e1;实验内容&#x1f9e1;&#x1f9e1;&#x1f9e1;&#x1f9e1;数据预处理&#x1f9e1;&#x1f9e1;认识数据填充缺失值&#xff08;“ &#xff1f;”&#xff09;将income属性替换为0-1变量筛除无效属性编码和缩放 &#x1f9e1;&…

GC6208 5V摄像机镜头驱动芯片,为什么可以替代AN41908,适用于摄像机镜头上

GC6208是一个镜头电机驱动IC摄像机和安全摄像机。该装置集成了一个由PID控制的可变光圈直流电机驱动器和两个通道的扫描隧道显微镜电机驱动器&#xff0c;用于变焦和聚焦控制。AN41908A是一款用于摄像机和安全摄像机的镜头马达驱动IC&#xff0c;具有lris控制功能。电压驱动系统…