iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 5
2
Modern Web

邁向 JavaScript 勇者之路系列 第 5

動態型別的 JavaScript

  • 分享至 

  • xImage
  •  

JavaScript 是屬於動態型別,它定義了七種資料型別,分別為六種原始型別 (ES6 新增一種原始型別)及 Object 型別。在開始之前先用小明來說明一下型別是怎樣的東西。

故事說明:

承先前故事,小明每天早上醒來都會忘記所有事物,但會在睡覺前把要做的事情先記錄下來,筆記本上會分門別類寫出要做的事情。

小明有時會將要詢問的事情留空白,等到知道結果後再填上數值,像是某一個商品的價格如果再詢問前無法得知,就會先定義變數,等到有值後寫入:

var porkPrice;    // Undefined
porkPrice = 200;  // Number

小明也不是嚴謹的人,常常在筆記本上塗抹修改的地方,像是亂加漂亮阿姨的姓名、年齡等。

var auntie = "漂亮阿姨";                // String
auntie = { name: '陳小美', ages: 22 };  // Object

以上僅是說明動態型別,請不要學小明這樣做。

如果要查看型別,可以使用 typeof auntie 來驗證型別,可以透過 typeof 看看以下變數分別屬於哪些型別,其中會發現有趣的事情。

var family = {
  mom: '老媽',
  me: '小明',
  sister: '小橙'
};

var money = 100;
var isEdge = true;
var attributes = '邊緣';
var variable;
var nullVariable = null; // 猜猜這個是什麼型別

六種原始型別

原始型別分別為以下六種:

  • Boolean:僅有 true, false 兩個值
  • Null:僅有 null 的值
  • Undefined:沒有被定義的變數
  • String:字串型別
  • Number:下述說明
  • Symbol(於 ECMAScript 6 新定義,以後再說明)

除此之外還有一個 物件型別

Undefined 與 Null

這兩個就翻譯上會有點接近,但實際上會有一些差異,首先建議:"不要將變數手動設為 undefined,這可能會造成未預期的結果。

  • Undefined 是在定義了一個變數,但是沒有給值
  • Null 則是在一個變數上給予了 "空值"
  • JavaScript 本身不會自動給予值 Null,這是讓開發者來設定變數沒有值的
  • 強制轉型 Number(undefined) -> NaN、Number(null) -> 0
  • typeof(undefined) -> undefined、typeof(null) -> Object
  • null 是有效的 JSON 值,undefined 不是

為什麼 null 是 Object,自從有 JavaScript 開始就是這樣了,而這個錯誤不能修正,他會導致不可預期的錯誤 (來源:The history of “typeof null”)。

另外原本也預期在未來會給予 typeof null === 'null' 的正確結果,但後來也被拒絕。

Number

數字型別是一種 [浮點數](雙精度浮點數 - 維基百科,自由的百科全書),這種數值在極大值時會有精準度的問題,範例:

10000000000000000 - 1;  // 一樣是 10000000000000000

所以有些文章會提到不要用 JavaScript 來算錢,可是也要先有這麼多錢再說啊 QQQQ。另外還有以下三種都屬於此 Number 型別。

  • +Infinity
  • -Infinity
  • NaN (not a number,但屬於數字型別,強制轉型有時會出現此錯誤)

物件型別

除了上述的六種原始型別,其餘都是物件型別,包含很常使用的 "陣列"、"函式" 都屬於物件型別。

下一個章節會開始來介紹 JavaScript 的物件,了解物件的概念有助於了解整個 JavaScript 的架構及運作喔 :)


上一篇
一次只能做一件事情的 JavaScript,解釋 Event queue 怎能不用動畫呢
下一篇
JavaScript 就是一堆物件的概念
系列文
邁向 JavaScript 勇者之路30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 則留言

0
pratnket
iT邦新手 5 級 ‧ 2017-12-08 11:42:50

好久没碰JVASCRIPT了...

es6要支持好像要弄js插件?

就是把javascript 能写成
Class的格式
不过支援度不高就是了?

看更多先前的回應...收起先前的回應...
卡斯伯 iT邦研究生 1 級 ‧ 2017-12-08 12:03:00 檢舉

pratnket 你好,

ES6 現在在 Chrome 可以直接運行,如你說到的 class 或是 let, const 都行,所以 ES6 並非未來式,而是陸續加入的規範喔。

pratnket iT邦新手 5 級 ‧ 2017-12-08 12:10:01 檢舉

Chrome都自动更新
IE8~IE9我记得不支援

pratnket iT邦新手 5 級 ‧ 2017-12-08 12:14:14 檢舉

卡斯伯
好~~
多谢你的回答
如果公司有要求要支援旧版,你也要懂老版本的写法就是了
加油!希望你在Javascript发扬光大0.0...

现在我都在走CMS系统了...批量建站...
能玩的时间比较少了

卡斯伯 iT邦研究生 1 級 ‧ 2017-12-08 12:19:25 檢舉

好喔,如果要支援舊版可以使用 babel 搭配其它套件如:gulp、webpack 等等。

感謝你的支持,我會繼續加油的 :)

0
Rafiki
iT邦新手 5 級 ‧ 2018-02-22 11:34:47

javascript的data type很像有錯誤
應該是以下分法才是對的喔
原始型別:
string
number
boolean
undefined
symbol
複雜型別:
function
object({}、array & null)
看w3c是這樣分
實際用typeof的結果也是如此喔

卡斯伯 iT邦研究生 1 級 ‧ 2018-02-22 12:09:27 檢舉

你好,

建議可以參考 MDN
其中一行寫明:最新的 ECMAScript 標準定義了七種資料型別
https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Data_structures

function 使用 typeof 會出現 "function"
實際上他是增加一個可被調用 (be invoked) 的屬性
本質還是物件
https://www.ecma-international.org/ecma-262/5.1/#sec-4.3.24

Rafiki iT邦新手 5 級 ‧ 2018-02-22 13:57:47 檢舉

了解,
可是null用typeof卻是object
照這樣看來不是應該要是null嗎

卡斯伯 iT邦研究生 1 級 ‧ 2018-02-22 15:54:45 檢舉

你好,

我的文章內也有提到這個部分
這是個美麗的錯誤(x),你再看一下文章喔~

我要留言

立即登入留言