JS基础 – 类型转换

1、toString方法简介

• 除 undefined 和 null 以外的其他所有制都有toString()方法

• 返回的结果通常与String()函数返回的结果相同（ 结果参考上面表格 ）

//Number类的toString(n) ：可选参数
(17).toString(2) ===> "10001"

//Array类的toString() ：将每个元素转为字符串，用逗号拼接
["a", "b", "c"].toString() ===> "a,b,c"

//Function类的toString() ：返回源代码的字符串
(function () { f(x) }).toString() ===> "function () { f(x) }"

//Date类的toString() ：返回js可解析的日期和时间字符串
(new Date()).toString() === > "Mon May 31 2019 16:36:34 GMT+0800 (中国标准时间)"

//RegExp类的toString() ：返回一个看起来像RegExp的字面量的字符串
(/\d+/g).toString()  ===> "/\\d+/g"
复制代码

2、显示转换

Boolean(val)

只有val为 undefined、unll、0、null、""、false 结果为false
其他任何值都为true

String( val )

String( Obj )

• 1、先调用toSring方法（ 会查找原型 ）
  • 如果返回原始值：直接使用Number进行包装返回值
  • 如果返回对象：继续调用valueOf方法
• 2、调用valueOf方法（ 会查找原型 ）
  • 如果返回原始值：直接使用Number进行包装返回值
  • 如果返回对象：报错

var obj = {
    toString(){
        return 888;
    },
    valueOf(){
        return 999;
    }
}
//toString返回原始值：888
//直接调用：String(888)
String(obj )//"888"
复制代码

var obj = {
    toString(){
        return {};
    },
    valueOf(){
        return 999;
    }
}
//toString返回对象，继续调用valueOf({})方法
//valueOf返回原始值
//最后调用：String(999)
String(obj )//"999"
复制代码

var obj = {
    toString(){
        return {};
    },
    valueOf(){
        return {};//返回任意对象，直接报错
    }
}
//toString返回对象，继续调用valueOf({})方法
//valueOf返回对象，返回任意对象，直接报错
String(obj)//报错
复制代码

var obj = {
    valueOf(){//不会被调用
        //原型上的toString方法已经返回toString字符串；不会继续调用valueOf方法
        return 999;
    }
}
String(obj)//888
//toString方法，obj不存在
//查找原型上方法toString，返回 "[object Object]"
//最后调用：String("[object Object]")
String(obj)//"[object Object]"
复制代码

var obj = {
    toString(){
        return {};
    }
}
//toString方法，返回 {}
//obj上不存在valueOf方法，
//查找原型，返回obj对象，报错
String(obj)//报错
复制代码

String( Array )

• “解套、平铺”
• 将数组的每个元素转换为字符串，然后再用逗号拼接

String([])  //""
String([" "])  //" "
String([123])  //"123"
String(["123"])  //"123"
String(["123","456"])  //"123,456"
String(["123","456",["789","111"]])  //"123,456,789,111"
String(["123","456",{}])  //"123,456,[object Object]"
复制代码

Numbe( val )

Numbe(Obj)：步骤（ [valueOf ]==> [ toString] ==> Number ）

• 1、先调用valueOf方法（ 会查找原型 ）
  • 如果返回原始值：直接使用Number进行包装返回值
  • 如果返回对象：继续调用toString方法
• 2、调用toSring方法（ 会查找原型 ）
  • 如果返回原始值：直接使用Number进行包装返回值
  • 如果返回对象：报错

var obj = {
    toString(){
        return 888;
    },
    valueOf(){
        return 999;
    }
}
//valueOf返回原始值：888
//不用再调toString方法
//最后调用 Number(999)
Number(obj)//999
复制代码

var obj = {
    toString(){
        return 888;
    },
    valueOf(){
        return {};
    }
}
//valueOf返回对象：{}，继续调用toString方法
//调用obj上的toString({})方法，返回原始值：888
//最后调用 Number(888)
Number(obj)//888
复制代码

var obj = {
    toString(){
        return {};//返回任意对象，最终都会报错
    },
    valueOf(){
        return {};
    }
}
//valueOf返回对象：{}，继续调用toString方法
//调用obj上的toString({})方法，返回 {} ( 返回任意对象直接报错)
Number(obj)//报错
复制代码

var obj = {
    valueOf(){
        return {};
    }
}
//valueOf返回对象：{}，会继续调用toString方法
//obj上没有toString方法
//会去原型上找toStirng({})方法，且返回"[object Object]"
//最后调用 Number("[object Object]")
Number(obj)//NaN
复制代码

var obj = {
    toString(){
        return {};
    }
}
//obj没有valueOf方法，会去原型上找valueOf方法，返回值为：对象，
//继续调用toString(对象)方法
//valueOf返回：{}  //直接报错
Number(obj)//Cannot convert object to primitive value
复制代码

Numbe( Array )

• 在String()的基础上，做了Number()包装

Number([])  //0
Number([" "])  //0
Number([123])  //123
Number(["123"])  //123
Number(["123","456"])  //NaN
Number(["123","456",["789","111"]])  //NaN
Number(["123","456",{}])  //NaN
复制代码

与Numbe相关的

console.log(Number("  123"));//123
console.log(Number(".123"));//0.123
console.log(Number("abc"));//NaN
console.log(Number("abc123"));//NaN
console.log(Number("1  2"));//NaN

//parseInt方法就是弥补Number方法的不足
console.log(parseInt("  123"));//123
console.log(parseInt(".123"));//0.123
console.log(parseInt("4.123"));//NaN
console.log(parseInt("abc"));//4
console.log(parseInt("abc123"));//NaN
console.log(parseInt("123abc"));//NaN
console.log(parseInt("1  2"));//1

//parseInt的第二个参数为：转为几进制 (2 - 36)
console.log(parseInt("11",0));//11
console.log(parseInt("11"));//11
console.log(parseInt("11",3));//4
console.log(parseInt("11",8));//9
console.log(parseInt("11",10));//11
console.log(parseInt("11",null));//11
console.log(parseInt("11",undefined));//11

console.log(parseInt("11",1));//1
console.log(parseInt("11",-1));//1
console.log(parseInt("11",37));//1

复制代码

3、隐式转换

Boolean类型的隐式转换

– 常见的Boolean隐式转换类型操作：

• if、for、while、&& 、 || 、!、!!、?. 、switch

• 只有val为 undefined、unll、0、null、""、false 时，判断条件为false，其他都为true

String类型的隐式转换

• "" + val

Number类型的隐式转换

数学运算符：+ 、- 、 * 、% 、& 、|、 ++ 、 — 、+val

var a = 123;
console.log( a & 1)
console.log( a | 1)
console.log( a ^ 1)
console.log( a & 1)
console.log( a >> 1)
console.log( a << 1)
console.log( a ^ 1)
复制代码

比较运算符（ 默认使用Number转换 ）：==、===、!==、>=、<=、<、>

• 特例：undefined、null这两个值跟其它的任何值都不等（ 全为false）

//原始值可以使用number进行转
console.log(undefined == null) //true
console.log(NaN == NaN )  //false
console.log(1 == true) //true
console.log("1" == true)//true
console.log("1" == 1)//true

//对象的对比处理
console.log([1] == 1)//true
console.log([1] == true)//true
console.log([] == false)//true
console.log([] == null)//false  //特例
console.log(Number([1,2]) == NaN)//true

//[]为0   ![]为false即为0
console.log( [] == ![])//true
console.log( [] == !{})//true

//{}为NaN      !{}为0
console.log({} == !{})//false
复制代码