官术网_书友最值得收藏!

第2章 數(shù)據(jù)類型

本章將講解JavaScript程序設(shè)計(jì)中的基本要素,即數(shù)據(jù)類型。任何一種程序設(shè)計(jì)語(yǔ)言,都離不開(kāi)對(duì)數(shù)據(jù)和業(yè)務(wù)邏輯的處理,對(duì)數(shù)據(jù)進(jìn)行操作前必須確定數(shù)據(jù)的類型。數(shù)據(jù)的類型規(guī)定了可以對(duì)該數(shù)據(jù)進(jìn)行的操作和數(shù)據(jù)存儲(chǔ)的方式。

JavaScript作為一門腳本語(yǔ)言,其使用過(guò)程完全表現(xiàn)出自動(dòng)化特點(diǎn)。和其他腳本語(yǔ)言一樣,使用時(shí)不需要顯式指定數(shù)據(jù)的類型,僅在某些特殊場(chǎng)合才需要知道某一數(shù)據(jù)的類型。JavaScript數(shù)據(jù)類型包括基本類型和復(fù)合類型,本章重點(diǎn)講解各種常用的數(shù)據(jù)類型。

● 理解和掌握基本數(shù)據(jù)類型的特點(diǎn),以便在今后程序設(shè)計(jì)中正確運(yùn)用

● 理解和掌握復(fù)合數(shù)據(jù)類型的特點(diǎn),并通過(guò)實(shí)際的練習(xí)加以鞏固

● 理解并掌握常用的內(nèi)置對(duì)象的特性和使用方法

以上幾點(diǎn)是對(duì)讀者在學(xué)習(xí)本章內(nèi)容時(shí)所提出的基本要求,也是本章希望能夠達(dá)到的目的。讀者在學(xué)習(xí)本章內(nèi)容時(shí)可以將其作為學(xué)習(xí)的參照。

2.1 基本數(shù)據(jù)類型

每一種程序設(shè)計(jì)語(yǔ)言都規(guī)定了一套數(shù)據(jù)類型,其中最基本不可再細(xì)分的類型稱為基本數(shù)據(jù)類型。JavaScript基本數(shù)據(jù)類型包括字符串型、布爾型和數(shù)值型等,這幾種是JavaScript中使用最為普遍的數(shù)據(jù)類型,下面分別講解各種類型的特點(diǎn)和使用方法。

2.1.1 字符串型數(shù)據(jù)

在JavaScript中,字符串型數(shù)據(jù)是用引號(hào)括起的文本字符串。例如“好久不見(jiàn),你還好嗎?”或‘Bob是個(gè)聰明的孩子’。每一個(gè)字符串?dāng)?shù)據(jù)都是String對(duì)象的實(shí)例,其主要用于組織處理由多個(gè)字符構(gòu)成的數(shù)據(jù)串。定義一個(gè)字符串時(shí)不需要指定類型,只需要按以下語(yǔ)法定義即可。

定義字符串的第一種形式如下:

        var hello = "你好啊";

定義字符串的第二種形式如下:

        var hello = '你好啊';

其中,var是JavaScript中用于定義變量的關(guān)鍵字。此處用其定義一個(gè)名為hello的字符串變量,關(guān)于變量的內(nèi)容將在本書(shū)第3章詳細(xì)講解。程序執(zhí)行時(shí)系統(tǒng)自動(dòng)為hello采用字符串的處理方式,此處字符串變量hello的數(shù)據(jù)內(nèi)容為“你好啊”。第一種定義方式和第二種定義方式效果完全一樣,系統(tǒng)不會(huì)對(duì)此加以區(qū)分,下面編寫(xiě)一個(gè)程序演示字符串用法。

【范例2-1】編寫(xiě)程序,練習(xí)使用引號(hào)定義字符串變量。向Peter輸出一句問(wèn)候語(yǔ),如示例代碼2-1所示。

示例代碼2-1

        01  <script language="javascript">                  // 腳本程序開(kāi)始
        02  <!--
        03       var hello = "你好啊";                       // 使用雙引號(hào)定義字符串
        04       var name = 'Peter';                        // 使用單引號(hào)定義字符串
        05       alert(hello + name );                      // 將兩個(gè)字符串合在一起顯示
        06  -->
        07  </script>                                       <!--腳本程序結(jié)束-->

【運(yùn)行結(jié)果】打開(kāi)網(wǎng)頁(yè)文件運(yùn)行程序,所得結(jié)果如圖2-1所示。

【代碼解析】本例代碼中第3行和第4行分別使用雙引號(hào)和單引號(hào)定義字符串變量,主要演示字符串變量的定義方法。第5行使用window對(duì)象的alert方法將連接后的字符串?dāng)?shù)據(jù)輸出顯示。

圖2-1 連接后的字符串

2.1.2 深入理解字符串

在JavaScript中不區(qū)分“字符”和“字符串”,字符也被當(dāng)做字符串處理。例如,在字符串“this is a string”中“h”是按從左到右順序的第一個(gè)字符,可以使用字符串對(duì)象的charAt方法取出一個(gè)字符串中的指定的一個(gè)字符,有關(guān)“對(duì)象”的內(nèi)容將在本書(shū)的后續(xù)章節(jié)講到。

提示:字符串中的字符索引從0開(kāi)始,所以上述字符串中的“h”是該串的第一個(gè)字符。字符串中的字符按順序存儲(chǔ)。

前面講述的是有關(guān)字符串的定義方式。字符串中的字符數(shù)據(jù)僅包含常見(jiàn)的普通字符,然而字符串中可以包含用于特殊目的字符。比如用于換行控制的字符“\n”,此類字符在JavaScript中稱為轉(zhuǎn)義字符。轉(zhuǎn)義字符的定義以“\”開(kāi)始,JavaScript中的轉(zhuǎn)義字符如表2-1所示。

表2-1 JavaScript中部分常用的轉(zhuǎn)義字符

表2-1列出了一些常用的轉(zhuǎn)義字符,更多的轉(zhuǎn)義字符請(qǐng)查閱相關(guān)資料。一般來(lái)說(shuō)轉(zhuǎn)義字符主要用于在字符串中輸入一些控制字符和系統(tǒng)已經(jīng)保留了的字符,比如雙引號(hào)、單引號(hào)和左斜杠等。下面通過(guò)編寫(xiě)程序演示轉(zhuǎn)義字符的使用方法。

【范例2-2】編寫(xiě)程序,使用轉(zhuǎn)義字符在字符串中輸出回車換行、制表符和引號(hào)等。演示轉(zhuǎn)義字符的使用方法,如示例代碼2-2所示。

示例代碼2-2

        01  <script language="javascript">             // 腳本程序開(kāi)始
        02       var str1 = "1,使用回車換行符\n";         // 行尾使用"\n"作回車換行
        03       var str2 = "2,使用回車符\r";            // 行尾使用"\r"回車符
        04       var str3 = "3,使用:\t制表符\n";         // 行中間使用一個(gè)制表符"\t"
        05       var str4 = "4,使用\"雙引號(hào)\"";          // 使用引號(hào)"\""
        06       var str  = str1 + str2 + str3 + str4;  // 將4個(gè)字符串連接為了一個(gè)串用于顯示
        07       alert(str);                            // 在對(duì)話框是顯示連接后的串str
        08  </script>                                  // 腳本程序結(jié)束

【運(yùn)行結(jié)果】雙擊網(wǎng)頁(yè)文件運(yùn)行程序,其結(jié)果如圖2-2所示。

圖2-2 輸出引號(hào)

【代碼解析】第2行定義字符串變量str1并為其賦值,串末尾使用了“回車換行”轉(zhuǎn)義字符“\n”,起到換行的作用。第3行定義字符串變量str2,串末尾使用“回車”轉(zhuǎn)義字符“\r”,相當(dāng)于輸入字符串時(shí)按了一次回車鍵。第4行所定義的字符變量str3的值中使用了“制表符”轉(zhuǎn)義字符“\t”,作用是在輸出該字符串時(shí)將其當(dāng)做一個(gè)“Tab”鍵處理。

第5行的字符串變量str4的值中使用了引號(hào)轉(zhuǎn)義字符“\"”。因?yàn)橐?hào)已經(jīng)被JavaScript保留為關(guān)鍵字符,所以用戶在字符串中使用引號(hào)時(shí)采用轉(zhuǎn)義字符“\"”即可。第6行將前面定義的4個(gè)字符串連接為一個(gè)字符串str,并用于以后輸出顯示。

提示:一部分轉(zhuǎn)義字符在輸出為HTML文本流時(shí)并不發(fā)生作用,比如制表符、回車換行等。讀者不妨自行測(cè)試,將上述例子中的alert(str)換成document.write(str)后所得結(jié)果與圖2-2相比較。

2.1.3 使用數(shù)值型數(shù)據(jù)

JavaScript中用于表示數(shù)字的類型稱為數(shù)字型,不像其他編程語(yǔ)言那樣區(qū)分整型、浮點(diǎn)型。數(shù)字型用雙精度浮點(diǎn)值來(lái)表示數(shù)字?jǐn)?shù)據(jù),可以表示(-253,+253)區(qū)間中的任何值。數(shù)字的值可以用普通的記法也可以使用科學(xué)記數(shù)法。

JavaScript的數(shù)字可以寫(xiě)成十進(jìn)制、十六進(jìn)制和八進(jìn)制,其各種寫(xiě)法如下:

● 十進(jìn)制,可以用普通記法和科學(xué)記數(shù)法。

        10;                                        // 數(shù)字
        10.1;                                      // 數(shù)字
        0.1;                                       // 數(shù)字
        3e7;                                       // 科學(xué)記數(shù)
        0.3E7;                                     // 科學(xué)記數(shù)

● 十六進(jìn)制以“0X”或“0x”開(kāi)頭后面跟0~F的十六進(jìn)制數(shù)字,沒(méi)有小數(shù)和指數(shù)部分。

        0xAF3E;                                    // 十六進(jìn)制
        0X30FB;                                    // 十六進(jìn)制

● 八進(jìn)制以0開(kāi)頭,后跟0~7的八進(jìn)制數(shù)字,同樣沒(méi)有小數(shù)和指數(shù)部分。

        037;                                       // 八進(jìn)制
        012346;                                    // 八進(jìn)制

以上是常用的數(shù)字表示法,下面通過(guò)編寫(xiě)程序來(lái)加深對(duì)數(shù)字型數(shù)據(jù)的理解。

【范例2-3】編寫(xiě)程序,練習(xí)八進(jìn)制、十六進(jìn)制、十進(jìn)制數(shù)字的表示方法。演示JavaScript常用的數(shù)字型數(shù)據(jù)的使用方法,如示例代碼2-3所示。

示例代碼2-3

        01  <script language="javascript">         // 腳本程序開(kāi)始
        02  <!--
        03                                         // 使用16進(jìn)制數(shù)
        04       var i = 0Xa1;                      // 分別定義兩個(gè)數(shù)字變量,并使用0x和
                                                  // 0X作十六進(jìn)制設(shè)置初值
        05       var j = 0xf2;
        06       var s = i + j;                     // 十六進(jìn)制變量i與j相加
        07                                         // 輸出為十進(jìn)制
        08       document.write("<li>十六進(jìn)制數(shù)0xa1等于十進(jìn)制數(shù):" + i + "<br>" );
        09       document.write("<li>十六進(jìn)制數(shù)0xf2等于十進(jìn)制數(shù):" + j + "<br>" );
        10       document.write("<li>十六進(jìn)制數(shù)0xf2加上0xa1的和為:" + s + "<br>" );
        11
        12                                         // 使用8進(jìn)制數(shù)
        13       var k = 0123;                      // 分別定義兩個(gè)數(shù)值變量,分別用八進(jìn)制值
                                                  // 設(shè)置為初值
        14       var l = 071;
        15       var m = k + l;                     // 兩個(gè)變量的值相加
        16                                         // 輸出為十進(jìn)制
        17       document.write("<li>八進(jìn)制數(shù)0123等于十進(jìn)制數(shù):" + k + "<br>" );
        18       document.write("<li>八進(jìn)制數(shù)071等于十進(jìn)制數(shù):" + l + "<br>" );
        19       document.write("<li>八進(jìn)制數(shù)0123加上071的和為:" + m + "<br>" );
        20                                         // 使用10進(jìn)制
        21       var t1 = 0.1;                      // 定義十進(jìn)制小數(shù)數(shù)字的形式
        22       var t2 = 1.1;
        23       var t3 = 2e3;                      // 使用科學(xué)計(jì)數(shù)法表示數(shù)值
        24       var t4 = 2e-3
        25       var t5 = 0.1e2;
        26       var t6 = 0.1e-2;                   // 將各變量的值全部輸出
        27       document.write("<li>十進(jìn)制帶小數(shù)的形式:" + t1 + "和" + t2 + "<br>" );
                                                  // 在文檔中輸出變量
        28       document.write("<li>十進(jìn)制科學(xué)記數(shù)2e3等于:" + t3 + "<br>" );
                                                  // 在文檔中輸出變量
        29       document.write("<li>十進(jìn)制科學(xué)記數(shù)2e-3等于:" + t4 + "<br>" );
                                                  // 在文檔中輸出變量
        30       document.write("<li>十進(jìn)制科學(xué)記數(shù)0.1e2等于:" + t5 + "<br>" );
                                                  // 在文檔中輸出變量
        31       document.write("<li>十進(jìn)制科學(xué)記數(shù)0.1e-2等于:" + t6 + "<br>" );
                                                  // 在文檔中輸出變量
        32  -->
        33  </script>                              // 腳本程序開(kāi)始

【運(yùn)行結(jié)果】雙擊網(wǎng)頁(yè)文件運(yùn)行程序,其結(jié)果如圖2-3所示。

圖2-3 各種進(jìn)制數(shù)混合運(yùn)算

【代碼解析】本示例第4~6行定義三個(gè)變量,并分別賦十六進(jìn)制表示的初值。第8~10行將三個(gè)變量輸出為十進(jìn)制表示的數(shù)。第13~15行定義三個(gè)變量,分別賦八進(jìn)制表示的初值。第17~19行將三個(gè)變量輸出為十進(jìn)制表示的數(shù)。第21~26行定義數(shù)個(gè)變量并對(duì)它們賦予用不同表示法表示的十進(jìn)制數(shù)值。第27~31行將變量t1~t6逐一輸出為普通的十進(jìn)制數(shù)字。

提示:用科學(xué)記數(shù)法、十六進(jìn)制記數(shù)法和八進(jìn)制記數(shù)法表示的數(shù)字,在輸出時(shí)全部自動(dòng)轉(zhuǎn)換為普通的十進(jìn)制形式。

2.1.4 使用布爾型數(shù)據(jù)

布爾型是只有“真”和“假”兩個(gè)值的數(shù)據(jù)類型。作為邏輯表達(dá)式的結(jié)果,真值用“true”表示,假值用“false”表示。事實(shí)上,非0值即為“真”,0值即為“假”。布爾型數(shù)據(jù)通常用來(lái)表示某個(gè)條件是否成立,定義的一個(gè)布爾型變量的形式如下:

        var b = true                           // 布爾型變量

或者如下:

        var b = false;                         // 布爾型變量

提示:在JavaScript中定義任何變量都不需要顯式地為其指定類型,系統(tǒng)會(huì)根據(jù)變量的值類型來(lái)確定變量的數(shù)據(jù)類型。上述變量b的值為true或false時(shí),系統(tǒng)會(huì)確定該變量的數(shù)據(jù)類型為布爾型。

下面編寫(xiě)程序演示布爾數(shù)據(jù)類型的使用方法。

【范例2-4】編寫(xiě)程序,練習(xí)布爾型數(shù)據(jù)的使用方法。驗(yàn)證“非零值為真,零值為假”,掌握布爾型數(shù)據(jù)的特點(diǎn),如示例代碼2-4所示。

示例代碼2-4

        01  <script language="javascript">             // 腳本程序
        02  <!--
        03       var b1 = true;                         // 定義布爾型變量b1并賦初始為“真”
        04       if( b1 )                               //判斷b1的真是否為真,真則執(zhí)行“{}”
                                                      // 中的語(yǔ)句
        05       {
        06           document.write("變量b1的值為\"真\"<br>");
                                                      // 輸出提示
        07       }
        08       var b2 = false;                        // 定義布爾變量
        09       if( b2 )                               // 為真時(shí)
        10       {
        11           document.write("變量b2的值為\"真\"<br>");
                                                      // 輸出提示
        12       }
        13       else                                   // 為假時(shí)
        14       {
        15           document.write("變量b2的值為\"假\"<br>");
                                                      // 輸出提示
        16       }
        17       var b3 = 0.1;                          // 定義數(shù)字類型變量b3并賦予非0值
        18       if( b3 )                               // 此處b3被當(dāng)做布爾型變量,若為真
        19       {
        20           document.write("變量b3的值為\"真\"<br>");
                                                      // 輸出提示
        21       }
        22       var b4 = -1;                           // 定義數(shù)字類型變量b4并賦予非0值
        23       if( b4 )                               // 此處b4被當(dāng)做布爾型變量,若為真
        24       {
        25           document.write("變量b4的值為\"真\"<br>");
                                                      // 輸出提示
        26       }
        27       var b5 = 0;                            // 定義數(shù)字類型變量并賦予0值
        28       if( b5 )                               // 此處b5被當(dāng)做布爾型變量,若為真
        29       {
        30           document.write("變量b5的值為\"真\"<br>");
                                                      // 輸出提示
        31       }
        32       else                                   // 為假時(shí)
        33       {
        34           document.write("變量b5的值為\"假\"<br>");
                                                      // 輸出提示
        35       }
        36  -->
        37  </script>                                  // 腳本程序結(jié)束

【運(yùn)行結(jié)果】打開(kāi)網(wǎng)頁(yè)文件運(yùn)行程序,其結(jié)果如圖2-4所示。

【代碼解析】本示例使用了if語(yǔ)句對(duì)布爾型變量的值進(jìn)行判斷,關(guān)于if語(yǔ)句將在后面的章節(jié)講到。此處讀者只需知道如果if后小括號(hào)里布爾型變量的值為真時(shí),則執(zhí)行if后“{}”中的語(yǔ)句。

圖2-4 非零值為真

第3行定義一個(gè)布爾型變量并為其賦予初值true,在第4行中將其作為if控制語(yǔ)句的測(cè)試條件。其值為“真”,于是執(zhí)行第5~7行“{}”中的內(nèi)容。第18行和第23行分別將非0數(shù)字型變量當(dāng)做布爾型變量使用,作為if控制語(yǔ)句的測(cè)試條件。結(jié)果表明,非0值的數(shù)字型變量作為布爾型變量使用時(shí),其值為“真”。第27~35行使用了一個(gè)0值數(shù)字型變量b5作布爾型變量使用,結(jié)果表明其布爾值為“假”。

提示:JavaScript中除了“true”和“false”表示“真”和“假”外,任意非0值就表示“真”,0值表示“假”,請(qǐng)讀者多做測(cè)試。

2.2 復(fù)合數(shù)據(jù)類型

前面一節(jié)所講的字符串型、數(shù)值型和布爾型數(shù)據(jù)是JavaScript的簡(jiǎn)單數(shù)據(jù)類型。本節(jié)將介紹復(fù)合數(shù)據(jù)類型,對(duì)象和數(shù)組。對(duì)象是JavaScript封裝了一套操作方法和屬性的類實(shí)例,是基本數(shù)據(jù)類型之一。本書(shū)后面的章節(jié)將安排專門的內(nèi)容來(lái)介紹數(shù)組。

2.2.1 常用內(nèi)置對(duì)象

在面向?qū)ο蟮脑O(shè)計(jì)模式中,將數(shù)據(jù)和處理數(shù)據(jù)的方法捆綁在一起形成一個(gè)整體,稱為對(duì)象。換句話說(shuō),對(duì)象封裝了數(shù)據(jù)和操作數(shù)據(jù)的方法,要使用其中的數(shù)據(jù)或方法須先創(chuàng)建該對(duì)象。可以使用new運(yùn)算符來(lái)調(diào)用對(duì)象的構(gòu)造函數(shù),從而創(chuàng)建一個(gè)對(duì)象,方式如下:

        var obj = new Object();                    // 創(chuàng)建新對(duì)象

參數(shù)說(shuō)明:

● obj,變量名,必需。指向創(chuàng)建的Object對(duì)象。

要訪問(wèn)已經(jīng)創(chuàng)建對(duì)象的屬性或方法,可以使用“.”運(yùn)算符,形式如下:

        obj.toString();                            // 作為字符串輸出

上述代碼調(diào)用對(duì)象obj的toString方法。

JavaScript內(nèi)建了幾種常用的對(duì)象,封裝了常用的方法和屬性,如表2-2所示。

表2-2 JavaScript中常用的對(duì)象

下面對(duì)表2-2中常用的對(duì)象進(jìn)行講解,包括Date、String、Global、Number和Math,其他對(duì)象在后面的章節(jié)有專門的內(nèi)容講解。

2.2.2 常用日期對(duì)象

JavaScript將與日期相關(guān)的所有特性封裝進(jìn)Date對(duì)象,包括日期信息及其操作,主要用來(lái)進(jìn)行與時(shí)間相關(guān)的操作。Data對(duì)象一個(gè)典型應(yīng)用是獲取當(dāng)前系統(tǒng)時(shí)間,使用前首先創(chuàng)建該對(duì)象的一個(gè)實(shí)例,創(chuàng)建語(yǔ)法如下:

        date = new Date( );                                 // 直接創(chuàng)建
        date = new Date( val );                             // 指定日期創(chuàng)建
        date = new Date( y , m, d [, h [, min [, sec [,ms]]]] );
                                                          // 指定日期創(chuàng)建

參數(shù)說(shuō)明:

● val,必選項(xiàng)。表示指定日期與1970年1月1日午夜間全球標(biāo)準(zhǔn)時(shí)間的毫秒數(shù)。

● y、m和d分別對(duì)應(yīng)年、月和日,必選。h、min、sec和ms分別對(duì)應(yīng)時(shí)、分、秒和毫秒,可選。

這三種創(chuàng)建方式中根據(jù)需要選擇一種即可。第一種方式創(chuàng)建一個(gè)包含創(chuàng)建時(shí)時(shí)間值的Date對(duì)象。第二種方式創(chuàng)建一個(gè)與1970年1月1日午夜間全球標(biāo)準(zhǔn)時(shí)間相差val毫秒的日期。第三種方式創(chuàng)建指定年、月、日、時(shí)、分、秒和毫秒的日期。

【范例2-5】編寫(xiě)程序,顯示程序運(yùn)行時(shí)的本地時(shí)間。演示Date對(duì)象的使用方法,如示例代碼2-5所示。

示例代碼2-5

        01  <script language="javascript">                      // 腳本程序開(kāi)始
        02  <!--
        03       var cur = new Date();                           // 創(chuàng)建當(dāng)前日期對(duì)象cur
        04       var years = cur.getYear();                      //從日期對(duì)象cur中取得年數(shù)
        05       var months = cur.getMonth();                    // 取得月數(shù)
        06       var days = cur.getDate();                       // 取得天數(shù)
        07       var hours = cur.getHours();                     // 取得小時(shí)數(shù)
        08       var minutes = cur.getMinutes();                 // 取得分鐘數(shù)
        09       var seconds = cur.getSeconds();                 // 取得秒數(shù)
        10                                                      // 顯示取得的各個(gè)時(shí)間值
        11       alert( "此時(shí)時(shí)間是:" + years + "年" + (months+1) + "月"
                                                                // 輸出日期信息
        12           + days + "日" + hours + "時(shí)" + minutes + "分"
        13           + seconds + "秒" );
        14  -->
        15  </script>                                           <!--腳本程序結(jié)束-->

【運(yùn)行結(jié)果】打開(kāi)網(wǎng)頁(yè)文件運(yùn)行程序,其結(jié)果如圖2-5所示。

【代碼解析】本示例使用Date對(duì)象取得當(dāng)前日期。第4行調(diào)用Date對(duì)象的默認(rèn)構(gòu)造函數(shù)Date創(chuàng)建一個(gè)對(duì)象,Date對(duì)象的默認(rèn)構(gòu)造函數(shù)將創(chuàng)建帶有當(dāng)前時(shí)間信息的Date對(duì)象。若要?jiǎng)?chuàng)建帶有指定時(shí)間信息的Date對(duì)象,請(qǐng)使用帶參數(shù)的構(gòu)造函數(shù),或者創(chuàng)建后調(diào)用Date對(duì)象的方法設(shè)定時(shí)間。第8~18行分別使用Date對(duì)象的get系列方法取得相關(guān)值,第20行組合顯示各變量的值。

圖2-5 輸出當(dāng)前時(shí)間

Date對(duì)象提供了大量用于日期操作的方法和屬性,下面歸納Date對(duì)象的部分常用方法,如表2-3所示。

表2-3 Date對(duì)象的常用方法

表2-3中g(shù)et系列是獲取時(shí)間值的方法,set系列是設(shè)置時(shí)間值的方法,下面通過(guò)編寫(xiě)程序加以鞏固。

【范例2-6】編寫(xiě)程序,創(chuàng)建一個(gè)Date對(duì)象,將其中日期設(shè)置為2007年4月20日。練習(xí)設(shè)置Date對(duì)象中時(shí)間值,如示例代碼2-6所示。

示例代碼2-6

        01  <script language="javascript">                      // 腳本程序開(kāi)始
        02  <!--
        03       var dateObj = new Date();                       // 創(chuàng)建一個(gè)日期對(duì)象
        04       dateObj.setYear( 2007 );                        // 設(shè)置日期對(duì)象的年份
        05       dateObj.setDate( 20 );                          // 設(shè)置日期對(duì)象的日期
        06       dateObj.setMonth( 4 );                          // 設(shè)置日期對(duì)象的月份
        07                                                      // 顯示日期對(duì)象中的時(shí)間
        08       alert( "dateObj中設(shè)定的時(shí)間為:" + dateObj.getYear() + "年"
                                                                // 輸出日期信息
        09           + dateObj.getMonth() + "月" + dateObj.getDate() + "日" );
        10  -->
        11  </script>                                           <!--腳本程序結(jié)束-->

【運(yùn)行結(jié)果】打開(kāi)網(wǎng)頁(yè)文件運(yùn)行程序,其結(jié)果如圖2-6所示。

【代碼解析】第3~10行創(chuàng)建一個(gè)日期對(duì)象并使用其set系列方法設(shè)置各個(gè)時(shí)間值。第08行調(diào)用日期對(duì)象的get系列方法取出的各個(gè)時(shí)間值,并在對(duì)話框中顯示出來(lái)。

圖2-6 Date對(duì)象中的日期

2.2.3 理解全局對(duì)象

全局對(duì)象是所有全局方法的擁有者,用來(lái)統(tǒng)一管理全局方法,全局方法也就是指全局函數(shù)。該對(duì)象不能使用new運(yùn)算符創(chuàng)建對(duì)象實(shí)例,所有方法直接調(diào)用即可。以下是幾個(gè)常用的Global對(duì)象的方法,如表2-4所示。

表2-4 Global對(duì)象的常用方法

【范例2-7】編寫(xiě)程序,調(diào)用Global對(duì)象的isNaN方法判斷一個(gè)值是否為數(shù)值,如示例代碼2-7所示。

示例代碼2-7

        01  <script language="javascript">                  // 腳本程序開(kāi)始
        02  <!--
        03       var a = NaN;                               // 定義非數(shù)字常量
        04       var b = "123";                             // 字符串樣式數(shù)字
        05       var c = 123;                               // 數(shù)字變量
        06       var d = "1.23";                            // 字符串樣式數(shù)字
        07       document.write( "<b>Global對(duì)象的isNaN方法</b><br>" );
                                                          // 輸出標(biāo)題
        08       var ta =  isNaN( a );                       // 用isNaN方法測(cè)試a的值
        09       document.write( "<li>a的值是否是NaN:" + ta + "<br>" );
                                                          // 輸出提示
        10       var tb = isNaN( b );                       // 測(cè)試b的值
        11       document.write( "<li>b的值是否是NaN:" + tb + "<br>" );
                                                          // 輸出提示
        12       var tc = isNaN( c );                       // 測(cè)試c的值
        13       document.write( "<li>c的值是否是NaN:" + tc + "<br>" );
                                                          // 輸出提示
        14       document.write( "<b>Global對(duì)象的parseInt方法</b><br>" ); // 輸出提示
        15       var ib = parseInt( b );                    //將字符串“123”解析為數(shù)值123
        16       if( ib == c )                              // 如果相等
        17       {
        18           document.write( "<li>b解析為數(shù)值:" + ib + "<br>" );
                                                          // 輸出標(biāo)題
        19       }
        20       document.write( "<b>Global對(duì)象的parseFloat方法</b><br>" );
                                                          //輸出標(biāo)題
        21       var id = parseFloat( d );                  //將字符串“1.23”解析為數(shù)值1.23
        22       if( id == 1.23 )                           // 如果相等
        23       {
        24           document.write( "<li>b解析為數(shù)值:" + id + "<br>" );
                                                          // 輸出提示
        25       }
        26  -->
        27  </script>                                       <!--腳本程序結(jié)束-->

【運(yùn)行結(jié)果】打開(kāi)網(wǎng)頁(yè)文件運(yùn)行程序,其結(jié)果如圖2-7所示。

圖2-7 字符串轉(zhuǎn)換為數(shù)字

【代碼解析】本示例演示Global對(duì)象的isNaN、parseInt和parseFloat三個(gè)方法的使用方式。Global對(duì)象無(wú)須創(chuàng)建即可直接使用,因此使用其方法時(shí)也無(wú)須使用“obj.方法名”的形式。第3~6行定義一組用于測(cè)試前述三個(gè)Global方法的變量。第8行使用isNaN方法測(cè)試變量a是否為NaN值,此處返回一個(gè)為“true”的布爾值。第15和21行分別使用parseInt和parseFloat方法將字符串解析為數(shù)字。

注意:parseFloat方法不解析以非數(shù)字字符開(kāi)頭的字符串,數(shù)字字符后的字符被忽略。讀者可以將示例代碼2-7中的“var d = "1.23";”改成類似“var d = "1.23char";”的形式即可測(cè)試。

2.2.4 常用數(shù)學(xué)對(duì)象

數(shù)學(xué)對(duì)象(Math)封裝了與數(shù)學(xué)相關(guān)的特性,包括一些常數(shù)和數(shù)學(xué)函數(shù),主要使用簡(jiǎn)單一些基本的數(shù)學(xué)計(jì)算。該對(duì)象和Global對(duì)象一樣不能使用new運(yùn)算符創(chuàng)建,Math對(duì)象在程序運(yùn)行時(shí)由JavaScript環(huán)境創(chuàng)建并初始化。調(diào)用Math對(duì)象的方法或?qū)傩缘姆绞饺缦拢?/p>

Math.[ {屬性名|方法名} ];

下面列出了Math對(duì)象部分常用的方法和屬性,供查閱之用,如表2-5所示。

表2-5 Math對(duì)象常用的方法和屬性

通過(guò)表2-5可以看出,Math對(duì)象的很多方法在很大程度上簡(jiǎn)化了基本的數(shù)學(xué)運(yùn)算。比如求正弦、余弦、對(duì)數(shù)等,下面編寫(xiě)程序以熟悉Math對(duì)象的使用方法。

【范例2-8】從Math對(duì)象中獲取圓周率常數(shù),計(jì)算一個(gè)半徑為2單位的圓的面積,如示例代碼2-8所示。

示例代碼2-8

        01  <script language="javascript">             // 腳本程序開(kāi)始
        02  <!--
        03       var r = 2;                             // 定義變量表示半徑
        04       var pi = Math.PI;                      // 從Math對(duì)象中讀取周期率PI常量
        05       var s = pi*r*r;                        // 計(jì)算面積
        06       alert("半徑為2單位的圓面積為:" + s + "單位" );
                                                      // 顯示圓的面積
        07  -->
        08  </script>                                  <!--腳本程序結(jié)束-->

【運(yùn)行結(jié)果】打開(kāi)網(wǎng)頁(yè)文件運(yùn)行程序,其結(jié)果如圖2-8所示。

圖2-8 圓的面積

【代碼解析】第3行定義一個(gè)值為2的變量r作為圓的半徑,第4行讀取Math對(duì)象的PI屬性,并存于變量pi中。第8~10行根據(jù)圓面積求解公式計(jì)算出面積s并輸出顯示。

注意:Math對(duì)象的方法和屬性直接調(diào)而不需要?jiǎng)?chuàng)建Math對(duì)象,否則出錯(cuò)。

【范例2-9】調(diào)用Math對(duì)象的sin方法求90度角的正弦值,調(diào)用abs方法求數(shù)的絕對(duì)值。如示例代碼2-9所示。

示例代碼2-9

        01  <script language="javascript">                          // 腳本程序開(kāi)始
        02  <!--
        03       var r1 = Math.sin( Math.PI/2 );                     // 求正弦
        04       document.write("<li>弧度為pi/2的正弦值為:" + r1 + "<br>" );
                                                                    // 輸出提示
        05       var r2 = 0-r1;                                      // 取反
        06       var r3 = Math.abs( r2 );                            // 求絕對(duì)值
        07       document.write("<li>" + r2 + "的絕對(duì)值為:" + r3 + "<br>" );
                                                                    // 輸出提示
        08  -->
        09  </script>                                               <!--腳本程序結(jié)束-->

【運(yùn)行結(jié)果】打開(kāi)網(wǎng)頁(yè)文件運(yùn)行程序,其結(jié)果如圖2-9所示。

圖2-9 常量PI使用弧度單位

【代碼解析】代碼第04行調(diào)用Math的sin方法計(jì)算PI/2的正弦值,結(jié)果保存到變量r1中。第08行調(diào)用Math對(duì)象的abs方法求值為負(fù)數(shù)的r2的絕對(duì)值。本程序演示了Math對(duì)象方法的調(diào)用方式,讀者可以結(jié)合表2-3對(duì)Math對(duì)象的常用方法多加練習(xí)。

注意:Math對(duì)象的sin等方法需要輸入用弧度度量的角度值參數(shù)。

2.2.5 常用字符串對(duì)象

String對(duì)象封裝了與字符串有關(guān)的特性,主要用來(lái)處理字符串。通過(guò)String對(duì)象,可以對(duì)字符串進(jìn)行剪切、合并、替換等操作??梢哉{(diào)用該對(duì)象的構(gòu)造函數(shù)創(chuàng)建一個(gè)實(shí)例,其實(shí)在定義一個(gè)字符串類型變量時(shí)也就創(chuàng)建了一個(gè)String對(duì)象實(shí)例。調(diào)用String對(duì)象的方法或?qū)傩孕问饺纭皩?duì)象名.方法名”或“對(duì)象名.屬性名”,其構(gòu)造函數(shù)如下:

        String([strVal]);

參數(shù)strVal是一個(gè)字符串,可選項(xiàng)。創(chuàng)建一個(gè)包含值為strVal的String對(duì)象。

String對(duì)象的方法比較多,涵蓋了字符串處理的各個(gè)方面,讀者可根據(jù)需要查閱相關(guān)參考手冊(cè)。下面通過(guò)舉例演示String對(duì)象的使用方法。

【范例2-10】在文本串中將李白《靜夜思》的各個(gè)部分分別提取出來(lái),并格式化輸出。標(biāo)題加粗,文本居中對(duì)齊,詩(shī)歌正文顏色為灰色。如示例代碼2-10所示。

示例代碼2-10

        01  <script language="javascript">                  // 腳本程序開(kāi)始
        02  <!--
        03       var comment = "靜夜思李白床前明月光,疑是地上霜。舉頭望明月,低頭思故鄉(xiāng)。";
                                                          // 詩(shī)的內(nèi)容
        04       var partial = comment.substring( 0, 3 );   // 取出標(biāo)題
        05       partial = partial.bold();          // 標(biāo)題加粗
        06       document.write( "<p align=\"center\">" );
                                                  // 輸出HTML標(biāo)簽“<p>”,并設(shè)置居中對(duì)齊
        07       document.write( partial );         // 輸出標(biāo)題
        08       partial = comment.slice( 3, 5 );   // 取出作者
        09       document.write( "<br>" );          // 輸出換行標(biāo)簽<br>
        10       document.write( partial );         // 輸出作者
        11       partial = comment.slice( 5, 17 );  // 取出第一句詩(shī)文
        12       partial = partial.fontcolor("gray");   // 設(shè)置顏色為gray(灰色)
        13       document.write( "<br>" );              // 輸出換行標(biāo)簽
        14       document.write( partial );             // 輸出詩(shī)句
        15       partial = comment.slice( 17, 29 );     // 取出第二句詩(shī)文
        16       partial = partial.fontcolor("gray");   // 設(shè)置顏色為gray(灰色)
        17       document.write( "<br>" );              // 輸出換行標(biāo)簽
        18       document.write( partial );             // 輸出詩(shī)句
        19       document.write( "</p>" );              // 輸出HTML標(biāo)簽“<p>”的結(jié)束標(biāo)簽
        20  -->
        21  </script>                                  <!--腳本程序結(jié)束-->

【運(yùn)行結(jié)果】打開(kāi)網(wǎng)頁(yè)文件運(yùn)行程序,其結(jié)果如圖2-10所示。

圖2-10 格化式輸出

【代碼解析】本示例演示了String對(duì)象的使用方法。第3行創(chuàng)建一個(gè)String對(duì)象comment,其內(nèi)容為詩(shī)歌文本。第4~19行分別從comment對(duì)象中提取相應(yīng)的內(nèi)容,設(shè)置為目標(biāo)格式后輸出。其中設(shè)置加粗、顏色等方法操作的最終結(jié)果是在目標(biāo)文本中應(yīng)該HTML標(biāo)簽。

String對(duì)象的其他方法還有很多,限于篇幅在此只講部分常用的,更多信息請(qǐng)讀者查閱相關(guān)資料。本節(jié)主要介紹了Object、Global、Date、String和Math對(duì)象,JavaScript其他內(nèi)建對(duì)象將在后面的章節(jié)再做講解。

2.2.6 掌握數(shù)組對(duì)象

數(shù)組是JavaScript中另一種重要的基本數(shù)據(jù)類型。內(nèi)部對(duì)象Array封裝了所有和數(shù)組相關(guān)的方法和屬性,其內(nèi)部存在多個(gè)數(shù)據(jù)段組合存儲(chǔ)??梢孕蜗蟮貙⑵淅斫鉃橐环N有很多連續(xù)房間的樓層,每個(gè)房間都可以存放貨物,提取貨物時(shí)只需要給出樓層號(hào)和房間編號(hào)即可,如圖2-11所示。

圖2-11 數(shù)組式的房間序列

● 創(chuàng)建數(shù)組的方式1,直接使用new運(yùn)算符調(diào)用Array對(duì)象的構(gòu)造函數(shù),代碼如下所示。

        var a = new Array();                            // 創(chuàng)建數(shù)組

以上代碼創(chuàng)建一個(gè)沒(méi)有任何元素的數(shù)組a。

● 創(chuàng)建數(shù)組的方式2,給構(gòu)造函數(shù)傳遞數(shù)組元素為參數(shù),代碼如下所示。

        var a = new Array(10, 20, 30, "string", 40 );   // 創(chuàng)建帶指定元素的數(shù)組

給構(gòu)造函數(shù)傳遞的元素參數(shù)可以是任何JavaScript數(shù)據(jù)類型,JavaScript數(shù)組各元素的類型可以不相同。上述代碼創(chuàng)建了一個(gè)5個(gè)元素的數(shù)組a。

● 創(chuàng)建數(shù)組的方式3,不調(diào)用構(gòu)造函數(shù),直接將元素放入“[]”中即可,元素間用“,”分隔。

        var a = [ 10, 20, 30, "string", 40 ];           // 創(chuàng)建數(shù)組

上述代碼將創(chuàng)建一個(gè)具有5個(gè)元素的數(shù)組a,效果與方式2完全相同。

● 創(chuàng)建數(shù)組的方式4,給構(gòu)造函數(shù)傳遞數(shù)組元素個(gè)數(shù)可以創(chuàng)建具有指定元素個(gè)數(shù)的數(shù)組。

        var a = new Array(3);                           // 指定長(zhǎng)度創(chuàng)建數(shù)組

上述代碼創(chuàng)建了一個(gè)有3個(gè)元素的數(shù)組a。數(shù)組元素的下標(biāo)從0開(kāi)始,使用“數(shù)組名[下標(biāo)]”的方式訪問(wèn)數(shù)組元素。下面編程演示數(shù)組的創(chuàng)建和使用。

【范例2-11】創(chuàng)建一個(gè)數(shù)組用于保存古代幾個(gè)大詩(shī)人的名字,通過(guò)遍歷數(shù)組逐一輸出每個(gè)詩(shī)人的名字,如示例代碼2-11所示。

示例代碼2-11

        01  <script language="javascript">                          // 腳本程序開(kāi)始
        02  <!--
        03       var poets = new Array( "王維",  "杜甫", "李白", "白居易" );
                                                                    // 創(chuàng)建數(shù)組
        04       document.write("古代幾個(gè)大詩(shī)人:<br>");                // 輸出標(biāo)題
        05       for( n in poets )                                   // 逐個(gè)輸出數(shù)組元素
        06       {
        07           document.write( "<li>" + poets[n] );            // 輸出詩(shī)人的名字
        08       }
        09  -->
        10  </script>                                               <!--腳本程序結(jié)束-->

【運(yùn)行結(jié)果】打開(kāi)網(wǎng)頁(yè)文件運(yùn)行程序,結(jié)果如圖2-12所示。

圖2-12 遍歷數(shù)組

【代碼解析】本示例演示了創(chuàng)建數(shù)組的簡(jiǎn)單形式,通過(guò)“[]”運(yùn)算符可以讀取數(shù)組元素的內(nèi)容。第3行創(chuàng)建詩(shī)人名字?jǐn)?shù)組,第5~8行逐一將數(shù)組中的每個(gè)名字作為一個(gè)項(xiàng)目輸出到頁(yè)面文本中。

提示:創(chuàng)建數(shù)組時(shí)盡管已經(jīng)指定了元素個(gè)數(shù),但真正為元素分配內(nèi)存須等到給元素賦值的時(shí)候。

本節(jié)讓讀者對(duì)數(shù)組有一個(gè)大致印象,本書(shū)第7章將對(duì)數(shù)組做專門的講解。

2.3 其他數(shù)據(jù)類型

前面介紹了簡(jiǎn)單數(shù)據(jù)類型、復(fù)合數(shù)據(jù)類型。JavaScript是基于對(duì)象的語(yǔ)言,帶有部分面向?qū)ο蟮奶匦裕虼恕皩?duì)象”是一種用戶自定義數(shù)據(jù)類型。JavaScript用戶自定義對(duì)象使用形式非常簡(jiǎn)單,只需要定義對(duì)象的構(gòu)造函數(shù)即可。通過(guò)在構(gòu)造函數(shù)中為對(duì)象添加屬性和方法,從而形成新的數(shù)據(jù)類型。最終,函數(shù)在JavaScript中被視為一種數(shù)據(jù)類型。本節(jié)將講解函數(shù)的初級(jí)內(nèi)容和其他一些數(shù)據(jù)類型,例如null、undefined等。

2.3.1 使用函數(shù)

在JavaScript中,“函數(shù)”充當(dāng)了兩個(gè)角色,一個(gè)運(yùn)用在數(shù)據(jù)類型方面,另一個(gè)運(yùn)用在子程序設(shè)計(jì)方面。此前與“對(duì)象”有關(guān)的東西隨處可見(jiàn),然而JavaScript卻沒(méi)有使用類的概念。在此函數(shù)用來(lái)定義一種數(shù)據(jù)類型,可以認(rèn)為是用戶自定義數(shù)據(jù)類型。本書(shū)后面將安排專門的章節(jié)來(lái)講解函數(shù)和面向?qū)ο蟮膬?nèi)容。

定義一種自定義數(shù)據(jù)類型的方法如下面代碼所示。

        function TypeName([arg,…])
        {
            this.arg = arg;
        }

上述代碼使用“function”關(guān)鍵字定義了數(shù)據(jù)類型“TypeName”,其構(gòu)造函數(shù)帶可選參數(shù)“arg”。下面通過(guò)編程演示自定義數(shù)據(jù)類型的使用。

【范例2-12】編寫(xiě)程序,定義一種數(shù)據(jù)類型表示汽車,包含“車主”、“極速”兩種屬性。如示例代碼2-12所示。

示例代碼2-12

        01  <script language="javascript">                      // 腳本程序開(kāi)始
        02  <!--
        03       function Card( owner, rate )                    // 定義車子對(duì)象
        04       {
        05           this.Owner = owner;                        // 車主
        06           this.MaxRate = rate;                       // 極速
        07       }
        08       var myCard = new Card( "Sunsir", "400KMpH" );   // 創(chuàng)建一個(gè)車子實(shí)例
        09       document.write( myCard.Owner + "的車子極速為" + myCard.MaxRate );
                                                                // 輸出車子的屬性
        10  -->
        11  </script>                                           <!--腳本程序結(jié)束-->

【運(yùn)行結(jié)果】打開(kāi)網(wǎng)頁(yè)文件運(yùn)行程序,結(jié)果如圖2-13所示。

圖2-13 程序運(yùn)行結(jié)果

【代碼解析】第3~5行使用關(guān)鍵字function定義了一個(gè)自定義數(shù)據(jù)類型Card,該類型包含兩個(gè)屬性字段。第8、9行創(chuàng)建一個(gè)Card對(duì)象實(shí)例,并將其屬性值輸出在HTML文本流中。

提示:函數(shù)的字段可以任意指定,也可以任意添加方法。

2.3.2 使用空值

前面所講過(guò)的每一種JavaScript數(shù)據(jù)類型都有自己的內(nèi)容,而編程中卻需要一種類型來(lái)表示“什么都沒(méi)有”。null類型就是為此目的而產(chǎn)生,其表示一個(gè)空值??梢允褂胣ull和一個(gè)變量進(jìn)行比較以測(cè)試該變量是否擁有內(nèi)容,通常用來(lái)判斷對(duì)象的創(chuàng)建或引用是否成功。

【范例2-13】編寫(xiě)程序,測(cè)試null值,如示例代碼2-13所示。

示例代碼2-13

        01  <script language="javascript">     // 腳本程序開(kāi)始
        02  <!--
        03       var x = 10;                   // 定義變量x,并給其賦值10
        04       var y = null;                 // 定義變量y,并賦一個(gè)空值,表示“什么都沒(méi)有”
        05       if( x == null )               // 如果x為空值則
        06       {
        07           document.write( "x的值為空<br>" );
                                              // 輸出提示
        08       }
        09       if( y == null )               // 如果y為空則
        10       {
        11           document.write( "y的值為空<br>" );
                                              // 輸出提示
        12       }
        13  -->
        14  </script>                          <!--腳本程序結(jié)束-->

【運(yùn)行結(jié)果】打開(kāi)網(wǎng)頁(yè)文件運(yùn)行程序,結(jié)果如圖2-14所示。

【代碼解析】第3行定義一個(gè)數(shù)字型變量x并賦值10,使x擁有一個(gè)為10的數(shù)值。第4行定義一個(gè)變量y并為其賦一個(gè)null值,使y不擁有任何值。第5~12行分別測(cè)試x和y是否為空,若為空則輸出文字以表示。

圖2-14 y為null

提示:當(dāng)創(chuàng)建一個(gè)對(duì)象失敗時(shí),通常返回一個(gè)null值,此時(shí)可以通過(guò)測(cè)試返回值是否為null而確定對(duì)象創(chuàng)建是否成功。

2.3.3 使用不確定的類型

null值表示一個(gè)變量擁有空值。可以理解為已經(jīng)把“空”賦給了某個(gè)變量,而undefined則表示一個(gè)變量什么都沒(méi)有得到,連“空”都沒(méi)有。通常用來(lái)判斷一個(gè)變量是否已經(jīng)定義或已經(jīng)賦值,下面編程測(cè)試這兩者的區(qū)別。

【范例2-14】編寫(xiě)程序,測(cè)試undefined值,如示例代碼2-14所示。

示例代碼2-14

        01  <script language="javascript">         // 腳本程序開(kāi)始
        02  <!--
        03       var v0 = 1;                        // 定義一個(gè)值為1的變量
        04       var v1 = null;                     // 定義一個(gè)變量,并指定值為null
        05       var v2;                            // 定義一個(gè)變量,但不賦任何值
        06       document.write("變量v0的內(nèi)容為:" + v0 + "<br>" );
                                                  // 輸出v0
        07       document.write("變量v1的內(nèi)容為:" + v1 + "<br>" );
                                                  // 輸出v1
        08       document.write("變量v2的內(nèi)容為:" + v2 + "<br>" );
                                                  // 輸出v2
        09       if( v1 == v2 )                     // 測(cè)試“null”和“undefined”的相等性
        10       {
        11           document.write("\"null\"和\"undefined\"相等<br>" );
                                                  // 輸出提示
        12       }
        13       else                               // 不相等
        14       {
        15           document.write("\"null\"和\"undefined\"不相等<br>" );
                                                  // 輸出提示
        16       }
        17  -->
        18  </script>                              <!--腳本程序結(jié)束-->

【運(yùn)行結(jié)果】打開(kāi)網(wǎng)頁(yè)文件運(yùn)行程序,其結(jié)果如圖2-15所示。

【代碼解析】第3行定義變量v0并為其賦值1,使其擁有一個(gè)數(shù)字類型的值。第4行定義變量v1變賦值null。第5行聲明一個(gè)變量v2,但不賦任何值。第6~8行分別輸出變量v0、v1和v2的內(nèi)容。第9行判斷null和undefined是否相等,結(jié)果為相等。

圖2-15 區(qū)別null與undefined

提示:在應(yīng)用中null和undefined實(shí)際意義是等效的。

2.4 數(shù)據(jù)類型的轉(zhuǎn)換

JavaScript是一門簡(jiǎn)單的、弱類型的編程語(yǔ)言。使用時(shí)無(wú)須指定數(shù)據(jù)類型,系統(tǒng)會(huì)根據(jù)值的類型進(jìn)行變量類型自動(dòng)匹配,或者根據(jù)需要自動(dòng)在類型間進(jìn)行轉(zhuǎn)換。JavaScript類型轉(zhuǎn)換包括隱式類型轉(zhuǎn)換和顯式類型轉(zhuǎn)換兩種。

2.4.1 隱式類型轉(zhuǎn)換

程序運(yùn)行時(shí),系統(tǒng)根據(jù)當(dāng)前上下文的需要,自動(dòng)將數(shù)據(jù)從一種類型轉(zhuǎn)換為另一種類型的過(guò)程稱為隱式類型轉(zhuǎn)換。此前的代碼中,大量使用了window對(duì)象的alert方法和document對(duì)象的write方法。可以向這兩個(gè)方法中傳入任何類型的數(shù)據(jù),這些數(shù)據(jù)最終都被自動(dòng)轉(zhuǎn)換為字符串型。

【范例2-15】編寫(xiě)程序,收集用戶的年齡數(shù)據(jù)。當(dāng)用戶輸入的數(shù)字小于等于零時(shí)發(fā)出警告,外部輸入的數(shù)據(jù)都是字符串型,與數(shù)字作比較判斷時(shí)系統(tǒng)自動(dòng)將其轉(zhuǎn)換為數(shù)值型。如示例代碼2-15所示。

示例代碼2-15

        01  <script language="javascript">             // 腳本程序開(kāi)始
        02  <!--
        03       var age = prompt("請(qǐng)輸入您的年齡:", "0");// 輸入年齡
        04       if( age <= 0 )                         // 如果輸入的數(shù)字小于等于0則視為非法
        05       {
        06           alert("您輸入的數(shù)據(jù)不合法!");        // 輸入非法時(shí)警告并忽略
        07       }
        08       else                                   // 大于
        09       {
        10           alert( "你的年齡為" + age + "歲" );  // 輸出年齡
        11       }
        12  -->
        13  </script>                                  <!--腳本程序結(jié)束-->

【運(yùn)行結(jié)果】打開(kāi)網(wǎng)頁(yè)文件運(yùn)行程序,結(jié)果如圖2-16、圖2-17所示。

圖2-16 數(shù)字轉(zhuǎn)換為字符串

圖2-17 輸出用戶輸入的數(shù)據(jù)

【代碼解析】第3行用戶輸入的數(shù)據(jù)以字符串的形式保存于變量age中。第4行將age與數(shù)字0做大小比較,此時(shí)age自動(dòng)被轉(zhuǎn)換為數(shù)值型,此過(guò)程稱為隱式類型轉(zhuǎn)換。第5~11行根據(jù)age的值是否符合要求而顯示相應(yīng)的信息。

2.4.2 顯式類型轉(zhuǎn)換

與隱式類型轉(zhuǎn)換相對(duì)應(yīng)的是顯式類型轉(zhuǎn)換,此過(guò)程需要手動(dòng)轉(zhuǎn)換到目標(biāo)類型。要將某一類型的數(shù)據(jù)轉(zhuǎn)換為另一類型的數(shù)據(jù)需要用到特定的方法。比如前面用到的parseInt、parseFloat等方法,下面再編寫(xiě)一個(gè)范例以演示這兩個(gè)方法的使用。

【范例2-16】編寫(xiě)程序,從字符串中解析出水果價(jià)格的數(shù)值數(shù)據(jù)。如果解析成功則輸出價(jià)格信息,如示例代碼2-16所示。

示例代碼2-16

        01  <script language="javascript">                      // 腳本程序開(kāi)始
        02  <!--
        03       var priceOfApple = "3元";                       // 蘋(píng)果的價(jià)格
        04       var priceOfBanana = "3.5元";                    // 香蕉的價(jià)格
        05       priceOfApple = parseInt( priceOfApple );        // 解析蘋(píng)果的價(jià)格
        06       var priceOfBanana2 = parseInt( priceOfBanana ); // 解析香蕉的價(jià)格
        07       if( ( priceOfApple===3 ) && ( priceOfBanana2 === 3 )
                                                                // 檢查解析是否成功
        08         && ( parseFloat( priceOfBanana ) ===3.5 ) )
        09       {
        10           alert( "蘋(píng)果的價(jià)格:" + priceOfApple          // 輸出水果的價(jià)格
        11               + "\n香蕉的價(jià)格的整數(shù)部分:" + priceOfBanana2
        12               + "\n香蕉的價(jià)格:" + parseFloat( priceOfBanana ) );
        13       }
        14       else                                            // 解析失敗時(shí)
        15       {
        16           alert( "并沒(méi)有得到預(yù)期的轉(zhuǎn)換效果!" );          // 解析失敗時(shí)輸出警告信息
        17       }
        18  -->
        19  </script>                                           <!--腳本程序結(jié)束-->

【運(yùn)行結(jié)果】打開(kāi)網(wǎng)頁(yè)文件運(yùn)行程序,結(jié)果如圖2-18所示。

【代碼解析】本示例主要演示顯式類型轉(zhuǎn)換,第3、4行設(shè)置兩個(gè)字符串表示兩種水果的價(jià)格。第5、6行將字符串解析為數(shù)字,得到水果價(jià)格的數(shù)值數(shù)據(jù)。第7~17行判斷所解析出的價(jià)格數(shù)據(jù)是否正確,正確時(shí)將它們輸出,否則輸出警告。

圖2-18 數(shù)字與字符串間的轉(zhuǎn)換

提示:當(dāng)要轉(zhuǎn)換的字符串帶有parseInt或parseFloat方法不可識(shí)別的字符時(shí),轉(zhuǎn)換結(jié)果可能沒(méi)法預(yù)料。讀者可自行做這方面的測(cè)試。

2.5 小結(jié)

本章主要講解了簡(jiǎn)單數(shù)據(jù)類型,其包括字符串型、數(shù)值型和布爾型。復(fù)合數(shù)據(jù)類型包括對(duì)象和數(shù)組,對(duì)象是JavaScript中最重要的數(shù)據(jù)類型之一。本章僅涉及系統(tǒng)內(nèi)置的對(duì)象,包括Global、Math、Date、Array、Number等。各種基本的數(shù)據(jù)類型之間可以相互轉(zhuǎn)換,根據(jù)轉(zhuǎn)換的方式分為隱式和顯式兩種。數(shù)據(jù)類型是程序設(shè)計(jì)語(yǔ)言最基本的要素之一,希望讀者認(rèn)真理解掌握。如果讀者對(duì)本章內(nèi)容還有什么疑問(wèn),可以參考《JavaScript實(shí)例自學(xué)手冊(cè):通過(guò)486個(gè)例子掌握Web開(kāi)發(fā)捷徑》(電子工業(yè)出版社,吳雪)和《JavaScript權(quán)威指南》(機(jī)械工業(yè)出版社)等書(shū)籍。

2.6 習(xí)題

一、常見(jiàn)面試題

1.JavaScript是否有專門對(duì)字符和字符串的處理?

【解析】本題具有一定的迷惑性,如果熟悉一些高級(jí)開(kāi)發(fā)語(yǔ)言,應(yīng)聘者可能知道高級(jí)語(yǔ)言是區(qū)分字符和字符串的處理的。而JavaScript語(yǔ)言并不區(qū)分,這一點(diǎn)讀者一定注意。

2.數(shù)據(jù)庫(kù)有空值嗎?JavaScript是否也有空值?

【解析】本題考查對(duì)基礎(chǔ)知識(shí)的了解,JavaScript中的null類型表示一個(gè)空值。可以使用null和一個(gè)變量進(jìn)行比較以測(cè)試該變量是否擁有內(nèi)容,通常用來(lái)判斷對(duì)象的創(chuàng)建或引用是否成功。

二、簡(jiǎn)答題

1.JavaScript的基本數(shù)據(jù)類型有哪些?

2.寫(xiě)出幾種常用的內(nèi)置對(duì)象。

3.什么是數(shù)組?它與基本的數(shù)據(jù)類型有什么關(guān)系?

三、綜合練習(xí)

1.編寫(xiě)一個(gè)程序,記錄學(xué)生的《高等數(shù)學(xué)》成績(jī)。要求集中輸出位于60~69、70~79、80~89和90~100各個(gè)分?jǐn)?shù)段的學(xué)生名字。

【提示】該題可以用一個(gè)數(shù)組記錄學(xué)生名字和分?jǐn)?shù),偶數(shù)元素保存學(xué)生的名字,奇數(shù)元素存儲(chǔ)學(xué)生的成績(jī)。遍歷數(shù)組時(shí)檢查元素索引的奇偶性即可分辨當(dāng)前元素是名字還是分?jǐn)?shù)。得到分?jǐn)?shù)值后判斷其所在分?jǐn)?shù)階段,其前一個(gè)數(shù)組元素即為得到該分?jǐn)?shù)的學(xué)生名字。將各分?jǐn)?shù)段的學(xué)生名字分別添加到相應(yīng)的變量,最后一并輸出,參考代碼如下:

        01  <script language="javascript">                  // 腳本程序開(kāi)始
        02  <!--
        03       var score = new Array(    "王勇", 50,       // 分?jǐn)?shù)表
        04                    "白露", 60,
        05                    "楊楊", 76,
        06                    "李明", 83,
        07                    "張莉莉", 70,
        08                    "楊宗楠", 71,
        09                    "徐霞", 66,
        10                    "楊玉婷", 93
        11                   );
        12       var namesOf_0To59 = "";                    // 0~59分的學(xué)生名字串
        13       var namesOf_60To69 = "";                   // 60~69分的學(xué)生名字串
        14       var namesOf_70To79 = "";                   // 70~79分的學(xué)生名字串
        15       var namesOf_80To89 = "";                   // 80~89分的學(xué)生名字串
        16       var namesOf_90To100 = "";                  // 90~100分的學(xué)生名字串
        17       var scoreSum = 0;                          // 全體總分計(jì)數(shù)
        18       document.write( "<b>《高等數(shù)學(xué)》成績(jī)統(tǒng)計(jì)表</b><br>" );
                                                          // 標(biāo)題
        19       for( index in score )                      // 遍歷分?jǐn)?shù)數(shù)組
        20       {
        21           // 奇數(shù)索引元素為分?jǐn)?shù),其前一個(gè)元素即為該分?jǐn)?shù)的學(xué)生名字
        22           if( index%2==1 )                       // 分?jǐn)?shù)
        23           {
        24               // 判斷當(dāng)前分?jǐn)?shù)所在的分?jǐn)?shù)段并將學(xué)生名字存入相應(yīng)變量
        25               if( (score[index]>=0) && (score[index]<=59) )
                                                          // 如果在分?jǐn)?shù)在0~59分間
        26               {
        27                    namesOf_0To59 += score[index-1] + " ";
                                                          // 組合名字
        28               }
        29               if( (score[index]>=60) && (score[index]<=69) )
                                                          // 如果在分?jǐn)?shù)在60~69分間
        30               {
        31                    namesOf_60To69 += score[index-1] + " ";
                                                          // 組合名字
        32               }
        33               if( (score[index]>=70) && (score[index]<=79) )
                                                          // 如果在分?jǐn)?shù)在70~79分間
        34               {
        35                    namesOf_70To79 += score[index-1] + " ";
                                                          // 組合名字
        36               }
        37               if( (score[index]>=80) && (score[index]<=89) )
                                                          // 如果在分?jǐn)?shù)在80~89分間
        38               {
        39                    namesOf_80To89 += score[index-1] + " ";
                                                          // 組合名字
        40               }
        41               if( (score[index]>=90) && (score[index]<=100) )
                                                          // 如果在分?jǐn)?shù)在90~100分間
        42               {
        43                    namesOf_90To100 += score[index-1] + " ";
                                                          // 組合名字
        44               }
        45               scoreSum += score[index];          // 統(tǒng)計(jì)總分
        46           }
        47       }
        48       document.write( "<li>00~59分:" + namesOf_0To59 + "<br>" );
                                                          // 輸出0~59分的學(xué)生名字
        49       document.write( "<li>60~69分:" + namesOf_60To69 + "<br>" );
                                                          // 輸出60~69分的學(xué)生名字
        50       document.write( "<li>70~79分:" + namesOf_70To79 + "<br>" );
                                                          // 輸出70~79分的學(xué)生名字
        51       document.write( "<li>80~89分:" + namesOf_80To89 + "<br>" );
                                                          // 輸出80~89分的學(xué)生名字
        52       document.write( "<li>90~100分:" + namesOf_90To100 + "<br>" );
                                                          // 輸出90~100分的學(xué)生名字
        53       // 數(shù)組元素個(gè)數(shù)除以2即為人數(shù),總分除以人數(shù)即得平均分
        54       document.write( "<li>平均分 :" + scoreSum/(score.length/2) + "<br>" );
        55  -->
        56  </script>                                       <!--腳本程序結(jié)束-->

【運(yùn)行結(jié)果】打開(kāi)網(wǎng)頁(yè)文件運(yùn)行程序,結(jié)果如圖2-19所示。

2.朱自清《荷塘月色》中有文段“采蓮南塘秋,蓮花過(guò)人頭;低頭弄蓮子,蓮子清如水。今晚若有采蓮人,這兒的蓮花也算得‘過(guò)人頭’了;只不見(jiàn)一些流水的影子,是不行的。這令我到底惦著江南了”?,F(xiàn)編寫(xiě)程序,將文中的“蓮”字加粗、用紅色標(biāo)記之。

圖2-19 運(yùn)行結(jié)果

【提示】使用String對(duì)象來(lái)處理題中的短文。多次調(diào)用charAt方法獲取文本中的每一個(gè)字符,判斷所取字符如果是“蓮”字就調(diào)用bold方法和fontcolor方法對(duì)其設(shè)置粗體和顏色。參考代碼如下:

        01  <script language="javascript">                      // 腳本程序開(kāi)始
        02  <!--
        03       var comment = "采蓮南塘秋,蓮花過(guò)人頭;低頭弄蓮子,蓮子清如水。
                                                                // 選文
        04  今晚若有采蓮人,這兒的蓮花也算得“過(guò)人頭”了;只不見(jiàn)一些流水的影子,
        05  是不行的。這令我到底惦著江南了。"
        06       var newComment = "";                            // 處理過(guò)的字符集合
        07       for( n = 0; n<comment.length; n ++ )            // 處理選文中的每一個(gè)字符
        08       {
        09           var curChar = comment.charAt( n );         // 取得一個(gè)字符
        10           if( curChar=="蓮" )                         // 若為“蓮”字時(shí)
        11           {
        12               newComment += (curChar.bold()).fontcolor("red");
                                                                // 加粗并設(shè)置紅色
        13           }
        14           else                                       // 非“蓮”字
        15           {
        16               newComment += curChar;                 // 直接添加到已處理內(nèi)容
        17           }
        18       }
        19       document.write("<li><b>原文:</b><br>" + comment + "<br>" );
                                                                // 輸出原文
        20       document.write("<li><b>標(biāo)記“蓮”字:</b><br>" + newComment + "<br>" );
                                                                // 輸出新內(nèi)容
        21  -->
        22  </script>                                           <!--腳本程序結(jié)束-->

【運(yùn)行結(jié)果】打開(kāi)網(wǎng)頁(yè)文件運(yùn)行程序,其結(jié)果如圖2-20所示。

圖2-20 運(yùn)行結(jié)果

四、編程題

1.寫(xiě)一個(gè)程序輸出當(dāng)前時(shí)間。

【提示】可以考慮使用時(shí)間函數(shù)。

2.寫(xiě)一個(gè)程序求一個(gè)數(shù)的平方根。

【提示】利用數(shù)學(xué)函數(shù)中的平方根函數(shù)即可輕松實(shí)現(xiàn)。

主站蜘蛛池模板: 大英县| 海阳市| 通辽市| 秦皇岛市| 阳东县| 称多县| 洛南县| 陇川县| 岑巩县| 清水河县| 沧州市| 南和县| 太仆寺旗| 南通市| 静海县| 措美县| 昌乐县| 鹿泉市| 隆回县| 博爱县| 无棣县| 呼和浩特市| 平安县| 芜湖市| 海门市| 英德市| 营山县| 肃北| 彭泽县| 冷水江市| 荃湾区| 昌图县| 青阳县| 丽江市| 巴彦淖尔市| 唐河县| 鸡泽县| 扎赉特旗| 阿拉善左旗| 闻喜县| 淮北市|