js 隐式数据类型转换


本文重点介绍3个问题

1.<,>等类似比较运算符的数据类型转化规则 如1>'2' 结果为什么

2.==运算符类型转化规则  1==‘2’ 结果是什么

3.+运算符的类型转化规则  let obj={};let test= obj==3;test 是什么。



要了解这些知识,有些基础知识要掌握

1.要知道数据类型转化的标准是什么 ,其实就是转化为各个运算符期望的操作数类型

例如乘法运算符 * 要求两边操作数是数值,如果不是数值就要转化为数值,如果不能转化为数值 代码就报错


2.知道期望的数据类型后,就要知道各个数据类型如何转化为期望的数据类型


3.如果操作数两边是引用类型, 引用类型如何转换为原始值数据类型。

如let obj={};let test=obj+1,test 等于多少, 这个时候就看对象类型{}转换为什么了。

带着问题我们开始正式介绍

一.各个数据类型彼此的转化关系

请看下图 出自<<js权威指南>>第49页

通过这个表可以简单知道 undefined转化为数值是NaN,字符串是'undefined',以后显式转化查表就可以了



二.各运算符期望的数据类型

下图是我从<<js权威指南>>上的截图,通过这图 能够对隐式转化了解很多

A      结合性 L 从左到右,R从右到左;

N      标识操作数的个数

类型  标识运算符期望的数据类型,不是期望的时会转化期望的

→  标识运算结果类型

1.参考这个表 很容易得出

let a=''*2;//a等于0,''转化为数值0,乘号期望两边是数值类型 所以转化为数值

let b=2 in {2:2}// b等于true ,2转化为字符串'2',in要求左是字符串,右是对象,所以左操作数转为字符串'2'

2.+  ,>, ==  有点复杂 需要单独说明.他们对操作数类型的期望就比较复杂 ,

3.从图中就可以看出  +,>操作数类型  数值与字符串都可以 ,那问题来了 什么时候转数字什么时候转字符串呢;

4.== 运算符更加复杂 他的操作数类型可以是任何类型,都是肯定要求两边的操作数类型一样 ;要满足这条规律 就必须知道

两边操作数步一致时 ,应该谁转成谁。



三.引用类型转化为原始值的规则

1.引用类型通过调用toString 或valueOf转原始值。如果这两个方法都不能转原始值就会报错

列如 let obj={

    toString:function(){

      console.log('字符串被执行')

      return {};

    },

    valueOf:function(){

      console.log('数值被执行')

      return {};

    }

  }

let test=obj+1;//结果是  报错

列如  let obj={

    toString:function(){

      console.log('字符串被执行')

      return ‘123’;

    },

    valueOf:function(){

      console.log('数值被执行')

      return 456;

    }

  }

let test=obj+1;//结果是 test等于 457 ,valueOf被执行,为什么结果不是调用toString呢 看下面规律

2..参与运算符时 优先使用valueOf,如果得不到原始值 才调用toString.

3.显示转换为字符串时 才优先调用toString,列如

let obj={

    toString:function(){

      return '123';

    },

    valueOf:function(){

      console.log('数值被执行')

      return 456;

    }

  };

String(obj); //结果为'123' 显示转换为字符串 结果就调用toString 结果就是‘123’

基础知识介绍完成,现在开始进入难点

四.比较运算符(>,<  )

有一条基本规律 比较运算符的两边类型只能是数值或字符串,所以最后的转换就是要么转换为字符串 要么转换为数值。下面是具体的规律

1.如果有一个操作数是数值或转换后是数值,则必定把另外一个操作数值转换为数值 然后进行数值比较

列如

2.如果有一个操作是字符串,另外一个操作数只有是字符串或引用类型转换后是字符串 才能进行字符串的比较

例如

obj2>'a122'是abj2转换为'abcd'了,然后进行了字符串的比较

列如 let obj35={

    toString:function(){

      return 'string';

    },

    valueOf:function(){

    return 123;

    }

  };

obj35>='123.00' 结果为true; 说明obj35调用valueOf转换为数值123 了,后面的字符串'123.00'转换为数值123了,所以结果才为true. 这里特别看出 ,转换后只有两边都是字符串才能进行字符串的比较,否则就转换为数值进行比较

3.如果两个数值都不是数值或字符串,而是其他的原始值,则这两个操作数会转换为数值后进行比较

总结:参与比较运算的 ,两个操作数中只要有一个是数值或是类型转换后能够成为数值,都会把另外一个操作数转换为数值后进行比较。两边类型不相同时 优先转换为数值进行比较.只有两个类型都是字符串或对象类型转换后能够满足两个都是字符串时才按照字符串比较

五.+运算符类型转化

1.已知操作数中有一个是字符串,另外一个操作数就一定转化为字符串

例如 123+'123' 结果是'123123';

let b={};let c=b+'123'; //c结果是 "[object Object]123"


2.已知一个操作数是数值时,

a.如果另外一个操作数是原始值类型,就一定转化为数值进行运算。

例如 true+1结果就是2,undefined+1等于NAN;  null+1等于1;

b.如果是引用类型 结果就看引用类型通过调用valueOf或toString转化为什么类型的原始值,如果转换为字符串 就符合第1条规则,如果转换为 非字符串类型的原始值就是2.a条规则,如果不能转化为原始值就报错。

例如  let obj={

    toString:function(){

      return 'string';

    },

    valueOf:function(){

    return 123;

    }

  }

obj+1;//结果就是124;obj调用valueOf转化为123.

列如  let obj2={

    toString:function(){

      return 'string';

    },

    valueOf:function(){

    return {};

    }

  }

obj2+1;//结果就是'string1';obj调用toString转化为'string'

列如  let obj3={

    toString:function(){

      return 'string';

    },

    valueOf:function(){

    return true;

    }

  }

obj3+1;//结果就是2;obj调用valueOf转化为true,true转换为数值1,所以结果是2

3.+与symbol类型数据运算就报错,因为symbol类型数据无法转化为原始值类型。

4.两个操作数中既不是数值类型也不是字符串类型时 且引用类型转换后也不是时,两个操作数都将转换为数值类型进行计算。

列如 true+true=2; //两边的true都转换为1  所以结果是2

false+null=0;//false转换为数值0,null转换为数值0 所以结果是0;

undefined+true=NaN //undefined转换为数值NaN true转换为数值1,NaN加任何数都是NaN 所以结果是NaN

总结 +运算符 操作数中没有字符串或也无法转换为字符串时,两边的操作数就都转换为数值类型进行计算。如果有一个操作数是字符串或能够转换为字符串 都会按照字符串进行连接



六. ==运算符

有一个总规律 ,类型的规律一定是让两边的操作数类型相同再比较。

6.1 . 如果两边操作数类型相同,就采用绝对相等的规则比较。

6.2 . 如果两边操作数类型不相同,优先转换为数值进行比较。

列如 true=='1' 为true 就是true 和'1'都转换为数值1了 所以他们相等。

6.2.1 这个规律里有一条要排除,就是有一边的操作数为null或undefined时,null只和本身及undefined相同,即null==undefined为true.如果另外一个操作数是对象类型时,对象类型不会调用valueOf或toString转换为原始值进行比较,

列如  let obj4={valueOf:()=>{console.log('我被执行了');return null;}};

    obj4==null;//结果只为false 不会输出  ‘我被执行了‘  的日志,说明引用类型不会转换为原始值。

6.2.2 另外还有一个特殊情况 如果有一个操作数是对象类型,他转换后为null或undefined,他也符合5.2.1的规律 ,且不会再转换。

列如  let obj4={valueOf:()=>{console.log('我被执行了');return null;}};

obj4==0 结果为false  输出 '我被执行了' , 什么obj4转换为null了 但是null没有再转换为0 否则就会是相等。但是有些情况他是可以再转换的

列如 let obj4={valueOf:()=>{console.log('我被执行了');return true;}};

obj4=='1' 输出结果为true 我被执行了 。 什么obj4转换为true后,true再转换为数值1 然后字符串'1' 也转换为数值1了 所以结果相同。

6.2.3总结 如果有一个操作数是对象类型,另外一个操作数为不是null或undefined的原始值时,对象类型都会转换为原始值,如果两个原始值经过第一次转换后类型就相同了 就不会再转换了,如果不相同就会再转换,直到两边类型相同停止,两边不相同是 一般都是转换为数值。

6.3只有两边操作数都是字符串时,才会按照字符串比较是否相等 (这条其实很多余 但是又感觉需要说明一下)

总结一下 其实写这个蛮难的,主要是不好归类,比较的分支太多了,现在做几个题让大家感受一下作为总结应用

a.1=='true' // 结果false, 'true' 转换为数值NaN 所以不等于1.

b. 1=='1' //为true 字符串‘1’ 转换为数值1所以相等,

c. '1'==true 为true 说明两边都转换为数值1进行比较  这里总结就是其他类型优先转换为数值

d.  let obj4={valueOf:()=>{console.log('我被执行了');return null;}};

null==obj4//结果false 说明对象类型遇到null或undefined时不在转换为原始值。

obj4==0 //结果为false 输出 我被执行了 说明对象类型转换为原始值了,但是null不再转换为数值0 所以不相等

e. let obj4={valueOf:()=>{console.log('我被执行了');return '1';}};

obj4==true 结果为true 说明对象转换为原始值'1' 如何两边都再次转换为数值1了

通过d e大家应该感受到一点巨大区别了,有一个操作数为null或undefined或转换后为这个,也会应用6.2.1的规律。





7.测试题

看完这些 希望大家都明白js里类型转换。下面留几个考题给大家小试牛刀,要答案的请评论

1+'3' 结果是什么

1+3+‘3’ 结果是什么

let obj={};let test=obj+1;test结果是什么

undefined+1结果是什么

true+null结果是什么

6.true>='1' 结果是什么 答案是true, 比较运算符优先转换为数值进行比较。true转换为数值1 ,字符串'1'转换为数值1 所以结果为true;

7. let obj4={valueOf:()=>{console.log('我被执行了');return '1';}}; let test=obj4==true; 问题test为true还是false

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

推荐阅读更多精彩内容