js面试题大坑——隐式类型转换

隐式转换介绍
  • 在js中,当运算符在运算时,如果两边数据不统一,CPU就无法计算,这时我们编译器会自动将运算符两边的数据做一个数据类型转换,转成一样的数据类型再计算,这种无需程序员手动转换,而由编译器自动转换的方式就称为隐式转换。
  • 例如1 > "0"这行代码在js中并不会报错,编译器在运算符时会先把右边的"0"转成数字0`然后在比较大小
隐式转换规则
  • 转成string类型: +(字符串连接符) 2..转成number类型:++/--(自增自减运算符) + - * / %(算术运算符) > < >= <= == != === !=== (关系运算符)
  • 转成boolean类型:!(逻辑非运算符)
坑一:字符串连接符与算术运算符隐式转换规则混淆

常见面试题如下

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

原理分析:

  • 此类问题的坑: 将字符串连接符(+ : 只要+号两边有一边是字符串)与算术运算符(+:两边都是数字)的隐式转换搞混淆
  • 字符串连接符+:会把其他数据类型调用String()方法转成字符串然后拼接
  • 算术运算符+ :会把其他数据类型调用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
坑二:关系运算符:会把其他数据类型转换成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

原理分析

  • 当关系运算符两边有一边是字符串的时候,会将其他数据类型使用>Number()转换,然后比较关系
    console.log ( "2" > 10 );//false Number('2') > 10 = 2 > 10 = >false

  • 当关系运算符两边都是字符串的时候,此时同时转成number,然后比较关系
    1.重点:此时并不是按照Number()的形式转成数字,而是按照字符串对应的unicode编码来转成数字。
    2.使用这个方法可以查看字符的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

  • 特殊情况(无视规则):如果数据类型是undefined与null,,得出固定的>结果
    console.log ( undefined == undefined );//true
    console.log ( undefined == null );//true
    console.log ( null == null );//true

  • 特殊情况(无视规则):NaN与任何数据比较都是NaN
    console.log ( NaN == NaN );//false

坑三:复杂数据类型在隐式转换时会先转成String,然后再转成Number运算

如何完善a,使其正确打印1

var = ???
if (a == 1 && a == 2 && a == 3)
      console.log ( "1" );
 }

原理分析:

  • 复杂数据类型转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" );

}

坑四:逻辑非隐式转换与关系运算符隐式转换搞混淆

前方高能,请注意~

空数组的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 () );//'' 空字符串



©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 195,898评论 5 462
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 82,401评论 2 373
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 143,058评论 0 325
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,539评论 1 267
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,382评论 5 358
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,319评论 1 273
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,706评论 3 386
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,370评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,664评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,715评论 2 312
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,476评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,326评论 3 313
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,730评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,003评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,275评论 1 251
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,683评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,877评论 2 335

推荐阅读更多精彩内容

  • 强制转换 强制转换主要指使用Number、String和Boolean三个构造函数,手动将各种类型的值,转换成数字...
    灯火阑珊Zone阅读 389评论 0 3
  • 运算符是处理数据的基本方法,用来从现有的值得到新的值。JavaScript 提供了多种运算符,本章逐一介绍这些运算...
    徵羽kid阅读 650评论 0 0
  • 01javascript语法规范 <!DOCTYPE html> javascript语法...
    ouyangqinbin阅读 1,297评论 0 0
  • 1、js数据类型 js中有7种数据类型,可以分为两类:原始类型、对象类型: 基础类型(原始值): Undefine...
    好奇男孩阅读 9,780评论 1 16
  • 使用Number函数,可以将任意类型的值转化成数值。 下面分成两种情况讨论,一种是参数是原始类型的值,另一种是参数...
    青春前行阅读 488评论 0 0