首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JavaScript简单隐式转换

JavaScript简单隐式转换

作者头像
wade
发布2020-04-23 16:31:24
5530
发布2020-04-23 16:31:24
举报
文章被收录于专栏:coding个人笔记coding个人笔记

今天在帮后台写一个页面的时候,发现了一个问题,字符串的true或者false,怎么才能转换成布尔类型的?我毫不犹豫的用了Boolean,结果就是发现页面都显示的是true的效果。随后查了一下有没有方法转换,查到的居然都是去判断。

其实JavaScript的显式转换和隐式转换概念是一样的,都是对数据类型进行转换,显式的话是我们直接调用方法转换,比如直接:parseInt(),隐式转换则是内部进行转换然后执行,比如:1 - ‘1’。在搞懂隐式转换之前,们得先了解数据类型之间转换的基本规则。

对象类型类型(如:对象、数组)转换为原始类型的操作:

其实早之前分享过valueOf和toString的优先级了,valueOf()会把数据类型转换成原始数据类型,toString()会把数据类型转换成string类型,正常情况下,优先调用toString(),有运算操作的情况下valueOf()的优先级高于toString(),当调用valueOf()方法无法运算后还是会再调用toString()方法。当然,规则也有些是不同的,比如Date对象就是toString优先。

一定要注意一点,如果valueOf和toString都没有返回原始类型的值,则会抛出异常,报错primitive:

let obj = { 
 toString () { 
  return [] 
 }
}
Number(obj) // TypeError: Cannot convert object to primitive value

千万不能想着obj最后返回的是[],Number([])为0,一定要记住,进行转行成原始数据类型如果返回的不是原始数据类型,会报错。当然,这边是因为改写了方法才会报错。

其他类型转换为字符串类型:

其他数据类型转换成字符串应该是最简单的一个,都是直接变成字符串,比如null变成’null’,比如true变成’true’等等。

数字类型有些特殊的,比如3e33变成3e + 33,这些特殊数字我还是闹不清的。

数组变成字符串相当于调用join方法,逗号隔开,[1, 2, 3]转为’1, 2, 3',空数组变成空字符串。

数组的null和undefined会被当作空字符串处理,[null, undefined, 5]变成’,,5’。

普通对象会变成[object Object],这个应该很多人知道。

试了一下函数,函数直接就是变成函数字符串,然后不能执行了。

String(null) // 'null'
String(undefined) // 'undefined'
String(true) // 'true'
String(10) // '10'
String(3e33) // '3e+33'
String([1,2,3]) // '1,2,3'
String([]) // ''
String([null, undefined, 5]) // ',,5'
String({}) // '[object Objecr]'

其他类型转换成布尔类型:

这个估计很多人都知道,js中的假值只有false、null、undefined、空字符、0和NaN,其它值转为布尔型都为true:

Boolean([]) // true
Boolean({}) // true
Boolean(Infinity) // true

其他类型转换成数字类型:

其实跟布尔类型有点类似,null转为0,布尔型true和false被转为1和0,字符串如果是纯数字形式,则转为对应的数字,空字符转为0,其他都转为NaN,undefined转为NaN,数组和对象首先会被转为原始类型,也就是ToPrimitive,然后在根据转换后的原始类型按照上面的规则处理。

Number(null) // 0
Number('') // 0
Number(true) // 1
Number(false) // 0
Number('1') // 1
Number('1a') // NaN
Number(undefined) // NaN
Number([]) // 0
Number(['1']) // 1
Number([1, 2])// NaN
Number({}) // NaN

知道了这些显式转换的规则,接下去一定要知道各种运算符操作的时候的规则:

==宽松相等比较时:

布尔类型和其他比较会先转换成数字类型

false == 0 // true
true == 1 // true
true == 2 // false

数字类型和字符串类型比较,字符串类型会转成数字类型

0 == '' // true
1 == '1' // true
true == '1' // true
false == '' // true

对象类型和原始类型比较,会先转成原始类型

'[object Object]' == {} // true
 '1,2,3' == [1, 2, 3] // true

null和undefined宽松相等的结果为true,与其自身相等,但和其他所有的值都不相等

可以简单的理解,只要是数据类型不一样的比较,最终都会变成数字类型去比较。可以说比较运算> 、<、 >=、 <=、!=都是符合上面的规则的。

学到这边之后,发现JavaScript的运算操作还有另外的转换规则,比如+和-,然后运算优先级也非常的重要,比如:

function fn(){ 
 this.a = 1;
}
console.log(new fn());//fn {a: 1}
console.log(new fn);//fn {a: 1}
console.log(new fn().a);//1
console.log(new fn.a);//TypeError

因为.的操作是从左到右,且优先级跟new带参数列表的同级,所以new fn().a相当于(new fn()).a,而.的优先级高于new不带参数,所以fn.a报错。

所以之后会分享一个运算符的转换规则和常用的运算符优先级。

最后有个神奇的东西:

console.log(null > 0);   // false
console.log(null < 0);   // false
console.log(null >= 0);   // true
console.log(null <= 0);   // true
console.log(null == 0);   // false
console.log(null === 0);    // false

查了一些资料,说是遗留的语言bug。

(完)

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2019-07-26,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 coding个人笔记 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档