js基础（一）：判断类型

目录

一、常见实例

判断是否为对象

判断对象是否为空对象

判断是否为数组

判断是否为数组是否为空数组

判断字符串为json

判断字符串是否为数字

判断某值为null或者为undefined

二、五大常见方法

1.typeof

2.Object.prototype.toString

3.$.type()

4.instanceof

5.constructor

---

一、常见实例

 

• 判断是否为对象

• let obj = {}
  
  // 1.Object.prototype.toString
  
  if (Object.prototype.toString.call(obj) === '[Object Object]') {
      console.log('对象！')
  }
  
  // 2.constructor
  
  if (obj.constructor === Object) {
      console.log('对象！')
  }
  
  // 3.$.type() 
  
  if ($.type(obj) === 'object') {
      console.log('对象！')
  }
  
  // 4.$.isPlainObject() , 用于判断指定参数是否是一个纯粹的对象
  
  if ($.isPlainObject(obj) === 'object') {
      console.log('对象！')
  }

• 判断对象是否为空对象

• let obj = {}
  
  // 1.JSON
  
  if (JSON.stringify(obj) === '{}') {
      console.log('空对象！')
  }
  
  // 2.Object.keys(), es6方法会返回一个由一个给定对象的自身可枚举属性组成的数组
  
  if (Object.keys(obj).length === 0) {
      console.log('空对象！')
  }
  
  // 3.循环
  
  for (var i in obj) { 
      return true // 不为空
  }
  return false // 空对象
  
  // 4. $.isEmptyObject(), 该对象没有属性可以通过for...in迭代
  
  if ($.isEmptyObject(obj)) {
      console.log('空对象！')
  }

   

• 判断是否为数组

  let arr = []
  
  // 1.Object.prototype.toString
  
  if (Object.prototype.toString.call(arr) === '[object Array]') {
      console.log('数组！')
  }
  
  // 2.constructor
  
  if (arr.constructor === Array) {
      console.log('数组！')
  }
  
  // 3.$.type() 
  
  if ($.type(arr) === 'array') {
      console.log('数组！')
  }
  
  // 4.Array.isArray, 当检测Array实例时, Array.isArray 优于 instanceof,因为Array.isArray能检测iframes
  
  if (arr instanceof Array === true) {
      console.log('数组！')
  }
  //Array.isArray是ES 5.1推出的，不支持IE6~8。假如不存在 Array.isArray()，则在其他代码之前运行下面的代码将创建该方法
  if (!Array.isArray) {
    Array.isArray = function(arg) {
      return Object.prototype.toString.call(arg) === '[object Array]';
    };
  }
  
  // 5.instanceof
  
  if (arr instanceof Array === true) {
      console.log('数组！')
  }

• 判断是否为数组是否为空数组

• let arr = []
  
  // 1.length，简易版，已知为数组
  
  if (arr && arr.length > 0) {
      console.log('不为空数组！')
  } else {
      console.log('空数组！')
  }
  
  // 2.Object.prototype.isPrototypeOf，测试一个对象是否存在于另一个对象的原型链上
  
  if (Object.prototype.isPrototypeOf(arr) && Object.keys(arr).length === 0) {
      console.log('空数组！')
  }
  
  // 3.Array.isArray，同样存在兼容问题
  
  if (Array.isArray(arr) && arr.length === 0) {
      console.log('空数组！')
  }
  

• 判断字符串为json

  function isJSON(str) {
      if (typeof str == 'string') {
          try {
              var obj=JSON.parse(str);
              if(typeof obj == 'object' && obj ){
                  return true; // 可转
              }else{
                  return false;// 不可转
              }
  
          } catch() {
              return false; // 不可转
          }
      }
      console.log('It is not a string!')
  }

• 判断字符串是否为数字

  let num = '3'
  
  // 1.isNaN, null、空格以及空串会被按照0来处理
  
  if ((!isNaN(num)) && num != null && num != '') {
      console.log('num为数字！')
  }
  
  // 2.正则
  
  function isNumber(val) {
      var regPos = /^\d+(\.\d+)?$/; //非负浮点数
      var regNeg = /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/; //负浮点数
      if(regPos.test(val) || regNeg.test(val)) {
          return true;
      } else {
          return false;
      }
  }

• 判断某值为null或者为undefined

  // jquery源码推荐写法，省代码
  var obj = {}
  if(obj.a == null) {
      //相当于obj.a === null || obj.a === undefined
  }

 

二、五大常见方法

 

1.typeof

操作符返回一个字符串，表示未经计算的操作数的类型，用于除null、对象和数组之外的通用类型的判断方法

question	answer
typeof    3（整数，小数，自然对数Math.LN2，正无穷大数Infinity） typeof    NaN	"number"
typeof    (function(){}) typeof    Math.sin === 'function'	"function"
typeof    undefined	"undefined"
typeof    '3' typeof    ''	string
typeof    true typeof    false	"boolean"
typeof    Symbol()（es6属性） typeof    Symbol.iterator	"symbol"
typeof    {} typeof    new Date()	"object"
typeof    []	"object"
typeof    null	"object"
typeof    /\d/（正则）	"object"

2.Object.prototype.toString

原生原型扩展函数，用来精确的区分数据类型，万能

question	answer
Object.prototype.toString.call(3) Object.prototype.toString.call(NaN)	"[object Number]"
Object.prototype.toString.call((function(){}))	"[object Function]"
Object.prototype.toString.call(undefined)	"[object Undefined]"
Object.prototype.toString.call('3')	"[object String]"
Object.prototype.toString.call(true)	"[object Boolean]"
Object.prototype.toString.call(Symbol())	"[object Symbol]"
Object.prototype.toString.call({})	"[object Object]"
Object.prototype.toString.call(new Date())	"[object Date]"
Object.prototype.toString.call([])	"[object Array]"
Object.prototype.toString.call(null)	"[object Null]"
Object.prototype.toString.call(/\d/)	"[object RegExp]"

 

3.$.type()

用于确定JavaScript内置对象的类型，并返回小写形式的类型名称，万能

question	answer
$.type(3) $.type(NaN)	number
$.type((function(){}))	function
$.type(undefined)	undefined
$.type('3')	string
$.type(true)	boolean
$.type(Symbol())	symbol
$.type({})	object
$.type(new Date())	date
$.type([])	array
$.type(null )	null
$.type(/\d/)	regexp

 

4.instanceof

该运算符用于测试构造函数的prototype属性是否出现在对象的原型链中的任何位置，用于检测引用类型的判断方法，针对Array和RegExp进行判断。

question	answer
[] instanceof Array	true
/\d/ instanceof RegExp	true
'' instanceof String	false
1 instanceof Number	false
true instanceof Boolean	false
null instanceof Object	false
{} instanceof Object （{}和function(){}都为Object，没法区分对象和方法）	true
function(){} instanceof Object （方法既是Object又是Function） function(){} instanceof Function	true

function Car(make, model, year) {
  this.make = make;
  this.model = model;
  this.year = year;
}
var auto = new Car('Honda', 'Accord', 1998);

console.log(auto instanceof Car);
// expected output: true

console.log(auto instanceof Object);

5.constructor

该属性返回对创建此对象的数组函数的引用，每个具有原型的对象都会自动获得constructor属性。

question	answer
new Number(3).constructor === Number	true
new Function().constructor === Function	true
''.constructor === String	true
new Boolean().constructor === Boolean	true
new Object().constructor === Object	true
new Date().constructor === Date	true
[].constructor === Array	true
new Error().constructor === Error	true

注意： 类继承时的问题

 function A(){};

 function B(){};

 A.prototype = new B(); //A继承自B

 var aObj = new A();

 alert(aobj.constructor === B) //true;

 alert(aobj.constructor === A) //false;

//instanceof方法中对象直接继承和间接继承的都会报true

alert(aobj instanceof B) //true;

alert(aobj instanceof A) // true;

//解决construtor的问题通常是让对象的constructor手动指向自己

aobj.constructor = A; //将自己的类赋值给对象的constructor属性

alert(aobj.constructor === A) // true;

alert(aobj.constructor === B) // false;基类不会报true了;

 

参考：typeof，instanceof，$.type()，$.isPlainObject()，判断为json