TypeScript Array(数组)

       

目录

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.mfbz.cn/a/290652.html

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

相关文章

Java中的IO与NIO篇----第三篇

系列文章目录 文章目录 系列文章目录前言一、信号驱动 IO 模型二、异步 IO 模型三、JAVA NIO四、NIO 的缓冲区前言 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站,这篇文章男女通用,看懂了就去分享给你的码吧。 一、…

P1423 小玉在游泳python

s float(input()) sum 0 step 0 meter 2.0 while sum < s:sum metermeter 0.98 * meterstep 1 print(step)

三、C语言中的分支与循环—switch语句(4)分支结构 完

本章分支结构的学习内容如下&#xff1a; 三、C语言中的分支与循环—if语句 (1) 三、C语言中的分支与循环—关系操作符 (2) 三、C语言中的分支与循环—条件操作符 与逻辑操作符(3) 三、C语言中的分支与循环—switch语句&#xff08;4&#xff09;分支结构 完 本章循环结构的…

linux创建pyspark虚拟环境

一、创建虚拟环境 conda create -n test python3.6.6 二、注意添加镜像 vi /root/.condarc channels:- http://mirrors.tuna.tsinghua.edu.cn/anaconda/pkgs/main/- http://mirrors.tuna.tsinghua.edu.cn/anaconda/pkgs/free/- http://mirrors.ustc.edu.cn/anaconda/pkgs/ma…

jmeter使用心得(一)

jmeter作为接口测试的常用工具之一&#xff0c;在我们的测试中经常会用到&#xff0c;往期的文章中&#xff0c;我们也分享过jmeter的各种功能和用法&#xff0c;基本覆盖了方方面面&#xff0c;可以满足各种接口测试的需求。但实际测试中我们也会发现&#xff0c;jmeter这么强…

测试管理-缺陷管理工具安装

前言&#xff1a; 项目生命周期里面&#xff0c;开发软件后&#xff0c;需要进行正规的测试&#xff0c;测试除了需要编写测试用例和写测试总结外&#xff0c;还需要进行bug的闭环控制&#xff0c;方便追踪。之前用过惠普的QC系统&#xff0c;这个是收费的&#xff0c;专业做缺…

【网络】网络层IP地址和IP数据报的格式

&#x1f984; 个人主页——&#x1f390;开着拖拉机回家_Linux,大数据运维-CSDN博客 &#x1f390;✨&#x1f341; &#x1fa81;&#x1f341;&#x1fa81;&#x1f341;&#x1fa81;&#x1f341;&#x1fa81;&#x1f341; &#x1fa81;&#x1f341;&#x1fa81;&am…

图像分割 分水岭法 watershed

版权声明&#xff1a;本文为博主原创文章&#xff0c;转载请在显著位置标明本文出处以及作者网名&#xff0c;未经作者允许不得用于商业目的。 本文的C#版本请访问&#xff1a;图像分割 分水岭法 watershed&#xff08;C#&#xff09;-CSDN博客 Watershed算法是一种图像处理算…

区域HIS系统源码,二级医院、专科医院his系统源码,经扩展后能够应用于医联体/医共体

二级医院、专科医院his系统源码&#xff0c;java语言开发 基于云计算技术的B/S架构的HIS系统&#xff0c;为医疗机构提供标准化的、信息化的、可共享的医疗信息管理系统&#xff0c;实现医患事务管理和临床诊疗管理等标准医疗管理信息系统的功能。 系统利用云计算平台的技术优…

宏集PC Runtime软件助推食品行业生产线数字化革新

一、前言 近年来&#xff0c;中国食品行业发展迅速且灵活多变&#xff0c;在当前经济下行的情形下&#xff0c;食品行业正面临着日益激烈的竞争&#xff0c;导致企业利润下降。 为了保持企业市场竞争力&#xff0c;国内某top10食品企业采用宏集SCADA解决方案—PC Runtime软件…

【linux】日志管理和分析

一、概述 在Linux系统的管理和运维中&#xff0c;日志文件起到至关重要的作用。它们记录了系统运行过程中的各种事件&#xff0c;包括系统故障、性能数据和安全事件。 二、 日志的作用和分类 日志的作用 日志文件记载了系统的生命线&#xff0c;利用它们可以&#xff1a; 1…

Linux操作系统基础(08):Linux的用户权限

1. 用户权限是什么 在Linux中&#xff0c;用户权限是指用户对文件、目录或者系统资源的访问权限&#xff0c;用户权限决定了用户可以执行哪些操作&#xff0c;比如读取、写入、执行等等&#xff0c;用户权限与文件权限紧密不可分。 用户权限可以分为三种&#xff1a; 读取权限…

青蛙目标检测数据集VOC格式600张

青蛙&#xff0c;一种两栖动物&#xff0c;以其独特的形态和习性&#xff0c;成为了大自然中的一道亮丽风景。 青蛙的外观非常特别&#xff0c;绿色的皮肤上布满了大小不一的斑点&#xff0c;既有助于它们在草丛中隐身&#xff0c;又能够有效地迷惑天敌。头部扁平&#xff0c;…

珠海盈致浅析MES生产管理系统的优点

MES系统是用于管理和控制制造过程的信息化系统.它具有许多优点&#xff1a; 1. 生产过程可视化:MES系统提供实时的生产过程监控和数据收集,使管理人员能够清晰地了解生产线上的各个环节,包括设备状态、生产进度、质量指标等.这使得管理人员能够作出准确的决策并快速响应变化. 2…

实现文本 内容展开 / 收起

<template><el-table :data"tableData" style"width: 100%" height"250"><el-table-columnfixedprop"date"label"日期"width"150"></el-table-column><el-table-columnprop"name…

聚丙烯腈,到预测期结束时将达到36亿美元的市场规模

聚丙烯腈 (PAN) 是一种合成聚合物&#xff0c;广泛用于各种应用&#xff0c;包括纺织品、碳纤维生产和水处理。近年来&#xff0c;受航空航天、汽车和建筑行业对碳纤维增强复合材料需求不断增长的推动&#xff0c;全球 PAN 市场稳步增长。 全球 PAN 市场预计从 2020 年到 2025 …

HttpClient库与代理IP在爬虫程序中的应用

目录 前言 一、HttpClient库的基本使用方法 二、代理IP的使用方法 三、代理IP池的使用方法 四、总结 前言 在编写爬虫程序时&#xff0c;我们经常会使用HttpClient库来发送HTTP请求&#xff0c;获取网页内容。然而&#xff0c;有些网站可能会对频繁的请求进行限制&#x…

CMake入门教程【核心篇】包含目录(include_directories)

&#x1f608;「CSDN主页」&#xff1a;传送门 &#x1f608;「Bilibil首页」&#xff1a;传送门 &#x1f608;「本专栏容」&#xff1a;CMake入门教程 &#x1f608;「动动你的小手」&#xff1a;点赞&#x1f44d;收藏⭐️评论&#x1f4dd; 文章目录 1. 基本用法2. 添加单个…

【SpringBoot开发】之商城项目案例(订单及订单项生成)

&#x1f389;&#x1f389;欢迎来到我的CSDN主页&#xff01;&#x1f389;&#x1f389; &#x1f3c5;我是君易--鑨&#xff0c;一个在CSDN分享笔记的博主。&#x1f4da;&#x1f4da; &#x1f31f;推荐给大家我的博客专栏《SpringBoot开发之商城项目系列》。&#x1f3af…

鸿蒙系列--装饰器

一、基础UI组件结构 每个UI组件需要定义为Component struct对象&#xff0c;其内部必须包含一个且只能包含一个build(){}函数&#xff0c;用于绘制UI&#xff1b;struct之内、build()函数之外的地方用于存放数据。 二、基本UI装饰器 Entry 装饰struct&#xff0c;页面的入口…