关于js的类型转换

前言:js的类型转换真是容易让人一头雾水,接下来我将会好好整理一下。
原始值到原始值(数字,字符串,布尔值)的转换
  1. 原始值转化为布尔值,所有的假值("undefined","null",0,-0,NaN,"")都会被转化false,其他都会被转化为true.

  2. 原始值转换为字符串相当于加""

  3. 原始值转化为数字,布尔转文字:true --> 1,false --> 2
    字符串转数字,只有字符串中都是以数字表示的,就可以直接转换为字符串,如果两个数字间有空格的话,那么转换结果就是NaN.

     +"123"  //123
     +"1 3" // NaN
    
原始值到对象的转换
  1. null和undefined会直接报错。
  2. 原始值会通过调用String(),Number(),Boolean()构造函数,转换为他们各自的包装对象。
对象到原始值的转换
  1. 对象转换为布尔值都是true
  2. 对象到字符串
  • 如果对象有toString()方法,就调用toString()方法,如果这个方法返回原始值,就将这个对象转化为字符串。
  • 如果对象没有toString()方法或者该方法返回的不是原始值,那么就会调用该对象的valueOf()方法,如果存在就调用这个方法,如果返回值是字符串就转换为字符串。
  1. 否则就报错。
    复习一下Object的属性和方法
  • Constructor:保存着用于创建当前对象的函数。

  • hasOwnProperty(property):用于检查给定的属性在当前实例中(不包括原型)是否存在。

  • isPrototypeOf(object):用于检查传入的对象是否是另外一个对象的原型。

  • propertyIsEnumberable(property):用来检查给定的属性能用for-in语句来枚举。

  • toLocaleString():返回对象的字符串表示,该字符串与执行环境地区相对应

  • toString():返回对象的字符串表示。

  • valueOf():返回对象的字符串表示,数值或者布尔值表示,很多时候与toString()方法的返回值相同。


    toString

    valueOf
      1.toString()//Uncaught SyntaxError: Invalid or unexpected token
      1..toString()//"1"
      1...toString()//Uncaught SyntaxError: Unexpected token .
      2.0.toString()//"2"
    
==运算符怎么进行类型转换
  1. 如果一个值是null,另一个值undefined,则相等。
  2. 如果一个是字符串,另一个是数字,则要把字符串转换为数字,进行比较。
  3. 如果任意值是true,则要把true转换为1再进行比较,如果是false,则要把false转换为0再进行比较
  4. 如果一个是对象,另一个数值或字符串,把对象转换为基础类型的值在进行比较(toString,valueOf())。
+运算符如何进行类型转换。
  1. 如果作为一元运算符就是转化为数字,常常用来将字符串转化为数字。

     +“2” //2
    
  2. 如果作为二元运算符就有两种转换方式

  • 两边如果有字符串,就会将另外一家转化为字符串进行拼接。
  • 如果两边没有字符串,两边都会转化数字相加,对象也会根据钱买你的方法转化为原始值数字。
  • 如果其中的一个操作数是对象,则将对象转换为原始值,日期对象会通过toString(),其他对象会通过valueOf()方法进行转换,但是大多数对象都是不具备可用的valueOf()方法,所以还是会通过toString()方法执行转换。


    image.png
实战
  1.    [] + [] //" "
    
    • 首先左边的[]调用valueOf()方法,发现还是[],所以去调用toString()方法。

      [].toString() //" "
      
    • 有一边是字符串,所以左边的也要转化为字符串,也变成"",

    • "" + "" ="" //空字符串+空字符串 = 空字符串
      
  2.  (! + [] + [] + ![]).length
    
  • 因为!是一元运算符,所以我们得出了这样的运算规则


    image.png
  • !后面的+[]会变成数字0,![]会变成”false"那么我们就会得到

      !0 + [] + “false"
    
  • 因为有字符串的存在,所以!0转换为字符串就是"true",[]转换为字符串就是“”
    那么我们就会得到

      “true"+""+"false" //”truefalse“
    
  • 所以

     ( ”truefalse").length //9
    
image.png

参考文章:
https://mp.weixin.qq.com/s/wd8JLGtnsoQYfm3K7KXO0g


最近又在工作中遇到了一个类型转换的坑!!!
更新


image.png

由上图我们可以看到,左边框是一个存在的世界,右边框是一个空的世界。
只要拿左边框的和右边的比较,都会得到false.

N表示ToNumber操作,即将操作数转为数字。它是规范中的抽象操作,但我们可以用JS中的Number()函数来等价替代。

P表示ToPrimitive操作,即将操作数转为原始类型的值。它也是规范中的抽象操作,同样也可以翻译成等价的JS代码。不过稍微复杂一些,简单说来,对于一个对象obj:

  1. undefined == null,结果是true。且它俩与所有其他值比较的结果都是false。
  1. String == Boolean,需要两个操作数同时转为Number。
  1. String/Boolean == Number,需要String/Boolean转为Number。
  1. Object == Primitive,需要Object转为Primitive(具体通过valueOf和toString方法)。

ToPrimitive(obj)等价于:先计算obj.valueOf(),如果结果为原始值,则返回此结果;否则,计算obj.toString(),如果结果是原始值,则返回此结果;否则,抛出异常。

//大坑
console.log ( [] == 0 );//true
console.log ( ! [] == 0 );//true

//神坑
console.log ( [] == ! [] );//true
console.log ( [] == [] );//false


//史诗级坑
console.log({} == !{});//false
console.log({} == {});//false

[]==[],两个的地址都不一样,肯定是false啦
让我们用愉快的心情来从头到尾看一下 [] == ![]的比较过程

下面是运算符的优先级


image.png
image.png

总结一下比较常用的符号的优先级
( ) > !(逻辑非) > +,-(一元加法,一元减法) > * ,/, % > ==,===

很明显,取反的优先级高于==(取反运算符得到的结果是boolean值)

https://segmentfault.com/a/1190000008432611

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

推荐阅读更多精彩内容

  • 第2章 基本语法 2.1 概述 基本句法和变量 语句 JavaScript程序的执行单位为行(line),也就是一...
    悟名先生阅读 4,114评论 0 13
  • 1、js数据类型 js中有7种数据类型,可以分为两类:原始类型、对象类型: 基础类型(原始值): Undefine...
    好奇男孩阅读 9,790评论 1 16
  • 前言 最先接触编程的知识是在大学里面,大学里面学了一些基础的知识,c语言,java语言,单片机的汇编语言等;大学毕...
    oceanfive阅读 3,040评论 0 7
  • 看完敦刻尔克,两个声音一直在我耳畔。 一个声音说:“同志们,敌人冲过来了,你们先走,我掩护!”一个声音却颤抖着说:...
    东营王建军阅读 329评论 0 5
  • 文/巢旸 小伙伴的文章都发过来了,谈到感觉,也谈到理想,年青人的三观是可圈可点的。 这段时间三天两头的要往南·泥·...
    乡传南泥湾阅读 244评论 0 0