在编写前端程序时,我们经常需要对变量的类型进行检测,以确保程序的正确性和稳定性。而 JavaScript 中的类型判断通常使用 typeof 运算符,这种方法比较繁琐,需要写大量的 if 语句来进行判断。不仅如此,它的判断结果也不够准确,特别是对于一些复杂的数据类型或者自定义的对象类型无法准确判断。不过,ES10 提供了新的 API,可以让我们更加简单地进行类型检测,本文将会为大家介绍如何使用这些新的 API,来免去繁琐的 typeof 判断。
Symbol.toStringTag
JavaScript 中的所有内置对象都有一个非标准的内部属性 [[Class]],它用于描述对象的类型。例如,数组的 [[Class]] 属性是 "[object Array]",函数的 [[Class]] 属性是 "[object Function]"。而自定义对象的 [[Class]] 属性则是 "[object Object]",这种判断方式并不严谨。
ES6 引入了 Symbol.toStringTag 这个内置 Symbol,它允许我们自定义对象的 [[Class]] 属性。我们只需要定义一个 toStringTag 属性,它的值必须是一个字符串,它就会成为该对象的 [[Class]] 属性的一部分,如下所示:
class MyClass { get [Symbol.toStringTag]() { return 'MyClass'; } } const obj = new MyClass(); console.log(Object.prototype.toString.call(obj)); // [object MyClass]
这种类型判断方法相对 typeof 而言更加准确,并且也支持自定义对象的类型判断。
instanceof
instanceof 是 JavaScript 中一个经典的运算符,它用于检测一个对象是否为另一个对象的实例。例如:obj instanceof MyClass
。但是它也有缺点,无法处理基本数据类型或者 null 和 undefined。而 ES10 中新增的运算符 instanceofObject 可以解决这个问题:
console.log({} instanceof Object); // true console.log(null instanceof Object); // false console.log(undefined instanceof Object); // false console.log((() => {}) instanceof Object); // true console.log('hello' instanceof Object); // false
上面的例子中,可以看到 instanceofObject 对于 null 和 undefined 返回的都是 false,这样就可以避免在 typeof 中将它们判断为 object 类型的问题了。
Array.isArray
在 JavaScript 中,用 typeof 判断一个数组的类型是 object,这种判断方式并不能准确地表示数组的类型。ES6 新增了一个 Array.isArray 方法,可以用来判断一个值是否为数组类型。
console.log(Array.isArray([])); // true console.log(Array.isArray([1, 2, 3])); // true console.log(Array.isArray({})); // false console.log(Array.isArray(new Date())); // false
总结
本文介绍了 ES10 中的三种类型判断方法:Symbol.toStringTag、instanceofObject 和 Array.isArray。相比于 typeof,它们更加准确、方便并且不易出错,尤其是对于自定义对象的类型判断而言更加方便。在编写前端程序时,建议使用这些新的 API,来免去繁琐的 typeof 判断。
示例代码
-- -------------------- ---- ------- ----- ------- - --- ---------------------- - ------ ---------- - - ----- --- - --- ---------- ------------------------------------------------- -- ------- -------- -------------- ---------- -------- -- ---- ---------------- ---------- -------- -- ----- --------------------- ---------- -------- -- ----- --------------- -- --- ---------- -------- -- ---- ------------------------------- -- ---- ----------------------------- -- ----- -- ---- ------------------------------- -- ----- ----------------------------- --------- -- -----
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/659f39b4add4f0e0ff7e7e20