关于前端:前端百题斩007js中必须知道的四种数据类型判断方法

写该系列文章的初衷是“让每位前端工程师把握高频知识点，为工作助力”。这是前端百题斩的第 7 斩，心愿敌人们关注公众号“执鸢者”，用常识武装本人的头脑。

js 有多种数据类型（Number（数值）、String（字符串）、Boolean（布尔值）、Null、Undefined、Symbol、Object、函数等），在开发过程中不免须要判断数据类型，本文总结了四种判断办法：

typeof是一个运算符，其有两种应用形式：（1）typeof(表达式)；（2）typeof 变量名；返回值是一个字符串，用来阐明变量的数据类型；所以能够用此来判断number, string, object, boolean, function, undefined, symbol 这七种类型，每种状况返回的内容如下表所示：(具体进阶可看前端百题斩【001】)

类型	后果
String	‘string’
Number	‘number’
Boolean	‘boolean’
Undefined	‘undefined’
Object	‘object’
function 函数	‘function’
Symbol	‘symbol’

小试牛刀

// 字符串
console.log(typeof('lili')); // string
// 数字
console.log(typeof(1)); // number
// 布尔值
console.log(typeof(true)); // boolean
// undefined
console.log(typeof(undefined)); // undefined
// 对象
console.log(typeof({})); // object
// 数组
console.log(typeof([])); // object
// null
console.log(typeof(null)); // object
// 函数
console.log(typeof(() => {})); // function
// Symbol 值
console.log(typeof(Symbol())); // symbol

instanceof运算符用于检测构造函数的 prototype 属性是否呈现在某个实例对象的原型链上, 返回值为布尔值，用于批示一个变量是否属于某个对象的实例。其语法如下所示：(具体进阶可看前端百题斩【001】)

object instanceof constructor

小试牛刀

const arr = [1, 2];
// 判断 Object 的 prototype 有没有在数组的原型链上
console.log(arr instanceof Object); // true
// 数组 arr 的原型
const proto1 = Object.getPrototypeOf(arr);
console.log(proto1); // []
// 数组 arr 的原型的原型
const proto2 = Object.getPrototypeOf(proto1);
console.log(proto2); // []
// Object 的 prototype
console.log(Object.prototype);
// 判断 arr 的原型是否与 Object 的 prototype 相等
console.log(proto1 === Object.prototype); // false
// 判断 arr 的原型的原型是否与 Object 的 prototype 相等
console.log(proto2 === Object.prototype); // true

该种判断形式其实波及到原型、构造函数和实例之间的关系，更深层次的解说将放到前面的内容，上面只须要简略理解一下这三者关系即可。

在定义一个函数（构造函数）的时候，JS 引擎会为其增加 prototype 原型，原型上有其对应的 constructor 属性指向该构造函数，从而原型和构造函数之间相互晓得对方。当构造函数实例化的时候，会产生对应的实例，其实例能够拜访对应原型上的 constructor 属性，这样该实例就能够理解到通过谁产生了本人，这样就能够在新对象产生之后理解其数据类型。

小试牛刀

const val1 = 1;
console.log(val1.constructor); // [Function: Number]
const val2 = 'abc';
console.log(val2.constructor); // [Function: String]
const val3 = true;
console.log(val3.constructor); // [Function: Boolean]

尽管该办法能够判断其数据类型，但存在一下两个毛病：

null 和 undefined 是有效的对象，因而是不会有 constructor 存在的，这两种类型的数据须要通过其余形式来判断。
函数的 constructor 是不稳固的，这个次要体现在自定义对象上，当开发者重写 prototype 后，原有的 constructor 援用会失落，constructor 会默认为 Object

toString() 是 Object 的原型办法，调用该办法，默认返回以后对象的 [[Class]]。这是一个外部属性，其格局为 [object Xxx]，其中 Xxx 就是对象的类型。所以利用Object.prototype.toString() 办法能够对变量的类型进行比拟精确的判断。该类型针对不同不同变量的类型返回的后果如下所示：

数据类型	后果
Number	[object Number]
String	[object String]
Object	[object Object]
Array	[object Array]
Boolean	[object Boolean]
Function	[object Function]
Null	[object Null]
Undefined	[object Undefined]
Symbol	[object Symbol]

利用该办法很容易构建一个鉴型函数，代码如下所示：

function type(target) {const ret = typeof(target);
    const template = {"[object Array]": "array", 
        "[object Object]":"object",
        "[object Number]":"number - object",
        "[object Boolean]":"boolean - object",
        "[object String]":'string-object'
    }
    if(target === null) {return 'null';}
    else if(ret == "object"){const str = Object.prototype.toString.call(target);
        return template[str];
    }
    else{return ret;}
}

小试牛刀

console.log(type({})); // object
console.log(type(123)); // number
console.log(type('123')); // string

1. 如果感觉这篇文章还不错，来个分享、点赞吧，让更多的人也看到

2. 关注公众号执鸢者，与号主一起斩杀前端百题。

关于前端:前端百题斩007js中必须知道的四种数据类型判断方法

7.1 typeof

7.2 instanceof

7.3 constructor

7.4 toString()