JS基礎總結（1）——數據類型

前言

農曆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 並無什麼關係。

3.基本數據類型不能夠添加屬性和方法

let user = 'zhangsan'
user.age = 18
user.method = function() {
  console.log('12345')
}
console.log(user.age) // 輸出：undefined
console.log(user.method) // 輸出：undefined

4.基本數據類型的賦值是簡單的賦值(不影響原變量的值)

let a = 18
let b = a
a++
console.log(a) // 輸出：19
console.log(b) // 輸出：18

5.基本數據類型的比較是值的比較

var a = '{}'
var b = '{}'
console.log(a === b) // 輸出：true

6.基本類型的值在內存中佔據固定大小的空間，被保存在棧內存中

引用數據類型

引用類型是存放在堆內存中的對象，變量實際上是保存的在棧內存中的一個指針（保存的是堆內存中的引用地址），這個指針指向堆內存。

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

console.log(obj1.name) // 我有名字了

數據類型轉換

轉爲字符串

一、toString()方法：注意，不能夠轉 null 和 underfined 二、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

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

var a = true
var str = a + ''
console.log('str')

轉爲數值類型

一、Number()：能夠把任意值轉換成數值，若是要轉換的字符串中有一個不是數值的字符，返回 NaN

二、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

三、隱式轉換

var str = '123'
var num = str - 1
console.log(num) // 122

四、isNaN()函數用於判斷是不是一個非數字類型，若是傳入的參數是一個非數字類型，那麼返回 true，不然返回 false

轉換爲 Boolean()

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

判斷 JS 數據類型

一、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'

二、instanceof

對於引用類型咱們使用 instanceof 來進行類型判斷。

var obj = {}
obj instanceof Object //true
var arr = []
arr instanceof Array //true

三、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

四、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。

相關文章

---

總結前端性能優化的方法
幾種常見的JS遞歸算法
搭建一個vue-cli的移動端H5開發模板
封裝一個toast和dialog組件併發布到npm
從零開始構建一個webpack項目
總結幾個webpack打包優化的方法
一文讀盡前端路由、後端路由、單頁面應用、多頁面應用
關於幾個移動端軟鍵盤的坑及其解決方案
淺談JavaScript的防抖與節流