js教程_聊聊 typeof 和 instanceof 间有什么区别

 所属分类:web前端开发

 浏览:143次-  评论: 0次-  更新时间:2022-06-24
描述:更多教程资料进入js教程获得。 typeof和instanceof操作符都可用来判断数据类型,那么它们之间有什么差异?下面本篇文章就来带大家了解 typ...
更多教程资料进入js教程获得。 typeof和instanceof操作符都可用来判断数据类型,那么它们之间有什么差异?下面本篇文章就来带大家了解 typeof 和 instanceof ,聊聊它们的区别,希望对大家有所帮助!

typeofinstanceof操作符都是用来判断数据类型的,但是它们的使用场景却各不相同,其中一些细节也需要特别注意。接下来让我们一探究竟,彻底掌握该知识点,再也不惧面试官的提问。

typeof

typeof是一个一元运算符,放在一个运算数前面,这个运算数可以是任何类型。它返回一个字符串,说明运算数的类型。请看栗子:

const type =  typeof '中国万岁'; // string
typeof 666; // number
typeof true; // boolean
typeof undefined; // undefined
typeof Symbol(); // symbol
typeof 1n; // bigint
typeof () => {}; // function

typeof []; // object
typeof {}; // object
typeof new String('xxx'); // object

typeof null; // object

通过以上例子可以看出,typeof只能准确判断基本数据类型和函数(函数其实是对象,并不属于另一种数据类型,但也能够使用 typeof 进行区分),无法精确判断出引用数据类型(统统返回 object)。

有一点需要注意,调用typeof null返回的是object,这是因为特殊值null被认为是一个对空对象的引用(也叫空对象指针)。

如果想准确判断引用数据类型,可以用instanceof运算符。

instanceof

instanceof运算符放在一个运算数的后面,给定对象的前面。它返回一个布尔值,说明运算数是否是给定对象的实例:

const result = [] instanceof Array; // true

const Person = function() {};
const p = new Person();
p instanceof Person; // true

const message = new String('xxx');
message instanceof String; // true

区别

  • typeof 会返回一个运算数的基本类型,instanceof 返回的是布尔值

  • instanceof 可以准确判断引用数据类型,但是不能正确判断基本数据类型

  • typeof 虽然可以判断基本数据类型(null 除外),但是无法判断引用数据类型(function 除外)

扩展

Object.prototype.toString.call()

typeofinstanceof都有一定的弊端,并不能满足所有场景的需求。如果需要通用检测数据类型,可以使用Object.prototype.toString.call()方法:

Object.prototype.toString.call({}); // "[object Object]"
Object.prototype.toString.call([]); // "[object Array]"
Object.prototype.toString.call(666); // "[object Number]"
Object.prototype.toString.call('xxx'); // "[object String]"

注意,该方法返回的是一个格式为"[object Object]"的字符串。

封装函数

为了更方便的使用,我们可以将这个方法进行封装:

function getType(value) {
    let type = typeof value;
    if (type !== 'object') { // 如果是基本数据类型,直接返回
        return type;
    }
    // 如果是引用数据类型,再进一步判断,正则返回结果
    return Object.prototype.toString.call(value).replace(/^\[object (\S+)\]$/, '$1');
}

getType(123); // number
getType('xxx'); // string
getType(() => {}); // function
getType([]); // Array
getType({}); // Object
getType(null); // Null

【相关推荐:javascript视频教程、web前端】

以上就是聊聊 typeof 和 instanceof 间有什么区别的详细内容,更多请关注zzsucai.com其它相关文章!

 标签:
积分说明:注册即送10金币,每日签到可获得更多金币,成为VIP会员可免金币下载! 充值积分充值会员更多说明»

讨论这个素材(0)回答他人问题或分享使用心得奖励金币

〒_〒 居然一个评论都没有……

表情  文明上网,理性发言!