JavaScript中的類型檢查

JS 的動態類型有好有壞。好的一面，不必指明變量的類型。不好的是，咱們永遠無法確定變量的類型。

typeof運算符可以確定 JS 中的6種類型：

1. typeof 10; // => 'number'
2. typeof 'Hello'; // => 'string'
3. typeof false; // => 'boolean'
4. typeof { a: 1 }; // => 'object'
5. typeof undefined; // => 'undefined'
6. typeof Symbol(); // => 'symbol'
7.  

同樣，instanceof 運算符用于檢測構造函數的 prototype 屬性是否出現在某個實例對象的原型鏈上。

1. class Cat { }
2. const myCat = new Cat();
3.  
4. myCat instanceof Cat; // => true
5.  

但是typeof和instanceof的一些行為可能會令人混淆。防范于未然，咱們需要提前了解一些邊緣情況。

1. typeof null

typeof myObject === 'object'會告知myObject是否是一個對象類型。舉個例子:

1. const person = { name: '前端小智' };
2.  
3. typeof person; // => 'object'
4.  

typeof person是'object'，因為person是一個普通的 JS 對象。

在某場景下，變量值可能需要指定為 null，下面是一些場景：

可以使用null來跳過指示配置對象
使用null初始化稍后要保存對象的變量
當函數由于某種原因無法構造對象時，返回null
例如，如果不存在正則表達式匹配項，則str.match(regExp)方法返回null：

1. const message = 'Hello';
2. message.match(/Hi/); // => null
3.  

這里引出一個問題，可以使用typeof 來區分有值的對象和具有 null 值的對象嗎？

1. let myObject = null;
2. typeof myObject; // => 'object'
3.  
4. myObject = { prop: 'Value' };
5. typeof myObject; // => 'object'
6.  

從上面可以看出，typeof 對象有值的對象和具有 null 值的對象，得到的結果都是'object'。

可以如下面方法來檢測變量是否有對象且不是null：

1. function isObject(value) {
2. return typeof value === 'object' && value !== null;
3. }
4.  
5. isObject({}); // => true
6. isObject(null); // => false
7.  

除了檢查value是否為object: typeof value === 'object'之外，還需要明確地驗證null: value !== null。

2. typeof array

如果試圖檢測一個變量是否包含一個數組，常見的錯誤就是使用typeof操作符：

1. const colors = ['white', 'blue', 'red'];
2.  
3. typeof colors; // => 'object'
4.  

檢測數組的正確方法是使用Array.isArray()：

1. const colors = ['white', 'blue', 'red'];
2. const hero = { name: 'Batman' };
3.  
4. Array.isArray(colors); // => true
5. Array.isArray(hero); // => false
6.  

Array.isArray(colors)返回一個布爾值true，表示colors是一個數組。

3.虛值類型檢查

JS中的undefined是一個特殊值，表示未初始化的變量。

如果試圖訪問未初始化的變量、不存在的對象屬性，則獲取到的值為 undefined :

1. let city;
2. let hero = { name: '前端小智', villain: false };
3.  
4. city; // => undefined
5. hero.age; // => undefined
6.  

訪問未初始化的變量 city 和不存在的屬性hero.age的結果為undefined。

要檢查屬性是否存在，可以在條件中使用object[propName]，這種遇到值為虛值或者undefined是不可靠的：

1. function getProp(object, propName, def) {
2. // 錯誤方式
3. if (!object[propName]) {
4. return def;
5. }
6. return object[propName];
7. }
8.  
9. const hero = { name: '前端小智', villain: false };
10.  
11. getProp(hero, 'villain', true); // => true
12. hero.villain; // => false
13.  

如果對象中不存在propName，則object [propName]的值為undefined。 if (!object[propName]) { return def }保護缺少的屬性。

hero.villain屬性存在且值為false。 但是，該函數在訪問villan值時錯誤地返回true：getProp(hero, 'villain', true)

undefined是一個虛值，同樣false、0和''和null。

不要使用虛值作為類型檢查，而是要明確驗證屬性是否存在于對象中：

1. typeof object[propName] === 'undefined'
2. propName in object
3. object.hasOwnProperty(propName)

接著，咱們來改進getProp()函數：

1. function getProp(object, propName, def) {
2. // Better
3. if (!(propName in object)) {
4. return def;
5. }
6. return object[propName];
7. }
8.  
9. const hero = { name: '前端小智', villain: false };
10.  
11. getProp(hero, 'villain', true); // => false
12. hero.villain; // => false
13.  

if (!(propName in object)) { ... }條件正確確定屬性是否存在。

邏輯運算符

我認為最好避免使用邏輯運算符||作為默情況，這個容易打斷閱讀的流程：

1. const hero = { name: '前端小智', villain: false };
2.  
3. const name = hero.name || 'Unknown';
4. name; // => '前端小智'
5. hero.name; // => '前端小智'
6.  
7. // 不好方式
8. const villain = hero.villain || true;
9. villain; // => true
10. hero.villain; // => false
11.  

hero 對象存在屬性villain，值為 false,但是表達式hero.villain || true結果為true。

邏輯操作符||用作訪問屬性的默認情況，當屬性存在且具有虛值時，該操作符無法正確工作。

若要在屬性不存在時默認設置，更好的選擇是使用新的雙問號(??)操作符,

1. const hero = { name: '前端小智', villan: false };
2.  
3. // 好的方式
4. const villain = hero.villain ?? true;
5. villain; // => false
6. hero.villain; // => false
7.  

或使用解構賦值:

1. const hero = { name: '前端小智', villain: false };
2.  
3. // Good
4. const { villain = true } = hero;
5. villain; // => false
6. hero.villain; // => false
7.  

4. typeof NaN

整數，浮點數，特殊數字（例如Infinity，NaN）的類型均為數字。

1. typeof 10; // => 'number'
2. typeof 1.5; // => 'number'
3. typeof NaN; // => 'number'
4. typeof Infinity; // => 'number'

NaN是在無法創建數字時創建的特殊數值。NaN是not a number的縮寫。

在下列情況下不能創建數字：

1. Number('oops'); // => NaN
2.  
3. 5 * undefined; // => NaN
4. Math.sqrt(-1); // => NaN
5.  
6. NaN + 10; // => NaN
7.  

由于NaN，意味著對數字的操作失敗，因此對數字有效性的檢查需要額外的步驟。

下面的isValidNumber()函數也可以防止NaN導致的錯誤：

1. function isValidNumber(value) {
2. // Good
3. return typeof value === 'number' && !isNaN(value);
4. }
5.  
6. isValidNumber(Number('Z99')); // => false
7. isValidNumber(5 * undefined); // => false
8. isValidNumber(undefined); // => false
9.  
10. isValidNumber(Number('99')); // => true
11. isValidNumber(5 + 10); // => true
12.  

除了typeof value === 'number'之外，還多驗證!isNaN(value)確保萬無一失。

5.instanceof 和原型鏈

JS 中的每個對象都引用一個特殊的函數:對象的構造函數。

object instanceof Constructor是用于檢查對象的構造函數的運算符：

1. const object = {};
2. object instanceof Object; // => true
3.  
4. const array = [1, 2];
5. array instanceof Array; // => true
6.  
7. const promise = new Promise(resolve => resolve('OK'));
8. promise instanceof Promise; // => true
9.  

現在，咱們定義一個父類Pet和它的子類Cat：

1. class Pet {
2. constructor(name) {
3. this.name;
4. }
5. }
6.  
7. class Cat extends Pet {
8. sound = 'Meow';
9. }
10.  
11. const myCat = new Cat('Scratchy');
12.  

現在，嘗試確定myCat的實例

1. myCat instanceof Cat; // => true
2. myCat instanceof Pet; // => true
3. myCat instanceof Object; // => true
4.  

instanceof運算符表示myCat是Cat，Pet甚至Object的實例。

instanceof操作符通過整個原型鏈搜索對象的構造函數。要準確地檢測創建對象的構造函數，需要檢測 constructor 屬性

1. myCat.constructor === Cat; // => true
2. myCat.constructor === Pet; // => false
3. myCat.constructor === Object; // => false
4.  

只有myCat.constructor === Cat的計算結果為true，表示 Cat 是 myCat實例的構造函數。

6. 總結

運算符typeof和instanceof 用于類型檢查。 它們盡管易于使用，但需要注意一些特殊情況。

需要注意的是：typeof null等于'object'。 要確定變量是否包含非null對象，需要顯示指明null：

typeof myObject === 'object' && myObject !== null
檢查變量是否包含數組的最佳方法是使用Array.isArray(variable)內置函數。

因為undefined是虛值的，所以我們經常直接在條件句中使用它，但這種做法容易出錯。更好的選擇是使用prop in object來驗證屬性是否存在。

使用雙問號操作系符號object.prop ?? def 或者 { prop = def } = object 來訪問可能丟失的屬性。

NaN是一個類型為number的特殊值，它是由對數字的無效操作創建的。為了確保變量有正確的數字，最好使用更詳細的驗證:!isNaN(number) && typeof number === 'number'。

最后，請記住instanceof通過prototype鏈搜索實例的構造函數。如果不知道這一點，那么如果使用父類驗證子類實例，可能會得到錯誤的結果。

代碼部署后可能存在的BUG沒法實時知道，事后為了解決這些BUG，花了大量的時間進行log 調試，這邊順便給大家推薦一個好用的BUG監控工具 Fundebug。