TypeScript入门到精通——TypeScript类型系统基础——数组类型

厚德为仁 發表於 2023-10-7 10:22:00

TypeScript入门到精通——TypeScript类型系统基础——数组类型

<h1 style="text-align: center">数组类型</h1>
  数组是十分常用的数据结构，它表示一组有序元素的集合。在 TypeScript中，数组值的数据类型为数组类型。
<h2>一、数组类型定义</h2>
  TypeScript 提供了以下两种方式来定义数组类型：
<ul>
<li style="list-style-type: none"></li>
<ul>
<li>简单数组类型表示法</li>
<li>泛型数组类型表示法</li>
</ul>
</ul>
<h3>1.1、简单数组类型表示法</h3>
在TypeScript中，你可以使用数组类型表示法来定义一个数组的类型。这是一个基础的方法，直接定义数组元素的类型。
例如，如果我们想要定义一个只包含字符串类型元素的数组，我们可以这样做：
<div class="cnblogs_Highlighter" style="margin-left: 60px">
<pre class="brush:bash;gutter:true;">let strArray: string[] = ["Hello", "World"];</pre>
</div>
在这个例子中，<code class=" inline">string[]</code>是一个数组类型，它包含的元素都是<code class=" inline">string</code>类型。
<h3>1.2、泛型数组类型表示法</h3>
<div>
  TypeScript也支持泛型数组类型的表示法。这种类型的数组可以接受的元素类型更为广泛。在泛型数组类型中，我们需要提供一个类型参数，这个参数将作为数组元素的类型。
  例如，如果我们想要定义一个可以接受任何类型的元素的数组，我们可以使用<code class=" inline">any</code>类型参数：
<div class="cnblogs_Highlighter" style="margin-left: 60px">
<pre class="brush:bash;gutter:true;">let anyArray: Array<any> = ;
</pre>
</div>
  在这个例子中，<code class=" inline">Array<any></code>是一个泛型数组类型，它可以接受任何类型的元素。
  除此之外，我们也可以使用其他类型作为类型参数，例如对象类型、接口类型等。例如，我们可以定义一个对象数组，这个对象具有特定的属性： 
<div class="cnblogs_Highlighter" style="margin-left: 60px">
<pre class="brush:bash;gutter:true;">interface Person {
name: string;
age: number;
}

let people: Person[] = [
{ name: "Alice", age: 20 },
{ name: "Bob", age: 30 },
];
</pre>
</div>
  在这个例子中，<code class=" inline">Person[]</code>是一个对象数组类型，它包含的元素都是<code class=" inline">Person</code>类型的对象。每个<code class=" inline">Person</code>类型的对象都有<code class=" inline">name</code>和<code class=" inline">age</code>两个属性，类型分别为<code class=" inline">string</code>和<code class=" inline">number</code>。　
<h3>1.3、简单数组类型和泛型数组类型的区别是什么</h3>
  简单数组类型和泛型数组类型的主要区别在于它们能够容纳的元素类型的范围。
  简单数组类型，如int[]，它只能容纳一种特定类型的元素，即整数。如果你尝试添加其他类型的元素（如字符串或布尔值），那么在编译时将会出错。
  泛型数组类型，如Array<T>，则更为灵活。这里的                                                                        T可以是任何类型，包括简单类型（如string或number）和复杂类型（如Person或Object）。这意味着你可以将任何类型的元素添加到泛型数组中，只要这些元素符合你为T指定的类型。
  因此，你可以根据需要选择使用哪种数组类型。如果数组元素的类型是固定的，那么简单数组类型可能是更好的选择。如果需要存储多种类型的元素，或者元素类型可能是变化的，那么泛型数组类型就更为合适了。
<h2>二、只读数组</h2>
  只读数组与常规数组的区别在于，只读数组仅允许程序读取数组元素而不允许修改数组元素。
  TypeScript 提供了以下三种方式来定义一个只读数组
1、<code>ReadonlyArray<T></code>：这是TypeScript的一个内置类型，用于表示只读数组。<code>T</code>是数组中元素的类型。例如：
<div class="cnblogs_Highlighter" style="margin-left: 30px">
<pre class="brush:bash;gutter:true;">let readonlyArray: ReadonlyArray<string> = ['Alice', 'Bob'];
</pre>
</div>
  在上面的代码中，<code class=" inline">readonlyArray</code>是一个只读字符串数组。如果你尝试修改这个数组（例如，尝试添加或删除元素），TypeScript编译器会抛出错误。
2、<code>readonly</code>修饰符：从TypeScript 3.4开始，你可以使用<code>readonly</code>修饰符来定义只读数组：
<div class="cnblogs_Highlighter" style="margin-left: 30px">
<pre class="brush:bash;gutter:true;">let readonlyArray: ReadonlyArray<string> = readonly ['Alice', 'Bob'];
</pre>
</div>
  这种方式与使用<code>ReadonlyArray<T></code>的效果是相同的，但语法更简洁。
<div>3、<code>Readonly<T></code>：这是 TypeScript的一个工具类型，用于将任何类型转换为只读类型。例如：</div>
<div class="cnblogs_Highlighter" style="margin-left: 30px">
<pre class="brush:bash;gutter:true;">type Readonly<T> = {
readonly : T ;
};</pre>
</div>
</div>
  由于 TypeScript 3.4 支持了使用 readonly 修饰符来定义只读数组，所以从 TypeScript 3.4 开始可以使用 "Readonly<T>"工具类型来定义只读数组。
  需要注意的是，只读数组并不意味着你不能对其进行迭代或使用一些数组方法（例如<code>map</code>、<code>filter</code>等）。它只是限制了你不能改变数组的结构（例如添加或删除元素）。
<h2>三、数组对象</h2>
我们也可以使用数组对象创建数组。
Array 对象的构造函数接受以下两种值：
<ul>
<li style="list-style-type: none">
<ul>
<li>表示数组大小的数值。</li>
<li>初始化的数组列表，元素使用逗号分隔值。</li>
</ul>
</li>
</ul>
<h3>3.1、指定数组初始化大小</h3>
<div class="cnblogs_Highlighter" style="margin-left: 30px">
<pre class="brush:javascript;gutter:true;">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 class="cnblogs_code" style="margin-left: 30px">
0 2 4 6
</div>
<h3>3.2、初始化数组列表，元素使用逗号分隔</h3>
<div class="cnblogs_Highlighter" style="margin-left: 30px">
<pre class="brush:javascript;gutter:true;">var sites:string[] = new Array("Google","Runoob","Taobao","Facebook")

for(var i = 0;i<sites.length;i++) {
 console.log(sites)
}</pre>
</div>
  输出结果：
<div class="cnblogs_Highlighter" style="margin-left: 30px">
<pre class="brush:javascript;gutter:true;">Google
Runoob
Taobao
Facebook
</pre>
</div>
<h2>四、数组解构</h2>
  TypeScript的数组解构是一种语法，允许你将数组的元素提取到独立的变量中。通过解构，你可以将数组的每个元素分配给一个单独的变量，以便在代码中更方便地使用这些值。
<div>
  下面是 TypeScript 中数组解构的基本语法：
<div class="cnblogs_Highlighter" style="margin-left: 60px">
<pre class="brush:javascript;gutter:true;">let = array;</pre>
</div>
  在这个例子中，<code class=" inline">array</code>是一个包含三个元素的数组，而<code class=" inline">variable1</code>、<code class=" inline">variable2</code>和<code class=" inline">variable3</code>是你希望分配给这三个元素的变量。通过使用数组解构语法，你可以将数组的元素赋值给这些变量。
  除了将数组的元素分配给单独的变量，你还可以使用解构语法提取数组中的特定索引位置的元素。例如，如果你只想提取数组的第一个元素，可以这样做：
<div class="cnblogs_Highlighter" style="margin-left: 60px">
<pre class="brush:javascript;gutter:true;">let = array;</pre>
</div>
  你还可以将数组中的元素分配给一个新数组。例如：
<div class="cnblogs_Highlighter" style="margin-left: 60px">
<pre class="brush:javascript;gutter:true;">let = array;
let newArray = ;　　</pre>
</div>
  另外，你可以使用解构语法提取数组中的第一个元素，并将其余的元素存储在一个新数组中。例如：
<div class="cnblogs_Highlighter" style="margin-left: 60px">
<pre class="brush:javascript;gutter:true;">let = array;</pre>
</div>
  在这个例子中，<code class=" inline">firstElement</code>将被分配给第一个元素，而<code class=" inline">remainingElements</code>将是一个包含数组剩余元素的新数组。
<h2>五、数组迭代</h2>
  我们可以使用 for 语句来循环输出数组的各个元素：
<div class="cnblogs_Highlighter" style="margin-left: 60px">
<pre class="brush:javascript;gutter:true;">var j:any;
var nums:number[] =

for(j in nums) {
console.log(nums)
}
</pre>
</div>
  输出结果：
<div class="cnblogs_Highlighter" style="margin-left: 60px">
<pre class="brush:javascript;gutter:true;">1001
1002
1003
1004</pre>
</div>
<h2> 六、数组方法</h2>
常见数组方法选自：https://www.runoob.com/typescript/ts-array.html
  TypeScript是JavaScrip 的一个超集，因此它继承了JavaScript的所有特性，包括数组方法。以下是一些常用的JavaScript数组方法在TypeScript中的使用说明和示例：
<table style="height: 2668px; width: 1775px" border="0">
<tbody>
<tr>
<td style="text-align: center">序号</td>
<td style="text-align: center">数组方法说明</td>
<td style="text-align: left">示例</td>
</tr>
<tr>
<td style="text-align: center">1</td>
<td style="text-align: left">concat()：用于合并两个或多个数组，不修改原来变量值，并返回结果。</td>
<td style="text-align: left">
let array1 = ; 
let array2 = ; 
let combined = array1.concat(array2); // 
</td>
</tr>
<tr>
<td style="text-align: center">2</td>
<td style="text-align: left">every()：检测数值元素的每个元素是否都符合条件。 </td>
<td style="text-align: left">function isBigEnough(element, index, array) {
  return (element >= 10); } var passed = .every(isBigEnough); console.log("Test Value : " + passed ); // false

</td>

</tr>
<tr>
<td style="text-align: center">3</td>
<td style="text-align: left">filter()：检测数值元素，并返回符合条件所有元素的数组。</td>
<td style="text-align: left">
function isBigEnough(element, index, array) {   return (element >= 10); } var passed = .filter(isBigEnough); console.log("Test Value : " + passed ); // 12,130,44

</td>

</tr>
<tr>
<td style="text-align: center">4</td>
<td style="text-align: left">forEach()：数组每个元素都执行一次回调函数。</td>
<td style="text-align: left">let num = ;
num.forEach(function (value) {   console.log(value); });
 编译成 JavaScript 代码：
var num = ; num.forEach(function (value) {   console.log(value);// 7 8 9 });

</td>

</tr>
<tr>
<td style="text-align: center">5</td>
<td style="text-align: left">indexOf()：搜索数组中的元素，并返回它所在的位置。</td>
<td style="text-align: left">如果搜索不到，返回值 -1，代表没有此项。
var index = .indexOf(8); console.log("index is : " + index );// 2

</td>

</tr>
<tr>
<td style="text-align: center">6</td>
<td style="text-align: left">join()：把数组的所有元素放入一个字符串。</td>
<td style="text-align: left">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

</td>

</tr>
<tr>
<td style="text-align: center">7</td>
<td style="text-align: left">lastIndexOf()：返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。</td>
<td style="text-align: left">var index = .lastIndexOf(8);
console.log("index is : " + index );// 2

</td>

</tr>
<tr>
<td style="text-align: center">8</td>
<td style="text-align: left">map()：通过指定函数处理数组的每个元素，并返回处理后的数组。</td>
<td style="text-align: left">
var numbers = ;
//计算给定数组<code class=" inline">numbers</code>中每个元素的平方根并将结果存储在<code class=" inline">roots</code>数组
var roots = numbers.map(Math.sqrt); console.log("roots is : " + roots );// roots is : 1,2,3

</td>

</tr>
<tr>
<td style="text-align: center">9</td>
<td style="text-align: left">pop()：删除数组的最后一个元素并返回删除的元素。</td>
<td style="text-align: left">
var numbers = ; var element = numbers.pop(); console.log("element is : " + element );// 9 var element = numbers.pop(); console.log("element is : " + element );// 4

</td>

</tr>
<tr>
<td style="text-align: center">10</td>
<td style="text-align: left">push()：向数组的末尾添加一个或更多元素，并返回新的长度。</td>
<td style="text-align: left">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

</td>

</tr>
<tr>
<td style="text-align: center">11</td>
<td style="text-align: left">reduce()：将数组元素计算为一个值（从左到右）。</td>
<td style="text-align: left">var total = .reduce(function(a, b){ return a + b; });
console.log("total is : " + total );// 6

</td>

</tr>
<tr>
<td style="text-align: center">12</td>
<td style="text-align: left">reduceRight()：将数组元素计算为一个值（从右到左）。</td>
<td style="text-align: left">var total = .reduceRight(function(a, b){ return a + b; });
console.log("total is : " + total );// 6

</td>

</tr>
<tr>
<td style="text-align: center">13</td>
<td style="text-align: left">reverse()：反转数组的元素顺序。</td>
<td style="text-align: left">var arr = .reverse();
console.log("Reversed array is : " + arr );// 3,2,1,0

</td>

</tr>
<tr>
<td style="text-align: center">14</td>
<td style="text-align: left">shift()：删除并返回数组的第一个元素。</td>
<td style="text-align: left">var arr = .shift();
console.log("Shifted value is : " + arr );// 10

</td>

</tr>
<tr>
<td style="text-align: center">15</td>
<td style="text-align: left">slice()：选取数组的的一部分，并返回一个新数组。</td>
<td style="text-align: left">
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

</td>

</tr>
<tr>
<td style="text-align: center">16</td>
<td style="text-align: left">some()：检测数组元素中是否有元素符合指定条件。</td>
<td style="text-align: left">function isBigEnough(element, index, array) {
 return (element >= 10); } var retval = .some(isBigEnough); console.log("Returned value is : " + retval );// false var retval = .some(isBigEnough); console.log("Returned value is : " + retval );// true

</td>

</tr>
<tr>
<td style="text-align: center">17</td>
<td style="text-align: left">sort()：对数组的元素进行排序。</td>
<td style="text-align: left">var arr = new Array("orange", "mango", "banana", "sugar");
var sorted = arr.sort(); console.log("Returned string is : " + sorted );// banana,mango,orange,sugar

</td>

</tr>
<tr>
<td style="text-align: center">18</td>
<td style="text-align: left">splice()：从数组中添加或删除元素。</td>
<td style="text-align: left">
var arr = ["orange", "mango", "banana", "sugar", "tea"];
 
//<code>arr.splice(2, 0, "water")</code>：这个方法从数组的第三个位置（索引为2）开始，删除0个元素，然后添加"water"。因此，"water"被插入到"banana"之前，而"banana"及其之后的元素没有被移动。
var removed = arr.splice(2, 0, "water"); console.log("After adding 1: " + arr ); // orange,mango,water,banana,sugar,tea console.log("removed is: " + removed);
 
//<code>arr.splice(3, 1)</code>：这个方法从数组的第四个位置（索引为3）开始，删除1个元素。因此，"sugar"被移除，而"tea"及其之前的元素没有被移动。
removed = arr.splice(3, 1); console.log("After removing 1: " + arr );// orange,mango,water,sugar,tea console.log("removed is: " + removed);// banana

</td>

</tr>
<tr>
<td style="text-align: center">19</td>
<td style="text-align: left">toString()：把数组转换为字符串，并返回结果。</td>
<td style="text-align: left">var arr = new Array("orange", "mango", "banana", "sugar");
var str = arr.toString(); console.log("Returned string is : " + str );// Returned string is : orange,mango,banana,sugar

</td>

</tr>
<tr>
<td style="text-align: center"> 20</td>
<td style="text-align: left">unshift()：向数组的开头添加一个或更多元素，并返回新的长度。</td>
<td style="text-align: left">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

</td>

</tr>

</tbody>

</table>

</div> 
来源：https://www.cnblogs.com/zuoyang/p/17745694.html

頁: [1]

琼殿技术论坛's Archiver

TypeScript入门到精通——TypeScript类型系统基础——数组类型