当前位置: 首页 > news >正文

三步搞定js类型转换

js的类型转换分为显示类型转换与隐形类型转换,但是只要遇到了类型转换总会满足以下几个要素:

1.toString(任何类型如何转换为字符串)

基本类型转换为字符串

null => "null"
undefined => "undefined"
true => "true"
0 => "0"
1.01 * 1000 * 1000 * 1000 * 1000 * 1000 * 1000 * 1000 => 1e+21
(当超过21位数字时,转换为指数的表达形式)

以上大家除了数字转换为字符串大家可能不太了解以外,其余的肯定没什么异议,关键是对象如何转换为字符串

复杂类型转换为字符串

当对象转换为字符串时,会调用对象的toString()方法,Object.prototype.toString总会返回内部[[class]](构造函数名称)的属性值,例如大家常见的对象类型判断:

Object.prototype.toString.call(new Object()) === '[object Object]'
Object.prototype.toString.call(new Date()) === '[object Date]'
Object.prototype.toString.call(new Function()) === '[object Function]'
复制代码

但是一些内部对象都对toString()方法进行了重写,例如:

[1,2,3].toString() === '1,2,3'
(function(){}).toString() === 'function(){}'
new Date().toString() ===' wed Mar 06 2019 23:25:32 GMT+0800 (中国标准时间)'
复制代码

我们自己也可以对toString()方法进行重写,例如:

const a = {
    toString: () => 'toString'
}
String(a) === 'toString'
'' + a === 'toString'
复制代码

2.toNumber

基本类型转换为数字

true => 1
false => 0
undefined => NaN
null => 0
"" => 0
"123" => 123
"123xx" => NaN

这里需要注意的一点是,当我们通过Number()与parseInt()进行转换时它们的表现不一样。

其实Number()属于显示类型转换,而parseInt()属于字符串解析,Number()方法转换为数字满足以上规范,而parseInt()则是逐字解析,直到遇到第一个不为数字的字符。parseInt()期望的参数是字符串,若不是,则先隐式转换为字符串(按照以上述式转换)。

复杂类型转换为数字

当复杂类型转换为字符串时,会首先将其转换为基本类型值,然后再按照上述规则转换,在转换过程当中会首先检查是否有valueOf()方法,如果有并且返回的是基本类型的值则按照上述规则转换,如果没有就使用toString()的返回值进行类型转换。例:

Number(new Date()) === new Date().valueOf() //当前时间的时间戳
Number({a:1}) === NaN //对象的valueOf()返回其本身,所以调用toString()返回'[object Object]',按照上述规则,其值为NaN
Number([1]) === 1 //数组valueOf()返回值仍为其本身,所以调用toString()返回'1'
Number([1,2]) === NaN //调用toString()返回'1,2'
复制代码

3.to Boolean

假值(falsy)

  • +0 -0 Nan
  • null
  • undefined
  • false
  • ""

除了假值之外的值基本上都是真值,为什么说基本上,因为有一些特殊情况,比如document.all,它是一个类数组对象,至于为什么是假值,这是javascript为了去兼容ie以前的代码,具体原因还是自行搜索吧,没有太大意义。

== 运算符

掌握以上规则之后,接下来就是如何运用了,说到这,那就不得不提 == 运算符了,因为它总是莫名其妙的就相等了。。。在这里我们着重来分析一下。

首先说下它与===的区别, == 允许在相当比较中进行类型转换,而 === 不允许 == 类型转换规则如下

1.字符串与数字之间的相等比较

字符串转换为数字后进行比较,例如:

12 == '12' //'12'转换为
复制代码

2.其它类型和布尔类型之间的相等比较

布尔类型会转换为数字进行比较,例如:

ture == 1 //true转换为1
true == '1' //true转换为1后,变为 1 == '1',满足第一条规范
复制代码

3.对象和非对象之间的相等比较

对象会转为基本类型去比较(转换规则如上所述),例如:

42 == [42] // [42].toString() == '42'
复制代码

null和undefined之间的相等比较

null == undefined  //true

<!--BUT-->
null == false //false
null == 0 //false
null == "" //false
undefined == false //false
undefined == 0 //false
undefined == "" //false
复制代码

看到这可能就会有人疑惑,0 "" false不都是假值吗,为什么不与null、undefined相等???

em....那我反问一下,如果它们相等,难道不会很奇怪吗???

接下来给大家考验一下大家

"0" == false //???
0 == false //???
"" == false //???
[] == false //???
"" == 0 //???
"" == [] //???
0 == [] //???
复制代码

相关文章:

  • 深入数组切片
  • Spring入门(一):创建Spring项目
  • 如何判断我们的代理ip是高匿
  • Java初学者最佳的学习方法以及会遇到的坑(内含学习资料)!
  • python发送邮件
  • VMware下ubuntu与Windows实现文件共享的方法(zhuan)
  • 接口测试与Postman
  • antiX 17.4 发布,轻量级 Linux 发行版
  • ansible一键部署脚本
  • Android后台任务(HandlerThread、AsyncTask、IntentService)
  • 为什么开发人员必须要了解数据库锁?
  • 前嗅ForeSpider脚本教程:基本语句
  • Redis保证事务一致性,以及常用的数据结构
  • LNMP基础知识及简单搭建(用于个人学习与回顾)
  • Gnu/Linux 链接XServer方法
  • 《Java8实战》-第四章读书笔记(引入流Stream)
  • axios 和 cookie 的那些事
  • Java Agent 学习笔记
  • jdbc就是这么简单
  • JS 面试题总结
  • laravel with 查询列表限制条数
  • LeetCode18.四数之和 JavaScript
  • mysql innodb 索引使用指南
  • Sequelize 中文文档 v4 - Getting started - 入门
  • Vue官网教程学习过程中值得记录的一些事情
  • Webpack 4 学习01(基础配置)
  • 产品三维模型在线预览
  • 分布式熔断降级平台aegis
  • 力扣(LeetCode)357
  • 前端每日实战:61# 视频演示如何用纯 CSS 创作一只咖啡壶
  • 如何实现 font-size 的响应式
  • 一些css基础学习笔记
  • 转载:[译] 内容加速黑科技趣谈
  • 自制字幕遮挡器
  • 曜石科技宣布获得千万级天使轮投资,全方面布局电竞产业链 ...
  • ​HTTP与HTTPS:网络通信的安全卫士
  • # 20155222 2016-2017-2 《Java程序设计》第5周学习总结
  • # 安徽锐锋科技IDMS系统简介
  • (04)odoo视图操作
  • (c语言)strcpy函数用法
  • (done) NLP “bag-of-words“ 方法 (带有二元分类和多元分类两个例子)词袋模型、BoW
  • (动手学习深度学习)第13章 计算机视觉---微调
  • (亲测成功)在centos7.5上安装kvm,通过VNC远程连接并创建多台ubuntu虚拟机(ubuntu server版本)...
  • (十五)Flask覆写wsgi_app函数实现自定义中间件
  • (一)pytest自动化测试框架之生成测试报告(mac系统)
  • (已更新)关于Visual Studio 2019安装时VS installer无法下载文件,进度条为0,显示网络有问题的解决办法
  • (原創) X61用戶,小心你的上蓋!! (NB) (ThinkPad) (X61)
  • (转)原始图像数据和PDF中的图像数据
  • .bat批处理(七):PC端从手机内复制文件到本地
  • .net 提取注释生成API文档 帮助文档
  • .Net7 环境安装配置
  • .net反编译工具
  • .NET框架类在ASP.NET中的使用(2) ——QA
  • 。Net下Windows服务程序开发疑惑
  • @SpringBootApplication 包含的三个注解及其含义