TypeScript Array(数组)

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

数组非常常用。

假如你有一组数据（例如：网站名字），存在单独变量如下所示：

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 类型，在初始化时根据第一个元素的类型来推断数组的类型。

实例

创建一个 number 类型的数组：

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

整个数组结构如下所示：

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

TypeScript

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

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

JavaScript

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

输出结果为：

Google

Runoob

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

TypeScript

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

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

JavaScript

var nums = [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 对象的构造函数接受以下两种值：

  • 表示数组大小的数值。
  • 初始化的数组列表，元素使用逗号分隔值。

实例

指定数组初始化大小：

TypeScript

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 代码：

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

输出结果为：

0

2

4

6

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

TypeScript

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

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

JavaScript

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

输出结果为：

Google

Runoob

Taobao

Facebook

数组解构

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

TypeScript

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

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

JavaScript

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

输出结果为：

12

13

数组迭代

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

TypeScript

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

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

JavaScript

var j; var nums = [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] ]

实例

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

TypeScript

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 代码：

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

输出结果为：

1

2

3

23

24

25

数组在函数中的使用

作为参数传递给函数

TypeScript

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 代码：

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

输出结果为：

Google

Runoob

Taobao

Facebook

作为函数的返回值

TypeScript

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

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

JavaScript

function disp() { return new Array("Google", "Runoob", "Taobao", "Facebook"); } var sites = 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,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

TypeScript Array(数组)的更多相关文章

  1. 了解PHP中的Array数组和foreach

    1. 了解数组 PHP 中的数组实际上是一个有序映射.映射是一种把 values 关联到 keys 的类型.详细的解释可参见:PHP.net中的Array数组    . 2.例子:一般的数组 这里,我 ...

  2. JavaScript的json和Array及Array数组的使用方法

    1.关于json JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于ECMAScript的一个子集.也可以称为数据集和数组类似,能够存数据! //Ar ...

  3. iOS -Swift 3.0 -Array(数组与可变数组相关属性及用法)

    // // ViewController.swift // Swift-Array // // Created by luorende on 16/9/12. // Copyright © 2016年 ...

  4. 多动手试试，其实List类型的变量在页面上取到的值可以直接赋值给一个js的Array数组变量

    多动手试试,其实List类型的变量在页面上取到的值可以直接赋值给一个js的Array数组变量,并且数组变量可以直接取到每一个元素var array1 = '<%=yearList =>'; ...

  5. c++中的array数组和vector数组

    我觉得实验一下会记得比较牢,话不多直接上代码. 下面是array数组,感觉用的不多. //cpp 风格数组 array #include <iostream> #include <a ...

  6. Java Script基础（八） Array数组对象

    一.Array数组 JavaScript中的数组也是具有相同数据类型的一个或者多个值得集合.用法和Java中的数组类似. Array对象的常用属性和方法: 属性: length:获取数组的长度: 方法 ...

  7. JavaScript string array 数组

    Array类可以如下定义: var aValues = new Array(); 如果预先知道数组的长度,可以用参数传递长度 var aValues = new Array(20); -------- ...

  8. php中foreach()函数与Array数组经典案例讲解

    //php中foreach()函数与Array数组经典案例讲解 function getVal($v) { return $v; //可以加任意检查代码,列入要求$v必须是数字,或过滤非法字符串等.} ...

  9. Javascript进阶篇——( JavaScript内置对象---下)--Array数组对象---笔记整理

    Array 数组对象数组对象是一个对象的集合,里边的对象可以是不同类型的.数组的每一个成员对象都有一个“下标”,用来表示它在数组中的位置,是从零开始的数组定义的方法: 1. 定义了一个空数组: var ...

  10. js Array数组的使用

    js Array数组的使用   Array是javascript中的一个事先定义好的对象(也可以称作一个类),可以直接使用 创建Array对象 var array=new Array(): 创建指定元 ...

随机推荐

  1. mysql误删数据恢复

    1.查看binlog是否开启# log_bin是ON,就说明打开了 OFF就是关闭状态,以下操作,只有为 ON 时有效.show variables like 'log_bin';2.找到binlog ...

  2. ETCD 实现服务发现讲解

    租约:具有时间有效期,键绑定到租约后,当租约到期失效,绑定到的租约的键也会被删除. 创建租约 etcdctl lease grant 600 lease 694d81f509b7940a grante ...

  3. wendows 批量修改文件后缀（含递归下级）

    for /r %%a in (*.jpg)do ren "%%a" "%%~na.png" //-- or :for /r %a in (*.jpg)do re ...

  4. Supervisor进程守护监控部署

    前言:Supervisor在百度百科上给的定义是超级用户,监管员.Supervisor是一个进程管理工具, 当进程中断的时候Supervisor能自动重新启动该进程.可以运行在各类Unix机器上,su ...

  5. wampServer本地php环境配置笔记

    红色的为关键步骤,其余可以不看. 一:安装时 , 报 : 1.应用程序无法正常启动0xc0000007b 清单机确定关闭应用程序 : 2. 缺少XXX.dll文件 解决方法都是: C:\Windows ...

  6. WampServer3.0服务器端开启ssl认证后重启Apache失败，解决办法

    最近项目中需要访问网站的 https 地址,于是进行部署,什么事情都是想起来简单,做起来难,想着一天就能搞定的事儿,结果前后折腾了三天. 现在把部署的经历记录下来,希望对朋友们有所帮助. 1.在西部数 ...

  7. 下载接口时出现：Try to run this command from the system terminal. Make sure that you use the correct version of 'pip' installed for your Python interpreter located at 'D:\python\demo\venv\Scripts\...的错误

    下载接口时出现:Try to run this command from the system terminal. Make sure that you use the correct version ...

  8. REPLACE，TRANSLATE

    REPLACE 1.语法 replace(string,from_str,to_str) 2.说明: 针对string,将from_str中的字符替换为to_str中字符. 3.示例: /**说明:( ...

  9. 20203412马畅若《Python程序设计》实验四Python综合实践报告

    作为初次接触程序设计的我在看到云班课中用python进行游戏编程后感到很有意思,所以我决定这次做一个最经典的小鸟管道游戏.虽然网上许多大佬都说这是最基础的一项游戏编码,但我还是用了许多时间去做成这个游 ...

  10. Git相关、Gitee多人协同开发

    Git相关 1.介绍 ​ 是一个具有版本控制的软件,控制开发的项目代码,具有集群化.多分支的功能 2.对于程序员的作用 协同开发 解决代码合并过程中冲突 代码版本管理 3.git 与 svn 比较 ​ ...