关于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()方法，如果存在就调用这个方法，如果返回值是字符串就转换为字符串。

3. 否则就报错。
   复习一下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。

2. String == Boolean，需要两个操作数同时转为Number。

3. String/Boolean == Number，需要String/Boolean转为Number。

4. 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