JavaScript漫谈之理解类型操作符typeof

在本文中，将简述JavaScript类型系统和数据类型，以及如何使用typeof操作符执行类型检查。

还讲解了使用typeof操作符进行某些数据类型检查是不完善的，并介绍其他几种类型检查的方法。

更多内容欢迎关注GitHub

每种编程语言都有自己的类型系统和数据类型，但各种编程语言的数据结构常有不同之处。使用JavaScript时，其引擎会在脚本执行期间隐式强制转换执行值的类型。类型检查对于编写可预测的JavaScript程序是非常有必要的。

JavaScript中的typeof操作符就是用于基础的类型检查

typeof操作符返回字符串，表示未经计算的操作数的类型（来自MDN）

一、JavaScript的数据类型

在此之前，需要了解JavaScript有哪些数据类型，最新标准定义了8种数据类型：

7种原始类型：
- Boolean
- Null
- Undefined
- Number
- String
- BigInt
- Symbol
其他为引用类型：
- Object
- 数组array()、函数function()、正则表达RegExp特殊的物体：
  - array是一种特殊的对象，它是一个有序的编号值集合
  - function是一种特殊类型的对象，具有与之关联的可执行脚本块有关

JavaScript还有几个对象类构造函数，用于创建其他类型的对象：

Date—用于创建日期对象
RegExp—用于创建正则表达式
Error—用于创建JavaScript错误

二、`typeof`功能

1、语法

typeof使用一元操作符（只需要一个操作数）的计算结果作为其操作数的类型结果字符串。

另一种替代语法就是将操作数放入括号中使用，这种对JavaScript表达式返回的值进行类型检查非常有用。

typeof 参数

typeof(参数)

参数：一个表示对象或原始值的表达式，其类型将被返回

typeof "sueRimn";        // 'string'

typeof 22;                // 'number'

typeof NaN;              // 'number'

typeof Infinity;         // 'number'

typeof true;             // 'boolean'

typeof false;            // 'boolean'

typeof [1, 2];           // 'object'

typeof {age: 22};        // 'object'

typeof null;             // 'object'

typeof undefined;        // 'undefined'

typeof String;           // 'function'

typeof Boolean;          // 'function'

typeof Number;           // 'function'

typeof Object;           // 'function'

typeof Function;         // 'function'

typeof person;           // 'function'

undefined是它自己的JavaScript类型

在ES6之前，typeof不管操作数是否声明，总是返回一个字符串，即对于未声明的标识符，总是返回而不是抛出错误。

在ES6中，使用let或const声明的块级作用域变量在初始化之前与typeof操作符使用，将抛出错误。

原因是：块级作用域变量在被初始化之前一直保留在临时死区。

console.log(typeof name === 'undefined'); // ReferenceError

const name = 'sueRimn';

2、一般类型检查

在JavaScript中执行类型检查主要使用typeof操作符

function add(a, b) {

    if (typeof a !== 'number' || typeof b !== 'number') {

        throw '参数必须是数值'

    }

    return a + b;

}

以下是对类型检查的简单摘要：

值	类型
`undefined`	`"undefined"`
`null`	`"object"`
原始对象	`"object"`
所有数组	`"object"`
其他对象	`"object"`
`true`/`false`	`"boolean"`
字符串	`"string"`
所有符号	`"symbol"`
所有函数	`"function"`
宿主对象	依赖于实现

检测值是否存在在不同环境是这样的：

if (typeof window !== 'undefined') {

  // 浏览器

};

if (typeof process !== 'undefined') {

  // Node.js

}

if (typeof $ !== 'undefined') {

  // jQuery

}

3、其他类型检查

对于某些值需要额外的类型检查才可以区分，例如null和[]在使用typeof操作符执行type-check时都是"object"类型，但是区分它们需要额外的操作。

一些其他数据类型值检查方法：

使用instanceof
检查对象的constructor属性
使用对象的toString()方法检查对象类

（1）检测是否为空

使用typeof操作符检查值是否为空并不好，检查值是否为空的最佳方法是对值与关键字进行严格相等比较。

以上代码呈现的结果是不一样的，所以使用严格相等操作符是非常重要的。

（2）检测`NaN`

任何涉及NaN的算术运算都将对NaN求值，如果想为任何形式的算术运算使用值，那么需要确保该值不是NaN。

使用typeof操作符检查NaN值是否返回"number"。要检查NaN值，可以使用全局函数isNaN()，或者ES6中的Number.isNaN()函数:

NaN值非常特殊，通过比较，它永远不等于任何其他值，包括它自己:

可以使用以下方法在非ES6环境下检测NaN：

function isNan(value) {

  return value !== value;

}

最后，你可以利用ES6中的Object.is()函数来测试值是否为NaN。

以下函数作用是检查两个值是否相同：

function isNan(value) {

  return Object.is(value, Number.NaN);

}

（3）检测数组

使用typeof检查数组将返回object。这里介绍几种检测数组的方法，并进行对比：

使用constructor属性（不推荐）

function isArray(value) {

  return typeof value == 'object' && value.constructor === Array;

}

使用instanceof（不推荐，因为对象的原型可以更改）

function isArray(value) {

  return value instanceof Array;

}

使用Object.prototype.toString()（推荐，类似于ES6 Array.isArray()）

function isArray(value) {

  return Object.prototype.toString.call(value) === '[object Array]';

}

object.prototype.tostring()方法对于检查任何JavaScript值的对象类型都非常有用

使用ES6 Array.isArray()

function isArray(value) {

  return Array.isArray(value);

}