JS数据类型判断的⼏种常⽤⽅法
JavaScript 中常见数据类型有Number、String、Boolean、Object、Array、Json、Function、Date、RegExp、Error、undefined、Null等⼗⼏种。ES6还有新增的数据类型有Symbol、Set、Map等。在实际应⽤中,我们经常需要判断数据类型,现在我归纳⼏种⽅法,希望对⼤家有所帮助。
typeof 判断(最常⽤)
typeof 是 JS 提供的⼀个运算符,专门⽤来检测⼀个变量的类型。 typeof 有2种使⽤⽅式:typeof(表达式)和typeof 变量名,第⼀种是对表达式做运算,第⼆种是对变量做运算。
function doSomething() {
console.log('Hello World!');
}
console.log(typeof 1); // number
console.log(typeof 'Hello'); // string
console.log(typeof []); // object
console.log(typeof {}); // object
console.log(typeof doSomething); // function
console.log(typeof true); // boolean
console.log(typeof new Date()); // object
console.log(typeof new RegExp()); // object
console.log(typeof JSON.stringify({
name: 'zhencanhua'
})); // string
console.log(typeof null); // object
console.log(typeof undefined); // undefined
console.log(typeof (new Error('error!'))); // object
console.log(typeof a); // undefined
console.log(typeof Symbol()); // symbol
console.log(typeof new Set()); // object
console.log(typeof new Map()); // object
从上⾯打印结果可以看出,typeof 不能区分引⽤型数据的类型和 null。另我们可以使⽤ Array.isArray(arr) 将数组类型的数据从中筛选出来。
instanceof 判断(了解)
instanceof⽤来检测构造函数的prototype属性是否出现在某个实例对象的原型链上。语法:object(实例对象) instanceof constructor(构造函数)。是的话返回 true,否则返回 false。所以,instanceof运算符只能⽤作对象的判断。针对typeof不能判断的引⽤型数据,我们可以使⽤instanceof运算符。
let arr1 = [1, 2, 3];
let obj1 = {
name: '⼩明'
};
function Persion() { }
let persion1 = new Persion();
console.log(arr1 instanceof Array); // true
console.log(arr1 instanceof Object); // true,Array 是Object的⼦类
console.log(obj1 instanceof Object); // true
console.log(obj1 instanceof Array); // false
console.log(Persion instanceof Function, Persion instanceof Object); // true true
console.log(null instanceof Object); // false
console.log(persion1 instanceof Persion, persion1 instanceof Function, persion1 instanceof Object); // true false true
// String对象和Date对象都属于Object类型
let str1 = 'Hello';
let str2 = new String();
let str3 = new String('你好');
let myDate = new Date();
console.log(str1 instanceof String, str1 instanceof Object); // false, false
console.log(str2 instanceof String, str2 instanceof Object); // true, true
console.log(str3 instanceof String, str3 instanceof Object); // true, true
console.log(myDate instanceof Date, myDate instanceof Object); // true, true
从上⾯的判断可以看出,instanceof 的使⽤限制很多,⽽且还不能很清晰⽅便的判断出⼀个实例是数组还是对象或⽅法。
针对上⾯⽅法的弊端,我们可以使⽤ Object.prototype上的原⽣toString()⽅法来检测数据的类型。
String.call() 判断(最靠谱)
Object 是 JS 提供的原⽣对象, String对任何变量都会返回这样⼀个字符串"[object class]",class 就是 JS 内置对象的构造函数的名字。 call是⽤来改变调⽤函数作⽤域的。
String() 在toString⽅法被调⽤时执⾏下⾯的操作步骤:
1. 获取this对象的[[Class]]属性的值。(所以使⽤call来改变this的指向)
2. 将字符串"[object ",第⼀步获取的值, 以及 "]"拼接成新的字符串并返回。
[[Class]]是⼀个内部属性,所有的对象(原⽣对象和宿主对象)都拥有该属性。在规范中,[[Class]]是这么定义的: 内部属性的描述, [[Class]] 是⼀个字符串值,表明了该对象的类型。
读了上⾯的说明,⽤ call 的关键地⽅就在第1步,获取的是 this 对象,不加 call 改变作⽤域时 this 指向的是
Object.prototype。
function doSomething() {
console.log('Hello World!');
}
// 使⽤String.call来判断
console.log(String.call(1)); // [object Number]
console.log(String.call('Hello')); // [object String]
console.log(String.call(false)); // [object Boolean]
console.log(String.call({})); // [object Object]
console.log(String.call([1, 2, 3])); // [object Array]
console.log(String.call(new Error('error!'))); // [object Error]
console.log(String.call(new Date())); // [object Date]
console.log(String.call(new RegExp())); // [object RegExp]
console.log(String.call(doSomething)); // [object Function]
console.log(String.call(null)); // [object Null]
console.log(String.call(undefined)); // [object Undefined]
console.log(String.call(JSON.stringify({
name: 'zhencanhau'
}))); // [object String]
console.log(String.call(Math)); // [object Math]
console.log(String.call(Symbol('abc'))); // [object Symbol]
console.log(String.call(new Set())); // [object Set]
console.log(String.call(new Map())); // [object Map]
但在实际应⽤时我们只想获取返回的结果中数组的第⼆项,⽐如"[object Number]",我们只想要Number这段字符,那么我们可以写个函数进⾏过滤:
// 通过定义⼀个公共函数获取数据类型
function getTypeName(val) {
let str = String.call(val);
return /^\[object (.*)\]$/.exec(str)[1];
}
console.log(getTypeName(false)); // Boolean
console.log(getTypeName()); // Undefined
console.log(getTypeName(null)); // Null
上⾯的问题完美解决。
constructor 判断(⽐较常⽤)
每⼀个对象实例都可以通过constrcutor对象来访问它的构造函数。JS 中内置了⼀些构造函数:Object、Array、Function、Date、RegExp、String等。我们可以通过数据的 constrcutor 是否与其构造函数相等来判断数据的类型。
var arr = [];
var obj = {};
var date = new Date();
var num = 110;
var str = 'Hello';
var getName = function(){};
var sym = Symbol();
var set = new Set();
typeof array
var map = new Map();
但是这种⽅式仍然有个弊端,就是constructor所指向的的构造函数是可以被修改的。
function Name(name) {
this.name = name;
}
function Stuent(age) {
this.age = age;
}
// 将构造函数Name的实例赋给Student的原型,Student的原型的构造函数会发⽣改变,将不再指向⾃⾝。
Stuent.prototype = new Name('张三');
structor === Name; // true
structor === Stuent; // false
以上就是我在项⽬中⽤到过的数据类型的判断⽅法,具体使⽤哪⼀种,还需要根据⾃⼰的实际需求来判断选择。
到此这篇关于JS数据类型判断的⼏种常⽤⽅法的⽂章就介绍到这了,更多相关JS 数据类型判断内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持!
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论