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

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

myCat instanceof Cat; // => true

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

typeof person; // => 'object'

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

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

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

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

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

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

typeof colors; // => 'object'

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

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

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

city;   // => undefined
hero.age; // => 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

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

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

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

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

// 不好方式
const villain = hero.villain || true;
villain;   // => true
hero.villain; // => false

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

// 好的方式
const villain = hero.villain "htmlcode">

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。