js深入系列七(类型判断)

138 阅读2分钟

参考文章

参考文章

参考文章

1. es6之前,js有六种数据类型:

  • Undefined
  • Null
  • Boolean
  • Number
  • String
  • Object

2. typeof

语法:

typeof operand
or
typeof (operand)

返回值有七种:number, boolean, string, undefined, object, function, symbol

常见返回类型:

// number
typeof(10);
typeof(NaN);
//NaN在JavaScript中代表的是特殊非数字值,它本身是一个数字类型。
typeof(Infinity);
// boolean
typeof(true);
typeof(false);
// string
typeof("abc");
// undefined
typeof(undefined);
typeof(a);//不存在的变量
// object
对象,数组,null返回object
typeof(null);
typeof(window);
typeof([])
// function 函数对象
typeof(String);
typeof(Object)
typeof(Array);
typeof(Boolean);
typeof(Function);
typeof(Date);
typeof function(){} === 'function';
typeof class C{} === 'function'
typeof Math.sin === 'function';
typeof new Function() === 'function';
// symbol
typeof Symbol() // ES6

缺点很明显,没办法判断数组

3. 使用Object.prototype.toString检测对象

ES1就支持的方法,故并无兼容性大碍,并且返回值为字符串

Object.prototype.toString.call(1) // "[object Number]"
Object.prototype.toString.call('1') // "[object String]"
Object.prototype.toString.call(true) // "[object Boolean]"
Object.prototype.toString.call(undefined) // "[object Undefined]"
Object.prototype.toString.call(null) // "[object Null]"
Object.prototype.toString.call({}) // "[object Object]"
Object.prototype.toString.call([]) // "[object Array]"
Object.prototype.toString.call(new Date) // "[object Date]"
Object.prototype.toString.call(new Error) // "[object Error]"
Object.prototype.toString.call(/a/) // "[object RegExp]"
Object.prototype.toString.call(function a(){}) // "[object Function]"
Object.prototype.toString.call(Math) // "[object Math]"
Object.prototype.toString.call(JSON) // "[object JSON]"
Object.prototype.toString.call(new Map) // "[object Map]"
Object.prototype.toString.call(new Set) // "[object Set]"
Object.prototype.toString.call(Symbol()) // "[object Symbol]"

var promise = new Promise((resolve, reject) => {})
Object.prototype.toString.call(promise) // "[object Promise]"

function a() {
    console.log(Object.prototype.toString.call(arguments)); 
}
a(); // [object Arguments]

4. 用Array.isArray()判断数组

// 以下返回true
Array.isArray([]);
Array.isArray([1]);
Array.isArray(new Array());
// 鲜为人知的事实:其实 Array.prototype 也是一个数组。
Array.isArray(Array.prototype);

//以下返回false
Array.isArray(); 

5. 判断空对象

// jQuery提供了 isEmptyObject 方法来判断是否是空对象
function isEmptyObject( obj ) {
    var name;
    for ( name in obj ) {
        return false;
    }
    return true;
}

其实所谓的 isEmptyObject 就是判断是否有属性,for 循环一旦执行,就说明有属性,有属性就会返回 false,但:

console.log(isEmptyObject({})); // true
console.log(isEmptyObject([])); // true
console.log(isEmptyObject(null)); // true
console.log(isEmptyObject(undefined)); // true
console.log(isEmptyObject(1)); // true
console.log(isEmptyObject('')); // true
console.log(isEmptyObject(true)); // true

如果要判断{}这种空对象,可以再加Object.prototype.toString一起判断

instanceof

instanceof运算符用于测试构造函数的prototype属性是否出现在对象的原型链中的任何位置

代码示例:

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);
// expected output: true

可以用来判断数组

数组也是对象,要判断一个Object是不是数组,如果这个Object的原型链上能够找到Array构造函数的话,那么这个Object应该及就是一个数组,如果这个Object的原型链上只能找到Object构造函数的话,那么它就不是一个数组

const a = [];
const b = {};
console.log(a instanceof Array);//true
console.log(a instanceof Object);//true,在数组的原型链上也能找到Object构造函数
console.log(b instanceof Array);//false