JavaScript 數據類型（檢測、轉換）

js數據類型（學習筆記） ----九層之臺，起於累土；

1、JS中的數據類型

基本數據類型（直接操做的值）

基本數據類型是保存在棧內存中，直接按值存放的，因此能夠直接訪問

• Number  如：1 2 3 NaN (not a number)

• String    如：'' "" 'hello zhufeng'

• Boolean    如：true false

• Null   如：空（空指針）

• Undefined  如：未定義（默認值）

• Symbol（ES6新增）

引用數據類型（操做的是引用地址）

引用數據類型是保存在堆內存（瀏覽器分配的一塊內存空間）中的對象，對象賦值後的變量實質存儲的是這塊堆內存的引用地址（指針）

• 對象數據類型 (Object)

普通對象 object {}
        數組 Array  []
        正則 RegExp /\d+/
        日期 Date
        Math
        ...

• 函數數據類型（Function）

function

棧內存/堆內存

瀏覽器中JS引擎存在棧內存（Stack）和堆內存（Heap）的概念（這裏只是一個大概的概念，後面再詳細解讀)

下圖中的紅色 a、b、c 是定義的引用數據類型變量 指向堆內存中某塊空間裏面 存有 1 2 3 4

2、數據類型檢測

typeof

typeof 檢測一個值數據類型  返回相應數據類型 而且返回值是字符串類型

用法：typeof value / typeof(value)

typeof 2 // "number"

// 也能夠做爲函數用
typeof(2) // "number"
複製代碼

typeof的侷限性 只能檢測基本數據類型 對於對象數據類型不能細分 如: 是正則 仍是數組

typeof 1 // "number"
typeof NaN // "number"
typeof '' // "string"
typeof "24" // "string"
typeof true // "boolean"
typeof false // "boolean"
typeof undefined // "undefined"
// null 特殊狀況 至關於空指針對象
typeof null // "object"

// 函數數據類型
function fn () {
}
console.log(typeof fn) // "function"

var fe = function() {
}
console.log(typeof fe) // "function"


// 普通對象
var arr = [1]
console.log(typeof arr) // "object"

var object = {title: 'hello'}
console.log(typeof object) // "object"

typeof(/\d/) // "object"
複製代碼

instanceOf
判斷一個實例對象是否屬於某種類型 返回值Boolean類型（它的原理js面向對象-原型）

// 若是是基本數據類型 須要經過構造函數方式建立的值（包裝對象） 才能檢測出來
  console.log(1 instanceof Number) // false
  var num = new Number(1)
  console.log(num instanceof Number) // true

  console.log('' instanceof String) // false
  var str = new String('hello')
  console.log(str instanceof String) // true
複製代碼

constructor 根據對象引用的構造函數來判斷

var obj = {}
console.log(obj.constructor === Object) // true
var arr = []
console.log(arr.constructor === Array) // true
var date = new Date()
console.log(date.constructor === Date) // true
var reg = /\d+/
console.log(reg.constructor === RegExp) // true
複製代碼

Object.prototype.toString.call(value) 終極解決方案
toString() 是 Object 的原型方法，調用該方法 返回值格式 "[object 類名]]"

// toString() 是 Object 的原型方法，調用該方法 返回值格式 [object 類名]]
console.log(Object.prototype.toString.call(1)) // "[object Number]"
console.log(Object.prototype.toString.call('a')) // "[object String]"
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(null)) // "[object Null]"
console.log(Object.prototype.toString.call(undefined)) // "[object Undefined]"
console.log(Object.prototype.toString.call(true)) // "[object Boolean]"
複製代碼

3、數據類型轉換

將字符串轉換爲數字

parseInt(string, radix)
從左到右將字符串中的整數提取出來，如遇到的不是數字或小數點 中止查找 返回找到後整數 或NaN，也可將其餘進制轉換爲十進制整數(需指定第二個參數)
參數:
string 要解析的字符串
radix  可選。默認爲0(十進制)  表示要解析的數字基數。該值介於(0~36)之間 十進制轉換

// 從左到右將
console.log(parseInt('10')) // 10
console.log(parseInt('20.5')) // 20
console.log(parseInt('20a')) // 20
// 若是字符串的第一個字符不能被轉換爲數字 會返回 NaN。
console.log(parseInt('a20a')) // NaN
parseInt([]) // NaN
parseInt([1]) // 1
parseInt(null) // NaN

// 進制轉換
// 十六進制轉換爲十進制
parseInt('0xff', 16) // 255 15 + 16 * 15
// 二進制轉換爲十進制
parseInt(110, 2) // 6 2 + 4
// 八進制轉換爲十進制
parseInt(70, 8) // 56 8 * 0 + 8 * 7
複製代碼

在線進制轉換工具

parseFloat()
函數可解析一個字符串 支持小數，並返回一個浮點數(小數)。

console.log(parseFloat('10')) // 10
console.log(parseFloat('20.5')) // 20.5
console.log(parseFloat('20.3a')) // 20.3
// 若是字符串的第一個字符不能被轉換爲數字 會返回 NaN。
console.log(parseFloat('a20a')) // NaN
parseFloat([]) // NaN
parseFloat([1]) // 1
parseFloat(null) // NaN
複製代碼

Number
將其餘類型轉換爲數字

// 字符中只要有一個不是有效數字 就返回NaN
console.log(Number('12.5')) // 12.5
console.log(Number('20k')) // NaN
Number(null) // 0
Number(undefined) // NaN

// 將數組轉換爲數字
Number([]) // 0
Number([1]) // 1
Number([1, 2]) // NaN

// 將對象轉換爲數字
var obj = {}
console.log(Number(obj)) // NaN
obj.valueOf = function() {
  return 2
}
console.log(Number(obj)) // 2

+[] // 0
+[1] // 1
+'1' // 1
+'1.5' // 1.5

// Date對象 轉換爲毫秒數
console.log(Number(new Date())) // 1543587621655
複製代碼

將其餘類型轉換爲Boolean值

// !! 至關於Boolean()
    console.log(!!1) // true
    console.log(Boolean(1)) // true
    console.log(!![]) // true
    console.log(Boolean([])) // true
    console.log(!!'1') // true
    console.log(Boolean('1')) // true
    console.log(!!'') // false
    console.log(Boolean('')) // false
    !!null // false
    Boolean(null) // false
    !!{} // true
複製代碼

除了 null undefined NaN '' 0 轉換爲Boolean是false, 其他都是true

將布爾值轉換爲字符串

String(false)        // 返回 "false"
String(true)         // 返回 "true"
true + "" // "true"
複製代碼

將數字轉換爲字符串

(123).toString() // "123"
100 + "" // "100"
複製代碼

將數組轉換爲字符串

[1, 2] + "" // "1,2"
[[[1, 2]]] + "" // "1,2"
[[[1, 2]]].toString() // "1,2"
[1, 2].join() // "1,2"
[1, 2].join("") // "12"
[1, 2, 3, 4, 5].join('+') // "1+2+3+4+5"
複製代碼

自動轉換類型

5 + null    // 返回 5 null 轉換爲 0
"5" + null  // 返回"5null" null 轉換爲 "null"
"5" + 1     // 返回 "51" 1 轉換爲 "1" 
"5" - 1     // 返回 4 "5" 轉換爲 5
複製代碼

----------------------------------------------------------------------------------------------------------------
參考文章&&強烈推薦：布羅利