第十一节TypeScript Array（数组）

1、描述

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

比如，你现在有一组数据，存单独变量如下：

var data1="Android";
var data2="Java";
var data3="Harmony";

那如果有10、100个这种变量呢，那这种就不实用了，这时我们可以使用数组来解决：

var array:string[]; // 声明
array= ["Android","Java","Harmony" ];

现在看起来简洁多了。

2、语法：

var array_name[:datatype];        //声明 
array_name = [val1,val2,valn..];   //初始化
或者直接在声明时初始化
var array_name[:datatype] = [val1,val2…valn];

实例：

var array:string[]; // 声明
array= ["Android","Java","Harmony" ];
console.log(array[0]);
console.log(array[1]);

执行结果：

Android

Java

3、Array对象

同样我们也可以使用array对象来创建数组。

Array对象的构造函数接受以下两种值：

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

实例（指定数组的初始化大小）（TypeScript）：

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

使用tsc编译为JavaScript代码：

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

执行结果：
0

2

4

6

实例（直接初始化数组元素）（TypeScript）：

var arr_list: string[] = new Array("Android","Java","Harmony");
for (var i = 0; i < arr_list.length; i++) {
console.log(arr_list[i]);
}

使用tsc编译为JavaScript后代码：

var arr_list = new Array("Android","Java","Harmony");
for (var i = 0; i < arr_list.length; i++) {
console.log(arr_list[i]);
}

执行结果：

Android

Java

Harmony

4、数组解构

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

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

使用tsc编译为JavaScript后代码：

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

执行结果：

12

13

5、数组迭代

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

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

使用tsc编译为JavaScript后代码......

执行结果：

1001

1002

1003

1004

6、数组方法

1）、concat() - 链接两个或更多的数组，并返回结果

实例：

<script type="text/javascript">
     var arryList1 = ["Android", "Java", "ios"];
     var arrayList2 = [1, 2, 3];
     var result = arryList1.concat(arrayList2);
     document.getElementById("demo").innerHTML = "result = " + result;
</script>

执行结果：result = Android,Java,ios,1,2,3

2）、forEach() – 数组每个元素都执行一次回调函数

实例：

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

执行结果：

7

8

9

3）、indexOf() – 搜索数组中的元素，并返回它所在的位置，如果没有搜索到，返回值-1，代表没有此项。

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

4）、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

5）、lastIndexOf() – 返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后往前的搜索。

实例：

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

6）、pop() – 删除数组的最后一个元素，并返回删除的元素

实例：

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

执行结果：

element is : 9

numbers = : [1,4]

7）、push() – 向数组末尾添加一个或多个元素，并返回新的长度

实例：

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

执行结果：

new numbers is : 1,4,9,10

length1 = 4

new numbers is : 1,4,9,10,20

length2 = 5

8）、reduce() – 将数组元素计算为一个值（从左到右）

实例：

var total = [2, 4, 6, 8];
var result = total.reduce(function(a, b) {
return a + b;
})
console.log("reduce() - result = " + result) // 20

执行结果：reduce() - result = 20

9）、reduceRight() – 将数据元素计算为一个值（从右到左）

实例同上的reduce()数组方法。

10）、reverse() – 反转数组的元素顺序

实例:

var total = [2, 4, 6, 8];
var result = total.reverse();
console.log("reverse() - result = " + result) // 8,6,4,2

执行结果：reverse() - result = 8,6,4,2 

11）、shift() – 删除并返回数组的第一个元素（跟pop()方法刚好相反）。

实例：

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

12）、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

13）、sort() – 对数组的元素进行排序

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

14）、toString() – 把数组转换为字符串并返回结果

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

15）、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