JS基礎總結（1）——資料型別

lzg9527發表於2020-01-19
JS資料型別

前言

農曆2019即將過去，趁著年前幾天上班事情少，整理了一下javascript的基礎知識，在此給大家做下分享，喜歡的大佬們可以給個小贊。本文在github也做了收錄。

本人github: github.com/Michael-lzg

JavaScript 是弱型別語言，而且 JavaScript 宣告變數的時候並沒有預先確定的型別，變數的型別就是其值的型別，也就是說變數當前的型別由其值所決定,誇張點說上一秒種的 String，下一秒可能就是個 Number 型別了，這個過程可能就進行了某些操作發生了強制型別轉換。

js 資料分為兩種型別：原始資料型別和引用資料型別。

  • 基本資料型別有：string、number、boolean、undefined、null 和 symbol（符號）
  • 引用資料型別有：Object、Function、Date、RegExp 等。

基本資料型別的特點

  1. 基本資料型別是按值訪問的，就是說我們可以操作儲存在變數中的實際的值；
  2. 基本資料型別的值是不可變的，任何方法都無法改變一個基本資料型別的值
  let name = 'zhangsan'
  name.substr()
  console.log(name) // 輸出：zhangsan
  let age = 'firstblood'
  age.toUpperCase()
  console.log(age) // 輸出：firstblood
複製程式碼

substr()和 toUpperCase()方法後返回的是一個新的字串，跟原來定義的變數 name 並沒有什麼關係。

  1. 基本資料型別不可以新增屬性和方法
let user = 'zhangsan'
user.age = 18
user.method = function() {
  console.log('12345')
}
console.log(user.age) // 輸出：undefined
console.log(user.method) // 輸出：undefined
複製程式碼
  1. 基本資料型別的賦值是簡單的賦值(不影響原變數的值)
let a = 18
let b = a
a++
console.log(a) // 輸出：19
console.log(b) // 輸出：18
複製程式碼
  1. 基本資料型別的比較是值的比較
var a = '{}'
var b = '{}'
console.log(a === b) // 輸出：true
複製程式碼
  1. 基本型別的值在記憶體中佔據固定大小的空間，被儲存在棧記憶體中

引用資料型別

引用型別是存放在堆記憶體中的物件，變數其實是儲存的在棧記憶體中的一個指標（儲存的是堆記憶體中的引用地址），這個指標指向堆記憶體。

var obj1 = new Object()
var obj2 = obj1
obj2.name = '我有名字了'

console.log(obj1.name) // 我有名字了
複製程式碼

資料型別轉換

轉為字串

1、toString()方法：注意，不可以轉 null 和 underfined 2、String()方法：都能轉

let ab = 'zhangsan'
let bc = null
let cd = undefined
console.log(ab.toString()) // 輸出：zhangsan
console.log(bc.toString()) // error 報錯
console.log(cd.toString()) // error 報錯
console.log(String(ab)) // 輸出：zhangsan
console.log(String(bc)) // 輸出：null
console.log(String(cd)) // 輸出：undefined
複製程式碼

3、隱式轉換：num + ""，當 + 兩邊一個操作符是字串型別，一個操作符是其它型別的時候，會先把其它型別轉換成字串再進行字串拼接，返回字串

var a = true
var str = a + ''
console.log('str')
複製程式碼

轉為數值型別

1、Number()：可以把任意值轉換成數值，如果要轉換的字串中有一個不是數值的字元，返回 NaN

2、parseInt()/parseFloat():parseFloat()把字串轉換成浮點數,parseFloat()和 parseInt 非常相似，不同之處在與 parseFloat 會解析第一個. 遇到第二個.或者非數字結束如果解析的內容裡只有整數，解析成整數。

var a = '12.3px'
console.log(parseInt(a)) // 12
console.log(parseFloat(a)) // 12.3
let b = 'abc2.3'
console.log(parseInt(b)) //NAN
console.log(parseFloat(b)) //NAN
複製程式碼

3、隱式轉換

var str = '123'
var num = str - 1
console.log(num) // 122
複製程式碼

4、isNaN()函式用於判斷是否是一個非數字型別，如果傳入的引數是一個非數字型別，那麼返回 true，否則返回 false

轉換為 Boolean()

除了 0 ''(空字串) null undefined NaN 會轉換成 false 其它都會轉換成 true

判斷 JS 資料型別

1、typeof()函式

對於原始資料型別，我們可以使用 typeof()函式來判斷他的資料型別。但他是沒法用來區分引用資料型別的，因為所有的引用資料型別都會返回"object"。

typeof 'seymoe' // 'string'
typeof true // 'boolean'
typeof 10 // 'number'
typeof Symbol() // 'symbol'
typeof null // 'object' 無法判定是否為 null
typeof undefined // 'undefined'

typeof {} // 'object'
typeof [] // 'object'
typeof (() => {}) // 'function'
複製程式碼

2、instanceof

對於引用型別我們使用 instanceof 來進行型別判斷。

var obj = {}
obj instanceof Object //true
var arr = []
arr instanceof Array //true
複製程式碼

3、Object.prototype.toString.call()

在 javascript 高階程式設計中提供了另一種方法，可以通用的來判斷原始資料型別和引用資料型別

var arr = []
Object.prototype.toString.call(arr) == '[object Array]' //true

var func = function() {}
Object.prototype.toString.call(func) == '[object Function]' //true
複製程式碼

4、constructor

constructor 作用和 instanceof 非常相似。但 constructor 檢測 Object 與 instanceof 不一樣，還可以處理基本資料型別的檢測。

var aa = [1, 2]
console.log(aa.constructor === Array) //true
console.log(aa.constructor === RegExp) //false
console.log((1).constructor === Number) //true
var reg = /^$/
console.log(reg.constructor === RegExp) //true
console.log(reg.constructor === Object) //false
複製程式碼

javascript 的內建方法

  • toString()方法返回一個表示該物件的字串。
  • valueOf()方法返回指定物件的原始值。
var str = new String('123')
console.log(str.valueOf()) //123

var num = new Number(123)
console.log(num.valueOf()) //123

var date = new Date()
console.log(date.valueOf()) //1526990889729

var bool = new Boolean('123')
console.log(bool.valueOf()) //true

var obj = new Object({
  valueOf: () => {
    return 1
  }
})
console.log(obj.valueOf()) //1
複製程式碼

valueOf() 和 toString()在特定的場合下會自行呼叫。

包裝物件（wrapper object）

先來看一個例子

let name = 'marko'
console.log(typeof name) // "string"
console.log(name.toUpperCase()) // "MARKO"
複製程式碼

name 型別是 string，屬於基本型別，所以它沒有屬性和方法，但是在這個例子中，我們呼叫了一個 toUpperCase()方法，它不會丟擲錯誤，還返回了物件的變數值。 原因是基本型別的值被臨時轉換或強制轉換為物件，因此 name 變數的行為類似於物件。name.toUpperCase()在幕後看起來如下：

console.log(new String(name).toUpperCase()) // "MARKO"
複製程式碼

除 null 和 undefined 之外的每個基本型別都有自己包裝物件。也就是：String，Number，Boolean，Symbol 和 BigInt。

相關文章

相關文章