TypeScript（11）： Array(数组)

安国圣山刁景超 發表於 2020-6-25 23:32:00

数组对象是使用单独的变量名来存储一系列的值。假如你有一组数据（例如：网站名字），存在单独变量如下所示：<div class="cnblogs_code" style="padding: 5px; border: 1px solid rgba(204, 204, 204, 1); border-image: none; background-color: rgba(245, 245, 245, 1)"><pre>var site1="Google";
var site2="Runoob";
var site3="Taobao";</pre></div>如果有 10 个、100 个这种方式就变的很不实用，这时我们可以使用数组来解决：<div class="cnblogs_code" style="padding: 5px; border: 1px solid rgba(204, 204, 204, 1); border-image: none; background-color: rgba(245, 245, 245, 1)"><pre>var sites:string[];
sites = ["Google","Runoob","Taobao"]</pre></div>这样看起来就简洁多了。<h2>一、TypeScript 声明数组</h2>TypeScript 声明数组的语法格式如下所示：<div class="cnblogs_code" style="padding: 5px; border: 1px solid rgba(204, 204, 204, 1); border-image: none; background-color: rgba(245, 245, 245, 1)"><pre>var array_name[:datatype]; //声明 
array_name = //初始化</pre></div>或者直接在声明时初始化：<div class="cnblogs_code" style="padding: 5px; border: 1px solid rgba(204, 204, 204, 1); border-image: none; background-color: rgba(245, 245, 245, 1)"><pre>var array_name[:data type] = </pre></div>如果数组声明时未设置类型，则会被认为是 any 类型，在初始化时根据第一个元素的类型来推断数组的类型。<h3>实例</h3>创建一个 number 类型的数组：<div class="cnblogs_code" style="padding: 5px; border: 1px solid rgba(204, 204, 204, 1); border-image: none; background-color: rgba(245, 245, 245, 1)"><pre>var numlist:number[] = </pre></div>1、我们可以根据索引值来访问数组元素：<div class="cnblogs_code" style="padding: 5px; border: 1px solid rgba(204, 204, 204, 1); border-image: none; background-color: rgba(245, 245, 245, 1)"><pre>var sites:string[];
sites = ["Google","Runoob","Taobao"]
console.log(sites[0]);
console.log(sites[1]);</pre></div>编译以上代码，得到以下 JavaScript 代码：<div class="cnblogs_code" style="padding: 5px; border: 1px solid rgba(204, 204, 204, 1); border-image: none; background-color: rgba(245, 245, 245, 1)"><pre>var sites;
sites = ["Google", "Runoob", "Taobao"];
console.log(sites[0]);
console.log(sites[1]);</pre></div>输出结果为：<blockquote><pre>Google
Runoob</pre></blockquote>2、以下实例我们在声明时直接初始化：<div class="cnblogs_code" style="padding: 5px; border: 1px solid rgba(204, 204, 204, 1); border-image: none; background-color: rgba(245, 245, 245, 1)"><pre>var nums:number[] =
console.log(nums[0]);
console.log(nums[1]);
console.log(nums[2]);
console.log(nums[3]);</pre></div>编译以上代码，得到以下 JavaScript 代码：<div class="cnblogs_code" style="padding: 5px; border: 1px solid rgba(204, 204, 204, 1); border-image: none; background-color: rgba(245, 245, 245, 1)"><pre>var nums = ;
console.log(nums[0]);
console.log(nums[1]);
console.log(nums[2]);
console.log(nums[3]);</pre></div>输出结果为：<blockquote><pre>1
2
3
4 </pre></blockquote><h2>二、Array 对象</h2>我们也可以使用 Array 对象创建数组。Array 对象的构造函数接受以下两种值：<ul><li>表示数组大小的数值。
</li><li>初始化的数组列表，元素使用逗号分隔值。</li></ul><h3>实例</h3>1、指定数组初始化大小：<div class="cnblogs_code" style="padding: 5px; border: 1px solid rgba(204, 204, 204, 1); border-image: none; background-color: rgba(245, 245, 245, 1)"><pre>var arr_names:number[] = new Array(4)

for(var i = 0; i) {
 arr_names = i * 2
 console.log(arr_names)
}</arr_names.length;></pre></div>编译以上代码，得到以下 JavaScript 代码：<div class="cnblogs_code" style="padding: 5px; border: 1px solid rgba(204, 204, 204, 1); border-image: none; background-color: rgba(245, 245, 245, 1)"><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>输出结果为：<blockquote><pre>0
2
4
6</pre></blockquote>2、直接初始化数组元素：<div class="cnblogs_code" style="padding: 5px; border: 1px solid rgba(204, 204, 204, 1); border-image: none; background-color: rgba(245, 245, 245, 1)"><pre>var sites:string[] = new Array("Google","Runoob","Taobao","Facebook")

for(var i = 0;i<sites.length;i++) {
 console.log(sites)
}</sites.length;i++</pre></div>编译以上代码，得到以下 JavaScript 代码：<div class="cnblogs_code" style="padding: 5px; border: 1px solid rgba(204, 204, 204, 1); border-image: none; background-color: rgba(245, 245, 245, 1)"><pre>var sites = new Array("Google", "Runoob", "Taobao", "Facebook");
for (var i = 0; i < sites.length; i++) {
 console.log(sites);
}</pre></div>输出结果为：<blockquote><pre>Google
Runoob
Taobao
Facebook</pre></blockquote><h2>三、数组解构</h2>我们也可以把数组元素赋值给变量，如下所示：<div class="cnblogs_code" style="padding: 5px; border: 1px solid rgba(204, 204, 204, 1); border-image: none; background-color: rgba(245, 245, 245, 1)"><pre>var arr:number[] =
var = arr // 将数组的两个元素赋值给变量 x 和 y
console.log(x)
console.log(y)</pre></div>编译以上代码，得到以下 JavaScript 代码：<div class="cnblogs_code" style="padding: 5px; border: 1px solid rgba(204, 204, 204, 1); border-image: none; background-color: rgba(245, 245, 245, 1)"><pre>var arr = ;
var x = arr, y = arr; // 将数组的两个元素赋值给变量 x 和 y
console.log(x);
console.log(y);</pre></div>输出结果为：<blockquote><pre>12
13</pre></blockquote><h2>四、数组迭代</h2>我们可以使用 for 语句来循环输出数组的各个元素：<div class="cnblogs_code" style="padding: 5px; border: 1px solid rgba(204, 204, 204, 1); border-image: none; background-color: rgba(245, 245, 245, 1)"><pre>var j:any;
var nums:number[] =

for(j in nums) {
console.log(nums)
}</pre></div>编译以上代码，得到以下 JavaScript 代码：<div class="cnblogs_code" style="padding: 5px; border: 1px solid rgba(204, 204, 204, 1); border-image: none; background-color: rgba(245, 245, 245, 1)"><pre>var j;
var nums = ;
for (j in nums) {
console.log(nums);
}</pre></div>输出结果为：<blockquote><pre>1001
1002
1003
1004</pre></blockquote><h2>五、多维数组</h2>一个数组的元素可以是另外一个数组，这样就构成了多维数组（Multi-dimensional Array）。最简单的多维数组是二维数组，定义方式如下：<blockquote><pre>var arr_name:datatype[][]=[ , ]</pre></blockquote><h3>实例</h3>定义一个二维数组，每一个维度的数组有三个元素。<div class="cnblogs_code" style="padding: 5px; border: 1px solid rgba(204, 204, 204, 1); border-image: none; background-color: rgba(245, 245, 245, 1)"><pre>var multi:number[][] = [,]
console.log(multi[0])
console.log(multi[0])
console.log(multi[0])
console.log(multi[1])
console.log(multi[1])
console.log(multi[1])</pre></div>编译以上代码，得到以下 JavaScript 代码：<div class="cnblogs_code" style="padding: 5px; border: 1px solid rgba(204, 204, 204, 1); border-image: none; background-color: rgba(245, 245, 245, 1)"><pre>var multi = [, ];
console.log(multi[0]);
console.log(multi[0]);
console.log(multi[0]);
console.log(multi[1]);
console.log(multi[1]);
console.log(multi[1]);</pre></div>输出结果为：<blockquote><pre>1
2
3
23
24
25</pre></blockquote><h2>六、数组在函数中的使用</h2><h3>1、作为参数传递给函数</h3><div class="cnblogs_code" style="padding: 5px; border: 1px solid rgba(204, 204, 204, 1); border-image: none; background-color: rgba(245, 245, 245, 1)"><pre>var sites:string[] = new Array("Google","Runoob","Taobao","Facebook")

function disp(arr_sites:string[]) {
 for(var i = 0;i) {
 console.log(arr_sites)
 }
}
disp(sites);</arr_sites.length;i++</pre></div>编译以上代码，得到以下 JavaScript 代码：<div class="cnblogs_code" style="padding: 5px; border: 1px solid rgba(204, 204, 204, 1); border-image: none; background-color: rgba(245, 245, 245, 1)"><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>输出结果为：<blockquote><pre>Google
Runoob
Taobao
Facebook</pre></blockquote><h3>2、作为函数的返回值</h3><div class="cnblogs_code" style="padding: 5px; border: 1px solid rgba(204, 204, 204, 1); border-image: none; background-color: rgba(245, 245, 245, 1)"><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>编译以上代码，得到以下 JavaScript 代码：<div class="cnblogs_code" style="padding: 5px; border: 1px solid rgba(204, 204, 204, 1); border-image: none; background-color: rgba(245, 245, 245, 1)"><pre>function disp() {
 return new Array("Google", "Runoob", "Taobao", "Facebook");
}
var sites = disp();
for (var i in sites) {
 console.log(sites);
}</pre></div>输出结果为：<blockquote><pre>Google
Runoob
Taobao
Facebook</pre></blockquote><h2>七、数组方法</h2>下表列出了一些常用的数组方法：<img width="841" height="3601" title="image" style="margin: 0; border: 0 currentColor; border-image: none; display: inline; background-image: none" alt="image" src="https://img2020.cnblogs.com/blog/24244/202006/24244-20200625233145521-1983563839.png" border="0"> 
来源：https://www.cnblogs.com/springsnow/p/13193462.html

頁: [1]

琼殿技术论坛's Archiver

TypeScript（11）： Array(数组)