谈谈JavaScript中的类型判断

JavaScript是一种动态类型的编程语言，它允许在运行时改变变量的数据类型。在处理复杂的代码和应用程序时，正确地了解和判断数据类型变得至关重要。在本文中，我们将深入研究JavaScript中的类型判断，了解如何准确、安全地判断变量的类型。

基本数据类型

JavaScript有七种基本数据类型：undefined、null、boolean、number、string、symbol和bigint。在进行类型判断时，我们可以使用一些内建函数和操作符。

1. typeof 操作符

typeof 操作符是一种快速检查变量类型的方式，它返回一个表示变量类型的字符串。以下是基本数据类型的 typeof 操作符的使用示例：

let str = 'hello' //string
let num = 123  //number
let flag = false //boolean
let und = undefined //undefined
let nu = null // null
let big = 123n //big number
let s = Symbol('hello') //Symbol 独一无二的


let obj = {

}
let arr = []
let fn = function(){}
let date = new Date()


// 判断类型
// typeof 判断基本类型 null 无法判断 但是 fn 又可以判断出来
console.log(typeof str)  // string 
console.log(typeof num) // number
console.log(typeof flag) // boolean
console.log(typeof und)  // undefined 
console.log(typeof nu); // object  唯独null无法判断出来
console.log(typeof big); //bigint
console.log(typeof s);  // Symbol


console.log(typeof obj)  // Object
console.log(typeof arr)  // Object
console.log(typeof fn)   // Function
console.log(typeof date) // Object

需要注意的是，typeof null 返回 "object"，这是一个历史遗留问题，被认为是JavaScript的一个 Bug。并且 typeof fn返回 "Function",可以判断function

2. instanceof 操作符

instanceof 操作符用于判断对象是否是某个构造函数的实例。它主要用于判断自定义对象的类型。以下是 instanceof 操作符的示例：

let str = 'hello' //string
let num = 123  //number
let flag = false //boolean
let und = undefined //undefined
let nu = null // null
let big = 123n //big number
let s = Symbol('hello') //Symbol 独一无二的


let obj = {}
let arr = []
let fn = function () { }
let date = new Date()

// instanceof 判断引用类型
 console.log(obj instanceof Object)   // true
 console.log(arr instanceof Array)    // true
 console.log(fn instanceof Function)  // true
 console.log(date instanceof Date)    // true

// // 无法判断原始类型
// console.log(str instanceof String)   // false

instanceof 对于基本数据类型无效，因为基本数据类型并不是对象，它们没有构造函数。 instanceof 查找引用数据类型是通过原型链进行查找的，因此会将数组，函数等也会返回true

复杂数据类型

在处理对象、数组和函数等复杂数据类型时，我们需要使用更多的方法来准确判断类型。

1. Object.prototype.toString

Object.prototype.toString 方法是一种更强大的类型判断工具，它返回一个表示对象的字符串。我们可以使用它来判断对象的类型：

function getType(obj) {
  return Object.prototype.toString.call(obj).slice(8, -1);
}

let arr = [1, 2, 3];
console.log(getType(arr));  // 输出 "Array"

let obj = { key: "value" };
console.log(getType(obj));  // 输出 "Object"

let func = function() {};
console.log(getType(func));  // 输出 "Function"

通过使用 Object.prototype.toString，我们可以避免 typeof 的一些限制，并且更准确地判断对象的类型。

2. Array.isArray 方法

对于数组的判断，可以使用 Array.isArray 方法，它会在检测时考虑到数组的特殊性：

let arr = [1, 2, 3];
console.log(Array.isArray(arr));  // 输出 "true"

let notArr = { key: "value" };
console.log(Array.isArray(notArr));  // 输出 "false"

Array.isArray 是一个很方便且可靠的方法，用于判断一个对象是否是数组。

总结

typeof

1. 可以准确判断出null之外的原始类型
2. 可以判断function

instanceof

1. 只能判断引用类型
2. 且是通过原型链查找来判断的

Object.prototype.toString.call(xxx)

1. 如果这个值为undefined 返回 "object Undefined"
2. 如果这个值为null 返回 "object Null"
3. 将 O 作为 ToOjbect(this) 的执行结果
4. 让class 成为 O 内部属性 \[Class] 的值
5. 返回由"object" 和 class 和 "" 三部分组成的字符串

Array.isArray(arr)

在JavaScript中，类型判断对于编写健壮的代码至关重要。通过了解基本数据类型和复杂数据类型的判断方法，我们可以更好地处理不同情况下的变量类型。综合使用 typeof 操作符、instanceof 操作符、Object.prototype.toString 方法和 Array.isArray 方法，我们可以创建更可靠和灵活的类型判断工具，提高代码的可读性和可维护性。