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

阿榮-avatar-img
發佈於前端
更新 發佈閱讀 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) 並增加不必要的計算開銷。


資料來源

留言
avatar-img
留言分享你的想法!
avatar-img
阿榮 | 前端 ~ 互動藝術程式
2會員
39內容數
主要放程式學習筆記,分享 Creative Coding 相關內容、作品
2024/04/19
避免網頁在不同瀏覽器中長不一樣。用 CSS Reset 來「重置」和統一瀏覽器預設樣式。
Thumbnail
2024/04/19
避免網頁在不同瀏覽器中長不一樣。用 CSS Reset 來「重置」和統一瀏覽器預設樣式。
Thumbnail
2024/04/15
2024/04/15
2024/04/12
針對 JavaScript 中的原始型別和隱性轉型進行了詳細的探討
Thumbnail
2024/04/12
針對 JavaScript 中的原始型別和隱性轉型進行了詳細的探討
Thumbnail
看更多
你可能也想看
Thumbnail
透過蝦皮分潤計畫,輕鬆賺取零用金!本文分享5-6月實測心得,包含數據流程、實際收入、平臺優點及注意事項,並推薦高分潤商品,教你如何運用空閒時間創造被動收入。
Thumbnail
透過蝦皮分潤計畫,輕鬆賺取零用金!本文分享5-6月實測心得,包含數據流程、實際收入、平臺優點及注意事項,並推薦高分潤商品,教你如何運用空閒時間創造被動收入。
Thumbnail
單身的人有些會養寵物,而我養植物。畢竟寵物離世會傷心,植物沒養好再接再厲就好了~(笑)
Thumbnail
單身的人有些會養寵物,而我養植物。畢竟寵物離世會傷心,植物沒養好再接再厲就好了~(笑)
Thumbnail
不知你有沒有過這種經驗?衛生紙只剩最後一包、洗衣精倒不出來,或電池突然沒電。這次一次補貨,從電池、衛生紙到洗衣精,還順便分享使用心得。更棒的是,搭配蝦皮分潤計畫,愛用品不僅自己用得安心,分享給朋友還能賺回饋。立即使用推薦碼 X5Q344E,輕鬆上手,隨時隨地賺取分潤!
Thumbnail
不知你有沒有過這種經驗?衛生紙只剩最後一包、洗衣精倒不出來,或電池突然沒電。這次一次補貨,從電池、衛生紙到洗衣精,還順便分享使用心得。更棒的是,搭配蝦皮分潤計畫,愛用品不僅自己用得安心,分享給朋友還能賺回饋。立即使用推薦碼 X5Q344E,輕鬆上手,隨時隨地賺取分潤!
Thumbnail
身為一個典型的社畜,上班時間被會議、進度、KPI 塞得滿滿,下班後只想要找一個能夠安靜喘口氣的小角落。對我來說,畫畫就是那個屬於自己的小樹洞。無論是胡亂塗鴉,還是慢慢描繪喜歡的插畫人物,那個專注在筆觸和色彩的過程,就像在幫心靈按摩一樣,讓緊繃的神經慢慢鬆開。
Thumbnail
身為一個典型的社畜,上班時間被會議、進度、KPI 塞得滿滿,下班後只想要找一個能夠安靜喘口氣的小角落。對我來說,畫畫就是那個屬於自己的小樹洞。無論是胡亂塗鴉,還是慢慢描繪喜歡的插畫人物,那個專注在筆觸和色彩的過程,就像在幫心靈按摩一樣,讓緊繃的神經慢慢鬆開。
Thumbnail
此章節旨在介紹Java程式語言中的各種資料型別,包括基本型別、引用型別、集合型別、陣列型別、字典型別等。它還講解了如何在Java中進行型別轉換和自定義型別,並提供了相關的程式碼示例。
Thumbnail
此章節旨在介紹Java程式語言中的各種資料型別,包括基本型別、引用型別、集合型別、陣列型別、字典型別等。它還講解了如何在Java中進行型別轉換和自定義型別,並提供了相關的程式碼示例。
Thumbnail
本章節旨在介紹 TypeScript 的基本資料型別,包括內建型別、型別轉換、自訂型別、元組、集合、陣列、和字典型別。透過理解和使用這些型別,可以提高代碼的可讀性和可維護性。
Thumbnail
本章節旨在介紹 TypeScript 的基本資料型別,包括內建型別、型別轉換、自訂型別、元組、集合、陣列、和字典型別。透過理解和使用這些型別,可以提高代碼的可讀性和可維護性。
Thumbnail
本章節旨在介紹JavaScript中的物件導向編程。內容包括類別(Class)的定義和使用,建構子的作用,以及公開,私有,受保護(Protected)等不同訪問修飾符的概念。此外,還涵蓋了繼承、多型、封裝、介面、抽象類別、靜態類別、列舉、委派、Lambda表達式、泛型、反射等物件導向的主要觀念。
Thumbnail
本章節旨在介紹JavaScript中的物件導向編程。內容包括類別(Class)的定義和使用,建構子的作用,以及公開,私有,受保護(Protected)等不同訪問修飾符的概念。此外,還涵蓋了繼承、多型、封裝、介面、抽象類別、靜態類別、列舉、委派、Lambda表達式、泛型、反射等物件導向的主要觀念。
Thumbnail
這些章節的目的是為了介紹JavaScript中的各種數據類型,包括基礎類型和物件類型,以及如何將數據從一種類型轉換為另一種類型。此外,還介紹了如何創建自定義類型,以及如何使用JavaScript中的陣列、集合和字典。
Thumbnail
這些章節的目的是為了介紹JavaScript中的各種數據類型,包括基礎類型和物件類型,以及如何將數據從一種類型轉換為另一種類型。此外,還介紹了如何創建自定義類型,以及如何使用JavaScript中的陣列、集合和字典。
Thumbnail
JavaScript是一種具有動態型別、弱型別、原型繼承等特性的高級腳本語言,應用範圍廣泛,包括前端開發、後端開發、移動應用等。它被各種公司和開源社區廣泛使用。學習JavaScript需要掌握ECMAScript標準、異步編程、模塊系統等知識。
Thumbnail
JavaScript是一種具有動態型別、弱型別、原型繼承等特性的高級腳本語言,應用範圍廣泛,包括前端開發、後端開發、移動應用等。它被各種公司和開源社區廣泛使用。學習JavaScript需要掌握ECMAScript標準、異步編程、模塊系統等知識。
Thumbnail
JSON(JavaScript Object Notation)是一種用於資料交換的輕量級資料格式,通常用於網路應用程式之間的資料傳遞。 JSON的格式易於閱讀和撰寫,也易於解析和產生,因此它在開發中被廣泛使用。 JSON由兩種結構組成:物件(Object)和陣列(Array)。
Thumbnail
JSON(JavaScript Object Notation)是一種用於資料交換的輕量級資料格式,通常用於網路應用程式之間的資料傳遞。 JSON的格式易於閱讀和撰寫,也易於解析和產生,因此它在開發中被廣泛使用。 JSON由兩種結構組成:物件(Object)和陣列(Array)。
Thumbnail
針對 JavaScript 中的原始型別和隱性轉型進行了詳細的探討
Thumbnail
針對 JavaScript 中的原始型別和隱性轉型進行了詳細的探討
Thumbnail
JS 資料型別分為兩大類,原始型別 (Primitive values) 和物件型別 (Objects)。
Thumbnail
JS 資料型別分為兩大類,原始型別 (Primitive values) 和物件型別 (Objects)。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News