1.1-隐式转换介绍
在js中,当运算符在运算时,如果两边数据不统一,CPU就无法计算,这时我们编译器会自动将运算符两边的数据做一个数据类型转换,转成一样的数据类型再计算
这种无需程序员手动转换,而由编译器自动转换的方式就称为隐式转换
例如1 > "0"这行代码在js中并不会报错,编译器在运算符时会先把右边的"0"转成数字0`然后在比较大小
1.2-隐式转换规则
转成string类型: +(字符串连接符) 2..转成number类型:++/--(自增自减运算符) + - * / %(算术运算符) > < >= <= == != === !=== (关系运算符)
转成boolean类型:!(逻辑非运算符)
1.3-坑一:字符串连接符与算术运算符隐式转换规则混淆
"htmlcode">
console.log ( 1 + "true" );// ‘1true‘' console.log ( 1 + true );//2 console.log ( 1 + undefined );// NaN console.log ( 1 + null );//1
"htmlcode">
/*此类问题的坑: 将字符串连接符(+ : 只要+号两边有一边是字符串)与算术运算符(+:两边都是数字)的隐式转换搞混淆 1.字符串连接符+:会把其他数据类型调用String()方法转成字符串然后拼接 2.算术运算符+ :会把其他数据类型调用Number()方法转成数字然后做加法计算 */ //+是字符串连接符: String(1) + 'true' = '1true' console.log ( 1 + "true" );//1true //+是算术运算符 : 1 + Number(true) = 1 + 1 = 2 console.log ( 1 + true );//2 // +是算术运算符 : 1 + Number(undefined) = 1 + NaN = NaN console.log ( 1 + undefined );// NaN // +是算术运算符 : 1 + Number(null) = 1 + 0 = 1 console.log ( 1 + null );//1
1.4-坑二:关系运算符:会把其他数据类型转换成number之后再比较关系
常见面试题如下
console.log ( "2" > 10 );//false console.log ( "2" > "10" );//true console.log ( "abc" > "b" );//false console.log ( "abc" > "aad" );//true console.log ( NaN == NaN );//false console.log ( undefined == null );//true
"htmlcode">
//2.1 : 当关系运算符两边有一边是字符串的时候,会将其他数据类型使用Number()转换,然后比较关系 console.log ( "2" > 10 );//false Number('2') > 10 = 2 > 10 = false /*2.2: 当关系运算符两边都是字符串的时候,此时同时转成number然后比较关系 重点:此时并不是按照Number()的形式转成数字,而是按照字符串对应的unicode编码来转成数字 使用这个方法可以查看字符的unicode编码: 字符串.charCodeAt(字符下标,默认为0) */ console.log ( "2" > "10" );//true '2'.charCodeAt() > '10'.charCodeAt() = 50 > 49 = true console.log ( "2".charCodeAt () );//数字50 console.log ( "10".charCodeAt () );//数字49(默认返回第一个字符的编码,如果想要查询第二个字符可以传参下标) //多个字符从左往右依次比较 console.log ( "abc" > "b" );//false 先比较'a' 和 'b', 'a' 与 'b'不等,则直接得出结果 console.log ( "abc" > "aad" );//true 先比较'a'和'a',两者相等,继续比较第二个字符 'b' 与 'a' ,得出结果 console.log ( "a".charCodeAt () );//数字97 console.log ( "b".charCodeAt () );//数字98 //2.3 特殊情况(无视规则):如果数据类型是undefined与null,,得出固定的结果 console.log ( undefined == undefined );//true console.log ( undefined == null );//true console.log ( null == null );//true //2.4 特殊情况(无视规则):NaN与任何数据比较都是NaN console.log ( NaN == NaN );//false
1.5-坑三:复杂数据类型在隐式转换时会先转成String,然后再转成Number运算
/*复杂数据类型转number顺序如下 1.先使用valueOf()方法获取其原始值,如果原始值不是number类型,则使用 toString()方法转成string 2.再将string转成number运算 */ console.log ( [ 1,2] == '1,2' );//true 先将左边数组转成string,然后右边也是string则转成unicode编码运算 console.log ( [ 1, 2 ].valueOf () );// [1,2] console.log ( [ 1, 2 ].toString () );// '1,2' var a = {}; console.log ( a == "[object Object]" );//true console.log ( a.valueOf ().toString() );//[object Object] /*分析:逻辑与运算一假则假,要想if分支语句小括号条件成立,则必须要让a的值同时等于1 且 等于 2 且等于3 乍看之下,好像根本不可能实现,但是复杂数据类型会先调用valueOf()方法,然后转成number运算 而对象的valueOf()方法是可以重写的 */ var a = { i : 0,//声明一个属性i valueOf:function ( ) { return ++a.i;//每调用一次,让对象a的i属性自增一次并且返回 } } if (a == 1 && a == 2 && a == 3){//每一次运算时都会调用一次a的valueOf()方法 console.log ( "1" ); }
1.6-坑四:逻辑非隐式转换与关系运算符隐式转换搞混淆
前方高能,请注意~
空数组的toString()方法会得到空字符串,而空对象的toString()方法会得到字符串`[object Object]` (注意第一个小写o,第二个大写O哟)
常见面试题
//大坑 console.log ( [] == 0 );//true console.log ( ! [] == 0 );//true //神坑 console.log ( [] == ! [] );//true console.log ( [] == [] );//false //史诗级坑 console.log({} == !{});//false console.log({} == {});//false
"htmlcode">
/*1.关系运算符:将其他数据类型转成数字 2.逻辑非:将其他数据类型使用Boolean()转成布尔类型 * 以下八种情况转换为布尔类型会得到false * 0 、-0、NaN、undefined、null、''(空字符串)、false、document.all() * 除以上八种情况之外所有数据都会得到true */ /*原理 (1)[].valueOf().toString() 得到空字符串 (2)Number('') == 0 成立 */ console.log ( [] == 0 );//true /* 原理 :本质是 `![]` 逻辑非表达式结果 与 0 比较关系 (1)逻辑非优先级高于关系运算符 ![] = false (空数组转布尔得到true,然后取反得到false) (2)false == 0 成立 */ console.log ( ! [] == 0 );//true /*原理 :本质其实是 `空对象{}` 与 `!{}` 这个逻辑非表达式结果做比较 (1) {}.valueOf().toString() 得到字符串 '[object Object]' (2) !{} = false (3) Number('[object Object]') == Number(false) */ console.log({} == !{});//false //引用类型数据存在堆中,栈中存储的是地址,所以他们的结果是false console.log({} == {});//false /*原理:本质是 `空数组[]` 与 `![]` 这个逻辑非表达式结果做比较 (1) [].valueOf().toString() 得到空字符串 '' (2) ![] = false (3) Number('') == Number(false) 成立 都是0 */ console.log ( [] == ! [] );//true //引用类型数据存在堆中,栈中存储的是地址,所以他们的结果是false console.log ( [] == [] );//false console.log ( {}.valueOf ().toString () )//[object Object] console.log ( [].valueOf ().toString () );//'' 空字符串
总结
以上所述是小编给大家介绍的JS面试题大坑之隐式类型转换实例代码,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
暂无评论...
更新日志
2024年11月27日
2024年11月27日
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]