JS面试题大坑之隐式类型转换实例代码


Posted in Javascript onOctober 14, 2018

1.1-隐式转换介绍

在js中,当运算符在运算时,如果两边数据不统一,CPU就无法计算,这时我们编译器会自动将运算符两边的数据做一个数据类型转换,转成一样的数据类型再计算

这种无需程序员手动转换,而由编译器自动转换的方式就称为隐式转换

例如1 > "0"这行代码在js中并不会报错,编译器在运算符时会先把右边的"0"转成数字0`然后在比较大小

1.2-隐式转换规则

转成string类型: +(字符串连接符) 2..转成number类型:++/--(自增自减运算符) + - * / %(算术运算符) > < >= <= == != === !=== (关系运算符)

 转成boolean类型:!(逻辑非运算符)

1.3-坑一:字符串连接符与算术运算符隐式转换规则混淆

• 常见面试题如下

console.log ( 1 + "true" );// ‘1true‘'
 console.log ( 1 + true );//2
 console.log ( 1 + undefined );// NaN
 console.log ( 1 + null );//1

• 原理分析

/*此类问题的坑: 将字符串连接符(+ : 只要+号两边有一边是字符串)与算术运算符(+:两边都是数字)的隐式转换搞混淆
 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

• 原理分析

//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运算

• 原理分析

JS面试题大坑之隐式类型转换实例代码

JS面试题大坑之隐式类型转换实例代码

/*复杂数据类型转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

• 原理分析

/*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面试题大坑之隐式类型转换实例代码

JS面试题大坑之隐式类型转换实例代码

JS面试题大坑之隐式类型转换实例代码

总结

以上所述是小编给大家介绍的JS面试题大坑之隐式类型转换实例代码,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
jQuery:delegate中select()不起作用的解决方法(实例讲解)
Jan 26 Javascript
JavaScript格式化日期时间的方法和自定义格式化函数示例
Apr 04 Javascript
在JavaScript中使用NaN值的方法
Jun 05 Javascript
jquery实现带渐变淡入淡出并向右依次展开的多级菜单效果实例
Aug 22 Javascript
如何防止JavaScript自动插入分号
Nov 05 Javascript
vue轮播图插件vue-concise-slider的使用
Mar 13 Javascript
JavaScript闭包原理与用法实例分析
Aug 10 Javascript
vue组件从开发到发布的实现步骤
Nov 11 Javascript
vue实现压缩图片预览并上传功能(promise封装)
Jan 10 Javascript
详解JS实现系统登录页的登录和验证
Apr 29 Javascript
Vue-CLI项目中路由传参的方式详解
Sep 01 Javascript
微信小程序实现同时上传多张图片
Feb 03 Javascript
JS中appendChild追加子节点无效的解决方法
Oct 14 #Javascript
详解ES6 Symbol 的用途
Oct 14 #Javascript
javascript实现文本框标签验证的实例代码
Oct 14 #Javascript
Vue+webpack项目配置便于维护的目录结构教程详解
Oct 14 #Javascript
单页面vue引入百度统计的使用方法示例详解
Oct 13 #Javascript
详解解决Vue相同路由参数不同不会刷新的问题
Oct 12 #Javascript
详解webpack loader和plugin编写
Oct 12 #Javascript
You might like
Yii配置文件用法详解
2014/12/04 PHP
php实现Linux服务器木马排查及加固功能
2014/12/29 PHP
CSS3画一个阴阳八卦图
2021/03/09 HTML / CSS
js下用层来实现select的title提示属性
2010/02/23 Javascript
javascript 自动填写表单的实现方法
2010/04/09 Javascript
Javascript实现重力弹跳拖拽运动效果示例
2013/06/28 Javascript
判断js对象是否拥有某一个属性的js代码
2013/08/16 Javascript
js二维数组定义和初始化的三种方法总结
2014/03/03 Javascript
复制网页内容,粘贴之后自动加上网址的实现方法(脚本之家特别整理)
2014/10/16 Javascript
JavaScript实现N皇后问题算法谜题解答
2014/12/29 Javascript
解决Jquery向页面append新元素之后事件的绑定问题
2015/03/16 Javascript
JS实现简易图片轮播效果的方法
2015/03/25 Javascript
jQuery中使用each处理json数据
2015/04/23 Javascript
jquery实现横向图片轮播特效代码分享
2015/11/19 Javascript
自制微信公众号一键排版工具
2016/09/22 Javascript
Javascript实现从小到大的数组转换成二叉搜索树
2017/06/13 Javascript
Nuxt.js踩坑总结分享
2018/01/18 Javascript
vue仿element实现分页器效果
2018/09/13 Javascript
Vue获取页面元素的相对位置的方法示例
2020/02/05 Javascript
JavaScript实现左右滚动电影画布
2020/02/06 Javascript
python基础教程之循环介绍
2014/08/29 Python
在Django中进行用户注册和邮箱验证的方法
2016/05/09 Python
python中os和sys模块的区别与常用方法总结
2017/11/14 Python
Win8下python3.5.1安装教程
2020/07/29 Python
弄懂这56个Python使用技巧(轻松掌握Python高效开发)
2019/09/18 Python
python jenkins 打包构建代码的示例代码
2019/11/29 Python
python实现三壶谜题的示例详解
2020/11/02 Python
jupyter notebook更换皮肤主题的实现
2021/01/07 Python
来自圣地亚哥的实惠太阳镜:Knockaround
2018/08/27 全球购物
Nike德国官网:Nike.com (DE)
2018/11/13 全球购物
电脑教师的教学自我评价
2013/11/26 职场文书
写给老师的保证书
2015/05/09 职场文书
2015暑期社会实践调查报告
2015/07/14 职场文书
2015年国庆节广播稿
2015/08/19 职场文书
小学2016年第十八届推普周活动总结
2016/04/05 职场文书
从np.random.normal()到正态分布的拟合操作
2021/06/02 Python