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

下面我們一起來做一個加法計(jì)算器，讓用戶輸入兩個數(shù)，然后計(jì)算這兩個數(shù)的和。代碼如下：

let num1 = prompt("請輸入第一個數(shù)："); let num2 = prompt("請輸入第二個數(shù)："); let sum = num1 + num2; console.log(num1, num2, sum);

程序運(yùn)行起來后，分別輸入1和2，打印的結(jié)果為：1 2 12。

我們期望的值是3，但是當(dāng)前計(jì)算的結(jié)果是12。如果你仔細(xì)觀察的話會發(fā)現(xiàn)，打印的數(shù)據(jù)類型是字符串。

也就是我們通過 prompt 獲取用戶輸入的內(nèi)容始終是字符串類型，而我們期望的是數(shù)值類型。所以此時我們需要把用戶輸入的字符串類型的數(shù)值，轉(zhuǎn)換成數(shù)值類型，再進(jìn)行數(shù)學(xué)運(yùn)算。這就是我們?yōu)槭裁匆M(jìn)行數(shù)據(jù)類型轉(zhuǎn)換的原因。

轉(zhuǎn)換成數(shù)值類型

• Number()

• Number() 可以把任意值轉(zhuǎn)換成數(shù)值類型，如果要轉(zhuǎn)換的字符串中有一個不是數(shù)值的字符，返回 NaN

let res0 = Number('1a3'); console.log(res0); // 輸出 NaN,NaN 就是 not a ?number 的縮寫，表示某個結(jié)果不是一個數(shù)字 console.log(typeof res0); // 輸出 number let res1 = Number('123'); console.log(res1); // 輸出數(shù)字123 console.log(typeof res1); // 輸出 number let res2 = Number(true); console.log(res2);// 輸出 1 console.log(typeof res2); // 輸出number let res3 = Number(null); console.log(res3); // 輸出0 console.log(typeof res3); // 輸出number let res4 = Number(undefined); console.log(res4); // 輸出 NaN, NaN 就是 not a ?number 的縮寫，表示某個結(jié)果不是一個數(shù)字 console.log(typeof res4); // 輸出 number

• parseInt()

• parseInt這個方法用于將字符串轉(zhuǎn)換成整數(shù)

• 它內(nèi)部會從前往后解析數(shù)據(jù)，如果開頭是數(shù)字一直往后找直到遇到非數(shù)字部分為止，返回前面的數(shù)字部分

• 如果首字符不為數(shù)字直接返回 NaN

let res1 = parseInt('123'); console.log(res1); // 輸出 123 console.log(typeof res1); // 輸出number let res2 = parseInt('12a'); console.log(res2);// 輸出 12 console.log(typeof res2);// 輸出number let res3 =parseInt('a123'); console.log(res3); // 輸出 NaN console.log(typeof res3); // 輸出number

• parseFloat()

• parseFloat()把字符串轉(zhuǎn)換成浮點(diǎn)數(shù)

• parseFloat()和parseInt非常相似，不同之處在與 parseFloat 會解析第一個. 遇到第二個.或者非數(shù)字結(jié)束

• 如果解析的內(nèi)容里只有整數(shù)，解析成整數(shù)

let res1 = parseInt('123.123'); console.log(res1); // 輸出 123.123 console.log(typeof res1); // 輸出number let res2 = parseInt('12.12a'); console.log(res2);// 輸出 12.12 console.log(typeof res2);// 輸出number let res3 =parseInt('a12.3'); console.log(res3); // 輸出 NaN console.log(typeof res3); // 輸出number

• +，-0 等運(yùn)算(隱式類型轉(zhuǎn)換)

let str = '500'; console.log(+str); // 取正 console.log(-str); // 取負(fù) console.log(str - 0);

轉(zhuǎn)換成字符串類型

• toString()

let res1 = (123).toString(); console.log(res1); // 輸出字符串123 console.log(typeof res1); // 輸出string let res2 = true.toString(); console.log(res2); // 輸出字符串true console.log(typeof res2); // 輸出string let res3 = undefined.toString(); console.log(res3); // 報錯：Cannot read property 'toString' of undefined let res4 = null.toString(); console.log(res4); //報錯： Cannot read property 'toString' of null

注意： undefined和null不能使用這個方式變成字符串

• String()

• String()函數(shù)存在的意義：有些值沒有 toString()，這個時候可以使用 String()。比如：undefined 和 null

var res1 = String(123); console.log(res1); ?// 輸出字符串的 123 console.log(typeof res1); // 輸出 string var res2 = String(true); console.log(res2); // 輸出字符串的 true console.log(typeof res2); // 輸出 string var res3 = String(undefined); console.log(res3); // 輸出 字符串 undefined console.log(typeof res3);// 輸出 string var res4 = String(null); console.log(res4); // 輸出 字符串null console.log(typeof res4); // 輸出 string

• 拼接字符串方式()

• num + ""，當(dāng) + 兩邊一個操作符是字符串類型，一個操作符是其它類型的時候，會先把其它類型轉(zhuǎn)換成字符串(隱式類型轉(zhuǎn)換)再進(jìn)行字符串拼接，返回字符串

轉(zhuǎn)換成布爾類型

• Boolean() 這個方法用于將其它類型轉(zhuǎn)換成布爾類型

var res1 = Boolean(123); console.log(res1);// 輸出true console.log(typeof res1); // 輸出 boolean var res2 = Boolean('abc'); console.log(res2);// 輸出true console.log(typeof res2); // 輸出 boolean var res3 = Boolean(undefined); console.log(res3);// 輸出false console.log(typeof res3); // 輸出 boolean var res4 = Boolean(null); console.log(res4);// 輸出true console.log(typeof res4); // 輸出 boolean

• 重點(diǎn)：

• 0、''(空字符串)、null、undefined、NaN、false 會轉(zhuǎn)換成 false，其它值都會轉(zhuǎn)換成 true。

運(yùn)算符

JavaScript 中提供了很多運(yùn)算符，方便我們進(jìn)行各種運(yùn)算，例如：

• 算數(shù)運(yùn)算符

• 比較運(yùn)算符

• 邏輯運(yùn)算符

• 賦值運(yùn)算符

運(yùn)算符又稱為操作符 (operator)，例如我們在數(shù)學(xué)中寫的算式：5 + 6，在我們的程序中可以直接運(yùn)行。

5 + 6 由操作數(shù)和操作符組成，在程序中我們稱為表達(dá)式。

表達(dá)式執(zhí)行完成后一定會有一個返回結(jié)果。

算數(shù)運(yùn)算符

+ - * / % ?

自增操作符、自減操作符

++自增操作符的作用是讓一個數(shù)字在原來的基礎(chǔ)上自增

var a = 10; a++; console.log(a);// 輸出11 // a++ 的過程相當(dāng)于 a = a + 1

但是自增和自減操作符是可以寫在數(shù)據(jù)前面和后面的

var a = 10; ++a; console.log(a); // 輸出11

兩者的區(qū)別在于運(yùn)算順序不同

a++ : 參與運(yùn)算的時候，會先用原來的值先運(yùn)算，再自增

++a: 參與運(yùn)算的時候，會先在原來的基礎(chǔ)上自增，再使用新的值參與運(yùn)算

var a = 10; var b = a++ + 10; // 運(yùn)算的時候，使用a的原來值10參與加法運(yùn)算，10+10賦值給b之后，再實(shí)現(xiàn)a的自增 console.log(b); // 輸出20 console.log(a); // 輸出 11 var c = 10; var d = ++a + 10; // 運(yùn)算的時候，先執(zhí)行a的自增，再使用a自增后的值11和10相加，最終結(jié)果是 11 + 10 console.log(d); // 輸出21 console.log(c); // 輸出11

這個自增操作符會在我們后面學(xué)習(xí)循環(huán)語法的時候使用

--操作符的作用是讓一個數(shù)據(jù)自減

var a = 10; a--; console.log(a);// 輸出9 // a-- 相當(dāng)于 a = a - 1

自減操作也可以放在數(shù)據(jù)的前面和后面，運(yùn)算規(guī)則和++是一樣的

比較操作符

比較操作符的就是比較兩個數(shù)據(jù)，操作符號有

> ?< ?>= ?<=

這幾個符號的作用和數(shù)字中學(xué)習(xí)的比較是一樣的，就是比較兩個數(shù)字的大小，運(yùn)算結(jié)果是 布爾 類型

console.log( 4 > 5); // 輸出false console.log( 4 < 5); // 輸出 true

還有兩類的操作符

== != === ?!==

== 和 === 是用來比較兩個數(shù)據(jù)是否相等的

let res1 = '123' == 123; let res2 = '123' === 123; console.log(res1); // true console.log(res2); // false

兩者的區(qū)別在于

== 會進(jìn)行隱式類型轉(zhuǎn)換，先把字符串轉(zhuǎn)換成數(shù)值類型，再進(jìn)行比較。

=== 不會進(jìn)行隱士類型轉(zhuǎn)換。相當(dāng)于不僅比較兩個數(shù)據(jù)的值，還比較數(shù)據(jù)的類型

!= 和!== 類似 != 先進(jìn)行隱士類型轉(zhuǎn)，!== 不會進(jìn)行類型轉(zhuǎn)換

var res1 = '4' != 4; var res2 = '4' !== 4; console.log(res1); // 輸出 false ,比較兩個數(shù)據(jù)的值是否不相等, 此時兩個數(shù)據(jù)的 值 都 4 ，相等，結(jié)果是 false console.log(res2); // 輸出 true ，比較兩個數(shù)據(jù)的類型和值是否不相等，此時兩個數(shù)據(jù)的類型不相等，結(jié)果是 true

為了程序的嚴(yán)謹(jǐn)，我們建議使用 === 和 !==

邏輯操作符

邏輯運(yùn)算符的主要作用是連接多個條件，我們要掌握的比較運(yùn)算符有

&& ?|| ?！

&& 用在需要多個條件同時成立的時候

// 用戶在登錄的時候要用戶名和密碼同時正確才能登錄 var userName = prompt('請輸入用戶名'); var password = prompt('請輸出密碼'); console.log(userName === 'admin' && password === '123456'); // 只有 && 兩邊的 結(jié)果都是 true ，最終結(jié)果才是 true

|| 用在只需要任意條件成立的時候

// 只要年齡小5歲或者身高小于120cm就可以免費(fèi)乘坐 var age = parseInt(prompt('請輸入你的年齡')); var height = parseFloat(prompt('請輸入你的身高')); console.log(age < 5 || height < 120); // 只要 || 兩邊的結(jié)果有一個是true，最終結(jié)果就是true

! 用于顛倒是非的時候

var res = true; console.log(!res); // 這里暫時用不到，在后面做具體效果的時候都用，那個時候我們再學(xué)習(xí)具體的使用

• && 與 兩個操作數(shù)同時為true，結(jié)果為true，否則都是false

• || 或 兩個操作數(shù)有一個為true，結(jié)果為true，否則為false

• ! 非 取反

賦值操作符

要掌握的賦值操作符有兩個大類

= += ?-= ?*= ?/= ?%=

= 的作用就是把右邊的結(jié)果賦值(存儲)給左邊的變量之類的容器

var a = 10 + 10; //把?。保埃保暗慕Y(jié)果存儲到?。帷∵@個變量里面

+= 的作用是簡寫加法

var a = 10; a += 2; // 相當(dāng)于是 a = a + 2; 就是一個簡寫的語法 console.log(a); // 輸出12

-= *= /= %= 除了運(yùn)算規(guī)則不同，作用是一樣的，都是簡寫

運(yùn)算符優(yōu)先級

觀察代碼

var res = 5 + 2 * 3; console.log(res); // 11

在上述代碼中，執(zhí)行過程是先計(jì)算 2*3 再和 5 相加的。在js中的操作符很多，我們要認(rèn)識到它們之間是有計(jì)算的優(yōu)先順序的，這個優(yōu)先順序我們稱為優(yōu)先級

記憶一下下面的計(jì)算優(yōu)先級

1. 第一優(yōu)先級： () [] . 2. 第二優(yōu)先級： ++ -- ! 3. 第三優(yōu)先級： * ?/ ?% 4. 第四優(yōu)先級： + ?- 5. 第五優(yōu)先級： > ? >= ? < ? <= 6. 第六優(yōu)先級： == ? != ? ?=== ? ?!== ? 7. 第七優(yōu)先級： && 8. 第八優(yōu)先級： || ?9. 第九優(yōu)先級： = += -= *= /= %=

上面是具體的優(yōu)先級，但是平時我們不會把很多的操作符放在一起運(yùn)算，所以我們大致記住

1. 括號先算

2. 其次算算術(shù)

3. 再次算比較

4. 然后算邏輯

5. 最后算賦值

使用多了，熟練了，規(guī)則就記住了