最熟悉的陌生人：JavaScript數據類型

最近面試了三個開發，他們都沒有說清楚JS的基本類型有哪些。並且每每錯誤的說了一些C語言的數據類型，例如int, float, double之類的數據類型。

不管什麼語言，熟練掌握數據類型都是這門語言最根本的知識點

JS數據類型分爲兩類，一類是基本類型，他們有

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

js的基本類型就這麼幾個，除此以外，其餘的類型都是對象。

Number類型

在JS沒有整型，float，或者double類型的數值，全部數值統一叫作Number類型。

JS使用IEEE754格式表示整數和浮點數，通常來講整數佔用了32位，而浮點數數佔用64位。由於浮點數佔用的內存空間是整數的兩倍，因此js會適當的把浮點數轉化爲整數儲存。

4.0 === 4 // true

數值類型都是有大小範圍的

Number.MAX_VALUE  // 1.7976931348623157e+308
Number.MIN_VALUE // 5e-324
Number.MAX_SAFE_INTEGER // 9007199254740991
Number.MIN_SAFE_INTEGER // -9007199254740991

浮點數通常都是計算結果不許確的，這不是JS的問題，全部語言中都有這個問題。

計算0.1 + 0.2 === 0.3這個結果永遠是false。

要比較浮點數是否相等，能夠採用Number.EPSILON, Number.EPSILON是一個很是小的數值，若是兩個浮點數相減少於Number.EPSILON， 則能夠爲認爲是相等。

Math.abs(0.1 + 0.2 - 0.3) < Number.EPSILON // true

Number類型中有三個比較特殊的兄弟

1. Infinity 當數值超過Number類型的最大值，他就會變成正無窮
2. -Infinity 當數值類型小於Number類型的最小值，就會變成負無窮
3. NaN NaN的意思是它不是一個數值，例如某個字符串除以0，通常語言都會報錯，可是js不會，而是該變量的值會變成NaN。

// Infinity與NaN的區別
'90'/4 // 22.5
'90n'/4 // NaN
'90'/0 // Infinity
'90n'/0 // NaN
'90N'/'a' // NaN

數值類型一旦變成這三個兄弟，就沒法參與後續的數值運算。

數值計算

數值計算操做符有不少，常見的有加減乘除，自增，自減。

變量在參與數值計算時，變量值會被轉換成基本包裝類型Number參與表達式求值。若是某個變量值轉換的結果是NaN, 那麼整個表達式的結果就爲NaN

Number('90n') // NaN
Number('90') // 90
'90'/4 // 22.5
'90n'/4 // NaN
'90'/0 // Infinity
'90n'/0 // NaN
'90N'/'a' // NaN
NaN + Infinity // NaN

String類型

從靜態語言過來的同窗，遇到字符串就會問個問題：請問你能裝多少個字符串呢？

字符串傻傻一笑，說：自從我誕生以來，歷來就沒被裝滿過!

ECMAScript 2016 (ed. 7) established a maximum length of 2^53 - 1 elements. Previously, no maximum length was specified. In Firefox, strings have a maximum length of 2 30 - 2 (~1GB). In versions prior to Firefox 65, the maximum length was 228 - 1 (~256MB). --MDN

Boolean

Boolean值很簡單，就false和true兩個值。可是不少人不能徹底回答出，哪些值會被轉換成false。

除了下面幾個可以被轉成false的值，其餘都是true。

false
''
NaN
undefined
0, -0, +0
null

undefined 和 null

undefined表示一個變量被定義了，可是沒有被賦值。null表示這個變量根本沒被定義。總之，不管是undefined和null，他們基本上都是不能使用的值。

null類型有個特別的做用。好比有個對象，有不少屬性，這時候你想把這個變量給標記爲能夠被垃圾回收了，那麼就能夠把它的值設置爲null。

最熟悉的陌生人: 對象

我曾認爲對象在js中是最簡單的，而實際上，是我太天真。

// 定義一個對象，so easy
var boy = {
  name: 'wangduanduan'
}

var boy = {}
Object.defineProperty(boy, 'name', {
 writable: false,
 value: 'wdd'
})
boy.name = 'ddw' // 設置不會生效，boy.name的值仍是wdd

對象的數據屬性

數據屬性	默認值	說明
configurable	true	表示這個屬性可否用delete刪除
enumerable	true	表示這個屬性可否經過for in 循環遍歷
writable	true	表示這個屬性可否被修改
value	undefined	表示這個屬性的數據值

若是調用Object.defineProperty沒有指定configurable, enumerable, writable，那麼他們的默認值都是false。

訪問器屬性

訪問器屬性就是get, set讓你能夠在讀取或者寫入值時，作一層攔截。

var man = {
    _sex: 1
}
Object.defineProperty(man, 'sex', {
 set: function (v) {
     this._sex = v === '男' ? 1 : 0
 },
 get: function () {
     return this._sex === 1 ? "男" : "女"
 }
})
nam.sex // 男

想想若是把上面的_sex改爲sex會有什麼問題？

// 這樣寫會有什麼問題
var man = {
    sex: 1
}
Object.defineProperty(man, 'sex', {
 set: function (v) {
     this.sex = v === '男' ? 1 : 0
 },
 get: function () {
     return this.sex === 1 ? "男" : "女"
 }
})

最後

不少人抱怨說，工做很差找，其實大多數時候都是本身準備不足。

隨便網上刷刷幾道題，看看幾集視頻教程，每每不太贊成矇混過關。

雖然說前端可能比較簡單，可是也絕沒有想象的那麼簡單。

掃碼訂閱個人微信公衆號：洞香春天。天天一篇技術短文，讓知識再也不高冷。