JS数据类型判断--避坑指南

dayday_up 发布于2019-08-23 16:30 / 3183人阅读

摘要：测试构造函数的属性是否出现在对象的原型链中的任何位置。是全局方法时使用的原型方法可不填全局方法支持和添加到数据类型的原型中，不支持和的可以替代使用方式全局方法原型方法测试代码原型方法不支持和，请用

1. 常用的typeof

对于array、object、null的判断是不友好的，可以看下图的执行结果。

var obj = {
  number:123,
  string: "123",
  bool: true,
  obj: {},
  arr: [],
  n: null,
  undef: undefined,
  fn: function () {}
}

for(key in obj) {
  console.log(key + ": " + typeof obj[key])
}

2. instanceof

instanceof测试构造函数的prototype属性是否出现在对象的原型链中的任何位置。
如果你了解原型链，你会知道原型链的复杂性，instanceof得到的值并不是固定不变的，它会沿着原型链查找，最明显的是所有的基本数据类型都继承与Object.protype.

[任何数据类型] instanceof Object
> true

如下图：

3.最终方案：Object.prototype.toString.call()

下面是兼容性方案最好、最全面、也是最有效的：
下面有两种实现方式(原型方法和全局方法)，可以根据自己的需要选择。

(function () {
  function isType(data,type) {
    // data是全局方法时使用的,原型方法可不填
    return Object.prototype.toString.call(data || this) === "[object " + type + "]"
  }

  // 全局方法支持null和undefined
  // window.isType = isType

  // 添加到数据类型的原型中，不支持null和undefined
  // ES6的proxy可以替代defineProperty
  Object.defineProperty(Object.prototype,"isType",{
    value:isType,
    writable:true,
    enumerable:false,
    configurable:true
  });
})()

使用方式：

var str = "abc";
// 全局方法
isType("String", str) // True

// 原型方法
str.isType("String")

测试代码：

var obj = {
  test: {
    number:123,
    string: "123",
    obj: {},
    bool: true,
    arr: [],
    n: null,
    undef: undefined,
    fn: function () {

    }
  }
}
// 原型方法不支持null和undefined，请用“===”
console.log(obj.test.number.isType("Number"))
console.log(obj.test.number.isType("String"))

console.log(obj.test.string.isType("String"))
console.log(obj.test.string.isType("Number"))

console.log(obj.test.obj.isType("Object"))
console.log(obj.test.obj.isType("Array"))

console.log(obj.test.arr.isType("Array"))
console.log(obj.test.arr.isType("Object"))


console.log(obj.test.fn.isType("Function"))
console.log(obj.test.fn.isType("Object"))

GPU云服务器云服务器 js 数据类型判断 js 判断数据类型 js数据类型判断 js判断数据类型

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103099.html

【ViewPager2避坑系列】瞬间暴增数个Fragment

摘要：前言最近我在关注的使用，期间一直基于官方的调试，今天遇到一个奇葩的问题，捉摸了半天最终找到原因，原来是中布局的问题，事后感觉有必要分享一下这个过程，一来可以巩固测量的知识，二来希望大家能避开这个坑阅读指南代码基于，看官老爷最好能下载前言最近我在关注ViewPager2的使用，期间一直基于官方的Demo调试android-viewpager2，今天遇到一个奇葩的问题，捉摸了半天最终找到原因，...

番茄西红柿 2019-05-23 15:17 评论0 收藏0
小程序webview使用避坑（因为开发者配置域名错误导致打开失败）

摘要：解决方案对浏览器进行判断，如果是小程序官方判断条件就跳过授权登录。这样就规避了访问非授权业务域名问题。问题小程序webview使用时出现了这样的错误提示前提条件：嵌入的页面域名已经申请过业务域名 showImg(https://segmentfault.com/img/bVYr90?w=876&h=277); 然后访问报如下错误 showImg(https://segmentfa...

shengguo 2019-08-21 17:37 评论0 收藏0
小程序webview使用避坑（因为开发者配置域名错误导致打开失败）

摘要：解决方案对浏览器进行判断，如果是小程序官方判断条件就跳过授权登录。这样就规避了访问非授权业务域名问题。问题小程序webview使用时出现了这样的错误提示前提条件：嵌入的页面域名已经申请过业务域名 showImg(https://segmentfault.com/img/bVYr90?w=876&h=277); 然后访问报如下错误 showImg(https://segmentfa...

MonoLog 2019-08-01 17:59 评论0 收藏0