原生JS大揭秘—数据类型
JS中九个内置对象
在ECMAScript规范(ES5)中定义了六种数据类型:
其中原始值类型有5种,引用类型有1种
(一)Number (
有包装对象 - new Number()
)数值型,包括整形和浮点型
其中NaN,infinity都是Number类型
(二)String (
有包装对象 - new String()
)字符串类型,有两种表示方式,a: 双引号、b: 单引号。
在String.prototype原型上扩展了一些方法如toString()
、valueOf
、indexOf()
、chartAt()
、charCodeAt()
等等。
String()
方法可以将任意类型数据转成字符串。
在JS中有三种方法可以变量转成字符串
:
- variable.toString()
此方法对null和undefined不可以,因为他们没有对应的包装对象
- ""+variable
- String(variable)
(三)Boolean (
有包装对象 - new Boolean()
)1、只有两个值,
true
、false
,区分大小写
2、在JS的条件表达式或三目运算中,变量可以隐式转成Boolean值,
3、在JS中非Boolean类型的数据都可以转成Boolean类型,其中0
、-0
、null
、
undefined
、""
、NaN
等6种会转成false
,其余的都成true,即便是空对象{}
、空数组[]
、空函数function(){}
也是看做true
(四)Undefined (
没有包装对象
)只有一个值undefined,
没有任何属性和方法
,但是undefined不属于保留字或关键字,在低版本浏览器中undefined可以被修改,为了得到纯正的undefined,可以使用一元操作符void 0,那么在JS代码中可以让一个变量和void 0做比较,就可以准确判断出是否是undefined啦。
variable === undefined // 如果变量variable未声明,直接使用,则会报错,"Uncaught ReferenceError: variable is not defined"
typeof variable === 'undefined' // typeof操作符是唯一一个使用一个未声明的变量时是不会报错的(判断一个变量是否是undefined,推荐用此方法)
undefined === void 0 // true,void 0 可以得到纯正的undefined
在JS中有哪些情况会返回undefined ?
- 变量
只声明未赋值
(包括函数参数,没传参数时也是undefined) - 访问一个对象
不存在的属性
- 调用函数时
没有明确指定返回值
- 使用
void
操作符对任意合法的js表达式运算
- 变量
(五)Null (
没有包装对象
)只有一个值null,
没有任何属性和方法
,在JS最初设计时,表示期望赋值为一个对象,可以理解为一个空指针,所以用
typeof操作符检测时,返回object
typeof null // object
(六)Object
在JS中使用
typeof
操作符时,Array
、Date
、RegExp
的实例和Math
都是"object"
。
undefined
与 null
的区别大概5点
- null是JS的关键字,undefined不是
- 在es3中,undefined是可以进行读/写操作的。
在es5中得到修正,undefined是只读的,null从来都不可以修改
- typeof undefined // "undefined"
typeof null // "object" - 强转数字时,Number()
Number(undefined) -> NaN
Number(null) -> 0 - undefined
==
null // true 只判断值是否相等
undefined===
null // false 即判断值是否相等,也要判断类型是否相等
NaN
小结
NaN
(全称 Not a Number)表示不是一个数字
,是一个特殊的值,NaN
不等于任何值
(包括自身)。虽然是一个英文字符,但是它是number类型。类似的还有infinity
也是number类型
typeof Infinity // "number"
typeof NaN // "number"
NaN === NaN // false 自身比较
有哪些情况会得到NaN?
- 无穷大除无穷大
- 对负数做开方运算
- 算术运算符参与非数字的运算
- 字符串转成数字
因此不能使用==
或===
来判断一个变量是否是NaN,那么怎么办呢?
其实在JS我们可以通过一个全局函数isNaN()
来判断一个变量是否是NaN。但是这个isNaN()有缺陷,它无法100%精准检测出是否是NaN
,
解决方法:(可参考http://ourjs.com/detail/5383e...)
但是在ES5中,可以自己写方法来判断,
function _isNaN(num){return num !== num;
}
_isNaN("abc"); //
在ES6中,提供了Number.isNaN()可以准确检测出是否是NaN
typeof 操作符可以检测出6种类型,但是对数组、对象、null均返回object类型,所以typeof检测不准确
在JS中用于精准判断数据类型的方法有三种
- constructor
// 根据对象的constructor判断数据类型(undefined、null除外,两个类型没有对应的包装对象`)
function Person(){}console.log( p.constructor === Person);
console.log( p.constructor === Number );
console.log( p.constructor === String );
console.log( p.constructor === Boolean );
console.log( p.constructor === Object);
console.log( p.constructor === Function );
console.log( p.constructor === Date );
console.log( p.constructor === RegExp);
- instanceof
// 用于判断A的原型链中,是否存在B的原型
A instanceof B
function Person(){}
var p=new Person();
console.log( p instanceof Person ); // true
console.log( p instanceof Object ); // true
- toString
// 在Object对象的原型的toString方法
var p=10;
Object.prototype.toString.call(p) === '[object Number]'
var p='str';
Object.prototype.toString.call(p) === '[object String]'
var p=true;
Object.prototype.toString.call(p) === '[object Boolean]'
var p=undefined;
Object.prototype.toString.call(p) === '[object Undefined]'
var p=null;
Object.prototype.toString.call(p) === '[object Null]'
var p=[1,2,3];
Object.prototype.toString.call(p) === '[object Array]'
var p={name:"king"};
Object.prototype.toString.call(p) === '[object Object]'
var p=new Date();
Object.prototype.toString.call(p) === '[object Date]'
var p=/\d+/;
Object.prototype.toString.call(p) === '[object RegExp]'
var p=function(){}
Object.prototype.toString.call(p) === '[object Function]'
原生JS大揭秘—数据类型相关推荐
- 2020年最新最全的前端面试题整理----原生JS篇
前言 原生JS篇 JS是一种什么样的语言? 解释性脚本语言,代码不进行预编译 主要用来向HTML页面添加交互行为 可以直接嵌入HTML页面,但单独写成JS文件有利于结构和行为的分离 跨平台性,在绝大多 ...
- vue如何写原生js_纯技巧向:React, Vue, Rxjs 和原生 JS 代码大乱斗
前言 这是一篇纯技巧向的文章,跟一年多之前的<揭秘Vue-3.0最具潜力的API>一样[0],更少的背景铺垫,更多的代码,更多的 demo,更快的节奏. 让我们直接进入主题. 背景 前一阵 ...
- 原生JS 面试题 (基础)(概率大)
文章目录 1.面试题: 请描述一下 location.go(-1) 和 history.go(-1) 有什么区别 2.面试题:什么是 cookie? 如何回答! 3.面试题: 描述一下 cookie ...
- C#保留2位小数几种场景总结 游标遍历所有数据库循环执行修改数据库的sql命令 原生js轮盘抽奖实例分析(幸运大转盘抽奖) javascript中的typeof和类型判断...
C#保留2位小数几种场景总结 场景1: C#保留2位小数,.ToString("f2")确实可以,但是如果这个数字本来就小数点后面三位比如1.253,那么转化之后就会变成1.25. ...
- 原生js实现大屏数字上下滚动效果,支持随机多位数字
一文看懂大屏数字滚动 前言 一.html 二.js生成展示的元素 三.css实现样式 四.加入动画和定时器 前言 在大屏项目中经常需要实现那种数字上下滚动的效果,普通的数字随机滚动在UI组件(例如Vi ...
- 原生JS灵魂之问(中),看看你是否熟悉JavaScript?
笔者最近在对原生JS的知识做系统梳理,因为我觉得JS作为前端工程师的根本技术,学再多遍都不为过.打算来做一个系列,一共分三次发,以一系列的问题为驱动,当然也会有追问和扩展,内容系统且完整,对初中级选手 ...
- 蓝鸥原生JS:js的历史及JavaScript的优缺点
蓝鸥原生JS:js的历史及JavaScript的优缺点 蓝鸥零基础学习HTML5-html+css基础 http://11824614.blog.51cto.com/11814614/1852769 ...
- 原生 遍历_细品原生JS从初级到高级知识点汇总(三)
作者:火狼1 转发链接:https://juejin.im/post/5daeefc8e51d4524f007fb15 目录 细品原生JS从初级到高级知识点汇总(一) 细品原生JS从初级到高级知识点汇 ...
- js map遍历 修改对象里面的值_求职季之你必须要懂的原生JS(上)
点击上方"IT平头哥联盟",选择"置顶或者星标" 一起进步- 互联网寒冬之际,各大公司都缩减了HC,甚至是采取了"裁员"措施,在这样的大环境 ...
最新文章
- iOS SwiftUI篇-3 排版布局layout
- Collection View Programming Guide for iOS---(四)---Using the Flow Layout
- 第二次讲课内容(函数和快速幂)
- java薪资年龄交叉表_巧用参数实现交叉表行列互换
- 搭建简单Django服务并通过HttpRequester实现GET/POST http请求提交表单
- 根据周次显示日期范围_Elasticsearch根据日期价格范围搜索酒店且排序
- 活动目录安装方法(个人汇总)
- Web服务及http协议_学习笔记
- LoadRunner9 5新特性
- AppUI自动化中的图像识别的使用
- matlab实现模拟退火算法
- JetBrains PyCharm免费版
- 电脑怎么用自带录音器录制系统的声音
- 如何在SSH项目中布置多个定时任务?
- 电源完整性之DC-DC
- TEASLA M40安装问题记录
- R语言ggcharts包的dumbbell_chart函数可视化哑铃图(对比两个年份数据的差异)、scale_y_continuous函数中的labels参数自定义设置X轴坐标标签的格式
- 精确度,召回率,真阳性,假阳性
- Springboot期刊在线投稿系统74j50计算机毕业设计-课程设计-期末作业-毕设程序代做
- ssm+java计算机毕业设计大学生就业管理系统26cjn(程序+lw+源码+远程部署)
热门文章
- Pycharm回车之后不能换行或不能缩进的解决方法
- linux时间与日期函数,Shell中关于时间和日期的函数总结
- php文本域输出_如何在文本分类任务中Fine-Tune BERT
- 命令行删除mysql57_Ubuntu16.04彻底删除MySQL5.7 方法
- java levenshtein算法_DNA分析 拼字检查 语音辨识 抄袭侦测 - Levenshtein算法
- 解决Hadoop总是处于安全模式的问题
- Python学习笔记:闭包与作用域
- 【codevs2098】【Tyvj1625】化工厂装箱员,煞笔的人打煞笔的DP
- 17.立体匹配——动态规划公式(Dynamic Programming Formulation),二维网格上的相干立体_4
- bzoj1935 [Shoi2007]Tree 园丁的烦恼 二维偏序