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

    }
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。