JS变量类型判断全攻略

一分耕耘，一分收获！既然都打开这篇《JS变量类型判断方法大全》，就坚持看下去，学下去吧！本文主要会给大家讲到等等知识点，如果大家对本文有好的建议或者看到有不足之处，非常欢迎大家积极提出！在后续文章我会继续更新文章相关的内容，希望对大家都有所帮助！

要准确判断JavaScript中的变量类型需根据场景选择合适方法。1. typeof适用于基本类型判断，但无法区分对象、数组和null；2. instanceof用于判断对象是否为某构造函数实例，但不能判断基本类型；3. Object.prototype.toString.call()最可靠，可区分所有类型；4. 判断null应使用===或toString方法；5. 判断对象需排除null和数组；6. 判断函数可用typeof或toString方法；7. 判断NaN应使用Number.isNaN()。理解各方法原理及适用场景是关键。

在JavaScript中，判断变量类型并非一蹴而就，需要根据具体场景选择最合适的策略。没有银弹，只有最合适的选择。

判断变量类型，需要根据不同情况采取不同策略。

如何准确判断JavaScript中的变量类型？

JavaScript 提供了多种判断变量类型的方法，但每种方法都有其适用场景和局限性。要做到准确判断，需要了解这些方法的底层原理，并根据实际情况灵活运用。

1. typeof 操作符：

   

   typeof 是最常用的类型判断工具，它会返回一个字符串，表示变量的类型。

   console.log(typeof 123);       // "number"
   console.log(typeof "hello");     // "string"
   console.log(typeof true);        // "boolean"
   console.log(typeof undefined);   // "undefined"
   console.log(typeof Symbol());     // "symbol" (ES6)
   console.log(typeof function(){}); // "function"
   console.log(typeof null);        // "object"  <-- 注意！
   console.log(typeof {});          // "object"
   console.log(typeof []);          // "object"

   typeof 的优点是简单快捷，但它也有一个明显的缺点：对于 null、数组和对象，typeof 都会返回 "object"，无法区分它们。这是 JavaScript 的一个历史遗留问题。

2. instanceof 操作符：

   instanceof 用于判断一个对象是否是某个构造函数的实例。

   function Person(name) {
     this.name = name;
   }
   
   const person = new Person("Alice");
   
   console.log(person instanceof Person);   // true
   console.log(person instanceof Object);   // true  (因为 Person 继承自 Object)
   console.log([] instanceof Array);      // true
   console.log([] instanceof Object);     // true
   console.log(null instanceof Object);    // 报错，null没有原型链

   instanceof 的原理是沿着原型链向上查找，如果找到对应的构造函数，则返回 true。instanceof 可以区分自定义对象和内置对象，但它不能判断基本类型，也不能跨 iframe 使用。

3. Object.prototype.toString.call() 方法：

   这是最可靠的类型判断方法。Object.prototype.toString.call() 会返回一个形如 "[object Type]" 的字符串，其中 Type 表示变量的类型。

   console.log(Object.prototype.toString.call(123));       // "[object Number]"
   console.log(Object.prototype.toString.call("hello"));     // "[object String]"
   console.log(Object.prototype.toString.call(true));        // "[object Boolean]"
   console.log(Object.prototype.toString.call(undefined));   // "[object Undefined]"
   console.log(Object.prototype.toString.call(null));        // "[object Null]"
   console.log(Object.prototype.toString.call({}));          // "[object Object]"
   console.log(Object.prototype.toString.call([]));          // "[object Array]"
   console.log(Object.prototype.toString.call(new Date()));   // "[object Date]"
   console.log(Object.prototype.toString.call(function(){})); // "[object Function]"

   Object.prototype.toString.call() 可以判断所有类型，包括基本类型、内置对象和自定义对象。它也是跨 iframe 安全的。

4. 其他方法：

   • Array.isArray()：专门用于判断是否为数组。
   • Number.isNaN()：专门用于判断是否为 NaN (Not a Number)。注意，isNaN() 会先将参数转换为数字，再进行判断，而 Number.isNaN() 不会进行类型转换。

如何处理JavaScript中null的类型判断？

typeof null 返回 "object" 是 JavaScript 的一个历史遗留问题。要准确判断 null，只能使用严格相等运算符 ===。

console.log(null === null); // true

使用 Object.prototype.toString.call(null) 也可以得到 "[object Null]"，但通常情况下，直接使用 === 更简洁。

如何在JavaScript中判断一个变量是否为对象？

判断一个变量是否为对象，需要排除 null 和数组。

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

console.log(isObject({}));   // true
console.log(isObject([]));   // false
console.log(isObject(null)); // false
console.log(isObject(123));  // false

这个函数首先使用 typeof 判断变量是否为 "object"，然后排除 null 和数组。

如何在JavaScript中判断一个变量是否为函数？

使用 typeof 可以判断一个变量是否为函数。

console.log(typeof function(){}); // "function"

但需要注意的是，在某些浏览器中，typeof 对正则表达式会返回 "function"。为了更准确地判断是否为函数，可以使用 Object.prototype.toString.call()。

function isFunction(value) {
  return Object.prototype.toString.call(value) === '[object Function]';
}

console.log(isFunction(function(){})); // true
console.log(isFunction(/abc/));       // false

总结

选择哪种类型判断方法取决于具体的需求。

• 如果只需要简单判断基本类型，可以使用 typeof。
• 如果需要判断自定义对象，可以使用 instanceof。
• 如果需要最可靠的类型判断，可以使用 Object.prototype.toString.call()。
• 判断 null 只能使用 ===。
• 判断数组可以使用 Array.isArray()。
• 判断 NaN 应该使用 Number.isNaN()。

理解这些方法的原理和适用场景，可以帮助你编写更健壮的 JavaScript 代码。

本篇关于《JS变量类型判断全攻略》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！