JavaScript+jQuery交互式Web前端開發(fā)（第2版） 課件 第2章 JavaScript基礎

第2章JavaScript基礎《JavaScript+jQuery交互式Web前端開發(fā)（第2版）》學習目標/Target

了解數據類型的分類，能夠描述JavaScript中的基本數據類型和復雜數據類型

掌握常用的基本數據類型，能夠根據實際需求定義基本數據類型的變量

掌握數據類型轉換，能夠根據實際需求將數據轉換為布爾型數據、數字型數據

或字符串型數據

掌握運算符的使用，能夠靈活運用運算符完成運算學習目標/Target掌握選擇結構語句，能夠根據實際需求選擇合適的選擇結構語句

掌握循環(huán)結構語句，能夠根據實際需求選擇合適的循環(huán)結構語句

掌握跳轉語句，能夠靈活運用continue語句或break語句完成程序中的流程跳轉章節(jié)概述/SummaryJavaScript作為一門編程語言，在Web前端開發(fā)領域中扮演著至關重要的角色。作為一名初學者，掌握JavaScript基礎是十分必要的。只有掌握了JavaScript基礎，才能更好地理解和編寫JavaScript程序，為后續(xù)的學習奠定堅實的基礎。本章將對JavaScript基礎進行講解，包括數據類型、數據類型轉換、運算符和流程控制。目錄/Contents2.12.22.3數據類型數據類型轉換運算符2.4流程控制數據類型2.1了解數據類型的分類，能夠描述JavaScript中的基本數據類型和復雜數據類型2.1.1 數據類型分類

先定一個小目標！2.1.1 數據類型分類在JavaScript中，數據類型可以分為基本數據類型（或稱為值類型）和復雜數據類型（或稱為引用類型）。JavaScript中的數據類型分類如下圖所示。需要說明的是，JavaScript中的數組、函數和正則表達式都屬于對象型，所以復雜數據類型中只列出了對象型。復雜數據類型的使用較難，這里大家只需了解，具體會在第5章中詳細講解。2.1.1 數據類型分類強類型語言和弱類型語言的區(qū)別多學一招強類型語言是指一種強制類型定義的語言，當某個變量被定義數據類型后，如果不進行強制轉換，則該變量的數據類型不會改變，常見的強類型語言有Java、C++等。弱類型語言是指一種弱類型定義的語言，變量可以在運行時被賦予不同數據類型的數據，變量的數據類型是由其值來確定的。常見的弱類型語言有JavaScript、PHP等。2.1.1 數據類型分類多學一招下面通過代碼比較強類型語言和弱類型語言。2.1.1 數據類型分類//強類型語言（以Java語言為例）intage=24; //變量age是整型//弱類型語言（以JavaScript語言為例）varage=24; //變量age是數字型age=‘abc’; //將一個字符串賦值給變量age，此時變量age變成了字符串型由上述代碼可知，JavaScript變量的數據類型取決于被賦予的值的類型。掌握常用的基本數據類型，能夠根據實際需求定義基本數據類型的變量2.1.2 常用的基本數據類型

先定一個小目標！在JavaScript中，常用的基本數據類型有布爾型、數字型、字符串型、空型和未定義型，而大整型和符號型不常用。2.1.2 常用的基本數據類型2.1.2 常用的基本數據類型1.布爾型布爾型數據有兩個值，分別是true（真）和false（假）。布爾型數據通常用于表示程序中的邏輯判斷結果，其中，true表示事件成功或條件成立的情況，false表示事件失敗或條件不成立的情況。例如，判斷數字3是否大于數字2，其結果用布爾型數據表示為true。注意由于在JavaScript中嚴格區(qū)分大小寫，所以只有當true和false全部為小寫時才表示布爾型數據。2.1.2 常用的基本數據類型下面通過代碼演示布爾型的使用，首先聲明兩個變量，然后分別賦值為true和false，示例代碼如下。varresult01=true;varresult02=false;在上述示例代碼中，第1行代碼聲明變量result01并賦值為布爾型數據true；第2行代碼聲明變量result02并賦值為布爾型數據false。2.1.2 常用的基本數據類型2.數字型JavaScript中的數字型數據可以分為整數和浮點數（表示小數），在數字前面添加“+”表示正數，添加“-”表示負數，通常情況下省略“+”。2.1.2 常用的基本數據類型（1）整數在JavaScript中，通常使用十進制表示整數，此外還可以使用二進制、八進制或十六進制。十進制由數字0~9組成，使用規(guī)則是逢十進一；二進制數由數字0和1組成，使用規(guī)則是逢二進一；八進制由數字0~7組成，使用規(guī)則是逢八進一；十六進制數由數字0~9以及字母A~F組成，不區(qū)分大小寫，使用規(guī)則是逢十六進一。2.1.2 常用的基本數據類型下面通過代碼演示數字型數據中整數的使用，首先聲明4個變量，然后分別給這4個變量賦值為二進制、八進制、十進制、十六進制的整數，示例代碼如下。varbin=0b11010; //二進制表示的26varoct=0o32; //八進制表示的26vardec=26; //十進制數26varhex=0x1a; //十六進制表示的26在上述示例代碼中，以0b開始的數字表示二進制數，以0o開始的數字表示八進制數，以0x開始的數字表示十六進制數。其中，b、o和x不區(qū)分大小寫。另外，JavaScript還允許用以0開始的數字表示八進制數，但不推薦。2.1.2 常用的基本數據類型浮點數可以使用標準格式和科學記數法格式表示。標準格式是指數學中小數的寫法，如1.10；科學記數法格式是指將數字表示成一個數與10的n次冪相乘的形式，在程序中使用E或e后面跟一個數字的方式表示10的n次冪，如2.15E3表示2.15

103。（2）浮點數2.1.2 常用的基本數據類型下面通過代碼演示數字型數據中浮點數的使用，首先聲明4個變量，然后分別使用標準格式和科學記數法格式表示浮點數，示例代碼如下。//使用標準格式表示浮點數varfNum01=-3.12;varfNum02=3.12;//使用科學記數法格式表示浮點數varfNum03=3.14E5;varfNum04=7.35E-5;數字型數據中的最大值、最小正數值和特殊值多學一招在JavaScript中，當需要獲取數字型數據的取值范圍時，可以使用MAX_VALUE和MIN_VALUE。由于MAX_VALUE和MIN_VALUE是Number對象的靜態(tài)屬性，所以需要通過Number.MAX_VALUE、Number.MIN_VALUE的方式進行訪問。2.1.2 常用的基本數據類型多學一招通過如下代碼可以查詢JavaScript中的數字型數據的最大值和最小正數值。2.1.2 常用的基本數據類型console.log(Number.MAX_VALUE); //輸出結果為：1.7976931348623157e+308console.log(Number.MIN_VALUE); //輸出結果為：5e-324在上述代碼中，第1行代碼使用Number.MAX_VALUE獲取了JavaScript中數字型數據的最大值；第2行代碼使用Number.MIN_VALUE獲取了JavaScript中數字型數據的最小正數值。多學一招2.1.2 常用的基本數據類型在JavaScript中數字型數據有3個特殊值，分別是Infinity（無窮大）、-Infinity（無窮?。┖蚇aN（NotaNumber，非數字）。在計算中，當計算結果超出了JavaScript最大可表示的數字時，會返回Infinity；當計算結果超出了JavaScript最小可表示的數字時，會返回-Infinity；如果進行了非法的運算操作，JavaScript會返回NaN。多學一招下面通過代碼演示數字型數據中出現3個特殊值的情況。2.1.2 常用的基本數據類型console.log(Number.MAX_VALUE*2); //輸出結果為：Infinityconsole.log(-Number.MAX_VALUE*2); //輸出結果為：-Infinityconsole.log('abc'-2); //輸出結果為：NaN在上述代碼中，第1行代碼使用數字型數據的最大值乘2，輸出結果為Infinity；第2行代碼使用數字型數據的最大值的相反數乘2，輸出結果為-Infinity；第3行代碼使用字符串'abc'減2，輸出結果為NaN。2.1.2 常用的基本數據類型字符串是指計算中用于表示文本的一系列字符，在JavaScript中使用單引號（‘）、雙引號（“）和反引號（`）標注字符串。下面通過代碼演示字符串型數據的使用。//使用單引號標注字符串vara=''; //表示空字符串varstr1='書籍'; //表示字符串'書籍'//使用雙引號標注字符串varb=""; //表示空字符串varstr2="書籍是人類進步的階梯";//表示字符串"書籍是人類進步的階梯"http://使用反引號標注字符串varc=``; //表示空字符串varstr3=`讀萬卷書行萬里路`; //表示字符串`讀萬卷書行萬里路`3.字符串型2.1.2 常用的基本數據類型在字符串中，單引號、雙引號和反引號可以嵌套使用，示例代碼如下。//單引號中嵌套雙引號varfruit01='"apple"banana'; //字符串內容為"apple"banana//雙引號中嵌套單引號varfruit02="'pear'blueberry"; //字符串內容為'pear'blueberry//單引號中嵌套反引號varfood01='`noodles`rice'; //字符串內容為`noodles`rice//雙引號中嵌套反引號varfood02="`fish`meat"; //字符串內容為`fish`meat//反引號中嵌套單引號varcolor01=`'pink'red`; //字符串內容為'pink'red//反引號中嵌套雙引號varcolor02=`"black"white`; //字符串內容為"black"white2.1.2 常用的基本數據類型如果在單引號中使用單引號、在雙引號中使用雙引號，或在反引號中使用反引號，則需要使用“\”對單引號、雙引號或反引號進行轉義，具體如下。\'：單引號。\"：雙引號。\`：反引號。2.1.2 常用的基本數據類型下面通過代碼演示字符串的單引號、雙引號和反引號嵌套使用的情況。//單引號中嵌套單引號varspeak='I\'m小明'; //字符串內容為I'm小明//雙引號中嵌套雙引號varboyName="\"小智\""; //字符串內容為"小智"http://反引號中嵌套反引號vargirlName=`\`小麗\``; //字符串內容為`小麗`2.1.2 常用的基本數據類型字符串是由若干個字符組成的，字符的數量就是字符串的長度。在JavaScript中可以使用length屬性獲取整個字符串的長度，示例代碼如下。varstr='Ilikerunning';console.log(str.length); //輸出結果為：142.1.2 常用的基本數據類型空型表示聲明的變量未指向任何對象，它只有一個特殊的null值。下面通過代碼演示數據類型為空型的情況。varage=null;console.log(age); //輸出結果為：null在上述示例代碼中，第1行代碼聲明了一個變量age，并賦值為null；第2行代碼用于在控制臺中輸出變量的age的值。4.空型2.1.2 常用的基本數據類型未定義型表示聲明的變量還未被賦值，此時變量的值為undefined，表示未定義。下面通過代碼演示數據類型為未定義型的情況。varage;console.log(age); //輸出結果為：undefined在上述示例代碼中，由于沒有為聲明的變量age賦值，所以輸出結果為undefined。5.未定義型字面量多學一招字面量是指源代碼中的固定值的表示法，使用字面量可以在代碼中表示某個值。在閱讀代碼時，通過觀察字面量可以快速地判斷數據的類型。JavaScript中常見的字面量如下。2.1.2 常用的基本數據類型數字字面量：1、2、3字符串字面量：'用戶名'、"密碼"布爾字面量：true、false數組字面量：[1,2,3]對象字面量：{username:'小智',password:123456}數據類型轉換2.2掌握數據類型轉換，能夠根據實際需求將數據轉換為布爾型數據

先定一個小目標！2.2.1將數據轉換為布爾型數據在比較數據或進行條件判斷時，經常需要將數據轉換為布爾型數據。在JavaScript中，使用Boolean()可以將給定的數據轉換為布爾型數據，在轉換時，表示空值或否定的值（包括空字符串、數字0、NaN、null和undefined）會被轉換為false，其他的值會被轉換為true。2.2.1將數據轉換為布爾型數據2.2.1將數據轉換為布爾型數據將數據轉換為布爾型數據的示例代碼如下。console.log(Boolean('')); //輸出結果為：falseconsole.log(Boolean(0)); //輸出結果為：falseconsole.log(Boolean(NaN)); //輸出結果為：falseconsole.log(Boolean(null)); //輸出結果為：falseconsole.log(Boolean(undefined)); //輸出結果為：falseconsole.log(Boolean('小智')); //輸出結果為：trueconsole.log(Boolean(123456)); //輸出結果為：true掌握數據類型轉換，能夠根據實際需求將數據轉換為數字型數據

先定一個小目標！2.2.2將數據轉換為數字型數據在JavaScript的開發(fā)過程中，有時候需要將數據轉換為數字型數據進行計算。例如，將字符串型數據轉換為數字型數據進行算術運算。將數據轉換為數字型數據的方式有3種，分別是parseInt()、parseFloat()和Number()。2.2.2將數據轉換為數字型數據在使用parseInt()將數據轉換為數字型數據時，會直接忽略數據的小數部分，返回數據的整數部分，示例代碼如下。console.log(parseInt('100.56')); //輸出結果為：1001.parseInt()2.2.2將數據轉換為數字型數據需要注意的是，parseInt()可以自動識別十進制數和十六進制數字符串。例如，'0xF'會被識別為15。但對于其他進制數字符串，則需要通過parseInt()的第2個參數設置進制才能正確識別，該參數的取值范圍為2~36，示例代碼如下。console.log(parseInt('20',8)); //輸出結果為：162.2.2將數據轉換為數字型數據1.parseInt()在使用parseFloat()將數據轉換為數字型數據時，會將數據轉換為數字型數據中的浮點數，示例代碼如下。console.log(parseFloat('100.56')); //輸出結果為：100.56console.log(parseFloat('314e-2')); //輸出結果為：3.14在上述示例代碼中，第1行代碼將字符串'100.56'轉換為數字型數據，控制臺中的輸出結果為100.56；第2行代碼將字符串'314e-2'轉換為數據3.14。2.parseFloat()2.2.2將數據轉換為數字型數據使用Number()將數據轉換為數字型數據的示例代碼如下。console.log(Number('100.56')); //輸出結果為：100.56console.log(Number('100.abc')); //輸出結果為：NaN在上述示例代碼中，第1行代碼將字符串'100.56'轉換為數字型數據，控制臺中的輸出結果為100.56；第2行代碼將字符串'100.abc'轉換為數字型數據，控制臺中的輸出結果為NaN。3.Number()2.2.2將數據轉換為數字型數據不同類型數據轉換為數字型數據的結果如下表所示。待轉換數據parseInt()轉換結果parseFloat()轉換結果Number()轉換結果純數字字符串對應的數字對應的數字對應的數字非純數字字符串NaNNaNNaN空字符串NaNNaN0nullNaNNaN0undefinedNaNNaNNaNtrueNaNNaN1falseNaNNaN02.2.2將數據轉換為數字型數據在轉換純數字字符串時，會忽略字符串前面的0，如字符串"0333"會被轉換為333。如果字符串前后有空格，則這些空格會被忽略。如果字符串開頭有正號“+”或負號“-”，則該字符串會被當成正數或負數，如'-333'會被轉換為-333。2.2.2將數據轉換為數字型數據使用isNaN()判斷一個值是否為NaN多學一招如果想要判斷一個值是否為NaN，可以使用isNaN()進行判斷。isNaN()在接收一個值后會將該值隱式轉換為數字。如果轉換結果為NaN，那么isNaN()將返回true；否則，返回false。2.2.2將數據轉換為數字型數據多學一招下面通過代碼演示isNaN()的使用。2.2.2將數據轉換為數字型數據console.log(isNaN(3)); //輸出結果為：falseconsole.log(isNaN('abc')); //輸出結果為：true在上述代碼中，由于第1行代碼中的3是數字，所以輸出結果為false；由于第2行代碼中的'abc'是不能轉換為數字的字符串，即轉換結果為NaN，所以輸出結果為true。需要注意的是，isNaN()只能判斷一個值是否為NaN，而不能判斷一個值是否為有效的數字。如果需要判斷一個值是否為數字，可以使用typeof運算符，詳見2.3.8小節(jié)。2.2.2將數據轉換為數字型數據多學一招掌握數據類型轉換，能夠根據實際需求將數據轉換為字符串型數據

先定一個小目標！2.2.3將數據轉換為字符串型數據在JavaScript中可以使用String()或toString()將數據轉換為字符串型數據，它們的區(qū)別是，String()可以將任意類型的數據轉換為字符串型數據；而toString()只能將除null和undefined之外的數據轉換為字符串型數據。在使用toString()對數字進行數據類型的轉換時，可以通過設置參數將數字轉換為指定進制的字符串。2.2.3將數據轉換為字符串型數據2.2.3將數據轉換為字符串型數據下面通過代碼演示將數據轉換為字符串型數據。varnum01=23;varnum02=46;console.log(String(num01)); //輸出結果為：23console.log(num01.toString()); //輸出結果為：23console.log(num02.toString(2)); //輸出結果為：101110運算符2.3掌握算術運算符的使用，能夠靈活應用算術運算符完成運算

先定一個小目標！2.3.1算術運算符算術運算符用于對兩個數字或變量進行算術運算，與數學中的加、減、乘、除運算類似。JavaScript中常用的算術運算符如下表所示。運算符運算示例結果+加3+36-減6-33*乘3*515/除8/24%取模（取余）5%75**冪運算4**216++自增（前置）a=2;b=++a;a=3;b=3;自增（后置）a=2;b=a++;a=3;b=2;--自減（前置）a=2;b=--a;a=1;b=1;自減（后置）a=2;b=a--;a=1;b=2;2.3.1算術運算符自增和自減運算可以快速對變量的值進行遞增或遞減運算，自增和自減運算符可以放在變量前也可以放在變量后。當自增（或自減）運算符放在變量前時，稱為前置自增（或前置自減）；當自增（或自減）運算符放在變量后面時，稱為后置自增（或后置自減）。前置和后置的區(qū)別在于，前置返回的是計算后的結果，后置返回的是計算前的結果。2.3.1算術運算符下面通過代碼演示自增和自減運算，示例代碼如下。2.3.1算術運算符vara=2,b=2,c=3,d=3;//自增console.log(++a); //輸出結果為：3console.log(a); //輸出結果為：3console.log(b++); //輸出結果為：2console.log(b); //輸出結果為：3//自減console.log(--c); //輸出結果為：2console.log(c); //輸出結果為：2console.log(d--); //輸出結果為：3console.log(d); //輸出結果為：2算術運算符在實際應用過程中還需要注意以下4點。2.3.1算術運算符進行四則混合運算時，運算順序要遵循數學中“先乘除后加減”的原則。例如，運行“varresult=2+8-3*2/2”后，result的值是7。在進行取模運算時，運算結果的正負取決于被模數（%左邊的數）的正負，與模數（%右邊的數）的正負無關。例如，運行“vara=(-8)%7,b=8%(-7)”后，a的值為-1，b的值為1。2.3.1算術運算符在開發(fā)過程中盡量避免使用浮點數進行運算，有時JavaScript的精度可能導致結果產生偏差。例如，0.1+0.2正常的計算結果應該是0.3，但是JavaScript的計算結果卻是0.30000000000000004。此時，將參與運算的浮點數轉換為整數，計算后再轉換為浮點數即可。例如，將0.1和0.2分別乘10，相加后再除10，即可得到0.3。“+”和“-”在運算符中還可以表示正數或負數。例如，(+2.1)+(-1.1)的計算結果為1。表達式多學一招表達式是一組代碼的集合，每個表達式的運行結果都是一個值。變量和各種類型的數據都可以用于構成表達式。一個簡單的表達式可以是一個變量或字面量，下面列舉一些常見的表達式。2.3.1算術運算符varnum=3+3; //將表達式3+3的值6賦值給變量numnum=7; //將表達式7的值賦值給變量numvarage=23+num; //將表達式23+num的值30賦值給變量ageage=num=35; //將表達式num=35的值35賦值給變量ageconsole.log(age); //將表達式age的值作為參數傳給console.log()alert(prompt('a')); //將表達式prompt('a')的值作為參數傳給alert()alert(parseInt(prompt('num'))+1); //由簡單的表達式組合成的復雜表達式掌握字符串運算符的使用，能夠靈活應用字符串運算符完成運算

先定一個小目標！2.3.2字符串運算符在JavaScript中，當含有“+”運算符的表達式的操作數至少有一個為字符串時，“+”表示字符串運算符，用于實現字符串的拼接。2.3.2字符串運算符下面通過代碼演示字符串運算符的使用。定義兩個變量，第1個變量存放用戶名'小智'，第2個變量存放性別'男'，如果需要顯示“小智：男”，就需要將字符串'小智'、

'：

'和'男'進行拼接。2.3.2字符串運算符varusername='小智';varsex='男';//使用“+”運算符實現字符串拼接varstr=username+'：'+sex;console.log(str); //輸出結果為“小智：男”值得一提的是，ECMAScript6.0中新增了使用模板字符串的方式實現字符串的拼接。模板字符串的寫法是以反引號（`）開頭，以反引號（`）結尾。在使用模板字符串時，首先定義需要拼接的字符串變量，然后將字符串變量寫到${}的大括號中。2.3.2字符串運算符使用模板字符串拼接字符串的示例代碼如下。2.3.2字符串運算符varusername='小智';varsex='男';//使用模板字符串實現字符串拼接console.log(`${username}：${sex}`); //輸出結果為“小智：男”在上述示例代碼中，第4行代碼使用模板字符串的方式拼接變量username、

'：'和變量sex。2.3.2字符串運算符隱式轉換腳下留心在JavaScript中，當操作的數據類型不符合預期時，JavaScript會按照既定的規(guī)則進行自動類型轉換，這種方式稱為隱式轉換，具體轉換規(guī)則參考2.2節(jié)。例如，當判斷某個值是否為true或false時，1會被隱式轉換為true，0會被隱式轉換為false。JavaScript的隱式轉換雖然降低了程序的嚴謹性，但也帶來了便利，使開發(fā)人員不必處理繁瑣的類型轉換工作。在實際開發(fā)中，應注意隱式轉換可能帶來的問題，以免程序出現意想不到的結果。2.3.2字符串運算符下面通過代碼演示如何使用隱式轉換實現數據類型的轉換，示例代碼如下。

//通過隱式轉換將數據轉換為數字型數據

console.log('13'-0);

//輸出結果為：13

console.log('13'*1);

//輸出結果為：13

console.log('13'/1);

//輸出結果為：13

//通過隱式轉換將數據轉換為字符串型數據

console.log(13+'');

//輸出結果為：13

console.log(true+'');

//輸出結果為：true

console.log(null+'');

//輸出結果為：null

console.log(undefined+'');

//輸出結果為：undefined腳下留心掌握賦值運算符的使用，能夠靈活應用賦值運算符完成運算2.3.3

賦值運算符

先定一個小目標！在JavaScript中，賦值運算符用于將運算符右邊的值賦給左邊的變量。在變量的初始化過程中，就使用了最基本的賦值運算符“=”。JavaScript中常用的賦值運算符如下表所示。運算符運算示例結果=賦值a=1,b=2;a=1,b=2;+=加并賦值a=1,b=2;a+=b;a=3,b=2;字符串拼接并賦值a='abc';a+='def';a='abcdef';-=減并賦值a=4,b=3;a-=b;a=1,b=3;*=乘并賦值a=4,b=3;a*=b;a=12,b=3;/=除并賦值a=4,b=2;a/=b;a=2,b=2;%=取模并賦值a=4,b=3;a%=b;a=1,b=3;**=冪運算并賦值a=4;a**=2;a=16;<<=左移位并賦值a=9,b=2;a<<=b;a=36,b=2;>>=右移位并賦值a=-9,b=2;a>>=b;a=-3,b=2;>>>=無符號右移位并賦值a=-9,b=2;a>>>=b;a=1073741821,b=2;&=按位與并賦值a=3,b=9;a&=b;a=1,b=9;^=按位異或并賦值a=3,b=9;a^=b;a=10,b=9;|=按位或并賦值a=3,b=9;a|=b;a=11,b=9;2.3.3

賦值運算符下面通過代碼演示賦值運算符的使用，示例代碼如下。vara=5;a+=3;

//相當于a=a+3console.log(a);

//輸出結果為：8a-=4;

//相當于a=a-4console.log(a);

//輸出結果為：4a*=2;

//相當于a=a*2console.log(a);

//輸出結果為：8a/=2;

//相當于a=a/2console.log(a);

//輸出結果為：4a%=2;

//相當于a=a%2console.log(a);

//輸出結果為：0a**=2;

//相當于a=a**2console.log(a);

//輸出結果為：02.3.3

賦值運算符掌握比較運算符的使用，能夠靈活應用比較運算符完成運算2.3.4

比較運算符

先定一個小目標！2.3.4

比較運算符用戶在訪問電商網站的過程中，經常會在首頁看到銷量高的商品。在實際開發(fā)中，開發(fā)人員可以通過比較商品的銷量，選出銷量高的產品放到首頁進行展示。在JavaScript中，比較運算符用于對兩個數據進行比較，比較返回的結果是布爾型數據，即true或false。下面列舉JavaScript中常用的比較運算符如下表所示。運算符運算示例結果>大于3>2true<小于3<2false>=大于或等于3>=2true<=小于或等于3<=2false==等于3==2false!=不等于3!=2true===全等3===3true!==不全等3!==3false2.3.4

比較運算符注意運算符“==”和“!=”在比較不同類型的數據時，首先會自動將要進行比較的數據類型轉換為相同的數據類型，然后進行比較。運算符“===”和“!==”在比較不同類型的數據時，不會進行數據類型的轉換。下面通過代碼演示比較運算符的使用。console.log(13>12); //輸出結果為：trueconsole.log(13<12); //輸出結果為：falseconsole.log(13>=12); //輸出結果為：trueconsole.log(13<=12); //輸出結果為：falseconsole.log(13=='13'); //輸出結果為：trueconsole.log(13!=12); //輸出結果為：trueconsole.log(13==='13'); //輸出結果為：false2.3.4

比較運算符掌握邏輯運算符的使用，能夠靈活應用邏輯運算符完成運算

先定一個小目標！2.3.5

邏輯運算符在開發(fā)中，有時只有多個條件同時成立時才會執(zhí)行后續(xù)的代碼，例如，只有用戶輸入有效的用戶名和密碼，才能登錄成功。在程序中，如果要實現條件的判斷，可以使用邏輯運算符。2.3.5

邏輯運算符JavaScript中常用的邏輯運算符如下表所示。運算符運算示例結果&&與a&&b如果a的值為true，則結果為b的值；如果a的值為false，則結果為a的值||或a||b如果a的值為true，則結果為a的值；如果a的值為false，則結果為b的值!非!a如果a為true，則結果為false；如果a為false，則結果為true2.3.5

邏輯運算符下面通過代碼演示邏輯運算符的使用。//邏輯“與”

console.log(100&&200);

//輸出結果為：200

console.log(0&&123);

//輸出結果為：0

console.log(3>2&&4>3);

//輸出結果為：true

console.log(2<1&&3>1);

//輸出結果為：false

//邏輯“或”

console.log(100||200);

//輸出結果為：100

console.log(0||123);

//輸出結果為：123

console.log(3>2||4<3); //輸出結果為：true

console.log(2<1||3<1);

//輸出結果為：false

//邏輯“非”

console.log(!(2>1));

//輸出結果為：false

console.log(!(2<1));

//輸出結果為：true2.3.5

邏輯運算符需要注意的是，在使用邏輯運算符時，是按從左到右的順序進行求值的，在運算時可能會出現“短路”的情況。“短路”是指如果通過邏輯運算符左邊的表達式能夠確定最終值，則不運算邏輯運算符右邊的表達式，具體說明如下。2.3.5

邏輯運算符使用“&&”連接兩個表達式，語法為“左邊表達式&&右邊表達式”。如果左邊表達式的值為true，則結果為右邊表達式的值；如果左邊表達式的值為false，則結果為左邊表達式的值。使用“||”連接兩個表達式，語法為“左邊表達式||右邊表達式”。如果左邊表達式的值為true，則結果為左邊表達式的值；如果左邊表達式的值為false，則結果為右邊表達式的值。下面通過代碼演示出現“短路”的情況。vara=1;false&&a++; //&&短路情況console.log(a); //輸出結果為：1true||a++; //||短路情況console.log(a); //輸出結果為：12.3.5

邏輯運算符掌握三元運算符的使用，能夠靈活應用三元運算符完成運算

先定一個小目標！2.3.6

三元運算符三元運算符包括“?”和“:”，用于組成三元表達式。三元表達式用于根據條件表達式的值來決定是“?”后面的表達式被運行還行“:”后面的表達式被運行。2.3.6

三元運算符三元運算符的語法格式如下。條件表達式?表達式1:表達式22.3.6

三元運算符上述語法格式中，如果條件表達式的值為true，則返回表達式1的運行結果；如果條件表達式的值為false，則返回表達式2的運行結果。下面通過代碼演示三元運算符的使用。varage=prompt('請輸入您的年齡');varstatus=age>=18?'已成年':'未成年';document.write(status);2.3.6

三元運算符上述示例代碼用于根據用戶輸入的年齡判斷用戶是已成年還是未成年。如果用戶輸入的年齡是13，則首先運行條件表達式“age>=18”，因為age的值是13，而13小于18，所以條件表達式的值為false，此時就會將'未成年'賦值給變量status，最后在頁面中輸出的結果為“未成年”。同理，如果用戶輸入的年齡是18，則頁面中輸出的結果為“已成年”。掌握位運算符的使用，能夠靈活應用位運算符完成運算

先定一個小目標！2.3.7

位運算符位運算符用于對數據進行二進制運算。在運算時，位運算符會將參與運算的操作數視為由二進制數（0和1）組成的32位的串。例如，十進制數字9用二進制表示為00000000000000000000000000001001，可以簡寫為1001。位運算符在運算時，會將二進制的每一位進行運算。2.3.7

位運算符注意JavaScript中位運算符僅能對數字型數據進行運算。在對數字型數據進行位運算之前，程序會將所有的操作數轉換為二進制數，然后逐位運算。JavaScript中常用的位運算符如下表所示。運算符名稱示例說明&按位“與”a&b將操作數進行按位“與”運算，如果兩個二進制位都是1，則該位的運算結果為1，否則為0|按位“或”a|b將操作數進行按位“或”運算，如果二進制位上有一個值是1，則該位的運算結果就是1，否則為0~按位“非”~a將操作數進行按位“非”運算，如果二進制位為0，則按位“非”的結果為1；如果二進制位為1，則按位“非”的結果為0^按位“異或”a^b將操作數進行按位“異或”運算，如果二進制位相同，則按位“異或”的結果為0，否則為1<<

左移a<<b將操作數的二進制位按照指定位數向左移動，運算時，右邊的空位補0，左邊移走的部分舍去>>

右移a>>b將操作數的二進制位按照指定位數向右移動，運算時，左邊的空位根據原數的符號位補0或者1，原來是負數就補1，是正數就補0>>>

無符號右移a>>>b將操作數的二進制位按照指定位數向右移動，不考慮原數正負，運算時，左邊的空位補02.3.7

位運算符下面通過代碼演示位運算符的使用。console.log(15&9);

//輸出結果為：9（相當于1111&1001=1001）console.log(15|9);

//輸出結果為：15（相當于1111|1001=1111）console.log(~15);

//輸出結果為：-16（相當于~1111=-10000）console.log(15^9);

//輸出結果為：6（相當于1111^1001

=110）console.log(9<<2);

//輸出結果為：36（相當于1001<<2=100100）console.log(9>>2);

//輸出結果為：2（相當于1001>>2=10）console.log(19>>>2);

//輸出結果為：4（相當于10011>>>2=100）2.3.7

位運算符掌握數據類型檢測運算符的使用，能夠應用typeof運算符完成數據類型檢測

先定一個小目標！2.3.8

數據類型檢測運算符在進行數學計算時，需要確保參與運算的數據是數字型數據，否則會產生錯誤的計算結果。因此，需要在運算前檢測數據的類型。在JavaScript中，可以使用typeof運算符進行數據類型的檢測。2.3.8

數據類型檢測運算符typeof運算符以字符串形式返回檢測結果，語法格式如下。//第1種語法格式typeof需要進行數據類型檢測的數據//第2種語法格式typeof(需要進行數據類型檢測的數據)2.3.8

數據類型檢測運算符在上述語法格式中，第1種語法格式只能檢測單個操作數；第2種語法格式可以對表達式進行檢測。下面通過代碼演示如何使用typeof運算符檢測數據類型。console.log(typeof23); //輸出結果為：numberconsole.log(typeof'水果');

//輸出結果為：stringconsole.log(typeoffalse); //輸出結果為：booleanconsole.log(typeofnull); //輸出結果為：objectconsole.log(typeofundefined);

//輸出結果為：undefined2.3.8

數據類型檢測運算符此外，使用typeof運算符還可以很方便地檢測輸入變量的數據類型，示例代碼如下。varpassword=prompt('請輸入您的密碼:');console.log(password);console.log(typeofpassword);2.3.8

數據類型檢測運算符值得一提的是，在JavaScript中，typeof是一個一元運算符，如果typeof放在一個操作數之前，則操作數可以是任意類型的數據，其返回結果是字符串。使用比較運算符“==”可以判斷typeof返回的檢測結果是否符合預期，示例代碼如下。varpassword='123456'; console.log(typeofpassword=='string'); //輸出結果為：trueconsole.log(typeofpassword=='number'); //輸出結果為：false了解運算符的優(yōu)先級，能夠說出優(yōu)先級最高的運算符

先定一個小目標！2.3.9

運算符優(yōu)先級在日常生活中，我們經常會在車站、港口、機場等場所看到“軍人依法優(yōu)先”的標示牌，表示軍人在出行過程中享有優(yōu)先的權利，彰顯了國家和社會對軍人職業(yè)的尊崇。在JavaScript中，運算符也遵循先后順序，這種順序稱作運算符優(yōu)先級。2.3.9

運算符優(yōu)先級JavaScript中的運算符優(yōu)先級如下表所示。結合方向運算符無()左（new除外）.、[]、new(有參數，無結合性)右new(無參數)無++（后置）、--（后置）右!、~、-（負數）、+（正數）、++（前置）、--（前置）、typeof、void、delete右**左*、/、%左+、-左<<、>>、>>>2.3.9

運算符優(yōu)先級>>續(xù)上一頁表結合方向運算符左<、<=、>、>=、in、instanceof左==、!=、===、!==左&左^左|左&&左||右?:右=、+=、-=、*=、/=、%=、<<=、>>=、>>>=、&=、^=、|=左,2.3.9

運算符優(yōu)先級在JavaScript的運算符中小括號“()”的優(yōu)先級最高，在進行運算時首先計算小括號內的表達式。如果表達式中有多個小括號，則最內層小括號的優(yōu)先級最高。2.3.9

運算符優(yōu)先級下面通過代碼演示未加小括號的表達式和加小括號的表達式的運算順序。console.log(3+4*5);

//輸出結果為：23console.log((3+4)*5);

//輸出結果為：352.3.9

運算符優(yōu)先級當表達式中有多種運算符時，可根據需要為表達式添加小括號，這樣可以使代碼更清楚，并且可以避免錯誤的發(fā)生。掌握計算圓的周長和面積的案例，能夠編寫代碼實現案例2.3.10【案例】計算圓的周長和面積

先定一個小目標！本案例要求運用運算符的知識，實現計算圓的周長和面積。其中，計算圓的周長的公式為2

r，計算圓的面積的公式為

r2。公式中，

表示圓周率，在代碼中使用圓周率的近似值3.14；r表示圓的半徑。下面根據公式編寫代碼實現計算圓的周長和面積。2.3.10【案例】計算圓的周長和面積2.3.10【案例】計算圓的周長和面積流程控制2.4掌握選擇結構語句，能夠根據實際需求選擇合適的選擇結構語句2.4.1

選擇結構

先定一個小目標！JavaScript提供了選擇結構語句（或稱為條件判斷語句）來實現程序的選擇結構。選擇結構語句是指根據語句中的條件進行判斷，進而運行與條件相對應的代碼。常用的選擇結構語句有if語句、if…else語句、if…elseif…else語句和switch語句。2.4.1

選擇結構if語句也稱為單分支語句、條件語句，具體語法格式如下。2.4.1

選擇結構1.if語句if(條件表達式){

代碼段}上述語法格式中，條件表達式的值是一個布爾值，當該值為true時，運行大括號“{}”中的代碼段，否則不進行任何處理。如果代碼段中只有一條語句，則可以省略大括號“{}”。if語句的運行流程如下圖所示。2.4.1

選擇結構下面通過代碼演示if語句的使用，實現只有當年齡大于或等于18周歲時，才輸出“已成年”，否則不輸出任何信息。2.4.1

選擇結構varage=23;

//聲明變量age并賦值為23if(age>=18){

console.log('已成年');

//在控制臺輸出“已成年”}if…else語句也稱為雙分支語句，具體語法格式如下。2.4.1

選擇結構2.if…else語句if(條件表達式){

代碼段1}else{

代碼段2}上述語法格式中，當條件表達式的值為true時，運行代碼段1；當條件表達式的值為false時，運行代碼段2。if…else語句的運行流程如下圖所示。2.4.1

選擇結構下面演示if…else語句的使用，實現當年齡大于等于18周歲時，輸出“已成年”，否則輸出“未成年”，示例代碼如下。2.4.1

選擇結構varage=17; //聲明變量age并賦值為17if(age>=18){

console.log('已成年'); //當age>=18時在控制臺輸出“已成年”}else{console.log('未成年'); //當age<18時在控制臺輸出“未成年”}if…elseif…else語句也稱為多分支語句，是指有多個條件的語句，可針對不同情況進行不同的處理，具體語法格式如下。2.4.1

選擇結構3.if…elseif…else語句if(條件表達式1){

代碼段1}elseif(條件表達式2){

代碼段2}…elseif(條件表達式n){

代碼段n}else{

代碼段n+1}在if…elseif…else語句語法格式中，當條件表達式1的值為true時，運行代碼段1；當條件表達式1的值為false時，繼續(xù)判斷條件表達式2的值，當條件表達式2的值為true時，運行代碼段2，以此類推。如果所有表達式的值都為false，則運行最后else中的代碼段n+1，如果最后沒有else，則直接結束。2.4.1

選擇結構if…elseif…else語句的運行流程如下圖所示。2.4.1

選擇結構下面通過代碼演示if…elseif…else語句的使用，實現對學生考試成績按分數進行等級的劃分：90~100分為優(yōu)秀；80~90分為良好；70~80分為中等；60~70分為及格；小于60分為不及格。2.4.1

選擇結構varscore=78; //聲明變量score并賦值為78if(score>=90){console.log('優(yōu)秀'); //當score>=90時在控制臺輸出“優(yōu)秀”}elseif(score>=80){console.log('良好'); //當score>=80時在控制臺輸出“良好”}elseif(score>=70){console.log('中等'); //當score>=70時在控制臺輸出“中等”}elseif(score>=60){console.log('及格'); //當score>=60時在控制臺輸出“及格”}else{console.log('不及格'); //當score<60時在控制臺輸出“不及格”}switch語句也稱為多分支語句，該語句與if…elseif…else語句類似，區(qū)別是switch語句只能針對某個表達式的值做出判斷，從而決定運行哪一段代碼。與if…elseif…else語句相比，switch語句可以使代碼更加清晰簡潔，便于閱讀。2.4.1

選擇結構4.switch語句switch語句的具體語法格式如下。2.4.1

選擇結構switch(表達式){case值1

代碼段1;break;case值2

代碼段2;break;…default:

代碼段n;}在switch語句的語法格式中，首先計算表達式的值，然后將表達式的值和每個case的值進行比較，當數據類型不同時會自動進行數據類型轉換，如果表達式的值和case的值相等，則運行case后對應的代碼段。當遇到break語句時跳出switch語句，如果省略break語句，則將繼續(xù)運行下一個case后面的代碼段。如果所有case的值與表達式的值都不相等，則運行default后面的代碼段。需要說明的是，default是可選的，可以根據實際需要進行設置。2.4.1

選擇結構switch語句的運行流程如下圖所示。2.4.1

選擇結構下面演示switch語句的使用，實現判斷變量week的值，當week變量的值為1~6時，輸出星期一~星期六，當變量week的值為0時，輸出星期日。如果沒有與變量week的值相等的case值，則輸出“輸入錯誤，請重新輸入”。2.4.1

選擇結構掌握查詢蔬菜的價格的案例，能夠編寫代碼實現案例2.4.2

【案例】查詢蔬菜的價格

先定一個小目標！在日常生活中，我們去超市購買蔬菜，結賬時售貨員會通過查詢蔬菜的價格來計算總價。例如，在對蔬菜稱重時，當售貨員輸入“芹菜”時，查詢芹菜的價格；輸入“黃瓜”時，查詢黃瓜的價格。下面將通過一個案例演示使用switch語句實現查詢蔬菜的價格。2.4.2

【案例】查詢蔬菜的價格本案例要求定義一個用于保存售貨員輸入的蔬菜名稱的變量vegetable，然后使用switch語句實現查詢對應蔬菜的價格。當售貨員輸入需要查詢的蔬菜名稱后，控制臺會輸出對應的蔬菜價格，其中，芹菜的價格是3.2元/kg；黃瓜的價格是2.5元/kg；蓮藕的價格是9.0元/kg；土豆的價格是1.2元/kg。如果輸入的蔬菜名稱不存在，則輸出“沒有此蔬菜”。2.4.2

【案例】查詢蔬菜的價格2.4.2

【案例】查詢蔬菜的價格掌握循環(huán)結構語句，能夠根據實際需求選擇合適的循環(huán)結構語句2.4.3

循環(huán)結構

先定一個小目標！循環(huán)結構是為了在程序中反復運行某個功能而設置的一種程序結構，它用于實現一段代碼的重復運行。例如，連續(xù)輸出1~100的整數，如果不使用循環(huán)結構，則需要編寫100次輸出代碼才能實現，而使用循環(huán)結構，僅使用幾行代碼就能讓程序自動輸出。2.4.3

循環(huán)結構在循環(huán)結構中，由循環(huán)體和循環(huán)的終止條件組成的語句稱為循環(huán)語句，一組被重復運行的語句稱為循環(huán)體，循環(huán)結束的條件稱為終止條件。循環(huán)體能否重復運行，取決于循環(huán)的終止條件。在JavaScript中，提供了3種循環(huán)語句，分別是for語句、while語句、do…while語句。2.4.3

循環(huán)結構在程序開發(fā)中，for語句通常用于循環(huán)次數已知的情況，其語法格式如下。1.for語句2.4.3

循環(huán)結構for(初始化變量;條件表達式;操作表達式){

循環(huán)體}初始化變量：初始化一個用于作為計數器的變量，通常使用var關鍵字聲明一個變量并賦初始值。條件表達式：決定循環(huán)是否繼續(xù)，即循環(huán)的終止條件。操作表達式：通常用于對計數器變量進行更新，是每次循環(huán)中最后運行的代碼。for語句的運行流程如下圖所示。2.4.3

循環(huán)結構下面演示for語句的使用。使用for語句實現在控制臺中輸出1~100的整數，示例代碼如下。2.4.3

循環(huán)結構for(vari=1;i<=100;i++){console.log(i);

//輸出12

3

4

5

6,…,100}for語句示例代碼中的運行流程如下。2.4.3

循環(huán)結構運行“vari=1”以初始化變量。判斷“i<=100”的值是否為true，如果為true，則進入第③步，否則結束循環(huán)。運行循環(huán)體，通過“console.log(i)”輸出變量i的值。運行“i++”，將i的值加1。判斷“i<=100”的值是否為true，和第②步相同。只要滿足“i<=100”這個條件，就會一直循環(huán)。當i的值加到101時，判斷結果為false，循環(huán)結束。while語句和for語句可以相互轉換，都能夠實現循環(huán)。在無法確定循環(huán)次數的情況下，while語句更適合用于實現循環(huán)。while語句的語法格式如下。2.while語句2.4.3

循環(huán)結構while(條件表達式){

循環(huán)體}上述語法格式中，如果條件表達式的值為true，則循環(huán)運行循環(huán)體，直到條件表達式的值為false才結束循環(huán)。while語句的運行流程如下圖所示。2.4.3

循環(huán)結構下面使用while語句實現在控制臺中輸出1~100的整數，示例代碼如下。2.4.3

循環(huán)結構vari=1;while(i<=100){console.log(i);i++;}使用while語句實現在控制臺中輸出1~100的整數的運行流程如下。2.4.3

循環(huán)結構運行“vari=1”以初始化變量。判斷“i<=100”的值是否為true，如果為true，則進入第③步，否則結束循環(huán)。運行循環(huán)體，通過“console.log(i)”輸出變量i的值。運行“i++”，將i的值加1。判斷“i<=100”的值是否為true，和第②步相同。只要滿足“i<=100”這個條件，就會一直循環(huán)。當i的值加到101時，判斷結果為false，循環(huán)結束。do…while語句和while語句類似，其區(qū)別在于while語句是先判斷條件表達式的值，再根據條件表達式的值決定是否運行循環(huán)體，而do…while語句會無條件地運行一次循環(huán)體，然后判斷條件表達式的值，根據條件表達式的值決定是否