《JavaScript程序設(shè)計》課件-項目2-1 JavaScript數(shù)據(jù)類型與運算符

JavaScript程序設(shè)計20211課程導(dǎo)入2任務(wù)導(dǎo)入3知識講解4任務(wù)實施項目2-1JavaScript數(shù)據(jù)類型與運算符5任務(wù)總結(jié)知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)什么是變量？變量使用的步驟是？變量里存的值可以更改嗎？只聲明不賦值，輸出時會出現(xiàn)什么情況？提問知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)任務(wù)重難點計算圓的周長和面積重點：變量的數(shù)據(jù)類型分類數(shù)據(jù)類型的檢測數(shù)據(jù)類型的轉(zhuǎn)換運算符知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)數(shù)據(jù)類型

1.1

變量的數(shù)據(jù)類型JavaScript是一種弱類型語言，不用提前聲明變量的數(shù)據(jù)類型。在程序運行過程中，變量的數(shù)據(jù)類型會被自動確定。強類型語言：如：Java、C弱類型語言：如：JavaScript在代碼運行時，變量的數(shù)據(jù)類型是由JS引擎根據(jù)=右邊變量值的數(shù)據(jù)類型來判斷的，運行完畢之后，變量就確定了數(shù)據(jù)類型。JavaScript擁有動態(tài)類型，同時也意味著相同的變量可用作不同的類型。varx=18;//x為數(shù)字varx=‘bill’;//x為字符串示例代碼1.數(shù)據(jù)類型知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)數(shù)據(jù)類型

1.2數(shù)據(jù)類型分類JavaScript中的數(shù)據(jù)類型分為兩大類，基本數(shù)據(jù)類型和復(fù)雜數(shù)據(jù)類型（也稱為引用數(shù)據(jù)類型）。知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)數(shù)據(jù)類型

(1)

數(shù)字型JavaScript中的數(shù)字型可以用來保存整數(shù)或浮點數(shù)（小數(shù)）。varage=18;//整數(shù)varpi=3.14;//浮點數(shù)（小數(shù)）示例代碼常見的進制：八進制數(shù)：在數(shù)字開頭加上0，八進制數(shù)由0~7組成，逢8進位十進制數(shù)：是組成以10為基礎(chǔ)的數(shù)字系統(tǒng)，有0~9組成，逢10進位十六進制數(shù)：在數(shù)字開頭加上0x，十六進制數(shù)由0~9，a~f組成知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)數(shù)據(jù)類型范圍：數(shù)字型的最大值和最小值：最大值：Number.MAX_VALUE，輸出結(jié)果：1.7976931348623157e+308最小值：Number.MIN_VALUE，輸出結(jié)果：5e-324數(shù)字型的3個特殊值：Infinity和-Infinity和NaN，舉例：Infinity（無窮大）

：如Number.MAX_VALUE*2-Infinity（無窮?。?/p>

：如-Number.MAX_VALUE*2NaN（非數(shù)值）：如'abc'–100isNaN：用來判斷一個變量是否為非數(shù)字的類型，返回值為true表示非數(shù)字，false表示是數(shù)字知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)數(shù)據(jù)類型(2)

字符串型字符串是指計算機中用于表示文本的一系列字符，在JavaScript中使用單引號或雙引號來包裹字符串。varstr1='單引號字符串';varstr2="雙引號字符串";因為HTML標(biāo)簽里的屬性使用的是雙引號，JS里更推薦使用單引號。知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)數(shù)據(jù)類型正確語法錯誤語法varstr1='Iama"programmer"'; //Iama"programmer"varstr2="I'ma'programmer'"; //I'ma'programmer'varstr1='I'maprogrammer'; //單引號錯誤用法varstr2="I'ma"programmer""; //雙引號錯誤用法varstr3='Iamaprogrammer"; //單雙引號混用示例代碼單、雙引號嵌套：在單引號字符串中可以直接書寫雙引號在雙引號字符串中也可以直接書寫單引號知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)數(shù)據(jù)類型轉(zhuǎn)義符：在字符串中使用換行、Tab等特殊符號時，可以用轉(zhuǎn)義符來進行轉(zhuǎn)義，轉(zhuǎn)義符以“\”開始。常見轉(zhuǎn)義符見下表。轉(zhuǎn)義符解釋說明轉(zhuǎn)義符解釋說明\'單引號\"雙引號\nLF換行，n表示newline\v跳格（Tab、水平）\tTab符號\rCR換行\(zhòng)f換頁\\反斜線（\）\b退格，b表示blank\0Null字節(jié)\xhh由2位十六進制數(shù)字hh表示的ISO-8859-1字符。如“\x61”表示“a”\uhhhh由4位十六進制數(shù)字hhhh表示的Unicode字符。如“\u597d”表示“好”知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)數(shù)據(jù)類型字符串長度：字符串是由若干字符組成的，這些字符的數(shù)量就是字符串的長度。通過字符串的length屬性可以獲取整個字符串的長度。獲取str1的長度varstr1='I\'maprogrammer';console.log(str1.length);示例代碼知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)數(shù)據(jù)類型訪問字符串中的字符：字符串可以使用“[index]”語法按照index（索引）訪問字符，index從0開始，一直到字符串的長度減1，如果超過了index最大值，會返回undefined。varstr='I\'maprogrammer';console.log(str[0]);//輸出結(jié)果：Iconsole.log(str[1]);//輸出結(jié)果：'console.log(str[15]);//輸出結(jié)果：rconsole.log(str[16]);//輸出結(jié)果：undefined示例代碼知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)數(shù)據(jù)類型字符串拼接：多個字符串之間可以使用“+”進行拼接，如果數(shù)據(jù)類型不同，拼接前會把其他類型轉(zhuǎn)成字符串，再拼接成一個新的字符串。varstr='I\'maprogrammer';console.log('a'+'b');//abconsole.log('a'+18);//a18console.log('_'+true);//_trueconsole.log('12'+14);//1214console.log(12+14);//兩個數(shù)字相加，結(jié)果為26示例代碼注意：字符串的拼接，必須要有字符串和其他類型相拼接，最終的結(jié)果才能是字符串類型。知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)數(shù)據(jù)類型“顯示年齡”案例：彈出一個輸入框，讓用戶輸入年齡。輸入后，單擊“確定”按鈕，程序彈出來一個警告框，顯示內(nèi)容為“您今年x歲了”，x表示剛才輸入的年齡。varage=prompt('請輸入您的年齡');//彈出一個輸入框，讓用戶輸入年齡varmsg='您今年'+age+'歲了';//將年齡與輸出的字符串拼接alert(msg);//彈出警告框，輸出程序的處理結(jié)果示例代碼知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)數(shù)據(jù)類型案例分析交互變成的三個基本要素：彈出一個輸入框（prompt），讓用戶輸入年齡（用戶輸入）把用戶輸入的值用變量保存起來，把剛才輸入的年齡與要輸出的字符串拼接（程序內(nèi)部處理）用alert語句彈出警告框（輸出結(jié)果）知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)數(shù)據(jù)類型(3)

布爾型布爾型通常用于邏輯判斷，它有兩個值：true和false，表示事物的“真”和“假”。當(dāng)參與數(shù)學(xué)運算時，布爾型和數(shù)字型相加，true的值為1，false的值為0.true會轉(zhuǎn)換成1false會轉(zhuǎn)換成0console.log(true); //輸出結(jié)果：trueconsole.log(false); //輸出結(jié)果：falseconsole.log(true+1); //輸出結(jié)果：2console.log(false+1); //輸出結(jié)果：1示例代碼知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)數(shù)據(jù)類型(4)

undefined如果一個變量聲明后沒有賦值，則變量的值就是undefined。下面通過代碼演示undefined的使用。//演示undefined的使用console.log(true); //輸出結(jié)果：truevara;console.log(a); //輸出結(jié)果：undefinedconsole.log(a+'_'); //輸出結(jié)果：undefined_（字符串型）console.log(a+1); //輸出結(jié)果：NaN示例代碼知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)數(shù)據(jù)類型當(dāng)然也可以給一個變量賦一個null值，下面通過代碼演示null值的使用。//演示null的使用varb=null;console.log(b+'_'); //輸出結(jié)果：null_（字符串型）console.log(b+1);//輸出結(jié)果：1（b轉(zhuǎn)換為0）console.log(b+true);//輸出結(jié)果：1（b轉(zhuǎn)換為0，true轉(zhuǎn)換為1）示例代碼(5)

null知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)數(shù)據(jù)類型可以利用typeof運算符進行數(shù)據(jù)類型檢測。console.log(typeof12); //輸出結(jié)果：numberconsole.log(typeofnull); //輸出結(jié)果：objectvara='12';console.log(typeofa=='string');//輸出結(jié)果：true示例代碼

1.3

數(shù)據(jù)類型檢測知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)數(shù)據(jù)類型值得一提字面量，簡單來說，就是用字面量來表示如何在代碼中表達這個值，通過字面量，我們可以很容易地看出來它是哪種類型的值。例如數(shù)字字面量：7、8；布爾字面量：true、false等。知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)數(shù)據(jù)類型

1.3

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

(1)

轉(zhuǎn)換為字符串型注意：null和undefined無法使用toSting()方式進行轉(zhuǎn)換；對于數(shù)字型的變量，可以在toString()的小括號中傳入?yún)?shù)，來進行進制轉(zhuǎn)換。轉(zhuǎn)換為字符串型的3種常見的方式：利用“+”拼接字符串（最常用的一種方式）利用toString()轉(zhuǎn)換成字符串利用String()轉(zhuǎn)換成字符串知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)數(shù)據(jù)類型

(2)

轉(zhuǎn)換為數(shù)字型轉(zhuǎn)換為數(shù)字型的4種常見的方式：使用parseInt()將字符串轉(zhuǎn)為整數(shù)使用parseFloat()將字符串轉(zhuǎn)為浮點數(shù)使用Number()將字符串轉(zhuǎn)為數(shù)字型利用算術(shù)運算符（-、*、/）隱式轉(zhuǎn)換知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)數(shù)據(jù)類型“計算年齡”案例，要求在頁面中彈出一個輸入框，提示用戶輸入出生年份，利用出生年份計算用戶的年齡。year是字符串需要進行轉(zhuǎn)換varyear=prompt('請輸入您的年齡');varage=2020-parseInt(year);alert('您今年已經(jīng)'+age+'歲了');示例代碼知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)數(shù)據(jù)類型“簡單加法器”案例，要求在頁面中彈出兩個輸入框，分別輸入兩個數(shù)字，然后返回兩個數(shù)字相加的結(jié)果。使用parseFloat()將字符串轉(zhuǎn)為浮點數(shù)varnum1=prompt('請輸入第一個數(shù)：');varnum2=prompt('請輸入第二個數(shù)：');varresult=parseFloat(num1)+parseFloat(num2);alert('計算結(jié)果是：'+result);示例代碼知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)數(shù)據(jù)類型(3)

轉(zhuǎn)換為布爾型轉(zhuǎn)換為布爾型使用Boolean()，在轉(zhuǎn)換時，代表空、否定的值會被轉(zhuǎn)換為false，如空字符串、0、NaN、null和undefined，其余的值轉(zhuǎn)換為true。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(12)); //true示例代碼知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)運算符2.運算符

2.1

算術(shù)運算符算術(shù)運算符用于對兩個變量或值進行算術(shù)運算，與數(shù)學(xué)上的加、減、乘、除類似，常用的算術(shù)運算符如下。運算符運算示例解釋說明+加1+56-減8-44*乘3*412/除3/21.5%取余數(shù)（取模）7%52知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)運算符算術(shù)運算符的注意事項：進行四則混合運算時，運算順序要遵循數(shù)學(xué)中“先乘除后加減”的原則在進行取模運算時，運算結(jié)果的正負取決于被模數(shù)（%左邊的數(shù)）的符號，與模數(shù)（%右邊的數(shù)）的符號無關(guān)在開發(fā)中盡量避免利用浮點數(shù)進行運算，因為有可能會因JavaScript的精度導(dǎo)致結(jié)果的偏差使用“+”和“-”可以表示正數(shù)或負數(shù)知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)運算符值得一提表達式是各種類型的數(shù)據(jù)、變量和運算符的集合，最簡單的表達式可以是一個變量或字面量。注意：表達式最終都會有一個返回值。知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)運算符2.2

遞增和遞減運算符使用遞增（++）、遞減（--）運算符可以快速地對變量的值進行遞增和遞減操作，它屬于一元運算符，只對一個表達式進行操作。前置遞增（遞減）運算符：遞增和遞減運算符寫在變量前面，返回的是計算后的結(jié)果后置遞增（遞減）運算符：遞增和遞減運算符寫在變量后面，返回的是計算前的結(jié)果遞增和遞減運算符的優(yōu)先級高于“+”“-”等運算符知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)運算符前置遞增/減和后置遞增/減小結(jié)單獨使用時，運行結(jié)果相同與其他代碼聯(lián)用時，執(zhí)行結(jié)果會不同前置：先自加，后運算（先己后人）后置：先原值運算，后自加（先人后己）開發(fā)時，大多使用后置遞增/減，并且代碼獨占一行，例如：num++，num--知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)運算符

2.3

比較運算符比較運算符用于對兩個數(shù)據(jù)進行比較，其結(jié)果是一個布爾值，即true或false，常用的比較運算符及用法見下表。運算符運算示例結(jié)果>大于5>5false<小于5<5false>=大于或等于5>=5true<=小于或等于5<=5true==等于5=='5'true!=不等于5!=4true===全等5==='5'false!==不全等5!=='5'true總結(jié)：單=是賦值，雙=是判斷（判斷兩邊值是否相等，此時有隱式數(shù)據(jù)類型轉(zhuǎn)換），三=是全等（判斷兩邊的值和數(shù)據(jù)類型是否完全相同）。知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)運算符2.4

邏輯運算符邏輯運算符用于對布爾值進行運算，其返回值也是布爾值。在實際開發(fā)中，邏輯運算符經(jīng)常用于多個條件的判斷，常用的邏輯運算符見下表。運算符運算示例結(jié)果&&與a&&ba和b都為true，結(jié)果為true，否則為false||或a

||ba和b中至少有一個為true，結(jié)果為true，否則為false!非!a若a為false，結(jié)果為true，否則相反短路運算（邏輯中斷）：當(dāng)有多個表達式（值）時，左邊的表達式值可以確定結(jié)果時，就不再繼續(xù)運算右邊表達式的值。知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)運算符邏輯與：表達式1&&表達式2如果表達式1的值為真，則返回表達式2如果表達式1的值為假，則返回表達式1邏輯或：表達式1||表達式2如果表達式1的值為真，則返回表達式1如果表達式1的值為假，則返回表達式2知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)運算符值得一提位運算符，用來對數(shù)據(jù)進行二進制運算，將參與運算的操作數(shù)視為由二進制（0和1）組成的32位的串。知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)運算符2.5

賦值運算符賦值運算符用于將運算符右邊的值賦給左邊的變量，常用的邏輯運算符及示例如下。console.log(Boolean(''))//falsevarage=10;age+=5; //相當(dāng)于age=age+5;console.log(age); //輸出結(jié)果：15age-=5; //相當(dāng)于age=age-5;console.log(age); //輸出結(jié)果：10age*=10; //相當(dāng)于age=age*10;console.log(age); //輸出結(jié)果：100示例代碼知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)運算符常用的邏輯運算符及示例見下表。運算符運算示例結(jié)果=賦值a=3;a=3+=加并賦值a=3;a+=2;a=