数组对象是使用单独的变量名来存储一系列的值。数组非常常用。


Array 对象

数组解构

数组迭代

多维数组

数组在函数中的使用

数组方法


假如你有一组数据,存在单独变量如下所示:

var s1="CSDN";
var s2="QQ";
var s3="WeChat";

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

var sites:string[];
ss = ["CSDN","QQ","WeChat"]

TypeScript 声明数组的语法格式如下所示:

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

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

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

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

实例

创建一个 number 类型的数组:

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

整个数组结构如下所示:

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

var sites:string[];
sites = ["CSDN","QQ","WEchat"]
console.log(sites[0]);
console.log(sites[1]);

输出结果为:

CSDN
QQ

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

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

输出结果为:

1
2
3
4 

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

输出结果为:

0
2
4
6

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

var sites:string[] = new Array("CSDN","QQ","WeChat","Cocos") for(var i = 0;i<sites.length;i++) { console.log(sites[i])
}

输出结果为:

CSDN
QQ
WeChat
Cocos

数组解构

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

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

输出结果为:

12
13

数组迭代

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

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

输出结果为:

1001
1002
1003
1004

多维数组

一个数组的元素可以是另外一个数组,这样就构成了多维数组(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])

输出结果为:

1
2
3
23
24
25

数组在函数中的使用

作为参数传递给函数

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

输出结果为:

Google
Runoob
Taobao
Facebook

作为函数的返回值

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

输出结果为:

Google
Runoob
Taobao
Facebook

数组方法

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

序号 方法 & 描述 实例
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,Taobaovar str = arr.join(", ");
console.log("str : " + str );  // Google, Runoob, Taobaovar 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 );  // 9var 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 );  // falsevar 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

【TypeScript入门】TypeScript入门篇——数组相关推荐

  1. TypeScript超详细入门教程(上)

    TypeScript超详细入门教程(上) 01 开篇词:Hello~TypeScript 01 开篇词:Hello~TypeScript 更新时间:2019-10-30 13:49:46 既然我已经踏 ...

  2. LAYA和TypeScript制作H5入门——页面制作

    上一篇: LAYA和TypeScript制作H5入门--准备工作 一般情况下,一个H5是由多个相互关联的ui页面串联组成.遵循的大致逻辑一般是加载页面,开始页面,内容页面和结束页面.这些界面承担了用户 ...

  3. 用TypeScript来写React官方入门教程 .tsx后缀文件,同时入门typescript和React

    用TypeScript来写React官方入门教程 .tsx后缀文件,同时入门typescript和React 1. 项目说明: 这是React官网上那个下井字棋的入门教程,但是我把它换了typesci ...

  4. React入门看这篇就够了

    2019独角兽企业重金招聘Python工程师标准>>> 摘要: 很多值得了解的细节. 原文:React入门看这篇就够了 作者:Random Fundebug经授权转载,版权归原作者所 ...

  5. Java快速入门-01-基础篇

    Java快速入门-01-基础篇 如果基础不好或者想学的很细,请参看:菜鸟教程-JAVA 本笔记适合快速学习,文章后面也会包含一些常见面试问题,记住快捷键操作,一些内容我就不转载了,直接附上链接,嘻嘻 ...

  6. ElasticSearch入门 第五篇:使用C#查询文档

    网址:http://www.cnblogs.com/ljhdo/p/4550135.html 这是ElasticSearch 2.4 版本系列的第五篇: ElasticSearch入门 第一篇:Win ...

  7. Python语言入门这一篇就够了-学习笔记(十二万字)

    Python语言入门这一篇就够了-学习笔记(十二万字) 友情提示:先关注收藏,再查看,12万字保姆级 Python语言从入门到精通教程. 文章目录 Python语言入门这一篇就够了-学习笔记(十二万字 ...

  8. ESP32-C3入门教程 基础篇(八、NVS — 非易失性存储库的使用)

    前面的7节课把开发板上基本的外设都测试过一边,接下来马上就要进入wifi和蓝牙应用的测试了 在此之前,还需要把掉电数据保存的功能给实现,在STM32中,可以使用内部的flash或者有些自带的EEPRO ...

  9. web快速入门之基础篇-js:3_3、简易购物车

    目录 一.前言 二.js代码实例演示 1.简易购物车01_数量变化 (1)实例代码 (2)效果演示 2.简易购物车02_数量价格同步 (1)实例代码 (2)效果演示 一.前言 上一篇介绍了DHTML对 ...

  10. Floodlight 入门 之 起步篇 - 如何处理PacketIN消息

    Floodlight 入门 之 起步篇 - 如何处理PacketIN消息 2017-3-2 小论文写不出来好纠结,今天还在做Floodlight开发,好烦躁.这边博文介绍如何处理PacketIN消息, ...

最新文章

  1. 链表问题14——在单链表种删除指定值的节点(方法二)
  2. mysql行格式化_MySQL数据格式化语句
  3. 如何写好数据分析师简历
  4. 样本方差除以n-1而不是n的原因
  5. 用Kettle的一套流程完成对整个数据库迁移 费元星
  6. VC++ AfxBeginThread 与 CreateThread 的区别
  7. 在WildFly中运行多个standalone模式的实例
  8. CentOS7解决配置静态IP还是会出现动态IP地址的问题
  9. 34篇Java基础总结博客陪博主入门Java
  10. mysql 复制表耗时_聊一下mysql的表复制
  11. 世界上最诡异的画,到底为何让无数人闻风丧胆?
  12. 需求澄清_澄清字符串的格式!
  13. 定期存款转消费卡项目需求书
  14. 快速学懂pandas
  15. 【读书笔记】企业IT架构转型之道 阿里巴巴中台战略思想和架构实战
  16. 小米路由器刷 linux,小米路由器刷入Padavan系统
  17. LFS详细搭建指南——适合初学者使用
  18. 10个提供Logo设计灵感的创意网站
  19. OJ 2306 Problem C Banana
  20. 筱筱笔记:npm发包流程

热门文章

  1. 基于android小区智能管理,基于Android的智能小区停车场设计
  2. python3.7 匹配淘口令
  3. 黑板粉笔字教师节PPT模板
  4. 一款好看404页面|HTML-404模板
  5. IGARSS2019-项目实战总结-keras
  6. springboot简单项目搭建遇到的错误(继承thymeleaf)--跳转页面失败(不应用ModelAndView对象,采取配置)
  7. 【豆瓣达人总结】做爱做的事,看有趣的人
  8. java枚举类型初始化
  9. C# 计算每年年初与年末的周数 (iso 8601)
  10. 游侠原创:安全狗“服云”深度评测!