TypeScript Array(数组)

有点可爱的小姐姐 發表於 2020-3-12 09:31:00

<h1>TypeScript Array(数组)</h1>
数组对象是使用单独的变量名来存储一系列的值。
数组非常常用。
假如你有一组数据（例如：网站名字），存在单独变量如下所示：
<div class="example">
<div class="example_code">
<div class="hl-main">
<div class="cnblogs_code">
<pre>var site1="Google"; var site2="Runoob"; var site3="Taobao";</pre>
</div>
 
</div>
</div>
</div>
如果有 10 个、100 个这种方式就变的很不实用，这时我们可以使用数组来解决：
<div class="example">
<div class="example_code">
<div class="hl-main">
<div class="cnblogs_code">
<pre>var sites:string[]; sites = ["Google","Runoob","Taobao"]</pre>
</div>
 
</div>
</div>
</div>
这样看起来就简洁多了。
TypeScript 声明数组的语法格式如下所示：
<div class="cnblogs_code">
<pre>var array_name[:datatype]; //声明 
array_name = //初始化</pre>
</div>
 
或者直接在声明时初始化：
<div class="cnblogs_code">
<pre>var array_name[:data type] = </pre>
</div>
 
如果数组声明时未设置类型，则会被认为是 any 类型，在初始化时根据第一个元素的类型来推断数组的类型。
<h3>实例</h3>
创建一个 number 类型的数组：
<div class="cnblogs_code">
<pre>var numlist:number[] = </pre>
</div>
 
整个数组结构如下所示：
<img src="https://www.runoob.com/wp-content/uploads/2019/01/declaring_and_initializing_arrays.png">
索引值第一个为 0，我们可以根据索引值来访问数组元素：
<div class="example">
<h2 class="example">TypeScript</h2>
<div class="example_code">
<div class="hl-main">
<div class="cnblogs_code">
<pre>var sites:string[]; sites = ["Google","Runoob","Taobao"] console.log(sites); console.log(sites);</pre>
</div>
 
</div>
</div>
</div>
编译以上代码，得到以下 JavaScript 代码：
<div class="example">
<h2 class="example">JavaScript</h2>
<div class="example_code">
<div class="hl-main">
<div class="cnblogs_code">
<pre>var sites; sites = ["Google", "Runoob", "Taobao"]; console.log(sites); console.log(sites);</pre>
</div>
 
</div>
</div>
</div>
输出结果为：
<pre class="prettyprint prettyprinted">Google
Runoob</pre>
以下实例我们在声明时直接初始化：
<div class="example">
<h2 class="example">TypeScript</h2>
<div class="example_code">
<div class="hl-main">
<div class="cnblogs_code">
<pre>var nums:number[] = console.log(nums); console.log(nums); console.log(nums); console.log(nums);</pre>
</div>
 
</div>
</div>
</div>
编译以上代码，得到以下 JavaScript 代码：
<div class="example">
<h2 class="example">JavaScript</h2>
<div class="example_code">
<div class="hl-main">
<div class="cnblogs_code">
<pre>var nums = ; console.log(nums); console.log(nums); console.log(nums); console.log(nums);</pre>
</div>
 
</div>
</div>
</div>
输出结果为：
<pre class="prettyprint prettyprinted">1
2
3
4</pre>
<hr>
<h2>Array 对象</h2>
我们也可以使用 Array 对象创建数组。
Array 对象的构造函数接受以下两种值：
<ul>
<li>表示数组大小的数值。</li>
<li>初始化的数组列表，元素使用逗号分隔值。</li>
</ul>
<h3>实例</h3>
指定数组初始化大小：
<div class="example">
<h2 class="example">TypeScript</h2>
<div class="example_code">
<div class="hl-main">
<div class="cnblogs_code">
<pre>var arr_names:number[] = new Array(4) for(var i = 0; i<arr_names.length; i++) { arr_names = i * 2 console.log(arr_names) }</pre>
</div>
 
</div>
</div>
</div>
编译以上代码，得到以下 JavaScript 代码：
<div class="example">
<h2 class="example">JavaScript</h2>
<div class="example_code">
<div class="hl-main">
<div class="cnblogs_code">
<pre>var arr_names = new Array(4); for (var i = 0; i < arr_names.length; i++) { arr_names = i * 2; console.log(arr_names); }</pre>
</div>
 
</div>
</div>
</div>
输出结果为：
<pre class="prettyprint prettyprinted">0
2
4
6</pre>
以下实例我们直接初始化数组元素：
<div class="example">
<h2 class="example">TypeScript</h2>
<div class="example_code">
<div class="hl-main">
<div class="cnblogs_code">
<pre>var sites:string[] = new Array("Google","Runoob","Taobao","Facebook") for(var i = 0;i<sites.length;i++) { console.log(sites) }</pre>
</div>
 
</div>
</div>
</div>
编译以上代码，得到以下 JavaScript 代码：
<div class="example">
<h2 class="example">JavaScript</h2>
<div class="example_code">
<div class="hl-main">
<div class="cnblogs_code">
<pre>var sites = new Array("Google", "Runoob", "Taobao", "Facebook"); for (var i = 0; i < sites.length; i++) { console.log(sites); }</pre>
</div>
 
</div>
</div>
</div>
输出结果为：
<pre class="prettyprint prettyprinted">Google
Runoob
Taobao
Facebook</pre>
<hr>
<h2>数组解构</h2>
我们也可以把数组元素赋值给变量，如下所示：
<div class="example">
<h2 class="example">TypeScript</h2>
<div class="example_code">
<div class="hl-main">
<div class="cnblogs_code">
<pre>var arr:number[] = var = arr // 将数组的两个元素赋值给变量 x 和 y console.log(x) console.log(y)</pre>
</div>
 
</div>
</div>
</div>
编译以上代码，得到以下 JavaScript 代码：
<div class="example">
<h2 class="example">JavaScript</h2>
<div class="example_code">
<div class="hl-main">
<div class="cnblogs_code">
<pre>var arr = ; var x = arr, y = arr; // 将数组的两个元素赋值给变量 x 和 y console.log(x); console.log(y);</pre>
</div>
 
</div>
</div>
</div>
输出结果为：
<pre class="prettyprint prettyprinted">12
13</pre>
<hr>
<h2>数组迭代</h2>
我们可以使用 for 语句来循环输出数组的各个元素：
<div class="example">
<h2 class="example">TypeScript</h2>
<div class="example_code">
<div class="hl-main">
<div class="cnblogs_code">
<pre>var j:any; var nums:number[] = for(j in nums) { console.log(nums) }</pre>
</div>
 
</div>
</div>
</div>
编译以上代码，得到以下 JavaScript 代码：
<div class="example">
<h2 class="example">JavaScript</h2>
<div class="example_code">
<div class="hl-main">
<div class="cnblogs_code">
<pre>var j; var nums = ; for (j in nums) { console.log(nums); }</pre>
</div>
 
</div>
</div>
</div>
输出结果为：
<pre class="prettyprint prettyprinted">1001
1002
1003
1004</pre>
<hr>
<h2>多维数组</h2>
一个数组的元素可以是另外一个数组，这样就构成了多维数组（Multi-dimensional Array）。
最简单的多维数组是二维数组，定义方式如下：
<div class="cnblogs_code">
<pre>var arr_name:datatype[][]=[ , ]</pre>
</div>
 
<h3>实例</h3>
定义一个二维数组，每一个维度的数组有三个元素。
<img src="https://www.runoob.com/wp-content/uploads/2019/01/multidimensional_arrays.png">
<div class="example">
<h2 class="example">TypeScript</h2>
<div class="example_code">
<div class="hl-main">
<div class="cnblogs_code">
<pre>var multi:number[][] = [,] console.log(multi) console.log(multi) console.log(multi) console.log(multi) console.log(multi) console.log(multi)</pre>
</div>
 
</div>
</div>
</div>
编译以上代码，得到以下 JavaScript 代码：
<div class="example">
<h2 class="example">JavaScript</h2>
<div class="example_code">
<div class="hl-main">
<div class="cnblogs_code">
<pre>var multi = [, ]; console.log(multi); console.log(multi); console.log(multi); console.log(multi); console.log(multi); console.log(multi);</pre>
</div>
 
</div>
</div>
</div>
输出结果为：
<pre class="prettyprint prettyprinted">1
2
3
23
24
25</pre>
<hr>
<h2>数组在函数中的使用</h2>
<h3>作为参数传递给函数</h3>
<div class="example">
<h2 class="example">TypeScript</h2>
<div class="example_code">
<div class="hl-main">
<div class="cnblogs_code">
<pre>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) } } disp(sites);</pre>
</div>
 
</div>
</div>
</div>
编译以上代码，得到以下 JavaScript 代码：
<div class="example">
<h2 class="example">JavaScript</h2>
<div class="example_code">
<div class="hl-main">
<div class="cnblogs_code">
<pre>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); } } disp(sites);</pre>
</div>
 
</div>
</div>
</div>
输出结果为：
<pre class="prettyprint prettyprinted">Google
Runoob
Taobao
Facebook</pre>
<h3>作为函数的返回值</h3>
<div class="example">
<h2 class="example">TypeScript</h2>
<div class="example_code">
<div class="hl-main">
<div class="cnblogs_code">
<pre>function disp():string[] { return new Array("Google", "Runoob", "Taobao", "Facebook"); } var sites:string[] = disp() for(var i in sites) { console.log(sites) }</pre>
</div>
 
</div>
</div>
</div>
编译以上代码，得到以下 JavaScript 代码：
<div class="example">
<h2 class="example">JavaScript</h2>
<div class="example_code">
<div class="hl-main">
<div class="cnblogs_code">
<pre>function disp() { return new Array("Google", "Runoob", "Taobao", "Facebook"); } var sites = disp(); for (var i in sites) { console.log(sites); }</pre>
</div>
 
</div>
</div>
</div>
输出结果为：
<pre class="prettyprint prettyprinted">Google
Runoob
Taobao
Facebook</pre>
<hr>
<h2>数组方法</h2>
下表列出了一些常用的数组方法：
<table class="reference" style="float: left">
<tbody>
<tr><th>序号</th><th>方法 & 描述</th><th>实例</th></tr>
<tr>
<td>1.</td>
<td>concat()
连接两个或更多的数组，并返回结果。
</td>
<td>
<pre class="prettyprint prettyprinted">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 </pre>
</td>
</tr>
<tr>
<td>2.</td>
<td>every()
检测数值元素的每个元素是否都符合条件。
</td>
<td>
<pre class="prettyprint prettyprinted">function isBigEnough(element, index, array) {
 return (element >= 10);
}

var passed = [12, 5, 8, 130, 44].every(isBigEnough);
console.log("Test Value : " + passed ); // false</pre>
</td>
</tr>
<tr>
<td>3.</td>
<td>filter()
检测数值元素，并返回符合条件所有元素的数组。
</td>
<td>
<pre class="prettyprint prettyprinted">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</pre>
</td>
</tr>
<tr>
<td>4.</td>
<td>forEach()
数组每个元素都执行一次回调函数。
</td>
<td>
<pre class="prettyprint prettyprinted">let num = [7, 8, 9];
num.forEach(function (value) {
console.log(value);
});</pre>
编译成 JavaScript 代码：
<pre class="prettyprint prettyprinted">var num = [7, 8, 9];
num.forEach(function (value) {
console.log(value);// 7 8 9
});</pre>
</td>
</tr>
<tr>
<td>5.</td>
<td>indexOf()
搜索数组中的元素，并返回它所在的位置。
</td>
<td>
<pre class="prettyprint prettyprinted">var index = [12, 5, 8, 130, 44].indexOf(8);
console.log("index is : " + index );// 2</pre>
</td>
</tr>
<tr>
<td>6.</td>
<td>join()
把数组的所有元素放入一个字符串。
</td>
<td>
<pre class="prettyprint prettyprinted">var arr = new Array("First","Second","Third");

var str = arr.join();
console.log("str : " + str );// First,Second,Third 

var str = arr.join(", ");
console.log("str : " + str );// First, Second, Third

var str = arr.join(" + ");
console.log("str : " + str );// First + Second + Third</pre>
</td>
</tr>
<tr>
<td>7.</td>
<td>lastIndexOf()
返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。
</td>
<td>
<pre class="prettyprint prettyprinted">var index = [12, 5, 8, 130, 44].lastIndexOf(8);
console.log("index is : " + index );// 2</pre>
</td>
</tr>
<tr>
<td>8.</td>
<td>map()
通过指定函数处理数组的每个元素，并返回处理后的数组。
</td>
<td>
<pre class="prettyprint prettyprinted">var numbers = [1, 4, 9];
var roots = numbers.map(Math.sqrt);
console.log("roots is : " + roots );// 1,2,3</pre>
</td>
</tr>
<tr>
<td>9.</td>
<td>pop()
删除数组的最后一个元素并返回删除的元素。
</td>
<td>
<pre class="prettyprint prettyprinted">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</pre>
</td>
</tr>
<tr>
<td>10.</td>
<td>push()
向数组的末尾添加一个或更多元素，并返回新的长度。
</td>
<td>
<pre class="prettyprint prettyprinted">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</pre>
</td>
</tr>
<tr>
<td>11.</td>
<td>reduce()
将数组元素计算为一个值（从左到右）。
</td>
<td>
<pre class="prettyprint prettyprinted">var total = [0, 1, 2, 3].reduce(function(a, b){ return a + b; });
console.log("total is : " + total );// 6</pre>
</td>
</tr>
<tr>
<td>12.</td>
<td>reduceRight()
将数组元素计算为一个值（从右到左）。
</td>
<td>
<pre class="prettyprint prettyprinted">var total = [0, 1, 2, 3].reduceRight(function(a, b){ return a + b; });
console.log("total is : " + total );// 6</pre>
</td>
</tr>
<tr>
<td>13.</td>
<td>reverse()
反转数组的元素顺序。
</td>
<td>
<pre class="prettyprint prettyprinted">var arr = [0, 1, 2, 3].reverse();
console.log("Reversed array is : " + arr );// 3,2,1,0</pre>
</td>
</tr>
<tr>
<td>14.</td>
<td>shift()
删除并返回数组的第一个元素。
</td>
<td>
<pre class="prettyprint prettyprinted">var arr = [10, 1, 2, 3].shift();
console.log("Shifted value is : " + arr );// 10</pre>
</td>
</tr>
<tr>
<td>15.</td>
<td>slice()
选取数组的的一部分，并返回一个新数组。
</td>
<td>
<pre class="prettyprint prettyprinted">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</pre>
</td>
</tr>
<tr>
<td>16.</td>
<td>some()
检测数组元素中是否有元素符合指定条件。
</td>
<td>
<pre class="prettyprint prettyprinted">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</pre>
</td>
</tr>
<tr>
<td>17.</td>
<td>sort()
对数组的元素进行排序。
</td>
<td>
<pre class="prettyprint prettyprinted">var arr = new Array("orange", "mango", "banana", "sugar");
var sorted = arr.sort();
console.log("Returned string is : " + sorted );// banana,mango,orange,sugar</pre>
</td>
</tr>
<tr>
<td>18.</td>
<td>splice()
从数组中添加或删除元素。
</td>
<td>
<pre class="prettyprint prettyprinted">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</pre>
</td>
</tr>
<tr>
<td>19.</td>
<td>toString()
把数组转换为字符串，并返回结果。
</td>
<td>
<pre class="prettyprint prettyprinted">var arr = new Array("orange", "mango", "banana", "sugar");
var str = arr.toString();
console.log("Returned string is : " + str );// orange,mango,banana,sugar</pre>
</td>
</tr>
<tr>
<td>20.</td>
<td>unshift()
 
向数组的开头添加一个或更多元素，并返回新的长度。
</td>
<td>
<pre class="prettyprint prettyprinted">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</pre>
</td>
</tr>
</tbody>
</table>
  
来源：https://www.cnblogs.com/xiewangfei123/p/12467197.html

頁: [1]

琼殿技术论坛's Archiver

TypeScript Array(数组)