JavaScript基础之封装检测数据类型的方法

2023-12-04 05:09:23

我们曾于上一篇文章《JS数据类型检测——四大常用方法和底层机制》中说明，JavaScript的变量没有固定的类型，每个变量的值都可以是任意数据类型，这被称为JavaScript的数据类型是动态的。而我们又常需要对不同类型的值进行不同的操作，如何准确的判断数据类型就显得非常重要。JavaScript中有内置的类型判断方法，typeof可以对常见类型进行判断，但难以进行更加详细的类型判断，且缺乏灵活性，于是封装公共的数据类型检测方法的需求就此诞生。

依据原理进行封装

1. typeof

typeof是最常用的数据类型判断方法，它可以判断基本类型和对象类型，但无法判断更详细的类型。

console.log(typeof 1); // "number"
console.log(typeof "hello"); // "string"
console.log(typeof true); // "boolean"
console.log(typeof null); // "object"
console.log(typeof undefined); // "undefined"
console.log(typeof Symbol("foo")); // "symbol"

2. instanceof

instanceof可以判断一个对象是否属于某个类。

console.log(1 instanceof Number); // false
console.log("hello" instanceof String); // false
console.log(true instanceof Boolean); // false
console.log(null instanceof Object); // false
console.log(undefined instanceof Object); // false
console.log(Symbol("foo") instanceof Symbol); // true

class Person {
  constructor(name) {
    this.name = name;
  }
}

const person = new Person("John Doe");
console.log(person instanceof Person); // true

3. 自定义类型判断方法

我们可以使用自定义类型判断方法来判断更详细的类型。

function isArray(value) {
  return Array.isArray(value);
}

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

function isFunction(value) {
  return typeof value === "function";
}

console.log(isArray([])); // true
console.log(isObject({})); // true
console.log(isFunction(function() {})); // true

参考jQuery源码进行封装

jQuery是一个非常流行的JavaScript库，它提供了许多有用的方法，其中就包括数据类型判断方法。我们可以参考jQuery源码中的数据类型判断方法来封装我们自己的公共方法。

function isArray(value) {
  return value instanceof Array;
}

function isObject(value) {
  return value instanceof Object;
}

function isFunction(value) {
  return value instanceof Function;
}

function isString(value) {
  return typeof value === "string";
}

function isNumber(value) {
  return typeof value === "number";
}

function isBoolean(value) {
  return typeof value === "boolean";
}

function isUndefined(value) {
  return typeof value === "undefined";
}

function isNull(value) {
  return value === null;
}

具体示例代码

// 检测数据类型
const value = "Hello world";

if (isArray(value)) {
  console.log("Value is an array");
} else if (isObject(value)) {
  console.log("Value is an object");
} else if (isFunction(value)) {
  console.log("Value is a function");
} else if (isString(value)) {
  console.log("Value is a string");
} else if (isNumber(value)) {
  console.log("Value is a number");
} else if (isBoolean(value)) {
  console.log("Value is a boolean");
} else if (isUndefined(value)) {
  console.log("Value is undefined");
} else if (isNull(value)) {
  console.log("Value is null");
} else {
  console.log("Value is of unknown type");
}

// 输出结果: Value is a string