美文网首页js css htmljavascriptalready
JavaScript 数据类型 和 判断数据类型的两种方式

JavaScript 数据类型 和 判断数据类型的两种方式

作者: 暴躁程序员 | 来源:发表于2022-05-31 15:02 被阅读0次

    js 数据类型

    1. 基本数据类型
      字符串(string)、数字(number)、布尔(boolean)、空(null)、未定义(undefined)symbol
    2. 引用数据类型
      对象(object)、数组(array)、函数(function),还有两个特殊的对象:正则(regexp)和日期(date)

    判断数据类型的两种方式

    方式一:使用typeofinstanceof判断数据类型
    1. typeof只能判断除了 null 以外的基础类型和函数数据类型,如果用来判断 null、对象、数组、日期、正则的数据类型,那么结果都是 object
    // typeof 判断基础数据类型
    console.log(typeof "123"); // string
    console.log(typeof 123); // number
    console.log(typeof true); // boolean
    console.log(typeof undefined); // undefined
    console.log(typeof null); // object
    console.log(typeof Symbol(123)); // symbol
    
    
    // typeof 判断引用数据类型
    console.log(typeof function () {}); // function
    console.log(typeof {}); // object
    console.log(typeof []); // object
    console.log(typeof new Date()); //object
    console.log(typeof new RegExp("hello world")); // object
    
    // instanceof 判断引用数据类型
    console.log({} instanceof Object); // true
    console.log([] instanceof Array); // true
    console.log(function () {} instanceof Function); // true
    console.log(null instanceof Object); // false
    console.log(new Date() instanceof Date) // true
    console.log(new RegExp("hello world") instanceof RegExp) // true
    console.log(new Date() instanceof Object); // true
    console.log(new RegExp("hello world") instanceof Object); // true
    
    1. 函数封装
      2.1. 只用 typeof 判断数据类型还不够,需要联合 instanceof才能判断所有数据类型
      2.2. 日期和正则数据,用 instanceof 判断数据类型时,即属于本身数据类型也属于 object数据类型,所以在使用条件判断过滤时要把 instanceof Object写在最下面,否则 日期和正则 返回的数据类型是 object
      2.3. null在使用typeof判断时属于object,在使用 instanceof 判断是否是Object的时候返回false,根据这个来区分最后的null
    function getDataType(data) {
      const dataType = typeof data;
      if (dataType !== "object") {
        return dataType;
      } else {
        if (data instanceof Array) {
          return "array";
        } else if (data instanceof Date) {
          return "date";
        } else if (data instanceof RegExp) {
          return "regexp";
        } else if (data instanceof Object) {
          return "object";
        } else {
          return "null";
        }
      }
    }
    
    console.log(getDataType("123")); // string
    console.log(getDataType(123)); // number
    console.log(getDataType(true)); // boolean
    console.log(getDataType(undefined)); // undefined
    console.log(getDataType(null)); // null
    console.log(getDataType(Symbol(123))); // symbol
    
    console.log(getDataType({})); // object
    console.log(getDataType([])); // array
    console.log(getDataType(function () {})); // function
    console.log(getDataType(new Date())); // date
    console.log(getDataType(new RegExp("Hi"))); // regexp
    
    方式二:Object.prototype.toString.call(data) 判断数据类型
    1. Object.prototype.toString.call(data) 可判断所有数据类型
    console.log(Object.prototype.toString.call("123")); // [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(Symbol())); // [object Symbol]
    console.log(Object.prototype.toString.call({})); // [object Object]
    console.log(Object.prototype.toString.call([])); // [object Array]
    console.log(Object.prototype.toString.call(function () {})); // [object Function]
    console.log(Object.prototype.toString.call(new Date())); // [object Date]
    console.log(Object.prototype.toString.call(new RegExp("hello world"))); // [object RegExp]
    
    1. 函数封装
    function getDataType(data) {
      return Object.prototype.toString.call(data).slice(7, -1).toLowerCase();
    }
    
    console.log(getDataType("123")); // string
    console.log(getDataType(123)); // number
    console.log(getDataType(true)); // boolean
    console.log(getDataType(undefined)); // undefined
    console.log(getDataType(null)); // null
    console.log(getDataType(Symbol(123))); // symbol
    
    console.log(getDataType({})); // object
    console.log(getDataType([])); // array
    console.log(getDataType(function () {})); // function
    console.log(getDataType(new Date())); // date
    console.log(getDataType(new RegExp("hello world"))); // regexp
    

    相关文章

      网友评论

        本文标题:JavaScript 数据类型 和 判断数据类型的两种方式

        本文链接:https://www.haomeiwen.com/subject/ditzcrtx.html