玩转TypeScript(3)--数组
数组的语法和语义与C#数组非常相似,首先要指定一个数组名,后跟冒号,冒号后面紧跟数组的类型,数组类型名后面跟方括号表示当前定义的是一个数组,对于一个空的数组定义,可以使用如下的语法:
btnArrayClick(sender: Core.Classes.TComponent){ //定义一个字符串类型的数组 var actors:string[]=["张三","李四","王五","赵六"]; //可以使用Array对象的任何属性 alert(actors.length); }
数组属于Array对象的实例,因此要实例化一个空白的数组,可以直接赋一个空白的Array对象实例即可,如下代码所示:
btnemptyArrayClick(sender: Core.Classes.TComponent){ //定义一个任意类型的空白数组,这个语法不被支持 //var emptyArray:any[]=new Array(); //建议使用如下的语法 var emptyArray:any[]=[]; emptyArray[0]="这是一个测试"; alert(emptyArray[0]); }
我发现在WisOne IDE直接赋一个new Array()对象实例给类型为any的数组不被支持,因此在这里直接赋了一个[]空白数组符号,并为其第1个元素赋了一个字符串,然后用alert函数输出其第1个元素.
TypeScript建议用户最好只为数组赋一种类型的值,当然通过any[]也可以类似javaScript那样为数组中的元素分配任何类型的值.假定你定义了一个字符串类型的数组,但是又为其分配数字类型的元素,那么TypeScript编译器也不会抛出异常,尽管如此,你还是应该总是确保总是只使用一种类型:
btnArrayTypeClick(sender: Core.Classes.TComponent){ //定义数字类型的数组,但是又分配了字符串和数字值,编译器没有抛出异常 var actors:number[]=["李小五",123]; alert(actors[0]); }
在TypeScript数组尽管具有与C#类似的语法,但它是变长数组类型的,这意味着可以使用数组的一些方法比如push或pop来添加或删除元素,因而数组的length属性值也是经常变化的,对于数组中的元素,可以使用for或for..in循环来遍历其中的元素.
btnArrayForClick(sender: Core.Classes.TComponent){ //定义一个字符串类型的数组 var actors:string[]=["张三","李四","王五","赵六"]; //使用标准for循环 for (var i = 0; i < actors.length; i++) { console.log(actors[i]); } //使用for..in循环 for (var actor in actors) { console.log(actors[actor]); } }
在javaScript中,数组的下标即可以是整数类型,也可以是字符串类型,但是使用数值类型的下标返回的值类型为any类型,而不是特定的类型.
var asExpected = actors[0]; // 返回字符串类型的 "张三" var gotcha = actors["Ian Holm"]; //返回任意类型的值
TypeScript中还可以使用很多类似javaScript中的函数来实现对数组的操纵,接下来讨论一些常见函数的使用:
Concat()方法
该方法用于连接或者是合并2个或多个数组,并且返回一个新的数组,它并不改变已经存在的数组,而是返回一个包含所有数组值的数组.
语法如下:
array.concat(value1,value2,valu3,....................valuen)
array: 所有的其他数组要进行合并的源数组
value:要添加到源数组中的其他数组元素.
举例:
var fstarry: string[] = ['C','Sharp']; var scndarry: string[] = ['Corner', '.com']; var result = fstarry.concat(scndarry);
IndexOf()方法
用来在数组中搜索指定的元素值,并且返回所发现的第1个结果值的下标,语法如下所示:
array.indexOf(searchvalue,start)
searchvalue是指定要搜索的值,start指定要搜索的起始索引位置,如果没有指定,那么表示从0开始进行搜索.如果找到则返回找到的索引值,如果没有找到,则返回-1.
var arrayName: string[] = ['C','Sharp','Corner','Dot','Net','Heaven']; var index = arrayName.indexOf('Dot');
Join()方法
该方法用于连接一个数组的元素到一个字符串,并且返回该字符串.join方法接收一个分隔符作为参数,指定特定的像空格\逗号或加号等其他的字符来分隔数组中的元素,如果没有指定任何参数,这个方法将转换数组中的所有元素为字符串,并且连接并通过逗号分隔字符串数组元素.
array.join(separator)
示例如下所示:
btnArrayJoinClick(sender: Core.Classes.TComponent){ var fstarry: string[] = ['C','Sharp','Corner', '.com']; var result = fstarry.join(); var result1 = fstarry.join('+'); var result2 = fstarry.join('*'); this.edit1.text="Join Method \n 第1个join示例 -> " + result + "\n" + "第2个使用+号的示例 (+) -> " + result1 + "\n" + "第3个使用*号的示例(*) -> " + result2 +"\n"; }
结果如下所示:
Join Method 第1个join示例 -> C,Sharp,Corner,.com 第2个使用+号的示例 (+) -> C+Sharp+Corner+.com 第3个使用*号的示例(*) -> C*Sharp*Corner*.com
LastIndexOf()方法
与IndexOf相反,它返回的是最后一次批配的字符串的索引位置,如下语法所示:
array.lastIndexOf(searchvalue,start)
如下示例所示:
button1Click(sender: Core.Classes.TComponent){ var arrayName: string[] = ['C','Sharp','Corner','VB','Net','Heaven']; var index = arrayName.lastIndexOf('Corner'); this.edit1.text="Corner的索引位置是:"+index; }
输出结果如下:
Corner的索引位置是:2
Push() 方法
Push方法向数组的最后位置中插入一个或多个元素,返回新的数组的长度,push方法视数组为一个堆栈结构,语法如下所示:
array.push(element1,element 2,.........)
示例如下所示:
btnpushdemoClick(sender: Core.Classes.TComponent){ var fstarry: string[] = ['C','Sharp','Corner']; var elemnt ="wis_one" fstarry.push(elemnt); this.edit1.text= "Push Method \n 插入了数组元素值之后, Array is -> " + fstarry + "\n"; }
输出结果如下所示:
Push Method 插入了数组元素值之后, Array is -> C,Sharp,Corner,wis_one
pop()方法
pop方法是Array对象中最流行的方法,该方法移除数组中的最后一个元素,减少数组的长度并且返回被移除的元素,如果数组为空,则pop方法会返回null.
语法如下所示:
array.pop()
示例如下所示:
btnpopDemoClick(sender: Core.Classes.TComponent){ var arrayName: string[] = ['C','Sharp','Corner','VB','Net','Heaven']; var index = arrayName.pop().toString(); this.edit1.text= "Pop Method \n 从数组中移除元素-> " + index; }
输出结果如下所示:
Pop Method 从数组中移除元素-> Heaven
reverse()方法
用于反转数组元素的顺序,reverse方法没有参数,返回被反转后的数组,使得最后一个元素变为第1个元素,第1个元素变为最后一个元素.
语法如下所示:
array.reverse()
示例如下所示:
var fstarry: string[] = ['C','Sharp','Corner']; fstarry.reverse(); this.edit1.text = "Revrese Method \n 反转后的数组: -> " + fstarry + "\n";
结果如下所示:
Revrese Method 反转后的数组: -> Corner,Sharp,C
shift() 方法
移除数组中的首个元素,减少数组的长度并且返回被移除的元素,如果数组的键为数字型,那么所有的元素将得到新的键,从0开始依次递增.
array.shift()
示例如下所示:
var arrayName: string[] = ['C','Sharp','Corner','VB','Net','Heaven']; var index = arrayName.shift().toString(); this.edit1.text = "Shift Method \n 移除的元素为 -> " + index;
结果如下所示:
Shift Method 移除的元素为 -> C
slice() 方法
该方法返回指定起始位置的一个新的数组,slice和concat方法让用户可以根据指定的原始数组创建一个新的数组,并不会修改原始的数组,如果只想让原始数组被新数组替代,可以设置旧的数组等于新的数组.
语法如下所示:
array.slice(start,end)
示例如下所示:
var fstarry: string[] = ['C','Sharp','Corner','Dot','Net','Heaven','Modeling','Corner']; var sliceArry=fstarry.slice(3, 7); this.edit1.text = "Slice Method \n 新的数组为 -> " + sliceArry + "\n";
示例运行结果如下:
Slice Method 新的数组为 -> Dot,Net,Heaven,Modeling
sort() 方法
排序数组,如果没有指定参数,那么将会按照字母数字顺序进行排序,语法如下:
array.sort(comparison_function)
示例如下所示:
var arrayName: string[] = ['C','Sharp','Corner','VB','Net','Heaven']; var sortArry = arrayName.sort(); this.edit1.text= "Sort Method \n 排序后的结果为-> " + sortArry+"\n";
运行效果如下所示:
Sort Method 排序后的结果为-> C,Corner,Heaven,Net,Sharp,VB
在TypeScript中,与数组相关的方法还包含splice,toString,unshift等,好在微软提供了一份TypeScript使用规范文档,大家可以下载回来参考.
本章示例全部在WisOne IDE中完成,单元源代码如下所示:
module Unit1{ export class TForm1 extends Core.Forms.TForm{ btnsort: Core.StdCtrls.TButton; btnslice: Core.StdCtrls.TButton; btnshift: Core.StdCtrls.TButton; btnreverse: Core.StdCtrls.TButton; btnpopDemo: Core.StdCtrls.TButton; btnpushdemo: Core.StdCtrls.TButton; button1: Core.StdCtrls.TButton; memo1: Core.StdCtrls.TMemo; btnArrayJoin: Core.StdCtrls.TButton; edit1: Core.StdCtrls.TEdit; btnArrayFor: Core.StdCtrls.TButton; btnArrayType: Core.StdCtrls.TButton; btnemptyArray: Core.StdCtrls.TButton; btnArray: Core.StdCtrls.TButton; btnsortClick(sender: Core.Classes.TComponent){ var arrayName: string[] = ['C','Sharp','Corner','VB','Net','Heaven']; var sortArry = arrayName.sort(); this.edit1.text= "Sort Method \n 排序后的结果为-> " + sortArry+"\n"; } btnsliceClick(sender: Core.Classes.TComponent){ var fstarry: string[] = ['C','Sharp','Corner','Dot','Net','Heaven','Modeling','Corner']; var sliceArry=fstarry.slice(3, 7); this.edit1.text = "Slice Method \n 新的数组为 -> " + sliceArry + "\n"; } btnshiftClick(sender: Core.Classes.TComponent){ var arrayName: string[] = ['C','Sharp','Corner','VB','Net','Heaven']; var index = arrayName.shift().toString(); this.edit1.text = "Shift Method \n 移除的元素为 -> " + index; } btnreverseClick(sender: Core.Classes.TComponent){ var fstarry: string[] = ['C','Sharp','Corner']; fstarry.reverse(); this.edit1.text = "Revrese Method \n 反转后的数组: -> " + fstarry + "\n"; } btnpopDemoClick(sender: Core.Classes.TComponent){ var arrayName: string[] = ['C','Sharp','Corner','VB','Net','Heaven']; var index = arrayName.pop().toString(); this.edit1.text= "Pop Method \n 从数组中移除元素-> " + index; } btnpushdemoClick(sender: Core.Classes.TComponent){ var fstarry: string[] = ['C','Sharp','Corner']; var elemnt ="wis_one" fstarry.push(elemnt); this.edit1.text= "Push Method \n 插入了数组元素值之后, Array is -> " + fstarry + "\n"; } button1Click(sender: Core.Classes.TComponent){ var arrayName: string[] = ['C','Sharp','Corner','VB','Net','Heaven']; var index = arrayName.lastIndexOf('Corner'); this.edit1.text="Corner的索引位置是:"+index; } btnArrayJoinClick(sender: Core.Classes.TComponent){ var fstarry: string[] = ['C','Sharp','Corner', '.com']; var result = fstarry.join(); var result1 = fstarry.join('+'); var result2 = fstarry.join('*'); this.edit1.text="Join Method \n 第1个join示例 -> " + result + "\n" + "第2个使用+号的示例 (+) -> " + result1 + "\n" + "第3个使用*号的示例(*) -> " + result2 +"\n"; } btnArrayForClick(sender: Core.Classes.TComponent){ //定义一个字符串类型的数组 var actors:string[]=["张三","李四","王五","赵六"]; //使用标准for循环 for (var i = 0; i < actors.length; i++) { console.log(actors[i]); } //使用for..in循环 for (var actor in actors) { console.log(actors[actor]); } } btnArrayTypeClick(sender: Core.Classes.TComponent){ //定义数字类型的数组,但是又分配了字符串和数字值,编译器没有抛出异常 var actors:number[]=["李小五",123]; alert(actors[0]); } btnemptyArrayClick(sender: Core.Classes.TComponent){ //定义一个任意类型的空白数组,这个语法不被支持 //var emptyArray:any[]=new Array(); //建议使用如下的语法 var emptyArray:any[]=[]; emptyArray[0]="这是一个测试"; alert(emptyArray[0]); } btnArrayClick(sender: Core.Classes.TComponent){ //定义一个字符串类型的数组 var actors:string[]=["张三","李四","王五","赵六"]; //可以使用Array对象的任何属性 alert(actors.length); } } }
