再也不用担心 JavaScript 的数据类型转换了

摘要：运算符返回一个布尔值，用于测试构造函数的属性是否存在于对象原型链上。定义构造函数，因为，不在的原型链上类型转换任意数据类型之间可以相互转换，但是特殊。自动转换自动转换就是没有显式地使用函数对数据进行类型转换。

JavaScript 是一种弱类型或者说动态类型语言。所以你不用提前声明变量的类型，在程序运行时，类型会被自动确定，你也可以使用同一个变量保存不同类型的数据。

在 JS 中一共 6 种原始类型：

string

number

boolean

undefined

null

symbol (ECMAScript 6)

除了原始类型其他的都是对象类型（object）了。

在 JS 中，每一个数据都需要存放在内存空间中。

原始类型数据直接存储在 栈内存(stack) 中，对象数据存储在 堆内存(heap) 中，并在 栈内存 中存放了该对象数据在 堆内存的地址(引用)。

var a1 = 0  // 栈
var a2 = "this is string"  // 栈
var a3 = null  // 栈

var b = { m: 20 }  // 堆
var c = [1,2,3]  // 堆

上述变量的内存图解：

typeof 是否能正确判断类型？instanceof 能正确判断对象的原理是什么？

typeof 运算符返回一个字符串，表示未经计算的操作数的类型。

对于原始类型，除了 null 类型都显示正确类型。

typeof "1"  // "string"
typeof true // "boolean"
typeof 1    // "number"
typeof undefined  // "undefined"
typeof Symbol()  // "symbol"

typeof null // "object" 这是一个 Bug 

typeof 1 === "number"  // true
typeof (typeof 1) === "string"  // true

对于对象来说，除了函数都会显示 object 。

typeof []   // "object"
typeof {}   // "object"
typeof console.log  // `function`

instanceof 运算符返回一个布尔值，用于测试构造函数的 prototype 属性是否存在于对象原型链上。所以在判断对象的正确类型时可以考虑使用 instanceof 。

// 定义构造函数
function A() {}
function B() {}

var a = new A()
var b = new B()

a instanceof A  // true ，因为 Object.getPrototypeOf(a) === a.prototype

a instanceof B  // false ，B.prototype 不在 a 的原型链上

任意数据类型之间可以相互转换，但是 symbol 特殊。symbol 类型只能转换成 string 类型，其他的转换会报错。

原始类型 ---> 数字

// 1. 字符串 ---> 数字
  
    // 1) 可以被解析成数值的字符串 返回 数值
    Number("123")  // 123
    // 2) 不能解析成数值的字符串 返回 NaN
    Number("123aaa")  // NaN
    // 3) 空串 ---> 0
    Number("")  // 0

// 2. 布尔值 ---> 数字

    // 1) true ---> 1
    Number(true)  // 1
    // 2) false ---> 0
    Number(false)  // 0

// 3. undefined ---> NaN
    Number(undefined)  // NaN
    
// 4. null ---> 0
Number(null)  // 0

在浏览器环境中，window.parseInt() 和 window.parseFloat() 可以将一些字符串转换成数字,但没 Number() 严格 。把其他原始类型都会转换成 NaN 。

parseInt("123aaa")  // 123
parseFloat("1.23aaa")  // 1.23
parseInt(true)  // NaN

对象 ---> 数字

Number() 方法的参数是对象时，一般情况下，除非是包含单个数字的数组会返回数字，否则返回 NaN 。

Number({a: 1})  // NaN
Number([1,2])   // NaN
Number([1])     // 1

在执行 Number(对象) 方法时，会先进行参数处理，将对象转换成原始类型，再进行转换成数字的操作。

第一步，调用对象自身的 valueOf() 方法（ var a = new String(123); a.valueOf() --> "123" ）。如果返回的值是原始类型，则直接将该值转换成数字并返回。不再进行后续步骤。

第二步，如果 valueOf() 方法返回的是对象，则调用原对象自身的 toString() 方法，如果此时返回的值是原始类型，则将该值转换成数字并返回，不再进行后续操作。

如果 toString() 方法返回的还是对象，就报错。

Number({a: 1})  // NaN
// 过程如下：
var t = {a: 1}
// 第一步
t.valueOf()  // {a: 1}
// 第二步
t.toString() // "[object Object]"
Number("[object Object]")  // NaN
    
Number([1,2])
//过程如下：
// 第一步
[1,2].valueOf()   // [1,2]
// 第二步
[1].toString()  // "1,2"
Number("1,2")     // NaN
    
// 再来看看参数是单个数字的数组时的情况
    
Number([1])  // 1
    
//过程如下：
// 第一步
[1].valueOf()   // [1]
// 第二步
[1].toString()  // "1"
Number("1")     // 1

String() 函数可以将任意类型的值转换成字符串。

原始类型 ---> 字符串

var a = Symbol({})
String(a)  // "Symbol([object Object])"

String(Symbol([]))  // "Symbol()"

对象 ---> 字符串

数组会返回该数组的字符串形式，函数返回完整函数的字符串，其他的返回一个类型字符串。

String([1,2])  // "1,2"
String([])  // ""

function foo(x){ return x*x }
String(foo)  //  "function foo(x){ return x*x }"

String({a: 1})  // "[object Object]"

String(对象) 方法的转换规则与 Number(对象) 基本相同，只是互换了 valueOf() 与 toString() 的执行顺序。

先调用对象的 toString() 方法。如果返回的值是原始类型，则将该值转换成字符串并返回。不再执行以下步骤。

如果 toString() 返回的是对象，则调用原对象的 valueOf() 方法。如果返回的值是原始类型，将该值转换成字符串并返回。不再执行后续操作。

如果 valueOf() 方法返回的还是对象，就报错。

自定义对象的 toString() 方法和 valueOf() 方法：

var obj = {
    valueOf: function() {
        return 1
    },
    toString: function() {
        return 2
    }
}

String(obj)  // "2"
Number(obj)  // 1

Boolean() 函数可以将任意类型转换成布尔值
除了以下五个值转换结果为 false ，其他值全部转换为 true

undefined

null

"" (空字符串)

-0 或 0

NaN

!!数据 与 Boolean(数据) 效果一样。

Boolean(undefined)  // false
Boolean(null)  // false
Boolean("")  // false
Boolean(0)  // false
Boolean(NaN)  // false

! NaN  // true
!! NaN  // false

自动转换就是没有显式地使用函数对数据进行类型转换。但它是以强制转换为基础的。

当预期数值与实际数值不匹配时，JavaScript 就会自动调用预期类型的转换函数对实际值进行转换。

运算子都是原始类型

在加法运算中 只要一方时字符串，另一方就会转换成字符串。这是字符串拼接。

其他 - * / ** % ++ -- +(一元运算符 表示正数) -(一元运算符 表负数) 都会将运算子转换成数字。

1 + "1"  // "11"
2 * "3"  // 6
1 - "a"  // NaN  
3 + - "1"  // 2

运算子是对象

会先把对象转换成原始类型再按预期值转换。具体方法是：先调用对象的 valueOf() 方法试图将对象转换成原始类型，如果返回的是对象，就再调用原对象的 toString() 方法，如果返回的还是对象就报错。

var obj = {
    valueOf: function() {
        return "1"
    },
    toString: function() {
        return "10"
    }
}

10 - obj  // 9

1 + [1,2]  // "11,2"
// [1,2].toString() ---> "1,2"

=== 和 !== 不会发生类型转换，只要类型不同就返回 false.

两边同时为字符串会比较 Unicode 码，否则都会转换成数字进行比较(null、undefined 除外)。

NaN 与任意值(包括本身NaN)比较都返回 false

null undefined 除了 null(undefined) == undefined(null) 返回 true，其他 > < == 有 null 或 undefined 参与的都返回 false 。

"abc" > "abd"  // false
true > false  // true  ---> Number(true) > Number(false)
true > "-1"  // true  ---> Number(true) > Number("-1")

var obj = {valueOf: function() {return "1"}}
[3] > obj  // true
// 过程如下：
// Number([3]) > Number(obj)
// Number("3") > Number("1")
// 3 > 1

0 == null  // false

== 常用于判断函数的参数是否等于 null 或者 undefined ，因为 null == undefinded 返回 true

function fun(x) {
    if(x == null) {···}
} 

!参数

参数&&

参数||

参数? :(三元运算符)

if(参数)

都会将非布尔的参数转换成布尔类型(使用 Boolean(参数) 函数)。

阅读原文

参考资料：

https://wangdoc.com/javascript/features/conversion.html

https://juejin.im/book/5bdc715fe51d454e755f75ef/section/5bdc715f6fb9a049c15ea4e0

https://juejin.im/entry/589c29a9b123db16a3c18adf