文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

JavaScrip简单数据类型隐式转换如何实现

2023-07-06 13:37

关注

今天小编给大家分享的是JavaScrip简单数据类型隐式转换如何实现,相信很多人都不太了解,为了让大家更加了解,所以给大家总结了以下内容,一起往下看吧。一定会有所收获的哦。

JavaScript是一种弱数据类型语言 ,在JavaScript中定义变量不需要提前指定变量类型,变量的数据类型是在程序运行过程中由JavaScript引擎动态决定,因而可以使用同一个变量来存储不同类型的数据(var、let、const),这也意味着它会自动转换值的数据类型,以便数据之间更加容易相互比较和操作。除去我们比较熟知的显式转换,JavaScript中的隐式转换更加需要理解和一定的经验。下面将为大家详细的列举一下JS隐式转换的各种情况。

在JavaScript中,数据类型的隐式转换主要有三种情况:

JavaScript隐式类型转换通常发生在以下情况:

JavaScrip隐式转换规则

JavaScript中隐式类型转换的机制是比较复杂的,涉及到了数据类型、操作符、运算顺序等多方面的因素。

当两个操作数具有不同的类型时,系统内部根据一系列规则来决定将其转换为相同的类型,这些规则包括:

另外:

JavaScrip简单数据类型隐式转换如何实现

JavaScrip类型转换详解

转换成Number类型

转为Number类型:++ / --(自增自减运算符) + - * / %(算术运算符) > < >= <= == != === !== (关系运算符)。null转换为数字为0undefinedNaN

简单数据转换数字对照:

原始数据类型转换之后的值
空字符 ''或""0
非空字符串将字符内的数据内容变为数据,如果还有其他符号中文等转为NaN
true1
false0
null0
undefinedNaN
NaN(不用转,typeof NaN 得到"number")

示例:

// 隐式转换为数字型的运算符// 算术运算符 - *  /   比较运算符  >   ==console.log(8 - '3') // 5console.log('1999' * '2') // 3998,此处两个string型全都得转换为number型console.log('35' - 34)  //1 console.log('35' - '34') //1console.log('40' / '2') //20console.log('35' % 2)  //1console.log('35' % '2') //1console.log(5 - undefined) //NaN 因为Undefined转为数字为NaNconsole.log(5 - null) //5console.log(44%('2a')) //NaN,其中,2a进行强转后为NaN,NaN参与运算返回NaNconsole.log('5'>'3') //true 此处直接比较的ASCII码。console.log(3 > '1')   // trueconsole.log(3 == '3')  // trueconsole.log(3 == '+3')  // true,此处的+号相当于是类型转换console.log(3 == '-3')  // falseconsole.log(3 == '*3')  // falseconsole.log(3 == '/3')  // falseconsole.log(3 == 'a3')  // falseconsole.log('a' == 97)  // falseconsole.log('a' > 'A')  // true 此处比较的是ASCII码,其中a为97 A为65,因此为trueconsole.log('a' > '')  // trueconsole.log('' == 0) //true// + 正号使用的时候,也会把字符串转换为 数字型console.log('123')  // '123'console.log(+'123')  // 123console.log(typeof +'123') // numberconsole.log(+'0x12' == 18) // trueconsole.log('55' + true) //'55true'// undefined、null、boolean类型转换为数字console.log(NaN == NaN) //false,NaN比较特殊,它自己不等于自己console.log(undefined == 0) //falseconsole.log(undefined == NaN) //falseconsole.log(undefined == null) //true,此处undefined和null值都为空,因此能够相等console.log(null == 0) //false  此处没有进行类型转换,因为null是一个值类型,它的数值就是null,我们在使用==时,会直接把null这个数值与0进行比较,结果为falseconsole.log(null === 0) // falseconsole.log(null >= 0) //false  null要进行数值比较,此处便会尝试转为number,则为0,结果为 trueconsole.log(false == null) //false 特殊情况,理论上都应该转换为0比较然后相等true,但实际是直接拿值比较,不会先转为为数字console.log(true == 1) //trueconsole.log(false == 1) //falseconsole.log(true > false) //true 先转化为1和0数字进行比较console.log(true + 1) // 2console.log(true + null) //1,其中true转换为1,null转换为0console.log(undefined + 1) // NaNconsole.log('5' - true) //4console.log('5' - false) //0//数组转换为数字console.log([9] == 9) //trueconsole.log([9,'a'] == 9) //false//特殊情况console.log({} == {}) // false,对象类型比的是地址,不同对象地址不同console.log([]==[])   // false,理由同上

转换为String类型

简单数据转换字符串对照:

原始数据类型转换之后的值
数字类型数字类型的字符表示
null&lsquo;null&rsquo;
undefined&lsquo;undefined&rsquo;
布尔类型true变&rsquo;true&rsquo;,false变&rsquo;false&rsquo;

此处注意点为-0转换为string类型为'0'

["a","b"]转换string类型为"a,b"

[]转换为string类型为""

转换为Boolean类型

数据逻辑判断逻辑运算之中会隐式转换为boolean类型

转换为布尔型:空字符、0、-0、undefined、null、false、NaN转换为布尔值后为false,其余为true

+ 号两边只要有一个是字符串,都会把另外一个转成字符串

连续使用两个非操作符(!!)可以将一个数强制转换为boolean类型,这在开发之中比较实用。

简单数据转换布尔型对照:

数据类型转换为true的值转换为false的值
String任何非空字符串空字符串(""或&rsquo;')
Number任何非零数字0和NaN
Object任何对象null
Undefined不适用undefined

示例:

//隐式转换为布尔型的运算符  !逻辑非console.log(!true)  // false console.log(!0)  // trueconsole.log(!'')  // trueconsole.log(!null) // trueconsole.log(!undefined)  // trueconsole.log(!NaN)  // trueconsole.log(!false)  // trueconsole.log(!'hello') // false

JavaScrip特殊操作符对类型转换的影响

!逻辑非运算符

!会将后面的数据先转成布尔值,然后取反

var a; //a = undefinedvar r = !!a; console.log(r) //false!!{} // true!!undefined // false!!null // false!!NaN //fales

== 相等运算符

比较操作符会为两个不同类型的操作数转换类型,然后进行严格比较。当两个操作数都是对象时,JavaScript会比较其内部引用,当且仅当他们的引用指向内存中的相同对象时才相等,即他们在栈内存中的引用地址相同。

类型相同

如果比较的是两个对象,则比较两个对象的指针是否指向同一个对象

let a = {}let b = {}a==b //falselet a = {}let b = a;a==b //true

类型不同

如果两边类型不同,则两边都尝试转成number类型。对于引用类型,先调用valueOf(),如果能转成数字,则进行比较。不能转成数字就调用toString()方法转成字符串。

tips:因为null是一个值类型,它的数值就是null,我们在使用==时,会直接把null这个数值与数值进行比较,而不是转换为0

console.log(3 == '3')  // trueconsole.log(3 == '+3')  // true,此处的+号相当于是类型转换console.log(3 == '-3')  // falseconsole.log(3 == 'a3')  // falseconsole.log(+'0x12' == 18) // trueconsole.log('' == 0) //trueconsole.log(null == 0) //false  此处没有进行类型转换,因为null是一个值类型,它的数值就是null,我们在使用==时,会直接把null这个数值与0进行比较,结果为falseconsole.log(NaN == NaN) //false,NaN比较特殊,它自己不等于自己console.log(undefined == 0) //falseconsole.log(undefined == NaN) //falseconsole.log(undefined == null) //true,此处undefined和null值都为空,因此能够相等

面试题

//问题1:console.log(new String('abc') == true)//flase//step1:右侧转成数字1,变成:new String('abc')==1//step2 new String('abc').valueOf()不是数字也不是字符串,再调用toString()'abc' == 1//step3:字符串转数字NaN == 1 //false,NaN和任何类型比较都为false//问题2:console.log({}==true)//false//step1:右侧转成数字{} == 1//step2 {}.valueOf()不是数字也不是字符串,再调用toString()'[object Object]' ==1  //step3:字符串转数字NaN == 1 //false,NaN和任何类型比较都为false//问题3:console.log([]==![])//true//step1:!优先级比==高,先转右边,[]是对象类型,转成布尔值为true,!true就是false[]==false//step2:右侧转成数字为0[]==0//step3:左侧是一个对象,valueOf()转出来不是字符也不是字符串,调用toString(),得到空字符串'' == 0//step4:字符串转成数字0 == 0 //true

比较运算符

字符串类型比较大小时,不进行类型转换,而是逐位比较ASCII码,第一位不同则返回结果,否则继续比较第二位,直到某一位不同为止。

字符串与数字或者boolean与数字比较时,会进行隐式数据类型转换

示例

console.log('5555555' < '6') //true,首先比较第一个字符串的第一个字符,如果不同直接返回结果console.log('5'>'3') //true,此处直接比较的ASCII码。console.log(3 > '1') // trueconsole.log('a' > 'A')  // true,此处比较的是ASCII码,其中a为97 A为65,因此为trueconsole.log('a' > '')  // trueconsole.log(null >= 0) //false,null要进行数值比较,此处便会尝试转为number,则为0,结果为 true

+ 算数运算符

+号作为一元操作符时,它就会将这个数转换为数字类型

+号作为二元操作符时

console.log(3 == '+3')  // true,此处的+号相当于是类型转换console.log('55' + true) //'55true'console.log(true + 1) // 2console.log(true + null) //1,其中true转换为1,null转换为0console.log(undefined + 1) // NaN

+ 号两边只要有一个是字符串,都会把另外一个转成字符串,此时+号为连接符

总结

JavaScrip简单数据类型隐式转换如何实现

关于JavaScrip简单数据类型隐式转换如何实现就分享到这里了,希望以上内容可以对大家有一定的参考价值,可以学以致用。如果喜欢本篇文章,不妨把它分享出去让更多的人看到。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     801人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     348人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     311人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     432人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     220人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯