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
查看全部
發表第一個留言支持創作者!
CSS 樣式採用規則:先看權重,再看誰後
* 避免命名衝突 * 避免非預期行為 * 避免非預期依賴
類別 (class) 是在 ES6 中引入,用來作為建立新物件的模板。它可以將程式碼封裝起來。
Express 是一個流行的 web 框架,使用 JavsScript 實現,執行在 node 環境上,主要用來寫後端應用。
npm(全名 Node Package Manager,node套件管理器)
CSS 樣式採用規則:先看權重,再看誰後
* 避免命名衝突 * 避免非預期行為 * 避免非預期依賴
類別 (class) 是在 ES6 中引入,用來作為建立新物件的模板。它可以將程式碼封裝起來。
Express 是一個流行的 web 框架,使用 JavsScript 實現,執行在 node 環境上,主要用來寫後端應用。
npm(全名 Node Package Manager,node套件管理器)
你可能也想看
Google News 追蹤
Thumbnail
接下來第二部分我們持續討論美國總統大選如何佈局, 以及選前一週到年底的操作策略建議 分析兩位候選人政策利多/ 利空的板塊和股票
Thumbnail
🤔為什麼團長的能力是死亡筆記本? 🤔為什麼像是死亡筆記本呢? 🤨作者巧思-讓妮翁死亡合理的幾個伏筆
Thumbnail
專案產生大量又瑣碎的作業做處理,眼下要從iReport的設定檔(jrxml)擷取每一項套印參數出來,提供給別人做Excel公式的資料表進行作業。
Thumbnail
JavaScript 的型別可以分為兩類,分別是原始型別與物件型別,這邊主要談的是 ES6 的寫法。值得注意的是,JavaScript 變數本身不帶有型別,值才有。
Thumbnail
在搞清楚事件委託前必須先了解什麼是事件傳遞機制(Event Propagation),也就是捕獲(capture)跟冒泡(bubble),聽起來好像很難但是我昨天看完彭彭的直播課程(17:00開始)後就懂了!我寫成文章幫助記憶,也希望能幫助到大家,然後希望我面試會被考到。
Thumbnail
執行以上程式碼,然後看到了這個結果: 為什麼「延遲0秒」的函式寫在上方,但在console印出的結果,它還是被排在第二順位? 利用AC教材提供的youtube演講連結一窺究竟: 演講提供了更多JS的細節概念,身為JS新手的我還在消化,但若針對教案提出的問題來回答,加上利用google大神查到MDN的
Thumbnail
在一開始學習前端開發的時候,一直遇到講師在課程內容中提到 ES5、ES6 等關鍵字,當初的我,單純認為 ES5、ES6 是講述 JavaScript 的版本,所以在使用上就沒有想太多,反正就是 JavaScript 1.0 、2.0 的感覺吧?
Thumbnail
輸入畫面 為什麼要做驗證? 因為作為設計者,永遠不該預設使用者會乖乖照設計者的意思輸入。
Thumbnail
JavaScript在ES6新增了let, const等宣告變數的方式,其中let, const是block scope的,而var則是function scope。
Thumbnail
接下來第二部分我們持續討論美國總統大選如何佈局, 以及選前一週到年底的操作策略建議 分析兩位候選人政策利多/ 利空的板塊和股票
Thumbnail
🤔為什麼團長的能力是死亡筆記本? 🤔為什麼像是死亡筆記本呢? 🤨作者巧思-讓妮翁死亡合理的幾個伏筆
Thumbnail
專案產生大量又瑣碎的作業做處理,眼下要從iReport的設定檔(jrxml)擷取每一項套印參數出來,提供給別人做Excel公式的資料表進行作業。
Thumbnail
JavaScript 的型別可以分為兩類,分別是原始型別與物件型別,這邊主要談的是 ES6 的寫法。值得注意的是,JavaScript 變數本身不帶有型別,值才有。
Thumbnail
在搞清楚事件委託前必須先了解什麼是事件傳遞機制(Event Propagation),也就是捕獲(capture)跟冒泡(bubble),聽起來好像很難但是我昨天看完彭彭的直播課程(17:00開始)後就懂了!我寫成文章幫助記憶,也希望能幫助到大家,然後希望我面試會被考到。
Thumbnail
執行以上程式碼,然後看到了這個結果: 為什麼「延遲0秒」的函式寫在上方,但在console印出的結果,它還是被排在第二順位? 利用AC教材提供的youtube演講連結一窺究竟: 演講提供了更多JS的細節概念,身為JS新手的我還在消化,但若針對教案提出的問題來回答,加上利用google大神查到MDN的
Thumbnail
在一開始學習前端開發的時候,一直遇到講師在課程內容中提到 ES5、ES6 等關鍵字,當初的我,單純認為 ES5、ES6 是講述 JavaScript 的版本,所以在使用上就沒有想太多,反正就是 JavaScript 1.0 、2.0 的感覺吧?
Thumbnail
輸入畫面 為什麼要做驗證? 因為作為設計者,永遠不該預設使用者會乖乖照設計者的意思輸入。
Thumbnail
JavaScript在ES6新增了let, const等宣告變數的方式,其中let, const是block scope的,而var則是function scope。