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 相关文章推荐
兼容IE/Firefox/Opera/Safari的检测页面装载完毕的脚本Ext.onReady的实现
Jul 14 Javascript
javascript 设计模式之单体模式 面向对象学习基础
Apr 18 Javascript
html文本框提示效果的示例代码
Jun 28 Javascript
JavaScript中判断原生函数检查function是否是原生代码
Sep 09 Javascript
实例详解JavaScript获取链接参数的方法
Jan 01 Javascript
JS计算输出100元钱买100只鸡问题的解决方法
Jan 04 Javascript
vue封装一个简单的div框选时间的组件的方法
Jan 06 Javascript
javascript中的闭包概念与用法实践分析
Jul 26 Javascript
JS模拟浏览器实现全局搜索功能
Sep 11 Javascript
jquery实现的放大镜效果示例
Feb 24 jQuery
js实现跳一跳小游戏
Jul 31 Javascript
Js跳出两级循环方法代码实例
Sep 22 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
php5.2.0内存管理改进
2007/01/22 PHP
NOD32 v2.70.32 简体中文封装版 提供下载了
2007/02/27 PHP
php的memcache类分享(memcache队列)
2014/03/26 PHP
PHP排序算法之简单选择排序(Simple Selection Sort)实例分析
2018/04/20 PHP
用jQuery实现检测浏览器及版本的脚本代码
2008/01/22 Javascript
JavaScript 读取元素的CSS信息的代码
2010/02/07 Javascript
读JavaScript DOM编程艺术笔记
2011/11/15 Javascript
PHP+jQuery实现随意拖动层并即时保存拖动位置
2015/04/30 Javascript
AngularJS的一些基本样式初窥
2015/07/27 Javascript
javascript简单进制转换实现方法
2016/11/24 Javascript
bootstrap表格分页实例讲解
2016/12/30 Javascript
yii form 表单提交之前JS在提交按钮的验证方法
2017/03/15 Javascript
mpvue小程序仿qq左滑置顶删除组件
2018/08/03 Javascript
js实现图片3D轮播效果
2019/09/21 Javascript
webpack+express实现文件精确缓存的示例代码
2020/06/11 Javascript
vue + el-form 实现的多层循环表单验证
2020/11/25 Vue.js
[09:43]DOTA2每周TOP10 精彩击杀集锦vol.5
2014/06/25 DOTA
python实现的用于搜索文件并进行内容替换的类实例
2015/06/28 Python
Python实现定时精度可调节的定时器
2018/04/15 Python
使用python3+xlrd解析Excel的实例
2018/05/04 Python
python打印文件的前几行或最后几行教程
2020/02/13 Python
如何在Python对Excel进行读取
2020/06/04 Python
Python爬虫过程解析之多线程获取小米应用商店数据
2020/11/14 Python
python实现银行账户系统
2021/02/22 Python
HTML5页面直接调用百度地图API获取当前位置直接导航目的地的实现代码
2018/03/02 HTML / CSS
Bulk Powders意大利:运动补充在线商店
2019/02/09 全球购物
OSPREY LONDON官网:英国本土皮具品牌
2019/05/31 全球购物
中国一家综合的外贸B2C电子商务网站:DealeXtreme(DX)
2020/03/10 全球购物
班级聚会策划书
2014/01/16 职场文书
cf战队收人广告词
2014/03/14 职场文书
英文投诉信格式
2015/07/03 职场文书
2019开业庆典剪彩仪式主持词!
2019/07/22 职场文书
导游词之江苏同里古镇
2019/11/18 职场文书
python3实现无权最短路径的方法
2021/05/12 Python
关于JavaScript回调函数的深入理解
2021/06/27 Javascript
php解析非标准json、非规范json的方式实例
2022/05/10 PHP