重庆分公司,新征程启航

为企业提供网站建设、域名注册、服务器等服务

JavaScript判断数据类型的方法-创新互联

这篇文章主要为大家详细介绍了JavaScript判断数据类型的方法,代码比较详细全面,非常适合初学者入门,感兴趣的小伙伴们可以参考一下。

成都创新互联公司是一家专注于成都网站建设、成都做网站与策划设计,三江侗网站建设哪家好?成都创新互联公司做网站,专注于网站建设十年,网设计领域的专业建站公司;建站业务涵盖:三江侗等地区。三江侗做网站价格咨询:18982081108

1、 常用的typeof

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

JavaScript判断数据类型的方法

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

如下图:

JavaScript判断数据类型的方法

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

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

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

  // 添加到数据类型的原型中,不支持null和undefined
    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'))

JavaScript判断数据类型的方法

以上就是JavaScript判断数据类型的方法,代码示例简单明了,如果在日常工作遇到此问题。通过这篇文章,希望你能有所收获,更多详情敬请关注创新互联网站制作公司行业资讯频道!


分享标题:JavaScript判断数据类型的方法-创新互联
文章分享:http://cqcxhl.com/article/dhgpjs.html

其他资讯

在线咨询
服务热线
服务热线:028-86922220
TOP