javascript类型转换

从原理上讲一下 javascript 的隐式类型转换,10分钟学会类型判断原理。

内置七种基本类型

  • null
  • undefined
  • boolean
  • number
  • string
  • object
  • symbol

typeof返回的是类型的字符串值,但是null是例外,typeof null === 'object',这是个bug

typeof function的返回值也不是基本类型的字符串值,是因为functionobject的一个子类型

typeof function a(){} === 'function';   //true

详情见typeof 规范

typeof.png

位运算符

位运算符要求的是32位整数,小数位和超过32位的整数位忽略

  • |按位或运算符可以将小数转换成整数a | 0,不过要注意整数不能超过32位

  • ~按位非运算符将操作数所有位取反,在javascript中相当于-(x+1)

//5 二进制 101,补满 32位
00000000000000000000000000000101
//按位取反
11111111111111111111111111111010
//由于32位开头第一个是1,所以这是一个负数,将二进制转换成负数,需要先反码
00000000000000000000000000000101
//之后,再+1
00000000000000000000000000000110
//转换成十进制为6,加上符号变成负数 -6

一个应用是~-1 == 0可以替换

if(arr.indexOf('a') > -1) {}

if(~arr.indexOf('a')) {
    //有值
}

~~a也可以将a取整

一元运算符

  • +运算符把操作数转换成数字
  • -运算符把操作数转换成数字再改变结果的符号
//涉及到类型转换,下面讲
+[]; //0
+'42'; //42
//++ --会被识别为运算符,所以使用时要加空格
5 + +'3'; //8

类型转换

基础概念就不写了,直接来容易迷糊的and原理,抛几个问题

[] == ![]; //true
"0" == ""; //false
"" == 0; //true
"foo"  == ["foo"]; //true

ToPrimitive

首先介绍一下es内部抽象操作ToPrimitive,它的作用是将输入转换成非对象类型数据,最后的返回值是基本类型值,或者抛错

The abstract operation ToPrimitive takes an input argument and an optional argument PreferredType. The abstract operation ToPrimitive converts its input argument to a non-Object type.

Paste_Image.png

ToPrimitive转换对象的时候调用[[DefaultValue]]内部方法,可带一个参数hint,代表如果这个对象可以转成多种基本类型值,我们把它转成哪种,默认是Number

[[DefaultValue]]的转换办法是

  • hintString的话先看有没有toString方法,有调用toString,如果是基本类型值则返回,否则看有没有valueOf方法,有调用valueOf,是基本类型值返回,不是的话抛TypeError错误
  • hintNumber的话则是先看valueOf方法,后看toString方法
  • 没有hint参数则按Number的规则转,Date对象例外,用String

字符串和数字之间的隐式强制类型转换

var a = [1,2];
var b = [3,4];

a + b; //'1,23,4'

+ 加号转换原则简单说就是某个操作数是字符串,或者可以通过ToPrimitive转成字符串,那就执行字符串拼接操作,否则进行数字加法。

[1,2]是个对象,调用内部的[[DefaultValue]]方法,valueOf方法得到的是[1,2]不是基本类型值,调用toString得到字符串'1,2'[3,4]同理,最后执行字符串拼接得到'1,23,4'

疑惑

[] + {}; //"[object Object]"
{} + []; //0

这里先说一下后者,因为{}在javascript里被识别为代码块,自己就执行了,所以{} + []被解析成+ [],这里的+是一元运算符,将[]转换成数字,也就是通过ToPrimitive得到字符串"",转成数字为0
前者被解析成了字符串拼接,""+[object Object]

宽松相等和严格相等

“ ==允许在相等比较中进行强制类型转换,而 === 不允许”

规范里算法很多,挑几个代表性的

一、Number Compare String
Paste_Image.png
二、Boolean Compare with other
Paste_Image.png
三、Object Compare with String or Number
Paste_Image.png
四、null == undefined

现在来看一下之前提出的几个问题

//![]转换成boolean值为0,[] == 0,[]根据规则进行ToPrimitive([]),得到"" == 0,再转成 ToNumber("") == 0
[] == ![]; //true

//字符串比较
"0" == ""; //false

//ToNumber("") == 0
"" == 0; //true

//ToPrimitive(["foo"]) == "foo"
"foo" == ["foo"]; //true

收获

明白了隐式类型转换规则,平时写代码的时候也要注意,不要写容易让别人困惑的代码;
最大的收获是查官方规范,看别人的博客太麻烦了,这里讲的不清楚,那里讲的模模糊糊,直接看规范,一看就懂了。

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

推荐阅读更多精彩内容

  • Javascript 中有6种基本类型(包括 symbol),以及对象类型,他们在不同的运算中会被系统转化为不同是...
    faremax阅读 812评论 0 3
  • 原始值转换: 对象转换为原始值 对象都会从Object继承valueOf 和toString 方法。默认的valu...
    softbone阅读 132评论 0 0
  • 1.deputy n. 代理人,代表 adj. 副的;代理的 仿 He delegated his respons...
    倦鸟归矣阅读 105评论 0 0
  • 我是日记星球164号宝宝,我承诺每天如实如是的发表一篇日记,记录每天的生命历程。感恩所有同学家人的支持与鼓励!我相...
    韦炜阅读 143评论 0 2
  • 这几天被刘洲成家暴的新闻刷屏了。至上励合的成员之一,在唱歌方面没红,却因家暴红了。 刘洲成的老婆林苗在公开的家书中...
    谜秋阅读 471评论 0 0