玩轉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使用規范文檔,大家可以下載回來參考.

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

    }
}

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM