玩转TypeScript(3)--数组

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› TypeScript›TypeScript教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

数组的语法和语义与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使用规范文档,大家可以下载回来参考.

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);
        }

    }
}