JS数据类型判断有哪些方法,具体如何使用
Admin 2022-07-06 群英技术资讯 1227 次浏览
在这篇文章中,我们来学习一下“JS数据类型判断有哪些方法,具体如何使用”的相关知识,下文有详细的讲解,易于大家学习和理解,有需要的朋友可以借鉴参考,下面就请大家跟着小编的思路一起来学习一下吧。
本文总结了四种判断方法:
typeof是一个运算符,其有两种使用方式:(1)typeof(表达式); (2)typeof 变量名;返回值是一个字符串,用来说明变量的数据类型;所以可以用此来判断number, string, object, boolean, function, undefined, 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属性是否出现在某个实例对象的原型链上,返回值为布尔值,用于指示一个变量是否属于某个对象的实例。其语法如下所示:
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 会默认为 ObjecttoString() 是 Object 的原型方法,调用该方法,默认返回当前对象的 [[Class]] 。这是一个内部属性,其格式为[object Xxx] ,其中 Xxx 就是对象的类型。所以利用Object.prototype.toString()方法可以对变量的类型进行比较准确的判断。
该类型针对不同不同变量的类型返回的结果如下所示:

利用该方法很容易构建一个鉴型函数,代码如下所示:
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
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
目录1、携带普通类型参数2、携带复杂类型参数vue页面跳转并传参的八种方式方法一方法二方法三方法四方法五方法六方法七方法八1、携带普通类型参数字符串、数字等。path:要跳转新页面的路由链接query:要携带的参数let pathInfo = this.$router.resolve({ path:/product_
这篇文章主要为大家详细介绍了vue Element-ui表格实现树形结构表格,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
浅谈访问vue实例this指针的相关知识,一些朋友可能会遇到这方面的问题,对此在下文小编向大家来讲解一下,内容详细,易于理解,希望大家阅读完这篇能有收获哦,有需要的朋友就往下看吧!
时钟是我们查看时间的一种工具,很多人家家里都会摆放一个时钟,那么我们用代码能实现一个时钟效果吗?答案是可以用的,这篇文章主要教大家用JS代码配置CSS样式来实现一个动态的时钟效果,效果如下图所示,下面我们一起来学习下。
js中!的用法是比较灵活的,它除了做逻辑运算常常会用!做类型判断,可以用!与上对象来求得一个布尔值,
成为群英会员,开启智能安全云计算之旅
立即注册关注或联系群英网络
7x24小时售前:400-678-4567
7x24小时售后:0668-2555666
24小时QQ客服
群英微信公众号
CNNIC域名投诉举报处理平台
服务电话:010-58813000
服务邮箱:service@cnnic.cn
投诉与建议:0668-2555555
Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 ICP核准(ICP备案)粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008