在前端开发中,精确判断数据类型很重要,因为它直接影响到代码的逻辑正确性。如常见的typeof
操作符,在遇到如数组与对象的区分等问题时,局限性就突显出来了。这篇文章将探讨JavaScript中各种数据类型判断方法的差异,并提出一个既简洁又高效的策略,来解决一劳永逸解决这些问题。
JavaScript数据类型
在JavaScript中,数据类型可以分为以下两种:
- 基础数据类型:字符串(String)、数字(Number)、布尔(Boolean)、Undefined、Null 和 Symbol。
- 复杂数据类型:对象(Object)、数组(Array)、函数(Function)。
基础数据类型是不可变的,而复杂数据类型是可变的。
这意味着对于基础数据类型,一旦它们被创建,它们的值就不能被修改。当你对基础数据类型的变量进行操作时,实际上是创建了一个新的值。而复杂数据类型(对象和数组)在引用上是可变的,修改对象或数组会影响到引用它们的地方。它们存储的是引用,而不是实际的值。当你修改对象或数组时,实际上是在修改存储在变量中的引用,而不是创建一个新的引用。
注意:在复杂数据类型中,可能会导致在不同部分之间共享相同对象或数组的引用,因此一个地方的修改会影响到所有引用该对象或数组的地方。
数据类型判断
⭐ typeof 操作符
JavaScript 中最常见的数据类型判断方式之一是使用 typeof
操作符。该操作符返回一个字符串,表示给定变量的数据类型。在处理基础数据类型时,typeof
是一个简单而直观的选择。
console.log(typeof "Hello"); // 返回 "string"
console.log(typeof 123); // 返回 "number"
console.log(typeof true); // 返回 "boolean"
console.log(typeof undefined); // 返回 "undefined"
typeof
是一种简单的方式,特别适用于对基础数据类型的判断。即使变量未被声明,使用 typeof
也不会引发错误。
但是, typeof
在判断数据类型时存在一些限制。首先,它不适用于判断 null,因为 typeof null
返回 “object”,这是 JavaScript 语言本身的一个错误导致。其次,也不适用于复杂数据类型,如数组、对象等,typeof
无法区分它们。
console.log(typeof [1, 2, 3]); // 返回 "object"
console.log(typeof { acb: 123 }); // 返回 "object"
console.log(typeof null); // 返回 "object"(历史上的一个 bug)
此时!为了更准确地判断复杂数据类型,我们需要另外一种方式。。。
⭐ instanceof 操作符
instanceof
是 JavaScript 中用于检查对象是否是特定类型(或特定类型的实例)的操作符。它适用于自定义对象类型,instanceof
对于自定义对象类型的判断非常有效。
function CustomType() {}
var ctype = new CustomType();
console.log(ctype instanceof CustomType); // 返回 true,表示 ctype 是 CustomType 类型的实例
但是,instanceof
对基本数据类型和复杂数据类型,表现不佳!!!
// 复杂数据类型
const obj = {};
console.log(obj instanceof Object); // 返回 true
console.log([1, 2, 3] instanceof Array); // 返回 true,因为数组是对象的一种,Array 是其构造函数
console.log([1, 2, 3] instanceof Object); // 返回 true,数组也是 Object 类的实例
// 基础数据类型
console.log('Hello' instanceof String); // 返回 false,因为字符串是基本数据类型,不是 String 类的实例
console.log(true instanceof Boolean); // 返回 false,原因同上
console.log(123 instanceof Number); // 返回 false,原因同上
// 如果想要使用,需要通过构建函数包装。。。
const str = new String('Hello');
console.log(str instanceof String); // 返回 true,是的你没看错,是不是不方便
const num = new Number(123);
console.log(num instanceof Number); // 返回 true,是的你没看错,是不是不方便
instanceof
还存在多重引用问题,在 JavaScript 中,不同框架或窗口拥有各自的全局上下文,从而导致 instanceof
的不确定性。
当对象在一个框架中创建,并被传递到另一个框架中时,instanceof
的结果可能受到影响,因为每个框架都有自己的构造函数和原型链。这可能导致在一个框架中使用 instanceof
检查对象类型时,得到的结果在另一个框架中可能不同。
// 在框架 A 中定义一个构造函数
function MyClass() {}
// 在框架 A 中创建一个对象实例
const obj = new MyClass();
// 将对象传递到框架 B 中
console.log(objA instanceof MyClass);
// 在框架 A 中返回 true
// 在框架 B 中返回 false。这是因为在框架 B 中,MyClass 的构造函数和原型链是不同的。
解决这个问题的一种方法是使用 Object.prototype.toString.call
,它不依赖于具体的构造函数或原型链,而是直接检查对象的内部标识。
console.log(Object.prototype.toString.call(objA) === '[object MyClass]');
⭐ constructor 属性
constructor
是 JavaScript 中对象的一个属性,它指向对象的构造函数。可以通过检查对象的 constructor
属性,判断数据类型。constructor
属性的优势是能直观地表示对象的构造函数。
const obj = {};
console.log(obj.constructor === Object); // 返回 true
function CustomType() {}
var obj = new CustomType();
console.log(obj.constructor === CustomType); // 返回 true
但是在某些情况下,constructor
属性可能被修改(如序列化、反序列化JSON处理),判断不准确。其次对于基本数据类型,constructor
无法提供有效的判断。
const obj = {};
// 修改 constructor 属性
obj.constructor = function customObjConstructor() {};
console.log(obj.constructor === Object); // 返回 false
console.log(obj.constructor === customObjConstructor); // 返回 true
当然,对于基础数据数据类型来说,由于它们不是对象,因此并没有 constructor
属性。试图访问基本数据类型的 constructor
属性会导致 JavaScript 临时将其包装为相应的对象类型,然后访问其构造函数。
const num = 123;
// JavaScript 临时将基本数据类型包装为 Number 对象
console.log(num.constructor === Number); // 返回 true
const str = 'Hello';
// JavaScript 临时将基本数据类型包装为 String 对象
console.log(str.constructor === String); // 返回 true
在我们开发时候,为了处理数据类型,尤其是为了规遍掉所有可能的情况,以上方法可能存在一些不足。那么我们来看看 Object.prototype.toString.call()
方法的使用和优势。
⭐ Object.prototype.toString.call()
Object.prototype.toString.call()
方法是最可靠、最全面的数据类型判断方式。该方法返回一个表示对象类型的字符串,包含 "[object " 和 “]”,后接具体的数据类型。
console.log(Object.prototype.toString.call("Hello")); // 返回 "[object String]"
console.log(Object.prototype.toString.call(123)); // 返回 "[object Number]"
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([1, 2, 3])); // 返回 "[object Array]"
优势非常明显:
- 适用于所有数据类型:
Object.prototype.toString.call()
方法几乎可以适用于所有可能的数据类型,包括基本数据类型和复杂数据类型。 - 不易受篡改: 与
constructor
属性相比,Object.prototype.toString.call()
方法不容易被篡改,因此更加可靠。
如果说缺点的话,也就是呈现不直观"[object Array]"
,结果的字符串较长,方法的使用也是需要写很长的字符,但是我们可以封装一个函数,专门在开发中判断处理:
export function getDataType(value) {
return Object.prototype.toString.call(value).slice(8, -1);
}
// 示例用法
getDataType("Hello"); // 返回 "String"
getDataType(42); // 返回 "Number"
getDataType(true); // 返回 "Boolean"
getDataType(undefined); // 返回 "Undefined"
getDataType(null); // 返回 "Null"
getDataType([1, 2, 3]); // 返回 "Array"
getDataType(() => {}); // 返回 "Function"
⭐ Array.isArray() 方法
Array.isArray()
是专门用于判断对象是否为数组的方法。它是 ECMAScript 5 引入的,用于解决 instanceof
在处理多窗口环境中的问题。
var arr = [1, 2, 3];
console.log(Array.isArray(arr)); // 返回 true
大家也可以使用它来判断数组,很直观,但是不适用于其他数据类型,因为 Array.isArray()
只能用于判断数组。在处理复杂数据类型时,尤其是需要覆盖多种情况的判断时,Object.prototype.toString.call()
还是更可靠的解决方案。
特殊情况的处理
NaN 的判断
NaN
是一个特殊的数值,代表非数值。在 JavaScript 中,可以使用 isNaN()
函数来判断一个值是否是 NaN
。适用于 NaN 判断,直接、简单的方式来判断一个值是否是 NaN
。
console.log(isNaN(42)); // 返回 false
console.log(isNaN("Hello")); // 返回 true
注意事项:isNaN()
对于数字字符串的处理可能导致一些意外的结果。在需要判断是否为数字时,最好先将字符串转为数字再进行判断。
console.log(isNaN("42")); // 返回 false,因为 "42" 被隐式转换为数字 42
null 和 undefined 的判断
在 JavaScript 中,null
和 undefined
是两个特殊的值,表示缺失或未定义。
// 判断变量是否为 null 或 undefined
if (data === null || typeof data === 'undefined') {
// 处理 null 或 undefined 的情况
}
注意事项:
在一些情况下,可以使用 ==
来判断变量是否为 null
或 undefined
,但要谨慎使用,以避免类型转换带来的意外行为。
console.log(variable == 'undefined'); // 注意类型转换
// 最好采用 typeof 或者 Object.prototype.toString.call() 来判断
console.log(typeof undefinedVariable === 'undefined');
console.log(Object.prototype.toString.call(variable) === '[object Undefined]');
![](https://i-blog.csdnimg.cn/blog_migrate/92018620fe2a87590cdbc19f38b1e6cc.png)
实际情况下,我们如何选择?
在选择 JavaScript 数据类型判断的方法时,也需要综合考虑多个因素。
1、方法的适用范围
基础数据类型: 针对基础数据类型的判断,typeof
可以提供简单的方式,但需要注意其在判断 null
时的限制。
复杂数据类型: 对于复杂数据类型,尤其是数组和对象,Object.prototype.toString.call()
提供了更全面、更可靠的判断方式。
2、可维护性和可读性
使用直观、清晰的方法可以提高代码的可读性。例如,Array.isArray()
在判断数组时提供了更直观的方式。我认为代码中封装Object.prototype.toString.call()
,也是可读性很高的~~
3、可靠性
考虑方法的稳定性,Object.prototype.toString.call()
在多种情况下表现更为稳定,不易受到环境和数据的影响,比如constructor
属性在某些情况下可能被修改。
4、性能考虑
在大规模数据判断时,对于性能而言,Object.prototype.toString.call()
相对于 typeof
和 Array.isArray()
可能会稍显短板,因为它执行了更多的操作,包括字符串的拼接和截取。然而,这种差异在实际应用中并不总是非常显著,而且 Object.prototype.toString.call()
在提供更准确的类型信息上有其独特的优势。
原理剖析 Object.prototype.toString.call 🎉🎉🎉
Object.prototype.toString.call 是一个 JavaScript 方法,它可以用来获取对象的类型。它的语法是:
Object.prototype.toString.call(arg)
其中 arg 是要检查的对象。这个方法会返回一个形如 "[object Type]"
的字符串,其中 Type 是对象的类型。例如:
Object.prototype.toString.call("hello") // => "[object String]"
Object.prototype.toString.call([]) // => "[object Array]"
为什么说 Object.prototype.toString.call()
可以得到最可靠的数据类型呢?
因为它可以获取对象的内部 [[Class]] 属性,这个属性是一个字符串,表示对象的类型。这个属性是在对象创建时就确定的,不会随着对象的变化而变化。Object.prototype.toString.call 可以通过 call 方法,将任意对象作为 this 参数传入,然后返回该对象的 [[Class]] 属性值,形如 “[object Type]” 的字符串。
这样我们就可以根据不同的 Type 来判断对象的具体类型。
总结
平时我们代码开发时候,越清晰简洁的代码对我们越有利,另外我们也需要考虑方法的稳定性,确保判断结果的准确性,这里再次做个总结:
- typeof 操作符: 提供了简单直观的方式,特别适用于基础数据类型的判断。然而,在处理复杂数据类型和判断 null 时存在一些限制。
- instanceof 操作符: 用于判断对象是否属于特定类型,对于自定义对象类型较为有效,但在处理基础数据类型和多全局上下文时存在一些问题。
- constructor 属性: 指向对象的构造函数,提供直观的方式判断对象类型。然而,易受篡改且不适用于基础数据类型。
- 🎉🎉🎉 Object.prototype.toString.call(): 认为是最可靠的数据类型判断方式,适用于几乎所有数据类型,包括基础和复杂数据类型。
- Array.isArray(): 专用于判断对象是否为数组,提供直观的方式。在处理其他复杂数据类型时无法提供准确信息。
这里我还是强烈推荐Object.prototype.toString.call()
。当然,在需要考虑性能的场景下,选择更高效的方法,就另说了~
大家有什么想法???