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
沙龍一直是創作與交流的重要空間,這次 vocus 全面改版了沙龍介面,就是為了讓好內容被好好看見! 你可以自由編排你的沙龍首頁版位,新版手機介面也讓每位訪客都能更快找到感興趣的內容、成為你的支持者。 改版完成後可以在社群媒體分享新版面,並標記 @vocus.official⁠ ♥️ ⁠
Thumbnail
沙龍一直是創作與交流的重要空間,這次 vocus 全面改版了沙龍介面,就是為了讓好內容被好好看見! 你可以自由編排你的沙龍首頁版位,新版手機介面也讓每位訪客都能更快找到感興趣的內容、成為你的支持者。 改版完成後可以在社群媒體分享新版面,並標記 @vocus.official⁠ ♥️ ⁠
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
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)。
Thumbnail
在先前的型別文章中,我們曾經聊過 JavaScript 常用的一些型別,但針對布林這個型別,我們沒有做太多的解釋,原因在於布林值在 JavaScript 會有一個特殊的規則:自動轉型 。 自動轉型可說是讓 JavaScript 為弱型別、且難以管理的最重要的要素,接著就來讓我們來聊聊什麼是自動轉型
Thumbnail
在先前的型別文章中,我們曾經聊過 JavaScript 常用的一些型別,但針對布林這個型別,我們沒有做太多的解釋,原因在於布林值在 JavaScript 會有一個特殊的規則:自動轉型 。 自動轉型可說是讓 JavaScript 為弱型別、且難以管理的最重要的要素,接著就來讓我們來聊聊什麼是自動轉型
Thumbnail
在剛開始寫 JavaScript 可能大多數的人不會特別意識到 JavaScript 的型別系統有什麼特別之處,我是在看完 Youtube 上 CS50 的課程,才理解到在不同的程式語言中,會因為語言的特性而有不同的系統,JavaScript 就是偏向比較特別的那一種。
Thumbnail
在剛開始寫 JavaScript 可能大多數的人不會特別意識到 JavaScript 的型別系統有什麼特別之處,我是在看完 Youtube 上 CS50 的課程,才理解到在不同的程式語言中,會因為語言的特性而有不同的系統,JavaScript 就是偏向比較特別的那一種。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News