Quartz 4

cv：JS 判断数据类型的方式

6 min read

在 JavaScript 中，判断数据类型是开发过程中常见的操作。JavaScript 提供了多种方法来判断数据类型，每种方法有其适用的场景和局限性。下面整理了 8 种常见的判断数据类型的方式，并分析了它们的特点。

1. typeof 运算符

typeof 是 JavaScript 中最常用的检查数据类型的方法，它可以用于判断数据的基本类型。返回的值是一个字符串，表示数据类型。

语法：

typeof value

常见返回值：

  • "undefined": 表示值是 undefined 类型。
  • "boolean": 表示值是布尔值类型。
  • "number": 表示值是数字类型。
  • "string": 表示值是字符串类型。
  • "object": 表示值是对象类型（包括 null）。
  • "function": 表示值是函数类型。

示例：

typeof 123            // "number"
typeof 'Hello'        // "string"
typeof true           // "boolean"
typeof undefined      // "undefined"
typeof {}             // "object"
typeof null           // "object" (这有些令人困惑)
typeof []             // "object" (数组也属于对象)
typeof function(){}   // "function"

优缺点：

  • typeof 对于基本数据类型非常有效。
  • 对于 null 和数组，它的结果是 "object"，这会引起误解。

2. instanceof 运算符

instanceof 运算符用于检测对象是否为某个构造函数的实例。通常用于判断对象的类型，特别是自定义的对象或数组。

语法：

value instanceof Constructor

示例：

[] instanceof Array          // true
{} instanceof Object         // true
function(){} instanceof Function   // true

优缺点：

  • 适用于检测对象类型，比如数组、日期、正则表达式等。
  • 不能用于检测基本数据类型（如 string、number 等）。

3. Array.isArray()

Array.isArray() 方法用来判断一个值是否是数组。它是判断数组类型的首选方法。

语法：

Array.isArray(value)

示例：

Array.isArray([])    // true
Array.isArray({})    // false
Array.isArray('[]')  // false

优缺点：

  • 这是判断数组类型的最佳方法，避免了 typeof 对数组返回 "object" 的误解。

4. Object.prototype.toString.call()

通过 Object.prototype.toString.call() 方法可以判断更精确的数据类型，包括 null 和 array。这种方法对所有 JavaScript 对象和内建类型的判断都非常可靠。

语法：

Object.prototype.toString.call(value)

示例：

Object.prototype.toString.call([])         // "[object Array]"
Object.prototype.toString.call({})         // "[object Object]"
Object.prototype.toString.call(null)       // "[object Null]"
Object.prototype.toString.call(new Date()) // "[object Date]"
Object.prototype.toString.call(function() {}) // "[object Function]"

优缺点：

  • 这是一个非常可靠且精确的方法，能检测包括内置对象在内的所有类型。
  • 返回值是 "[object Type]" 格式的字符串，包含了类型信息。

5. constructor 属性

constructor 属性返回创建该对象的函数。如果该对象是某个特定类的实例，可以通过 constructor 来判断数据类型。

语法：

value.constructor === Type

示例：

123..constructor === Number   // true
'abc'.constructor === String  // true
[1, 2, 3].constructor === Array  // true
new Date().constructor === Date   // true

优缺点：

  • 可以判断一些基本类型（如字符串、数组等），但它不适用于判断 null 和 undefined，它们没有 constructor 属性。
  • 对于原生对象和内建类型的判断可能不如 Object.prototype.toString.call() 那么可靠。

6. typeof null

typeof null 返回 "object"，这是 JavaScript 中的一个历史遗留问题。因此，使用 typeof 来判断 null 类型是不准确的。

示例：

typeof null  // "object"

解决方案：

  • 可以通过 Object.prototype.toString.call(value) 来精确判断 null 类型。

7. new 运算符和构造函数

通过 new 运算符和自定义构造函数创建的对象也可以通过比较构造函数来判断其类型。

示例：

function Person(name) {
  this.name = name;
}
 
const person = new Person('John');
person instanceof Person   // true

优缺点：

  • 适用于自定义构造函数类型的检测。
  • 不适用于内置对象（如 Date, Array 等）。

8. typeof 与 null 检查

typeof 对 null 返回 "object"，因此可以通过专门的逻辑来判断 null。

示例：

function isNull(value) {
  return value === null;
}
 
isNull(null)    // true
isNull(undefined) // false

优缺点：

  • 可以准确判断 null，但需要单独处理 null 和其他类型。

总结

JavaScript 提供了多种判断数据类型的方法，不同的方法适用于不同的场景。常见的几种方法如下：

  1. typeof: 简单快速，但对 null 和数组等复杂类型判断不准确。
  2. instanceof: 用于判断对象类型（尤其是自定义类型），不适用于基本数据类型。
  3. Array.isArray(): 判断是否为数组，是最精确的数组类型判断方法。
  4. Object.prototype.toString.call(): 最为精确且通用的方法，适合判断各种内建对象类型。
  5. constructor 属性: 适用于一些基本数据类型判断，但对 null 和 undefined 不适用。
  6. null 判断: typeof null 返回 "object"，需要特别注意。
  7. new 运算符和构造函数: 适合自定义类型的判断。
  8. 自定义 isNull(): 用于精准判断 null 类型。

通过合理选择不同的判断方式，可以在 JavaScript 开发中更好地处理数据类型问题。

Graph View