zoukankan      html  css  js  c++  java
  • JS中准确判断变量类型的方法

    这是一个高频面试题,我们开发中也进程会遇到,今天我们来实现一个函数getValType(val)用来获取一个变量的类型。从1. JS基础变量类型。2. Js中判断变量的函数。 3. 实现getValType函数。3个方面来分析实现。

    我们先定义一组变量来用下面的函数来测试:

    var allVarMap = {
     // 数字
     num:123,
     // Infinity
     num1: 1 / 0,
     // NaN
     num2: null / 0,
     // 字符串
     str: 'abcdef',
     // 布尔类型
     bool: true,
     // 数组
     arr :[1, 2, 3, 4],
     // json对象
     json :{name:'wenzi', age:25},
     // 函数
     func:function(){ console.log('this is function'); },
     // 箭头函数
     func1: () => {console.log('arrow function')},
     // undefined类型
     und:undefined,
     // null类型
     nul:null,
     // date类型
     date:new Date(),
     // 正则表达式
     reg :/^[a-zA-Z]{5,20}$/,
     // 异常类型
     error:new Error()
    }

    typeof判断变量类型

    typeof运算符用于判断对象的类型,但是对于一些创建的对象,它们都会返回object。我们用该函数来判断上面的结果:

    var results = []
    for (let i in allVarMap) {
        results.push(typeof allVarMap[i])
    }
    console.log(results.join())
    // number,number,number,string,boolean,object,object,function,function,undefined,object,object,object,object

    可以看到,NaNInfinity都检查为number类型,其他的 string,function,boolean,undefined包括箭头函数都能正确检查出来,但是对于reg,date,null都得到了object。看来还需要具体的判断。

    使用Object.prototype.toString.call

    定义:首先,取得对象的一个内部属性[[Class]],然后依据这个属性,返回一个类似于”[object Array]“的字符串作为结果(看过ECMA标准的应该都知道,[[]]用来表示语言内部用到的、外部不可直接访问的属性,称为“内部属性”)。利用这个方法,再配合call,我们可以取得任何对象的内部属性[[Class]],然后把类型检测转化为字符串比较,以达到我们的目的。
    我们看看下面的函数运行结果:

    var results = []
    for (let i in allVarMap) {
        results.push(Object.prototype.toString.call(allVarMap[i]))
    }
    console.log(results.join())
    // [object Number],[object Number],[object Number],[object String],[object Boolean],[object Array],[object Object],[object Function],[object Function],[object Undefined],[object Null],[object Date],[object RegExp],[object Error]

    实现getValType函数

    根据上面的分析,我们可以先用typeOf函数判断出基础类型number,string,function,boolean,undefined。然后如果结果是object,我们再用Object.prototype.toString.call来判断出具体的类型。

    var getVarType = function (val = 0) {
        var type = typeof val
        // object需要使用Object.prototype.toString.call判断
        if (type === 'object') {
            var typeStr = Object.prototype.toString.call(val)
            // 解析[object String]
            typeStr = typeStr.split(' ')[1]
            type = typeStr.substring(0, typeStr.length - 1)
        }
        return type
    }
    var results = []
    for (let i in allVarMap) {
        results.push(getVarType(allVarMap[i]))
    }
    console.log(results.join())
    // number,number,number,string,boolean,Array,Object,function,function,number,Null,Date,RegExp,Error

    可以看到,完美判断出了所有变量的类型,该函数可以再添加一些逻辑,判断一个变量是否是NaN,Infinity之类的特殊需求。

    总结

    typeOf能判断出一个变量的类型,但是只能判断出number,string,function,boolean,undefined,null和其他对象类型返回结果都为object.

    instanceof能判断出一个对象是否是另一个类的实例。

    Object.prototype.toString.call能判断出所有变量的类型,返回值为[Object ***]

  • 相关阅读:
    Python协程
    Python3常用标准库
    温故而知新--day3
    温故而知新--day2
    解决 WPF 绑定集合后数据变动界面却不更新的问题
    WPF 消息框 TextBox 绑定新数据时让光标和滚动条跳到最下面
    C# 枚举转列表
    真・WPF 按钮拖动和调整大小
    使用 GB28181.Solution + ZLMediaKit + MediaServerUI 进行摄像头推流和播放
    将 .NET Framework 项目转换为 .NET Standard 项目
  • 原文地址:https://www.cnblogs.com/shangguancn/p/14000917.html
Copyright © 2011-2022 走看看