JavaScript資料型別

JavaScript基本資料型別/原始資料型別/值型別（六種）

• Null
• Undefined
• String
• Number
• Boolean
• Symbol

注：Symbol 是 ES6 引入了一種新的原始資料型別，表示獨一無二的值。

注：在es10中加入了原始資料型別BigInt，現已被最新Chrome支援

console.log(BigInt) // ƒ BigInt() { [native code] }
console.log(typeof 1n) // bigint
console.log(1n instanceof BigInt) //false
console.log(Object.prototype.toString.call(1n)) //[object BigInt]
console.log(jQuery.type(1n)) // bigint
 

BigInt MDN

引用資料型別/物件資料型別（一種）

• Object
• Array
• Function
• Date
• RegExp

注：除了Array、Function、Date、RegExp屬於特殊的物件資料型別。

包裝型別（三種）

• Number
• String
• Boolean

const Booln = new Boolean(true)
console.log(Booln) // Boolean {true}
console.log(Booln === true) // false
console.log(typeof Booln) // object
console.log(Booln instanceof Object) // true
console.log(Object.prototype.toString.call(Booln)) // [object Boolean]
console.log(Object.prototype.toString(Booln)) // [object Object]

const str = new String('123')
console.log(str) // String {"123"}
console.log(str === '123') // false
console.log(typeof str) // object
console.log(str instanceof Object) // true
console.log(Object.prototype.toString.call(str)) // [object String]
console.log(Object.prototype.toString(str)) // [object Object]

const num = new Number(123)
console.log(num) // String {"123"}
console.log(num === 123) // false
console.log(typeof num) // object
console.log(num instanceof Object) // true
console.log(Object.prototype.toString.call(num)) // [object Number]
console.log(Object.prototype.toString(num)) // [object Object]
 

1、引用型別和基本包裝型別的區別就是物件的生存期;
2、自動建立的基本包裝型別的物件，只存在於一行程式碼的執行瞬間，然後立即被銷燬；
3、意味著我們不能在執行時為基本型別新增屬性和方法。

基本型別的字面量寫法，很明顯不能為基本型別新增屬性和方法

const s1 = 'name.Lee'
s1.name = 'lee'
s1.age = function () {
  return 100
}
console.log(s1.substring(5)) // =>Lee
console.log(typeof s1) // string
console.log(s1.name) // undefined
console.lgo(s1.age()) // Uncaught TypeError: s1.age is not a function
 

new運算子寫法,既能新增方法屬性，還能使用它的內建方法substring

const s2 = new String('name.Lee')
s2.name = 'lee'
s2.age = function () {
  return 100
}
console.log(s2.substring(5)) // =>Lee
console.log(typeof s2) // object
console.log(s2.name) // lee
console.log(s2.age()) // 100

null和undefined的區別

undefined與null的區別---阮一峰

筆記：

1、在!運算子處理後，自動轉成true

console.log(!null) // true
console.log(!undefined) // true
console.log(!undefined === !null) // true

2、相等，但是不全等

console.log(null == undefined) // true
console.log(null === undefined) // false

3、最初設計：null是一個表示"無"的物件，轉數值為0;undefined是一個表示"無"的原始值，轉數值為NaN。

console.log(Number(undefined)) //NaN
console.log(Number(5 + undefined)) //NaN

console.log(Number(null)) //0
console.log(Number(5 + null)) //5

4、兩者typeof區別：

console.log(typeof undefined) //undefined
console.log(typeof null) //object

5、現在的用法：
null:表示"沒有物件"，即此處不應該有值。(表示被賦值過的物件，刻意把一個物件賦值為null，故意表示其為空，不應有值。)
（1）作為函式的引數，表示該函式的引數不是物件;
（2）作為物件原型鏈的終點。
undefined:表示"缺少值"，即此處應該有一個值，但是沒有定義。
（1）變數被聲明瞭，但沒有賦值時，就等於undefined;
（2) 呼叫函式時，應該提供的引數沒有提供，該引數等於undefined;
（3）物件沒有賦值的屬性，該屬性的值為undefined;
（4）函式沒有返回值時，預設返回undefined。

判斷JavaScript資料型別的方式(四種)

• typeof
• instanceof
• toString
• jquery

typeof

適用場景：

console.log(typeof undefined) //undefined
console.log(typeof 123) //number
console.log(typeof '123') //string
console.log(typeof true) //boolean
console.log(typeof Symbol()) //symbol
console.log(typeof function () {}) //function

不適用場景：

console.log(typeof new Date()) //object
console.log(typeof /^\d*$/) //object
console.log(typeof {}) //object
console.log(typeof []) //object
console.log(typeof null) //object

面試題：

let foo = function bar() {
  return 123
}
console.log(typeof bar) // undefined
console.log(typeof foo)
// console.log(typeof bar()) // Uncaught ReferenceError: bar is not defined
console.log(typeof foo()) // number

instanceof

注：不適合做型別的判斷。

console.log([] instanceof Array) //true
console.log([] instanceof Object) //true

console.log(new Date() instanceof Date) //true
console.log(new Date() instanceof Object) //true

console.log(new RegExp() instanceof RegExp) //true
console.log(new RegExp() instanceof Object) //true

console.log(123 instanceof Number) //false
console.log(123 instanceof Object) //false
console.log('123' instanceof String) //false
console.log(false instanceof Boolean) //false

toString、Object.prototype.toString.call()

toString：每一個引用型別都有toString方法，預設情況下。toString()方法被每個object物件繼承。如果此方法在自定義中未被覆蓋。toString()返回'[object type]'，type是物件的型別。

注：Object.prototype.toString.call() 是最常用判斷型別的方法。

各個型別判斷

console.log(Object.prototype.toString.call('123')) //[object String]
console.log(Object.prototype.toString.call(123)) //[object Number]
console.log(Object.prototype.toString.call(null)) //[object Null]
console.log(Object.prototype.toString.call(undefined)) //[object Undefined]
console.log(Object.prototype.toString.call(true)) //[object Boolean]
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]
console.log(Object.prototype.toString.call(Symbol())) //[object Symbol]
console.log(Object.prototype.toString.call(-1n)) //[object BigInt]

特殊的

console.log(Object.prototype.toString.call(new String())) //[object String]
console.log(Object.prototype.toString.call(new Object())) //[object Object]
console.log(Object.prototype.toString.call(new Date())) //[object Date]
console.log(Object.prototype.toString.call(new RegExp())) //[object RegExp]
console.log(Object.prototype.toString.call(new Array())) //[object Array]
console.log(Object.prototype.toString.call(new Error())) //[object Error]
console.log(Object.prototype.toString.call(Math)) //[object Math]
console.log(Object.prototype.toString.call(JSON)) //[object JSON]
console.log(Object.prototype.toString.call(window)) //[object Window]

JavaScript資料型別