JavaScript - 談談資料型別

原始型別

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

字串 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
• 陣列 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?

這邊會發現兩個問題：

1. [ ] 和 { } 出來的結果都是 Object，要怎麼判斷它是陣列還是物件呢？
2. 為什麼會出現 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 型別的分享就到這裡，若有錯誤歡迎指正，感謝看完這篇的大家。