JavaScript - 談談資料型別

傑米

更新於 2023/06/30發佈於 2023/06/29閱讀時間約 8 分鐘

JavaScript 的型別可以分為兩類，分別是原始型別與物件型別，這邊主要談的是 ES6 的寫法。值得注意的是，JavaScript 變數本身不帶有型別，值才有。

原始型別

原始型別(Primitive type)有以下七種：

String
Number
Boolean
Null
Undefined
Symbol：ES6/2015 之後出現
BigInt：ES11/2020 之後出現，適用於當數值非常非常大，單純使用 Number 難以負荷時就會使用該型別。

下面就來談談各個型別的特色，但目前 Symbol 和 BigInt 我還沒有使用過，這篇就先不提這兩種，留待以後補充。

字串 String

須使用雙引號 "" 或單引號 '' 包裹起來，且不能混合使用。

console.log("It's a dog."); //"It'is a dog."
console.log('It's a dog.'); //error //英文句子中重複出現單引號，導致 JS 認為語法錯誤
console.log("It is a dog.'); //error //混合使用單引號和雙引號，導致 JS 認為語法錯誤

，如果沒有使用單引號和雙引號，JS 會認為這是變數，認為前面沒有宣告過該變數，就會報錯。

console.log("奶油義大利麵"); //"奶油義大利麵"
console.log(奶油義大利麵); //error //JS認為是在呼叫變數，會報錯

數字 Number

NaN(not an number) 也是屬於 Number，會出現在 JS 自動轉型後的結果無法轉換為數字。

布林 Boolean

只有 true 和 false 兩種值，它不是字串，並不需要用引號包裹，經常用於流程判斷。

Undefind 與 Null 的差異

兩個都表示空值的意思，但使用時機並不相同，像是 Undefined 會出現在已宣告、尚未賦值的變數上，通常並不會手動賦予到變數上。

let mother;
console.log(typeof mother); //Undefined

而 Null 則是會手動賦予給變數，目前所知的使用情境像是：當變數儲存大量資料，需要清空釋放記憶體時，就會手動賦予 Null 到變數上。

物件型別

原始型別以外的都是物件型別(Object Type)，包括 Function、Array 都是屬於物件型別，所以並沒有 Function 型別，或是 Array 型別這種東西，包括以下幾個種類：

物件 Object
陣列 Array
函式 Function

物件 Object

使用 { } 包裹的資料，並包含一對 key 和 value，可以儲存多組

let family = {
　　father: "Mark", //father 是 key，"mark" 是 value
　　mother: "Alice",
　　dog: "Momo"
}

陣列 Array

使用 [ ] 包裹的資料，可以儲存多個資料

let drinks = ["可口可樂", "可爾必思", "珍珠奶茶"]

陣列和物件也可以混合使用

let store = {
　　boss: "Tina",
　　drinks: ["卡布奇諾", "黑咖啡", "珍珠奶茶"],
　　customer: 20
}
let stores = [
　　{
　　　　storeName: "朵朵咖啡廳",
　　　　boss: "Tina",
　　　　drinks: ["卡布奇諾", "黑咖啡", "珍珠奶茶"],
　　　　customer: 20　　
　　},
　　{
　　　　storeName: "桑心酒吧",
　　　　boss: "Gray",
　　　　drinks: ["啤酒", "長島青茶", "威士忌"],
　　　　customer: 20
　　},
]

查詢型別

使用 typeof 方法

這邊先使用在原始型別的查詢上：

console.log(typeof "Alice"); //String
console.log(typeof 123); //Number
console.log(typeof true); //Boolean
console.log(typeof undefined); //Undefined
console.log(typeof null); //Object // why?

會發現 null 的結果居然是物件！

這是一個著名的 JS 錯誤，原本有被提出來要修正，但因為會影響到許多網站的正常運作，所以就將錯就錯、沒有修正了，這答案是不是很出乎意料XD

再來是物件型別的查詢：

console.log(typeof []); //Object
console.log(typeof {}); //Object
console.log(typeof function(){}); //function //why?

這邊會發現兩個問題：

[ ] 和 { } 出來的結果都是 Object，要怎麼判斷它是陣列還是物件呢？
為什麼會出現 Function 型別？不屬於原始型別的，應該都會是物件型別？

所以可以發現， typeof 查詢型別的結果有時候沒那麼精準，需要搭配其他方式來查詢型別。

使用其他方法查詢型別

方法一：Array.isArray()

以此方法來判斷型別是否為陣列，是陣列的話會回傳 true，不是就回傳 false。就可以解決使用 typeof 無法看出該值是陣列或物件的問題。

console.log(Array.isArray([])); //true
console.log(Array.isArray({})); //false

方法二：Object.prototype.toString.call()

這方法只需要看最後結果就能夠正確知道型別囉！

console.log(Object.prototype.toString.call("Mina")); //[object String]
console.log(Object.prototype.toString.call(123)); //[object Number]
console.log(Object.prototype.toString.call(undefined)); //[object Undefined]
console.log(Object.prototype.toString.call(null)); //[object Null]
console.log(Object.prototype.toString.call([])); //[object Array]
console.log(Object.prototype.toString.call({})); //[object Object]
console.log(Object.prototype.toString.call(function(){})); //[object Function]

有關 JavaScript 型別的分享就到這裡，若有錯誤歡迎指正，感謝看完這篇的大家。

為什麼會看到廣告

#JavaScript

傑米的沙龍文科腦程式之旅JavaScript

傑米的沙龍

7會員

30內容數

正在一點一滴學習程式，相信知識量總有一天會匯聚成大海，目前專門研究前端中。

留言0

查看全部

發表第一個留言支持創作者！

傑米的沙龍的其他內容