这是我参与8月更文挑战的第5天,活动详情查看:8月更文挑战
JS 数据类型是前端基本知识之一,也是面试过程中最常见的面试题目之一,当被问到相关的题目时,你是否只是笼统地介绍一遍各种类型呢,本篇文章带大家来详解 JS 的数据类型。
- 两种数据类型
- 数据类型的判断方法
- 数据类型的隐式转换
- number 、boolean、 string、null、 undefined、symbol(ES6新增)、bigInt(新标准,兼容性很差)
- 保存在 栈内存 中的简单数据段
- 数据是不可变的,即不能强行修改
- 没有原型链中的 属性
- 使用 可以检测基本数据类型
- 但是
- 得到检测错误是历史遗留问题,在 的最初版本中使用的是 32 位系统,为了性能考虑使用低位存储变量的类型信息, 开头代表是对象然而 表示为全零,所以将它错误的判断为 。
- Object (包含普通对象-Object,数组对象-Array,正则对象-RegExp,日期对象-Date,数学函数-Math,函数对象-Function)
- 引用类型正在创建时会分配两个空间
- 一块在 堆 上,储存引用类型本身的数据(当然数据量会比较大)
- 一块在 栈 上,储存对堆上数据的引用(存储堆上的内存地址,也就是指针)
- 引用类型是可变的:即
- 参数是值传递,不能修改引用
- 通过 检测最为精准
- typeof 返回值对应表
类型结果String"string"Number"number"Boolean"boolean"Undefined"undefined"Object、Array、RegExp、null、Date、Error"object"Function"function"Symbol(ES6新增)"symbol"
- instanceof运算符需要指定一个构造函数,或者说指定一个特定的类型,它用来判断这个构造函数的原型是否在给定对象的原型链上
- Number,String,Boolean没有检测出他们的类型,但是如果使用下面的写法则可以检测出来:
- 还需要注意和都返回了false,这是因为它们的类型就是自己本身,并不是创建出来它们,所以返回了false。
- 手动实现一个 方法
- 是 对象上的属性,指向构造函数
- 根据实例对象寻找属性的顺序,若实例对象上没有实例属性或方法时,就去原型链上寻找,因此,实例对象也是能使用 属性的。
- 可以通过 来获取每个对象的类型。
- 为了每个对象都能通过 来检测,需要以 或者 的形式来调用
对象转原始类型,会调用内置的[ToPrimitive]函数,对于该函数而言,其逻辑如下:
如果Symbol.toPrimitive()方法,优先调用再返回 调用valueOf(),如果转换为原始类型,则返回 调用toString(),如果转换为原始类型,则返回 如果都没有返回原始类型,会报错

- JS 中除了 '假' 值就是 '真' 值
- '假' 值共有七个
- undefined
- null
- false
- NaN
- ''
- 0
- -0
- 在条件判断的隐式转换中:"假" 值会转换为 false,"真" 值会转换为 true;
- 原因:
- JS的精确度区间 约为正负 2^53,超出限制会截断。所以你看到的 0.1 不是真的 0.1。
- 计算机无法识别十进制,JS会将十进制转换为对应的二进制(二进制即:0 和 1)。
- 0.1和0.2在转换成二进制后会无限循环,由于标准位数的限制后面多余的位数会被截掉,此时就已经出现了精度的损失,相加后因浮点数小数位的限制而截断的二进制数字在转换为十进制就会变成0.000004。
- 解决方式:高精度计算函数
- 关于这个问题的更详细解答都已经在这篇文章当中了--- 一文看懂 JS 中 0.1 + 0.2 !== 0.3
- 类型转换都是先 然后再
- 右边
- 由于 ! 优先级比 == 高,先执行 !, 所有 为 转 都是
- 得到 false
- 进行 相等性判断
- false 转化为数字 0
- 左边
- 执行 原始值 还是
- 执行 得到
- 转化为数字
所以: ,答案是 true
如果你觉得这篇文章对你有益,烦请点赞以及分享给更多需要的人!
欢迎关注【全栈道路】及微信公众号【全栈道路】,获取更多好文及免费书籍!
有需要【百度】&【字节跳动】&【京东】&【猿辅导】内推的也请留言哦,你将享受VIP级极速内推服务~
创建个性化的 Github 个人主页
面试官问你是什么元素时你怎么回答
特殊的JS 浮点数的存储与计算
[万字长文]百度和好未来面试经含答案 | 掘金技术征文
前端实用正则表达式&小技巧,一股脑全丢给你🏆 掘金技术征文|双节特别篇
冷门的 HTML tabindex 详解
几行代码教你解决微信生成海报及二维码
Vue3.0 响应式数据原理:ES6 Proxy
[前端面试]前端缓存问题看这篇,让面试官爱上你
如何优雅地画一条细线
[三分钟小文]前端性能优化-HTML、CSS、JS部分
[三分钟小文]前端性能优化-页面加载速度优化
[三分钟小文]前端性能优化-网络传输层优化
版权声明:
本文来源网络,所有图片文章版权属于原作者,如有侵权,联系删除。
本文网址:https://www.mushiming.com/mjsbk/8224.html