JavaScript 有哪些資料型別? 怎麼辨別變數的資料型別?

阿榮
發佈於前端
閱讀時間約 4 分鐘

JS 資料型別分為兩大類,原始型別 (Primitive values) 和物件型別 (Objects)。

原始型別 (Primitive values)

1. String

用於表示文本。在 JavaScript (簡稱 JS) 中,字串可以用單引號、雙引號或反引號表示。例如:'hello'"world"`hello world`


2. Number

數值如:整數、浮點數、Infinity、-Infinity 和 NaN (Not a Number)。精確度是介於 -(2^53 - 1) 與 2^53 - 1 之間。


3. BigInt

安全整數範圍是 -(2^53 - 1) 與 2^53 - 1 之間,任何超出此範圍的數值都不能保證精度。BigInt 的引入主要就是為了解決在處理非常大或非常小的數值時可能遇到的精度問題。

可以通過在整數後面加上 n 來創建一個 BigInt 數值,例如:1234567890123456789012345678901234567890n,或者使用 BigInt 函式,例如 BigInt("1234567890123456789012345678901234567890")


4. Boolean

truefalse


5. Undefined

當變數已經被宣告但還沒被賦值時,值為 undefined

let a ;

console.log(a); // undefined

備註:用 const 宣告沒賦予值,直接報錯

const a;

console.log(a);
// 直接報錯 Uncaught SyntaxError: Missing initializer in const declaration​


6. Null

表示 「没有值」、「空值」。要特別注意的是,null 是原始型別,但 typeof null 會回傳 「object」,其實這是一個設計錯誤,但由於當時已經有了大量依賴於這一行為的程式碼,為了保持向後兼容,這個 bug 就被保留下來惹。

如果要判斷變數是否為 null,可以改用 === null,而不是 typeof。


7. Symbol

它提供了一種獨特 (唯一) 且不可變的值,通常用作物件屬性的 key。由於每個 Symbol值都是獨一無二的,這使得 Symbol在作為 key 時,不會與其他屬性名產生衝突。


每個使用 Symbol() 函式創建的 Symbol 都是獨一無二的,即使用相同的參數調用Symbol()函式,創建的 Symbol 也不相等。

let a = Symbol(1);
let b = Symbol(1);

console.log(a === b); // false


物件型別 (Objects)

上面原始型別那 7 個以外的,都是物件型別。物件、陣列、函式都是物件型別。物件型別的特性是它們可以被加上屬性,不只是物件可以加屬性,陣列和函式也都可以。

const arr = [1, 2, 3, 4, 5];
arr.name = '我是陣列';
console.log(arr.name);
console.log(arr);
// 都可以正常運行​
function fn() {
console.log('函式');
}

fn.myName = '這是一個函式';
console.log(fn);
console.dir(fn); // 函式要用 console.dir 來觀察​

怎麼辨別變數的資料型別?

判斷法:typeof xxx 回傳什麼值。

殘念的是有兩個例外:null 和 function。typeof null 回傳 object 但它是原始型別;typeof function 照理說要回傳 object,可是它卻回傳 function...


raw-image



原始型別包裹物件 primitive wrapper objects

原始型別總共有 7 個,例如:Number、String、Boolean 等,儘管這些原始型別並不是物件,但 JS 提供了它們各自對應的包裹對象(wrapper objects),讓我們可以讓原始型別執行類似物件的操作,例如:訪問屬性或方法。以字串來說,我們可以取得字串的長度。

這裡要特別注意的是,JS 會在背後偷偷幫我們轉換為對象,再轉回來,並不需要也不建議主動去創建包裹物件實例 new String(),創建新實例反而會導致類型判斷上的混淆 (它會回傳 object) 並增加不必要的計算開銷。


資料來源

主要放程式學習筆記,分享 Creative Coding 相關內容、作品
留言0
查看全部
發表第一個留言支持創作者!
npm | Node.js
閱讀時間約 1 分鐘
Express Web | Node.js
閱讀時間約 1 分鐘
JavaScript Class
閱讀時間約 3 分鐘
CSS 選擇器權重
閱讀時間約 3 分鐘
2665. Counter II | leetcode
閱讀時間約 4 分鐘
你可能也想看
【Javascript】檔案資料處理專案產生大量又瑣碎的作業做處理,眼下要從iReport的設定檔(jrxml)擷取每一項套印參數出來,提供給別人做Excel公式的資料表進行作業。
Thumbnail
avatar
2023-12-24
JavaScript 演義 #7: 三國爭地,變數如珍JavaScript 演義 #7: 三國爭地,變數如珍
Thumbnail
avatar
KH Huang
2023-09-19
JavaScript - 談談資料型別JavaScript 的型別可以分為兩類,分別是原始型別與物件型別,這邊主要談的是 ES6 的寫法。值得注意的是,JavaScript 變數本身不帶有型別,值才有。
Thumbnail
avatar
傑米
2023-06-29
JavaScript面試考題:Hoisting是什麼?在JS中很重要的觀念就是hoisting,中文叫做「提升」
Thumbnail
avatar
溫蒂蒂蒂
2023-01-18
JavaScript 面試考題:事件委託是什麼在搞清楚事件委託前必須先了解什麼是事件傳遞機制(Event Propagation),也就是捕獲(capture)跟冒泡(bubble),聽起來好像很難但是我昨天看完彭彭的直播課程(17:00開始)後就懂了!我寫成文章幫助記憶,也希望能幫助到大家,然後希望我面試會被考到。
Thumbnail
avatar
溫蒂蒂蒂
2023-01-17
[JavaScript] 究竟什麼是Event loop?執行以上程式碼,然後看到了這個結果: 為什麼「延遲0秒」的函式寫在上方,但在console印出的結果,它還是被排在第二順位? 利用AC教材提供的youtube演講連結一窺究竟: 演講提供了更多JS的細節概念,身為JS新手的我還在消化,但若針對教案提出的問題來回答,加上利用google大神查到MDN的
Thumbnail
avatar
SUPOAN
2022-10-29
【JavaScript 簡史】什麼是 ES5、ES6?網頁開發與 ECMAScript 的小故事在一開始學習前端開發的時候,一直遇到講師在課程內容中提到 ES5、ES6 等關鍵字,當初的我,單純認為 ES5、ES6 是講述 JavaScript 的版本,所以在使用上就沒有想太多,反正就是 JavaScript 1.0 、2.0 的感覺吧?
Thumbnail
avatar
Vivian Yeh
2022-01-15
【Javascript】行動電話格式驗證輸入畫面 為什麼要做驗證? 因為作為設計者,永遠不該預設使用者會乖乖照設計者的意思輸入。
Thumbnail
avatar
2021-05-30
JavaScript 變數宣告 var, let, const 比較JavaScript在ES6新增了let, const等宣告變數的方式,其中let, const是block scope的,而var則是function scope。
Thumbnail
avatar
Vic Lin
2019-10-12