JavaScript中的类型检查有点麻烦

做者：Dmitri Pavlutin
译者：前端小智
来源： https://dmitripavlutin.com/ja...

点赞再看，养成习惯

本文 GitHub https://github.com/qq44924588... 上已经收录，更多往期高赞文章的分类，也整理了不少个人文档，和教程资料。欢迎Star和完善，你们面试能够参照考点复习，但愿咱们一块儿有点东西。

---

JS 的动态类型有好有坏。好的一面，没必要指明变量的类型。很差的是，我们永远没法肯定变量的类型。

typeof运算符能够肯定 JS 中的6种类型：

typeof 10;        // => 'number'
typeof 'Hello';   // => 'string'
typeof false;     // => 'boolean'
typeof { a: 1 };  // => 'object'
typeof undefined; // => 'undefined'
typeof Symbol();  // => 'symbol'

一样，instanceof 运算符用于检测构造函数的 prototype 属性是否出如今某个实例对象的原型链上。

class Cat { }
const myCat = new Cat();

myCat instanceof Cat; // => true

可是typeof和instanceof的一些行为可能会使人混淆。防范于未然，我们须要提早了解一些边缘状况。

1. typeof null

typeof myObject === 'object'会告知myObject是不是一个对象类型。举个例子:

const person = { name: '前端小智' };

typeof person; // => 'object'

typeof person是'object'，由于person是一个普通的 JS 对象。

在某场景下，变量值可能须要指定为 null，下面是一些场景：

• 可使用null来跳过指示配置对象
• 使用null初始化稍后要保存对象的变量
• 当函数因为某种缘由没法构造对象时，返回null

例如，若是不存在正则表达式匹配项，则str.match(regExp)方法返回null：

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

这里引出一个问题，可使用typeof 来区分有值的对象和具备 null 值的对象吗？

let myObject = null;
typeof myObject; // => 'object'

myObject = { prop: 'Value' };
typeof myObject; // => 'object'

从上面能够看出，typeof 对象有值的对象和具备 null 值的对象，获得的结果都是'object'。

能够以下面方法来检测变量是否有对象且不是null：

function isObject(value) {
  return typeof value === 'object' && value !== null;
}

isObject({});   // => true
isObject(null); // => false

除了检查value是否为object: typeof value === 'object'以外，还须要明确地验证null: value !== null。

2. typeof array

若是试图检测一个变量是否包含一个数组，常见的错误就是使用typeof操做符：

const colors = ['white', 'blue', 'red'];

typeof colors; // => 'object'

检测数组的正确方法是使用Array.isArray()：

const colors = ['white', 'blue', 'red'];
const hero = { name: 'Batman' };

Array.isArray(colors); // => true
Array.isArray(hero);   // => false

Array.isArray(colors)返回一个布尔值true，表示colors是一个数组。

3.虚值类型检查

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

若是试图访问未初始化的变量、不存在的对象属性，则获取到的值为 undefined :

let city;
let hero = { name: '前端小智', villain: false };

city;     // => undefined
hero.age; // => undefined

访问未初始化的变量 city 和不存在的属性hero.age的结果为undefined。

要检查属性是否存在，能够在条件中使用object[propName]，这种遇到值为虚值或者undefined是不可靠的：

function getProp(object, propName, def) {
  // 错误方式
  if (!object[propName]) {
    return def;
  }
  return object[propName];
}

const hero = { name: '前端小智', villain: false };

getProp(hero, 'villain', true);  // => true
hero.villain;                    // => false

若是对象中不存在propName，则object [propName]的值为undefined。 if (!object[propName]) { return def }保护缺乏的属性。

hero.villain属性存在且值为false。 可是，该函数在访问villan值时错误地返回true：getProp(hero, 'villain', true)

undefined是一个虚值，一样false、0和''和null。

不要使用虚值做为类型检查，而是要明确验证属性是否存在于对象中：

• typeof object[propName] === 'undefined'
• propName in object
• object.hasOwnProperty(propName)

接着，我们来改进getProp()函数：

function getProp(object, propName, def) {
  // Better
  if (!(propName in object)) {
    return def;
  }
  return object[propName];
}

const hero = { name: '前端小智', villain: false };

getProp(hero, 'villain', true);  // => false
hero.villain;                    // => false

if (!(propName in object)) { ... }条件正确肯定属性是否存在。

逻辑运算符

我认为最好避免使用逻辑运算符||做为默状况，这个容易打断阅读的流程：

const hero = { name: '前端小智', villain: false };

const name = hero.name || 'Unknown';
name;      // => '前端小智'
hero.name; // => '前端小智'

// 很差方式
const villain = hero.villain || true;
villain;      // => true
hero.villain; // => false

hero 对象存在属性villain，值为 false,可是表达式hero.villain || true结果为true。

逻辑操做符||用做访问属性的默认状况，当属性存在且具备虚值时，该操做符没法正确工做。

若要在属性不存在时默认设置，更好的选择是使用新的双问号(??)操做符,

const hero = { name: '前端小智', villan: false };

// 好的方式
const villain = hero.villain ?? true;
villain;      // => false
hero.villain; // => false

或使用解构赋值:

const hero = { name: '前端小智', villain: false };

// Good
const { villain = true } = hero;
villain;      // => false
hero.villain; // => false

4. typeof NaN

整数，浮点数，特殊数字（例如Infinity，NaN）的类型均为数字。

typeof 10;       // => 'number'
typeof 1.5;      // => 'number'
typeof NaN;      // => 'number'
typeof Infinity; // => 'number'

NaN是在没法建立数字时建立的特殊数值。NaN是not a number的缩写。

在下列状况下不能建立数字：

Number('oops'); // => NaN

5 * undefined; // => NaN
Math.sqrt(-1); // => NaN

NaN + 10; // => NaN

因为NaN，意味着对数字的操做失败，所以对数字有效性的检查须要额外的步骤。

下面的isValidNumber()函数也能够防止NaN致使的错误：

function isValidNumber(value) {
  // Good
  return typeof value === 'number' && !isNaN(value);
}

isValidNumber(Number('Z99')); // => false
isValidNumber(5 * undefined); // => false
isValidNumber(undefined);     // => false

isValidNumber(Number('99'));  // => true
isValidNumber(5 + 10);        // => true

除了typeof value === 'number'以外，还多验证!isNaN(value)确保万无一失。

5.instanceof 和原型链

JS 中的每一个对象都引用一个特殊的函数:对象的构造函数。

object instanceof Constructor是用于检查对象的构造函数的运算符：

const object = {};
object instanceof Object; // => true

const array = [1, 2];
array instanceof Array; // => true

const promise = new Promise(resolve => resolve('OK'));
promise instanceof Promise; // => true

如今，我们定义一个父类Pet和它的子类Cat：

class Pet {
  constructor(name) {
    this.name;
  }
}

class Cat extends Pet {
  sound = 'Meow';
}

const myCat = new Cat('Scratchy');

如今，尝试肯定myCat的实例

myCat instanceof Cat;    // => true
myCat instanceof Pet;    // => true
myCat instanceof Object; // => true

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

instanceof操做符经过整个原型链搜索对象的构造函数。要准确地检测建立对象的构造函数，须要检测 constructor 属性

myCat.constructor === Cat;    // => true
myCat.constructor === Pet;    // => false
myCat.constructor === Object; // => false

只有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。

原文：https://dmitripavlutin.com/ja...

---

---

交流

干货系列文章汇总以下，以为不错点个Star，欢迎 加群 互相学习。

https://github.com/qq44924588...

我是小智，公众号「大迁世界」做者，对前端技术保持学习爱好者。我会常常分享本身所学所看的干货，在进阶的路上，共勉！

关注公众号，后台回复福利，便可看到福利，你懂的。