判断数据类型的六种方法
2024-01-23 本文已影响0人
简单tao的简单
1. typeof
let a;
console.log(typeof a) //undefined
console.log(typeof b) //undefined
console.log(typeof undefined) //undefined
console.log(typeof null) //object
console.log(typeof []) //object
console.log(typeof {}) //object
console.log(typeof function () { }) //function
console.log(typeof Symbol()) //symbol
console.log(typeof BigInt(1)) //bigint
console.log(typeof 1) //number
console.log(typeof 'a') //string
console.log(typeof true) //boolean
console.log(typeof false) //boolean
- 判断一个未声明的变量用 typeof 不会报错
console.log(typeof arr) //undefined
console.log(arr instanceof Array) //报错 Uncaught ReferenceError: arr is not defined
- typeof 无法分清一个变量是 null、数组、对象,因为这三种数据类型都返回 object
2. Array.isArray
Array.isArray(val) // true 代表为数组
var arr = [];
var arr2 = {};
function isArrayFn(value) {
if (typeof Array.isArray === "function") {
return Array.isArray(value);
} else {
return Object.prototype.toString.call(value) === "[object Array]";
}
}
console.log(isArrayFn(arr));// true
console.log(isArrayFn(arr2));// false
3. Array.prototype.isPrototypeOf()
Array.prototype.isPrototypeOf(arr) //true表示是数组,false不是数组
4. Object.getPrototypeOf(obj)
let arr = [];
let obj = {};
Object.getPrototypeOf(obj) === Object.prototype // true 代表为对象
Object.getPrototypeOf(arr) === Array.prototype // true 代表为数组
5. constructor
// 用字面量定义的 arr 和 obj 本身没有constructor属性,但它的原型上有
var obj = {}
var arr = [];
console.log(obj.constructor === Object); //true
console.log(arr.constructor === Array) //true
console.log([].constructor == Array); //true
console.log([].constructor == Object); //false
console.log({}.constructor == Object); //true
console.log("string".constructor == String); //true
console.log((123).constructor == Number); //true
console.log(true.constructor == Boolean); //true
- constructor属性被修改之后,就无法用这个方法判断数组是数组了,除非你能保证不会发生constructor属性被改写的情况,否则用这种方法来判断数组也是不靠谱的!
const a = [];
a.constructor = Object;
console.log(a.constructor === Array); // false 不靠谱
console.log(a.constructor === Object); // true
console.log(a instanceof Array); // true
console.log(Object.prototype.toString.call(a)); // "[object Array]"
console.log(Object.getPrototypeOf(a) === Array.prototype) //true
console.log(Object.getPrototypeOf(a) === Object.prototype) //false
console.log(Array.prototype.isPrototypeOf(a)) //true
console.log(Object.prototype.isPrototypeOf(a)) //true
6. instanceof
const a = [];
const b = {};
console.log(a instanceof Array); true
console.log(a instanceof Object); true
console.log(b instanceof Array); false
7. 通用检测数据类型 Object.prototype.toString
Object.prototype.toString({}) // "[object Object]"
Object.prototype.toString.call({}) // 同上结果,加上call也ok
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(function () { }) // "[object Function]"
Object.prototype.toString.call(null) //"[object Null]"
Object.prototype.toString.call(undefined) //"[object Undefined]"
Object.prototype.toString.call(/123/g) //"[object RegExp]"
Object.prototype.toString.call(new Date()) //"[object Date]"
Object.prototype.toString.call([]) //"[object Array]"
Object.prototype.toString.call(document) //"[object HTMLDocument]"
Object.prototype.toString.call(window) //"[object Window]"
Object.prototype.toString.call([]) === '[object Array]' // true
Object.prototype.toString.call([]) === '[object Object]' // false
Object.prototype.toString.call({}) === '[object Array]' // false
Object.prototype.toString.call({}) === '[object Object]' // true
了解了toString的基本用法,下面就实现一个全局通用的数据类型判断方法
function getType(obj){
let type = typeof obj;
if (type !== "object") { // 先进行typeof判断,如果是基础数据类型,直接返回
return type;
}
// 对于typeof返回结果是object的,再进行如下的判断,正则返回结果
return Object.prototype.toString.call(obj).replace(/^\[object (\S+)\]$/, '$1');
}
使用如下
getType([]) // "Array" typeof []是object,因此toString返回
getType('123') // "string" typeof 直接返回
getType(window) // "Window" toString返回
getType(null) // "Null"首字母大写,typeof null是object,需toString来判断
getType(undefined) // "undefined" typeof 直接返回
getType() // "undefined" typeof 直接返回
getType(function(){}) // "function" typeof能判断,因此首字母小写
getType(/123/g) //"RegExp" toString返回
typeof 和 instanceof 的区别
- typeof返回值是一个字符串,instanceof 返回值为布尔值
- typeof判断基础数据类型(null 除外),instanceof判断引用数据类型
- typeof 无法分清一个变量是 null、数组、对象,因为这三种数据类型都返回 object
- 判断一个未声明的变量用 typeof 不会报错,用其他方式会报错
constructor 和 instanceof 的区别
- instanceof 的作用是判断实例对象是否为构造函数的实例,实际上判断的是实例对象的proto属性与构造函数的prototype属性是否指向同一引用;返回布尔值
- constructor 的作用是返回实例的构造函数,即返回创建此对象的函数的引用。
- instanceof 找到的是实例在原型链中所有的构造函数,不容易找到直接创建实例的构造函数;
- constructor找到的是构造函数只有一个,就是直接创建这个实例的构造函数,所以用constructor找实例的构造函数更严谨。
[] instanceof Array //true
[] instanceof Object //true
[].constructor === Array //true
[].constructor === Object //false
- constructor属性被修改之后,就无法用这个方法判断数组是数组了,除非你能保证不会发生constructor属性被改写的情况,否则用这种方法来判断数组也是不靠谱的!
js 如何判断 null
在JavaScript中,可以使用以下几种方式判断一个值是否为null:
- 使用严格相等运算符(===)判断:
if (value === null) {
// 值为null时的逻辑
}
这种方式通过比较值和类型来进行判断,只有当值为null时才会返回true。
- 使用typeof运算符判断:
if (typeof value === 'object' && !value) {
// 值为null时的逻辑
}
当value的类型为object且值为null时,typeof运算符会返回"object",可以利用这一特性进行判断。
- 使用Object.is()方法判断:
if (Object.is(value, null)) {
// 值为null时的逻辑
}
Object.is()方法会比较两个值是否严格相等,与严格相等运算符(===)类似,当值为null时返回true。