CoderBlog

# 类型判断

基本类型：String、Number、Boolean、Symbol、Undefined、Null

引用类型：Object

# 1.typeof

对一个值使用 typeof 操作符会返回下列字符串之一：

  • number 表示值为数值；

  • boolean 表示值为布尔值；

  • string 表示值为字符串；

  • symbol 表示值为符号、

  • undefined 表示值未定义；

  • object 表示值为对象：除 function 以外的对象都会被识别成 object；另外 null 也会识别成 object（历史包袱 (opens new window)）

  • function 表示值为函数；

typeof ''; // string 有效
typeof 1; // number 有效
typeof Symbol(); // symbol 有效
typeof true; //boolean 有效
typeof undefined; //undefined 有效
typeof null; //object 无效
typeof [] ; //object 无效
typeof new Function(); // function 有效
typeof new Date(); //object 无效
typeof new RegExp(); //object 无效
1
2
3
4
5
6
7
8
9
10

# 2.instanceof

instanceof 是用来判断 A 是否为 B 的实例

两个方法的差异性：

  • instanceof 可以准确地判断复杂引用数据类型，但是不能正确判断基础数据类型；
  • typeof 也存在弊端，它虽然可以判断基础数据类型（null 除外），但是引用数据类型中，除了 function 类型以外，其他的也无法判断。

# 3.constructor

undefined和null没有contructor属性

console.log(bool.constructor === Boolean);// true

console.log(num.constructor === Number);// true

console.log(str.constructor === String);// true

console.log(arr.constructor === Array);// true

console.log(obj.constructor === Object);// true

console.log(fun.constructor === Function);// true

console.log(Symbol.constructor === Symbol);// true

console.log(haoxl.constructor === Student);// false

console.log(haoxl.constructor === Person);// true
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

constructor有两个作用，一是判断数据的类型，二是对象实例通过 constructor 对象访问它的构造函数。需要注意，如果创建一个对象来改变它的原型，constructor就不能用来判断数据类型了：

function Fn(){};
 
Fn.prototype = new Array();
 
var f = new Fn();
 
console.log(f.constructor===Fn);    // false
console.log(f.constructor===Array); // true
1
2
3
4
5
6
7
8

# 4.Object.prototype.toString.call()

需要注意的是，但是它不能检测非原生构造函数的构造函数名。

不同数据类型的 Object.prototype.toString 方法返回值如下。

  • 数值：返回 [object Number]。
  • 字符串：返回 [object String]。
  • 布尔值：返回 [object Boolean]。
  • undefined：返回 [object Undefined]。
  • null：返回 [object Null]。
  • 数组：返回 [object Array]。
  • arguments 对象：返回 [object Arguments]。
  • 函数：返回 [object Function]。
  • Error 对象：返回 [object Error]。
  • Date 对象：返回 [object Date]。
  • RegExp 对象：返回 [object RegExp]。
  • 其他对象：返回 [object Object]。
function foo(){};

Object.prototype.toString.call(1);  '[object Number]'

Object.prototype.toString.call(NaN); '[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(Symbol());'[object Symbol]'

Object.prototype.toString.call(foo);  '[object Function]'

Object.prototype.toString.call([1,2,3]); '[object Array]'

Object.prototype.toString.call({});'[object Object]'
// 可以包装一下，判断数据类型函数
function toRawType (value) {
  return Object.prototype.toString.call(value).slice(8, -1)
}

toRawType({}) //  Object
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

img

判断js数据类型的四种方法 (opens new window)

# 5.常用方法

https://zhuanlan.zhihu.com/p/129642585 (opens new window)

  • 判断数组： Array.isArray()

  • 确定一个值是否为 NaN：isNaN()或Number.isNaN

isNaN() 只要不是number就会返回 true，Number.isNaN 更准确，只判断NaN为true

  • 判断DOM元素
isElement: function(obj){
  return !!(obj && obj.nodeType === 1);
}
1
2
3
  • 判断对象
function isObject(value) {
    var type = typeof value
    return value != null && (type == 'object' || type == 'function')
}
1
2
3
4
  • 判断纯对象

https://q.shanyue.tech/fe/js/409.html (opens new window)

https://yanni4night.github.io/js/2018/02/06/is-plainobject.html (opens new window)

← 错误类型 →