使用 ES10 简化类型检测,免去繁琐的 typeof 判断

在编写前端程序时,我们经常需要对变量的类型进行检测,以确保程序的正确性和稳定性。而 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 判断。

示例代码

class MyClass {
  get [Symbol.toStringTag]() {
    return 'MyClass';
  }
}

const obj = new MyClass();
console.log(Object.prototype.toString.call(obj)); // [object MyClass]

console.log({} instanceof Object); // true

console.log(null instanceof Object); // false
console.log(undefined instanceof Object); // false

console.log((() => {}) instanceof Object); // true

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

来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/659f39b4add4f0e0ff7e7e20


纠错反馈