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

10次阅读

共计 4302 个字符,预计需要花费 11 分钟才能阅读完成。

JavaScript 是一种弱类型或者说动态类型语言。所以你不用提前声明变量的类型,在程序运行时,类型会被自动确定,你也可以使用同一个变量保存不同类型的数据。
<!– more –>
数据类型
原始类型
在 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 是否能正确判断类型?instanceof 能正确判断对象的原理是什么?
typeof

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

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 类型,其他的转换会报错。
强制转换
Number()
原始类型 —> 数字
// 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()

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()

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

正文完
 0