js常用判断数据类型方法以及优缺点 以及 instanceof 原理实现

1.typeof操作符:

使用typeof操作符可以判断一个值的数据类型。它返回一个表示数据类型的字符串。

  • 优点:typeof 操作符是一种简单、快速的方式来判断基本数据类型。它返回的结果是一个字符串,可以直接用于条件判断。
  • 缺点:对于引用类型(除了函数)的判断结果都是'object',无法细分具体的引用类型。同时,对于null的判断结果也是'object',不能准确判断null。
javascript 复制代码
var arr = [1, 2, 3];
var obj = { name: 'zhangsan', age: 19 };
var fn = function(){}

console.log(typeof 24);  // 输出: 'number'
console.log(typeof 'Hello');  // 输出: 'string'
console.log(typeof true); // 输出: 'boolean'
console.log(typeof arr);  // 输出: 'object'
console.log(typeof obj);  // 输出: 'object'
console.log(typeof fn);  // 输出: 'function'
console.log(typeof null); //输出: 'object'

2.instanceof操作符:

使用instanceof操作符可以判断一个对象是否是某个构造函数的实例。

instanceof 是 JavaScript 的一个操作符,用于检查某个对象是否是某个特定类的实例

  • 优点:instanceof操作符可以判断一个对象是否是某个构造函数的实例,可以用于自定义构造函数的判断。它可以处理继承关系,如果对象是某个构造函数的子类实例,也会返回true。
  • 缺点:instanceof操作符只能判断对象是否是特定构造函数的实例,不能判断基本数据类型的数据。此外,如果在多个窗口或框架中使用,可能会导致不准确的结果。
javascript 复制代码
// 手写一个方法实现 instanceof 原理
const instanceofs = (target, obj) => {
	let p = target;
	while(p){
		if(p == obj.prototype){
			return true
		}
		p = p.__proto__  
		// 循环p的原型,如果不相等,最后p.__proto__.__proto__.__proto__ 结果为null ,就会跳出循环
	}
	return false;
} 
console.log(instanceofs([1,2.3], Object) ) // true

3.constructor属性:

每个对象都有一个constructor属性,它引用了创建该对象的构造函数

  • 优点:constructor属性是每个对象都具有的属性,可以直接使用它来判断对象的构造函数。它适用于大多数对象类型的判断,包括基本数据类型和引用类型
  • 缺点:如果对象的constructor属性被修改或重写,判断结果可能不准确。此外,在继承关系中,可能会出现构造函数不一致的情况
javascript 复制代码
var num = 42;
var str = 'Hello';
var bool = true;
var arr = [1, 2, 3];
var obj = { name: 'John', age: 25 };

console.log(num.constructor === Number);   // 输出: true
console.log(str.constructor === String);   // 输出: true
console.log(bool.constructor === Boolean); // 输出: true
console.log(arr.constructor === Array);    // 输出: true
console.log(obj.constructor === Object);   // 输出: true

4.Object.prototype.toString方法:

使用Object.prototype.toString方法可以返回一个表示对象类型的字符串。

  • 优点:Object.prototype.toString方法返回的字符串包含了更详细的信息,可以准确判断对象的数据类型。它适用于所有的数据类型,包括基本数据类型和引用类型。
  • 缺点:调用Object.prototype.toString方法需要使用call方法来绑定this对象,使用起来相对复杂一些。
javascript 复制代码
var num = 42;
var str = 'Hello';
var bool = true;
var arr = [1, 2, 3];
var obj = { name: 'John', age: 25 };

console.log(Object.prototype.toString.call(num));   // 输出: '[object Number]'
console.log(Object.prototype.toString.call(str));   // 输出: '[object String]'
console.log(Object.prototype.toString.call(bool));  // 输出: '[object Boolean]'
console.log(Object.prototype.toString.call(arr));   // 输出: '[object Array]'
console.log(Object.prototype.toString.call(obj));   // 输出: '[object Object]'
相关推荐
月下点灯10 小时前
🔄记住这张图,脑子跟着浏览器的事件循环(Event Loop)转起来了
前端·javascript·浏览器
Rust语言中文社区10 小时前
【Rust日报】 丰田“先锋”选择了 Rust
开发语言·后端·rust
邹小邹-AI10 小时前
Rust + 前端:下一个十年的“王炸组合”
开发语言·前端·rust
ECT-OS-JiuHuaShan10 小时前
否定之否定的辩证法,谁会不承认?但又有多少人说的透?
开发语言·人工智能·数学建模·生活·学习方法·量子计算·拓扑学
東雪木10 小时前
变量与数据类型
java·开发语言
Lisonseekpan10 小时前
Java分词器深度评测与实战指南
java·开发语言·后端
百***354811 小时前
JavaScript在Node.js中的集群部署
开发语言·javascript·node.js
光影少年11 小时前
node.js和nest.js做智能体开发需要会哪些东西
开发语言·javascript·人工智能·node.js
南山安11 小时前
栈(Stack):从“弹夹”到算法面试题的进阶之路
javascript·算法·面试
xu_yule11 小时前
Linux_14(多线程)线程控制+C++多线程
java·开发语言·jvm