型別是什麼?

# 型別是什麼? ###### tags: `javascript` <style> .h2 { background: linear-gradient(135deg,#fff,#537479) ; color: #537479; display:block; padding: 6px 5px; border-radius: 4px; } .h3 { background: linear-gradient(180deg,#fff 50%,#c9d5d4) ; color: #537479; display:block; padding: 6px 5px; border-bottom: 3px solid #537479; } .h4 { color: #537479; font-weight:bold; font-size:1.1em; } </style> 在javascript裡面，有許多種「資料型別(data type)」，但主要分兩大類，一種是==原始型別primitive type==，另一種是==物件Object==Primitive type以外的，例如array, function, map …etc。 ![](https://i.imgur.com/fwmaebr.png) ![](https://i.imgur.com/W9R8BMc.png) :::info 除了原始型別 (Primitive Type)外，還有物件型別 :bulb: javascript只有兩種型別:純值、物件 :bulb: 原始型別沒有屬性與方法，物件型別則可任意存取屬性與方法。 ::: :::danger null是屬於物件型別 ```javascript typeof null //Object ``` ::: ### 原始型別 (Primitive Type) 在JS裡，以下這六個原始型別(Primitive Type)皆屬於傳值。 - Boolean 布林值 - String 字串 - Number 數字 - Null 空值 - Undefined 未定義 - Symbol 符號 (ES6 新型別) `string`, `number`, `boolean` 合稱為「原始類型 (primitive type) 的值」；`null`, `undefined` 一般則稱為「特殊值」。至於 object 則稱為合成類型（complex type) 的值，object 是複雜的數據類型，又可分為3個子類型：`object`,` array`, `function`。 ### ➤ 字串`String` 例: ```javascript let a = 'hello'; let b = "你好嗎" ``` 字串外面必須包這單引號或雙引號 ### ➤不是數值`NaN` 將無法相加減乘除的類別做加減乘除，得出來的型別 ```javascript let total = myName * age; console.log(total)//NaN ``` :::danger :bulb:NaN是屬於number(數字型別) ::: ### ➤ 布林`true` `false` ```javascript let isWakeUp = false; console.log(isWakeUp); ``` 判斷對錯 ```javascript console.log(2>3); //結果為false ``` ### ➤ undefined有定義尚未被賦予值 :::info ==JavaScript 變數的預設值為 undefined== ::: :::danger undefined 不能使用在 JSON 資料格式中,只能使用null定義空值 ::: `undefined` 代表的是「已經宣告卻沒有賦予任何的值」 ```javascript let a; console.log(a);//undefined，尚未被賦予值 ``` ### ➤ not defined從未被定義 取不到值為is not defined，not defined是從未被定義(會報錯)，undefined是有定義沒有賦予值 :::info ```javascript console.log(typeof e);//查詢not defined的變數的型別，會是undefind ``` not defined 型別為undefined，這是typeof對not defined的一種保護措施 ::: ### ➤ `null` - `null`代表的是「「沒有值」 - 被告知為空值，可以清除暫存記憶體資料，意思是「沒有值」的值。例: ```javascript let c =1234; c= null; //c原本有植，可以下null指令清空它的資料 ``` :::info ==JavaScript 不會將預設值設定為 null，這是讓開發者用來定義「沒有值」的值(人為賦予的)== null型別為object，javascript一直以來的bug ::: :arrow_right:[undefined 與 null 的差異](https://hackmd.io/Zl5Y-jXmTUWfnuC-py35gg) :::danger | | null | undefined | NaN | not defined | | ---- | ---- | --------- | --- | --- | | 型別| object | undefined |number|undefined| ::: ### ➤ `Infinity` 任何數除於0都會得到Infinity Infinity有正負值 ```javascript 100/0 //Infinity -100/0 //-Infinity !!(100/0) //true， Infinity是truthy值 ``` ### 查詢型別`typeof` ```javascript console.log(typeof 變數名稱); ``` :::info ==`typeof`會回傳字串== `typeof`屬於`undefined`型別 ::: ### 原始型別的背後原理 JavaScript 為了節省系統資源，原始型別在使用時會自動裝箱(boxing)形成原始型別包裹物件，使用完畢後會自動拆箱(unboxing)還原回原始型別。此外原始型別包裹物件則可用 valueOf 方法取得對應的原始型別。 ```javascript var str=new String("word"); var txt=str.substring(3); str=str.valueOf(); ``` :::info valueOf 方法最主要的目的，就是用來回傳特定物件相對應原始型別的值 ::: :::danger ==在數學運算時會優先呼叫.valueOf 方法，若回傳非原始型別則會改呼叫.toString 方法== ```javascript var n = new String('str') console.log(n+3) //"str3"，這邊n會先執行valueOf n.valueOf = function(){ return{} //這邊刻意讓valueOf回傳為一個物件 } console.log(n+3) //"str3",這邊就會改用toString n.toString = function(){ return 5 } console.log(n+3) //這邊n+3就會變成8了 ``` ::: ### mutable(可變)與immutable objects（不可變）的不同 immutable objects不可變：原始型別（記憶體是不可改變） - 物件可以使用Object.assign創建一個新物件實現immutable ```javascript var obj = {name:'abc'} var obj2 = Object.assign({},obj,{age:30}) console.log(obj2 ) //{name: 'abc', age: 30} ``` - 陣列可以使用slice實現immutable ```javascript var ary = [1,2,3] var ary2 = ary.slice() ary2.push(4) ``` ### BigInt型別(超大整數型別)、Symbol型別 :arrow_right: [BigInt型別(超大整數型別)](https://hackmd.io/@grayshine/rkQQUixws) Symbol型別是ES6新增的型別 ==Symbol無法被列舉（for in、Object.key）出來== ```javascript var isRead = Symbol() var obj = { name:'John', age:30 } obj[isRead] = true Object.keys(obj) //['name', 'age'] ```

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.