iT邦幫忙

2021 iThome 鐵人賽

DAY 3
0
Modern Web

想試試寫程式的感覺,就用 JavaScript 來寫寫看網頁吧系列 第 3

[想試試看JavaScript ] 資料型態 數字 布林 undefined null

資料型態

number 數字

number 就是數字。跟字串需要引號不同,直接輸入數字就可以了。

var number=4;
console.log(number); // 印出 4

既然是數字那麼我們可以做一些簡單的加減乘除。
也可以將資料放進變數裡在做加減乘除。

var n1=4;
var n2=3;
var n3=4-3; // 4-3 等於 1,1 會放進變數 n3裡面
var n4=n1+n2; // 將資料放進 n1 n2 作加法,之後將結果放進 n4

console.log(n3); // 印出 1
console.log(n4); // 印出 7

var n5=n3+n4; // 當然我們可以繼續將變數拿來做運算,並將結果放在新的變數裡
console.log(n5) //印出 8

一開始學可能會覺得怪怪的,因為中文的閱讀習慣是從左讀到右邊。
不過這邊的範例會先做加減乘除,再將結果放進變數裡。
電腦對程式碼的處理順序跟我們人類平常的閱讀習慣不太一樣。
有的時候對變數裡的資料做很多次不同的計算,程式碼運算的順序會跟我們想的不一樣。
所以建議還是寫一個段落,就將變數裡面的資料印出來看看。確定程式跑的順序跟我們想的一樣。

Javascript 在計算小數的話會有不能預期的結果
例如

var n1=0.1;
var n2=0.2;
var n3=n1+n2;

console.log(n3);  // 印出 0.30000000000000004

0.1+0.2 居然不是 0.3!?
而是0.30000000000000004
因為 Javascript 底層運算的邏輯是用「IEEE754」二進位浮點數算數標準。
雖然你輸入 0.1與0.2,其實電腦會先將0.1與0.2先轉成二進位數,可是二進位數沒辦法完美表現十進位,只能取近似值。
兩個近似值相加就會產生誤差。

那有很多方法可以解決,比較簡單的方法,就是先將0.1與0.2個別乘以10,變成1和2再相加為3,最後再除以10,就會是0.3。

平常好像遇不到計算小數的例子,可能會覺得記這個有什麼幫助呢?
其實如果寫個很簡單的購物車或者記賬,要照商品單價與數量來計算總價就會遇到了。
平常新台幣不會需要用到小數,不過計算外國貨幣,像人民幣或者美金很常就會用小數。

Boolean

跟數字比 boolean 就比較單純,boolean 只有兩種:true 以及 false
通常用在控制程式的流程或者是比較的時候也會出現。
控制程式流程,也就是說只要符合條件我們就做某事或者做運算,條件符合就會用true表示。
只要條件不符合就不執行程式,用false表示。

var result=4>3;  // 比較 4 有沒有比 3 大
console.log(result); // 印出 true 代表 4 比 3 大

boolean 很常用,也很好用,之後再舉例它的用法。

null 與 undefined

null 代表這個變數沒有給值,也就是沒有指定資料到變數,不過我可以指定一個 null 到變數裡。
undefined 代表尚未給值,未定義
聽起來很像,

var A=null; // 可以指定 null 到變數

那我會怎樣使用 null 呢?
例如商品的價格,商品不用錢的話,我就會這樣寫,將0指定進去

var price=0;

不過有的時候商品的價格並不是0元,只是還沒有決定商品要多少錢,我就會輸入null來設定。

var price=null;

畢竟0也是一種價格,也具有意義。
所以一些情況必須先指定資料進去,可是還不確定應該要給什麼資料,我就會指定 null 進去。

undefined 代表未定義
例如

var data;
console.log(data); // 印出 undefined

代表我沒有指定值進去
還有一種情況可能會跳出 undefined ,就是資料發生錯誤時

可能還是會很難理解什麼時候會遇到 null 什麼時候會遇到 undefined,畢竟兩個都很像都是類似沒有的概念。
其實不太能用邏輯去判斷,而是隨著做越來越多的小程式,要一個一個去記住這兩個的使用場景,記住什麼時候會出現 undefined 什麼時候出現 null

有個思維我覺得不錯。

學程式,先不要想為什麼,明白他的運作、結果,隨者練習的增加再來問為什麼。

畢竟程式是人類做出來的工具,有的只是約定俗成的規定,大家只是遵照一樣規定來撰寫程式碼來溝通而已。
只要放輕鬆記住這些規定,熟練使用就可以方便我們架構出複雜的功能。


上一篇
[想試試看JavaScript ] 資料型態 與字串
下一篇
[想試試看JavaScript ] 陳述式與表達式
系列文
想試試寫程式的感覺,就用 JavaScript 來寫寫看網頁吧30

尚未有邦友留言

立即登入留言