JavaScript中的类型检查


Posted in Javascript onFebruary 03, 2020

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。

Javascript 相关文章推荐
让IE8支持DOM 2(不用框架!)
Dec 31 Javascript
JavaScript中数组的排序、乱序和搜索实现代码
Nov 30 Javascript
怎么选择Javascript框架(Javascript Framework)
Nov 22 Javascript
页面刷新时记住滚动条的位置jquery代码
Jun 17 Javascript
一个JavaScript防止表单重复提交的实例
Oct 21 Javascript
详解参数传递四种形式
Jul 21 Javascript
javascript实现的淘宝旅行通用日历组件用法实例
Aug 03 Javascript
javascript中checkbox使用方法实例演示
Nov 19 Javascript
Js遍历键值对形式对象或Map形式的方法
Aug 08 Javascript
Javascript 判断两个IP是否在同一网段实例代码
Nov 28 Javascript
微信小程序之左右布局的实现代码
Dec 13 Javascript
vue中this.$http.post()跨域和请求参数丢失的解决
Apr 08 Vue.js
Vue的Eslint配置文件eslintrc.js说明与规则介绍
Feb 03 #Javascript
压缩Vue.js打包后的体积方法总结(Vue.js打包后体积过大问题)
Feb 03 #Javascript
24个解决实际问题的ES6代码片段(小结)
Feb 02 #Javascript
浅谈vuex为什么不建议在action中修改state
Feb 02 #Javascript
vuex+axios+element-ui实现页面请求loading操作示例
Feb 02 #Javascript
vue实现的封装全局filter并统一管理操作示例
Feb 02 #Javascript
node 版本切换的实现
Feb 02 #Javascript
You might like
提高PHP性能的编码技巧以及性能优化详细解析
2013/08/24 PHP
php反射学习之不用new方法实例化类操作示例
2019/06/14 PHP
基于jquery的checkbox下拉框插件代码
2010/06/25 Javascript
jQuery选择器的工作原理和优化分析
2011/07/25 Javascript
JavaScript 原型继承
2011/12/26 Javascript
JavaScript中常用的运算符小结
2012/01/18 Javascript
js时间日期和毫秒的相互转换
2013/02/22 Javascript
Node.js中使用mongoskin操作mongoDB实例
2014/09/28 Javascript
jQuery定义背景动态切换效果的方法
2015/03/23 Javascript
js改变embed标签src值的方法
2015/04/10 Javascript
使用JQuery实现Ctrl+Enter提交表单的方法
2015/10/22 Javascript
如何利用AngularJS打造一款简单Web应用
2015/12/05 Javascript
javascript日期格式化方法小结
2015/12/17 Javascript
实例浅析js的this
2016/12/11 Javascript
JS中Select下拉列表类(支持输入模糊查询)功能
2017/01/17 Javascript
ionic App问题总结系列之ionic点击系统返回键退出App
2017/08/19 Javascript
Angular浏览器插件Batarang介绍及使用
2018/02/07 Javascript
微信小程序动态生成二维码的实现代码
2018/07/25 Javascript
Python修改Excel数据的实例代码
2013/11/01 Python
python中stdout输出不缓存的设置方法
2014/05/29 Python
深入理解Javascript中的this关键字
2015/03/27 Python
Python使用PIL库实现验证码图片的方法
2016/03/11 Python
python采用django框架实现支付宝即时到帐接口
2016/05/17 Python
Python中函数及默认参数的定义与调用操作实例分析
2017/07/25 Python
Python3匿名函数用法示例
2018/07/25 Python
python f-string式格式化听语音流程讲解
2019/06/18 Python
解决python图像处理图像赋值后变为白色的问题
2020/06/04 Python
css3 border-image使用说明
2010/06/23 HTML / CSS
css3制作动态进度条以及附加jQuery百分比数字显示
2012/12/13 HTML / CSS
基于css3 animate制作绚丽的动画效果
2015/11/24 HTML / CSS
Super-Pharm波兰:药房和香水在一个地方
2020/08/18 全球购物
武汉东之林科技有限公司机试
2013/09/17 面试题
党员教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
幼儿园班级工作总结2015
2015/05/25 职场文书
入党后的感想
2015/08/10 职场文书
javaScript Array api梳理
2021/03/31 Javascript