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 相关文章推荐
javascript indexOf函数使用说明
Jul 03 Javascript
js 函数的执行环境和作用域链的深入解析
Nov 01 Javascript
dess中一个简单的多路委托的实现
Jul 20 Javascript
最新的10款jQuery内容滑块插件分享
Sep 18 Javascript
JS Replace 全部替换字符的用法小结
Dec 24 Javascript
php基于redis处理session的方法
Mar 14 Javascript
通过jquery-ui中的sortable来实现拖拽排序的简单实例
May 24 Javascript
使用jquery获取url以及jquery获取url参数的实现方法
May 25 Javascript
JavaScript实现多栏目切换效果
Dec 12 Javascript
vue添加class样式实例讲解
Feb 12 Javascript
layui动态表头的实现代码
Aug 22 Javascript
使用npm命令提示: 'npm' 不是内部或外部命令,也不是可运行的程序的处理方法
May 14 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
用PHP程序实现支持页面后退的两种方法
2008/06/30 PHP
php curl post 时出现的问题解决
2014/01/30 PHP
php 多文件上传的实现实例
2016/10/23 PHP
php实现支持中文的文件下载功能示例
2017/08/30 PHP
ThinkPHP实现转换数据库查询结果数据到对应类型的方法
2017/11/16 PHP
PHP利用pdo_odbc实现连接数据库示例【基于ThinkPHP5.1搭建的项目】
2019/05/13 PHP
js使用eval解析json(js中使用json)
2014/01/17 Javascript
extjs 如何给column 加上提示
2014/07/29 Javascript
jQuery如何获取同一个类标签的所有值(默认无法获取)
2014/09/25 Javascript
jquery ajax 如何向jsp提交表单数据
2015/08/23 Javascript
JS获取元素多层嵌套思路详解
2016/05/16 Javascript
前端实现文件的断点续传(前端文件提交+后端PHP文件接收)
2016/11/04 Javascript
微信小程序 五星评分的实现实例
2017/08/04 Javascript
解决vue2中使用axios http请求出现的问题
2018/03/05 Javascript
简化vuex的状态管理方案的方法
2018/06/02 Javascript
微信小程序实现横向增长表格的方法
2018/07/24 Javascript
vue中 数字相加为字串转化为数值的例子
2019/11/07 Javascript
ElementUI中el-tree节点的操作的实现
2020/02/27 Javascript
vue+axios全局添加请求头和参数操作
2020/07/24 Javascript
Python实现连接两个无规则列表后删除重复元素并升序排序的方法
2018/02/05 Python
Python3.7中安装openCV库的方法
2018/07/11 Python
Python使用gRPC传输协议教程
2018/10/16 Python
Python求一批字符串的最长公共前缀算法示例
2019/03/02 Python
Python OpenCV 调用摄像头并截图保存功能的实现代码
2019/07/02 Python
Python使用itchat 功能分析微信好友性别和位置
2019/08/05 Python
python图片验证码识别最新模块muggle_ocr的示例代码
2020/07/03 Python
Skechers越南官方网站:来自美国的运动休闲品牌
2021/02/22 全球购物
个人优缺点自我评价
2014/01/27 职场文书
军训自我鉴定200字
2014/02/13 职场文书
食堂采购员岗位职责
2014/03/17 职场文书
开工典礼策划方案
2014/05/23 职场文书
奶茶店创业计划书
2014/08/14 职场文书
城管执法人员个人对照检查材料思想汇报
2014/09/29 职场文书
村主任“四风”问题个人对照检查材料思想汇报
2014/10/02 职场文书
导游词之徐州-云龙山
2019/09/29 职场文书
如何通过简单的代码描述Angular父组件、子组件传值
2022/04/07 Javascript