玩转TypeScript(3)--数组

时间 2019-11-24

标签 typescript 数组繁體版

原文原文链接

数组的语法和语义与C#数组很是类似,首先要指定一个数组名,后跟冒号,冒号后面紧跟数组的类型,数组类型名后面跟方括号表示当前定义的是一个数组,对于一个空的数组定义,可使用以下的语法:html

        btnArrayClick(sender: Core.Classes.TComponent){
            //定义一个字符串类型的数组
            var actors:string[]=["张三","李四","王五","赵六"];
            //可使用Array对象的任何属性
            alert(actors.length);
        }

数组属于Array对象的实例,所以要实例化一个空白的数组,能够直接赋一个空白的Array对象实例便可,以下代码所示:java

        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类型,而不是特定的类型.this

var asExpected = actors[0];          // 返回字符串类型的 "张三"
var gotcha = actors["Ian Holm"];   //返回任意类型的值

TypeScript中还可使用不少相似javaScript中的函数来实现对数组的操纵,接下来讨论一些常见函数的使用:spa

Concat()方法code

该方法用于链接或者是合并2个或多个数组,而且返回一个新的数组,它并不改变已经存在的数组,而是返回一个包含全部数组值的数组.
语法以下:orm

array.concat(value1,value2,valu3,....................valuen)

array: 全部的其余数组要进行合并的源数组
value:要添加到源数组中的其余数组元素.htm

举例:

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

    }
}