TypeScript Array(数组)

news2024/11/19 7:45:25

       

目录

1、数组初始化

2、Array 对象

3、数组迭代

4、数组在函数中的使用 

4.1、作为参数传递给函数

4.2、作为函数的返回值 

5、数组方法

        数组对象是使用单独的变量名来存储一系列的值。数组非常常用。假如你有一组数据（例如：网站名字），存在单独变量如下所示：

var site1="Google";
var site2="Runoob";
var site3="Taobao";

        如果有 10 个、100 个这种方式就变的很不实用，这时我们可以使用数组来解决：

var sites:string[]; 
sites = ["Google","Runoob","Taobao"]

        这样看起来就简洁多了。TypeScript 声明数组的语法格式如下所示：

var array_name[:datatype];        //声明 
array_name = [val1,val2,valn..]   //初始化

        或者直接在声明时初始化：

var array_name[:datatype] = [val1,val2…valn]

        如果数组声明时未设置类型，则会被认为是 any 类型，在初始化时根据第一个元素的类型来推断数组的类型。

1、数组初始化

        创建一个 number 类型的数组：

var numlist:number[] = [2,4,6,8]

        整个数组结构如下所示：

        索引值第一个为 0，我们可以根据索引值来访问数组元素：

var sites:string[]; 
sites = ["Google","Runoob","Taobao"] 
console.log(sites[0]); 
console.log(sites[1]);

         编译以上代码，得到以下 JavaScript 代码：

var sites;
sites = ["Google", "Runoob", "Taobao"];
console.log(sites[0]);
console.log(sites[1]);

        输出结果为：

        以下实例我们在声明时直接初始化： 

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

        编译以上代码，得到以下 JavaScript 代码：

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

        输出结果为：

2、Array 对象

        我们也可以使用 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 代码：

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]);
}

        输出结果为：

        以下实例我们直接初始化数组元素： 

var sites:string[] = new Array("Google","Runoob","Taobao","Facebook") 
 
for(var i = 0;i<sites.length;i++) { 
        console.log(sites[i]) 
}

        编译以上代码，得到以下 JavaScript 代码：

var sites = new Array("Google", "Runoob", "Taobao", "Facebook");
for (var i = 0; i < sites.length; i++) {
        console.log(sites[i]);
}

        输出结果为：

3、数组解构

        我们也可以把数组元素赋值给变量，如下所示：

var arr:number[] = [12,13] 
var[x,y] = arr // 将数组的两个元素赋值给变量 x 和 y
console.log(x) 
console.log(y)

         编译以上代码，得到以下 JavaScript 代码：

var arr = [12, 13];
var x = arr[0], y = arr[1]; // 将数组的两个元素赋值给变量 x 和 y
console.log(x);
console.log(y);

        输出结果为：

3、数组迭代

        我们可以使用 for 语句来循环输出数组的各个元素：

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

         编译以上代码，得到以下 JavaScript 代码：

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

        输出结果为：

4、多维数组

        一个数组的元素可以是另外一个数组，这样就构成了多维数组（Multi-dimensional Array）。

最简单的多维数组是二维数组，定义方式如下：

var arr_name:datatype[][]=[ [val1,val2,val3],[v1,v2,v3] ]

         定义一个二维数组，每一个维度的数组有三个元素。

var multi:number[][] = [[1,2,3],[23,24,25]]  
console.log(multi[0][0]) 
console.log(multi[0][1]) 
console.log(multi[0][2]) 
console.log(multi[1][0]) 
console.log(multi[1][1]) 
console.log(multi[1][2])

         编译以上代码，得到以下 JavaScript 代码：

var multi = [[1, 2, 3], [23, 24, 25]];
console.log(multi[0][0]);
console.log(multi[0][1]);
console.log(multi[0][2]);
console.log(multi[1][0]);
console.log(multi[1][1]);
console.log(multi[1][2]);

        输出结果为：

4、数组在函数中的使用 

4.1、作为参数传递给函数
var sites:string[] = new Array("Google","Runoob","Taobao","Facebook") 
 
function disp(arr_sites:string[]) {
        for(var i = 0;i<arr_sites.length;i++) { 
                console.log(arr_sites[i]) 
        }  
}  
disp(sites);

        编译以上代码，得到以下 JavaScript 代码：

var sites = new Array("Google", "Runoob", "Taobao", "Facebook");
function disp(arr_sites) {
        for (var i = 0; i < arr_sites.length; i++) {
                console.log(arr_sites[i]);
        }
}
disp(sites);

        输出结果为：

4.2、作为函数的返回值 
function disp():string[] { 
        return new Array("Google", "Runoob", "Taobao", "Facebook");
} 
 
var sites:string[] = disp() 
for(var i in sites) { 
        console.log(sites[i]) 
}

        编译以上代码，得到以下 JavaScript 代码：

function disp() {
        return new Array("Google", "Runoob", "Taobao", "Facebook");
}
var sites = disp();
for (var i in sites) {
        console.log(sites[i]);
}

        输出结果为：

5、数组方法

        下面列出了一些常用的数组方法

1.concat()

        连接两个或更多的数组，并返回结果。

var alpha = ["a", "b", "c"]; 
var numeric = [1, 2, 3];

var alphaNumeric = alpha.concat(numeric); 
console.log("alphaNumeric : " + alphaNumeric );    // a,b,c,1,2,3

2.every()

        检测数值元素的每个元素是否都符合条件。

function isBigEnough(element, index, array) { 
        return (element >= 10); 
} 
        
var passed = [12, 5, 8, 130, 44].every(isBigEnough); 
console.log("Test Value : " + passed ); // false

3.filter()

        检测数值元素，并返回符合条件所有元素的数组。

function isBigEnough(element, index, array) { 
   return (element >= 10); 
} 
          
var passed = [12, 5, 8, 130, 44].filter(isBigEnough); 
console.log("Test Value : " + passed ); // 12,130,44

4.forEach()

        数组每个元素都执行一次回调函数。

let num = [7, 8, 9];
num.forEach(function (value) {
    console.log(value);
});

        编译成 JavaScript 代码：

var num = [7, 8, 9];
num.forEach(function (value) {
    console.log(value);  // 7   8   9
});

5.indexOf()

        搜索数组中的元素，并返回它所在的位置。如果搜索不到，返回值 -1，代表没有此项。

var index = [12, 5, 8, 130, 44].indexOf(8); 
console.log("index is : " + index );  // 2

6.join()

        把数组的所有元素放入一个字符串。

var arr = new Array("Google","Runoob","Taobao"); 
          
var str = arr.join(); 
console.log("str : " + str );  // Google,Runoob,Taobao
          
var str = arr.join(", "); 
console.log("str : " + str );  // Google, Runoob, Taobao
          
var str = arr.join(" + "); 
console.log("str : " + str );  // Google + Runoob + Taobao

7.lastIndexOf()

        返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。

var index = [12, 5, 8, 130, 44].lastIndexOf(8); 
console.log("index is : " + index );  // 2

8.map()

        通过指定函数处理数组的每个元素，并返回处理后的数组。

var numbers = [1, 4, 9]; 
var roots = numbers.map(Math.sqrt); 
console.log("roots is : " + roots );  // 1,2,3

9.pop()

        删除数组的最后一个元素并返回删除的元素。

var numbers = [1, 4, 9]; 
          
var element = numbers.pop(); 
console.log("element is : " + element );  // 9
          
var element = numbers.pop(); 
console.log("element is : " + element );  // 4

10.push()

        向数组的末尾添加一个或更多元素，并返回新的长度。

var numbers = new Array(1, 4, 9); 
var length = numbers.push(10); 
console.log("new numbers is : " + numbers );  // 1,4,9,10 
length = numbers.push(20); 
console.log("new numbers is : " + numbers );  // 1,4,9,10,20

11.reduce()

        将数组元素计算为一个值（从左到右）。

var total = [0, 1, 2, 3].reduce(function(a, b){ return a + b; }); 
console.log("total is : " + total );  // 6

12.reduceRight()

        将数组元素计算为一个值（从右到左）。

var total = [0, 1, 2, 3].reduceRight(function(a, b){ return a + b; }); 
console.log("total is : " + total );  // 6

13.reverse()

        反转数组的元素顺序。

var arr = [0, 1, 2, 3].reverse(); 
console.log("Reversed array is : " + arr );  // 3,2,1,0

14.shift()

        删除并返回数组的第一个元素。

var arr = [10, 1, 2, 3].shift(); 
console.log("Shifted value is : " + arr );  // 10

15.slice()

        选取数组的的一部分，并返回一个新数组。

var arr = ["orange", "mango", "banana", "sugar", "tea"]; 
console.log("arr.slice( 1, 2) : " + arr.slice( 1, 2) );  // mango
console.log("arr.slice( 1, 3) : " + arr.slice( 1, 3) );  // mango,banana

16.some()

        检测数组元素中是否有元素符合指定条件。

function isBigEnough(element, index, array) { 
   return (element >= 10); 
          
} 
          
var retval = [2, 5, 8, 1, 4].some(isBigEnough);
console.log("Returned value is : " + retval );  // false
          
var retval = [12, 5, 8, 1, 4].some(isBigEnough); 
console.log("Returned value is : " + retval );  // true

17.sort()

        对数组的元素进行排序。

var arr = new Array("orange", "mango", "banana", "sugar"); 
var sorted = arr.sort(); 
console.log("Returned string is : " + sorted );  // banana,mango,orange,sugar

18.splice()

        从数组中添加或删除元素。

var arr = ["orange", "mango", "banana", "sugar", "tea"];  
var removed = arr.splice(2, 0, "water");  
console.log("After adding 1: " + arr );    // orange,mango,water,banana,sugar,tea 
console.log("removed is: " + removed); 
          
removed = arr.splice(3, 1);  
console.log("After removing 1: " + arr );  // orange,mango,water,sugar,tea 
console.log("removed is: " + removed);  // banana

19.toString()

        把数组转换为字符串，并返回结果。

var arr = new Array("orange", "mango", "banana", "sugar");         
var str = arr.toString(); 
console.log("Returned string is : " + str );  // orange,mango,banana,sugar

20.unshift()

        向数组的开头添加一个或更多元素，并返回新的长度。

var arr = new Array("orange", "mango", "banana", "sugar"); 
var length = arr.unshift("water"); 
console.log("Returned array is : " + arr );  // water,orange,mango,banana,sugar 
console.log("Length of the array is : " + length ); // 5

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【整理总结】几十个程序员硬核工具

【整理总结】几十个程序员硬核工具

在我认识的所有程序员里&#xff0c;每个人几乎都有专属于自己的常用工具和相关资源&#xff0c;今天给大家奉上数几十个程序员硬核工具&#xff0c;我相信这里总有一款工具是属于你的&#xff01; 程序员生产力工具大全如下&#xff1a; Idea-Intellij IDEA (java 编程语言 开…
阅读更多...
视频智能分析/云存储平台EasyCVR接入海康SDK，通道名称未自动更新该如何解决？

视频智能分析/云存储平台EasyCVR接入海康SDK，通道名称未自动更新该如何解决？

视频监控GB28181平台EasyCVR能在复杂的网络环境中&#xff0c;将分散的各类视频资源进行统一汇聚、整合、集中管理&#xff0c;在视频监控播放上&#xff0c;TSINGSEE青犀视频安防监控汇聚平台可支持1、4、9、16个画面窗口播放&#xff0c;可同时播放多路视频流&#xff0c;也能…
阅读更多...
Vue3——element-plus表格组件怎样得到当前行的id

Vue3——element-plus表格组件怎样得到当前行的id

实现方法&#xff1a; <el-table-column property"address" label"操作" show-overflow-tooltip header-align"center" v-slot"scope"><el-button type"success" click"editBtn(scope.row.id)">编辑…
阅读更多...
系列三十三、如何将一个springboot jar做成批处理文件

系列三十三、如何将一个springboot jar做成批处理文件

一、将一个springboot jar做成批处理文件 1.1、需求 最近在写【Spring Cloud Alibaba】的系列文章&#xff0c;其中有一个部分是安装Sentinel控制台&#xff0c;使用命令执行完全没有问题&#xff0c;但是命令太长了&#xff0c;每次启动时都要找笔记&#xff0c;然后粘贴到命…
阅读更多...
NSSCTF hate eat snake

NSSCTF hate eat snake

开启其环境: 将网页另存本地&#xff0c;搜索网页和snake.js是否包含flag文本&#xff0c;没有发现。 审计snake.js。 第7行定义了游戏的速度this.speed this.oldSpeed speed || 10 ; 全文搜索speed&#xff0c;在第237行发现自增代码this.speed; 注释或者删除自增代码&am…
阅读更多...
从技术角度分析：HTTP 和 HTTPS 有何不同

从技术角度分析：HTTP 和 HTTPS 有何不同

网络安全问题正变得日益重要&#xff0c;而 HTTP 与 HTTPS 对用户数据的保护十分关键。本文将深入探讨这两种协议的特点、工作原理&#xff0c;以及保证数据安全的 HTTPS 为何变得至关重要。 认识 HTTP 与 HTTPS HTTP 的工作原理 HTTP&#xff0c;全称超文本传输协议&#xf…
阅读更多...
【EI会议征稿通知】第十届先进制造技术与应用材料国际学术会议（ICAMMT 2024）

【EI会议征稿通知】第十届先进制造技术与应用材料国际学术会议（ICAMMT 2024）

第十届先进制造技术与应用材料国际学术会议&#xff08;ICAMMT 2024&#xff09; The 10th International Conference on Applied Materials and Manufacturing Technology 至今ICAMMT已连续举办九届&#xff0c;会议先后在三亚、杭州、清远等城市成功召开。每一届最终征集收…
阅读更多...
高校电力能耗监测精细化管理系统，提升能源利用效率的利器

高校电力能耗监测精细化管理系统，提升能源利用效率的利器

电力是高校不可离开的重要能源&#xff0c;为学校相关管理人员提供在线用能查询统计等服务。通过对学校照明用电、空调用电等数据的采集、监控、分析&#xff0c;为学校电能管理制定合理的能源政策提供参考。同时&#xff0c;也可以培养学生的节能意识&#xff0c;学校后勤电力…
阅读更多...
Servlet 3.0的异步处理

Servlet 3.0的异步处理

1、传统Servlet处理 Web容器会为每个请求分配一个线程&#xff0c;默认情况下&#xff0c;响应完成前&#xff0c;该线程占用的资源都不会被释放。若有些请求需要长时间(例如长处理时间运算、等待某个资源)&#xff0c;就会长时间占用线程所需资源&#xff0c;若这类请求很多&…
阅读更多...
液冷数据中心生态建设启动：浪潮信息力推绿色算力产业发展

液冷数据中心生态建设启动：浪潮信息力推绿色算力产业发展

近日&#xff0c;由中国电子技术标准化研究院主办的“节能环保低碳 我们在行动”第二届电子信息行业绿色环保大会在江苏无锡盛大举行。会上&#xff0c;中国电子技术标准化研究院、浪潮信息等五家发起单位共同启动“液冷数据中心生态建设”&#xff0c;浪潮信息服务器产品线总经…
阅读更多...
Echarts—词云库（echarts-wordcloud）使用

Echarts—词云库（echarts-wordcloud）使用

echarts-wordcloud是基于echarts的一个插件&#xff0c;所以我们要首先安装echarts包&#xff0c;然后再安装echarts-wordcloud的包&#xff0c;这里我的练习项目安装的版本&#xff1b;当然&#xff0c;你可以随意安装你需要的版本&#xff1b; “echarts”: “^5.3.3”, “ec…
阅读更多...
基于ssm学生档案管理系统论文

基于ssm学生档案管理系统论文

目 录 目 录 I 摘 要 III ABSTRACT IV 1 绪论 1 1.1 课题背景 1 1.2 研究现状 1 1.3 研究内容 2 2 系统开发环境 3 2.1 JSP技术 3 2.2 JAVA技术 3 2.3 MYSQL数据库 3 2.4 B/S结构 4 2.5 SSM框架技术 4 3 系统分析 5 3.1 可行性分析 5 3.1.1 技术可行性 5 3.1.2 操作可行性 5 3…
阅读更多...
openGauss 5.0.0企业版一主一备安装部署

openGauss 5.0.0企业版一主一备安装部署

目录 一、环境准备 1. 华为云购买两台ECS 1.1查看openEuler版本&#xff0c;操作系统版本及CPU的制式是基础 1.2查看CPU模式 1.3操作系统环境准备 2. 集群配置XML文件准备&#xff1a; 2.1集群参数配置&#xff1a; 2.2主机参数配置&#xff1a; 2.3备机参数配置&…
阅读更多...
代码随想录算法训练营第五十八天|739. 每日温度、496.下一个更大元素I

代码随想录算法训练营第五十八天|739. 每日温度、496.下一个更大元素I

代码随想录 (programmercarl.com) 739. 每日温度 栈里面存放的是元素的下标&#xff0c;确保栈里面的下标对应的元素是单调递增的。 如果栈里面存放的是元素的话&#xff0c;就没有办法定位到下标值&#xff0c;无法计算出距离&#xff0c;所以直接就存入下标。 class Solut…
阅读更多...
Springboot配置http-Only

Springboot配置http-Only

项目框架 jdk1.8、springboot2.5.10 情况一 项目中未使用&#xff08;权限认证框架&#xff1a;Sa-Token&#xff09; application.yml文件内增加配置 server.servlet.session.cookie.http-onlytrueserver.servlet.session.cookie.securetrue (此条配置建议也加上) 情况二…
阅读更多...
AOP(面向切面编程)基于注解方式配置

AOP(面向切面编程)基于注解方式配置

不会注解的小伙伴看这里哦&#xff1a;Spring常用注解&#xff01;&#xff01;&#xff01;-CSDN博客 pom.xml <dependencies><dependency><groupId>org.springframework</groupId><artifactId>spring-context</artifactId><version&g…
阅读更多...
ssm基于WEB的人事档案管理系统的设计与实现论文

ssm基于WEB的人事档案管理系统的设计与实现论文

摘 要 计算机网络发展到现在已经好几十年了&#xff0c;在理论上面已经有了很丰富的基础&#xff0c;并且在现实生活中也到处都在使用&#xff0c;可以说&#xff0c;经过几十年的发展&#xff0c;互联网技术已经把地域信息的隔阂给消除了&#xff0c;让整个世界都可以即时通话…
阅读更多...
华为 1+X《网络系统建设与运维（初级）》 认证实验上机模拟试题

华为 1+X《网络系统建设与运维（初级）》 认证实验上机模拟试题

华为 1X《网络系统建设与运维&#xff08;初级&#xff09;》认证实验上机模拟试题 一、考试背景二、考试说明2.1考试分数说明2.2考试要求2.3考试环境介绍2.4启动考试环境2.5保存答案 三、考试正文3.1考试内容3.1.1任务 1&#xff1a;设备连接3.1.2任务 2&#xff1a;设备命名3…
阅读更多...
Java中的Queue

Java中的Queue

Java中的Queue 在Java中&#xff0c;Queue 接口代表了一个队列数据结构&#xff0c;它按照先进先出&#xff08;First In, First Out&#xff0c;FIFO&#xff09;的原则进行元素的操作。Queue 接口扩展自 Collection 接口&#xff0c;定义了一系列方法&#xff0c;包括添加、删…
阅读更多...
[AutoSar]DaVinci Developer 命名规范

[AutoSar]DaVinci Developer 命名规范

目录 关键词平台说明一、背景二、Component命名约定2.1Component Type Composition&#xff08;CtCo&#xff09;2.2Component Type Application&#xff08; CtAp&#xff09;2.3Component Type SensorActuator&#xff08;CtSa&#xff09;2.4Component Type Complex Driver&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023