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

JavaScript 是一种弱类型或者说动态类型语言。所以你不用提前声明变量的类型，在程序运行时，类型会被自动确定，你也可以使用同一个变量保存不同类型的数据。<!– more –>数据类型原始类型在 JS 中一共 6 种原始类型：stringnumberbooleanundefinednullsymbol (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 与 instanceoftypeof 是否能正确判断类型？instanceof 能正确判断对象的原理是什么？typeoftypeof 运算符返回一个字符串，表示未经计算的操作数的类型。对于原始类型，除了 null 类型都显示正确类型。typeof ‘1’ // ‘string’typeof true // ‘boolean’typeof 1 // ’number’typeof undefined // ‘undefined’typeof Symbol() // ‘symbol’typeof null // ‘object’ 这是一个 Bug typeof 1 === ’number’ // truetypeof (typeof 1) === ‘string’ // true对于对象来说，除了函数都会显示 object 。typeof [] // ‘object’typeof {} // ‘object’typeof console.log // functioninstanceofinstanceof 运算符返回一个布尔值，用于测试构造函数的 prototype 属性是否存在于对象原型链上。所以在判断对象的正确类型时可以考虑使用 instanceof 。// 定义构造函数function A() {}function B() {}var a = new A()var b = new B()a instanceof A // true ，因为 Object.getPrototypeOf(a) === a.prototypea 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 —> 0Number(null) // 0在浏览器环境中，window.parseInt() 和 window.parseFloat() 可以将一些字符串转换成数字,但没 Number() 严格 。把其他原始类型都会转换成 NaN 。parseInt(‘123aaa’) // 123parseFloat(‘1.23aaa’) // 1.23parseInt(true) // NaN对象 —> 数字Number() 方法的参数是对象时，一般情况下，除非是包含单个数字的数组会返回数字，否则返回 NaN 。Number({a: 1}) // NaNNumber([1,2]) // NaNNumber([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’) // 1String()String() 函数可以将任意类型的值转换成字符串。原始类型 —> 字符串var a = Symbol({})String(a) // ‘Symbol([object Object])‘String(Symbol([])) // ‘Symbol()‘对象 —> 字符串数组会返回该数组的字符串形式，函数返回完整函数的字符串，其他的返回一个类型字符串。String([1,2]) // ‘1,2’String([]) // ‘‘function foo(x){ return xx }String(foo) // ‘function foo(x){ return xx }‘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) // 1Boolean()Boolean() 函数可以将任意类型转换成布尔值除了以下五个值转换结果为 false ，其他值全部转换为 trueundefinednull’’ (空字符串)-0 或 0NaN!!数据 与 Boolean(数据) 效果一样。Boolean(undefined) // falseBoolean(null) // falseBoolean(’’) // falseBoolean(0) // falseBoolean(NaN) // false! NaN // true!! NaN // false自动转换自动转换就是没有显式地使用函数对数据进行类型转换。但它是以强制转换为基础的。当预期数值与实际数值不匹配时，JavaScript 就会自动调用预期类型的转换函数对实际值进行转换。进行算术运算运算子都是原始类型在加法运算中 只要一方时字符串，另一方就会转换成字符串。这是字符串拼接。其他 - * / ** % ++ – +(一元运算符 表示正数) -(一元运算符 表负数) 都会将运算子转换成数字。1 + ‘1’ // ‘11'2 * ‘3’ // 61 - ‘a’ // NaN 3 + - ‘1’ // 2运算子是对象会先把对象转换成原始类型再按预期值转换。具体方法是：先调用对象的 valueOf() 方法试图将对象转换成原始类型，如果返回的是对象，就再调用原对象的 toString() 方法，如果返回的还是对象就报错。var obj = { valueOf: function() { return ‘1’ }, toString: function() { return ‘10’ }}10 - obj // 91 + [1,2] // ‘11,2’// [1,2].toString() —> ‘1,2’进行比较运算=== 和 !== 不会发生类型转换，只要类型不同就返回 false.两边同时为字符串会比较 Unicode 码，否则都会转换成数字进行比较(null、undefined 除外)。NaN 与任意值(包括本身NaN)比较都返回 falsenull undefined 除了 null(undefined) == undefined(null) 返回 true，其他 > < == 有 null 或 undefined 参与的都返回 false 。‘abc’ > ‘abd’ // falsetrue > 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 > 10 == null // false== 常用于判断函数的参数是否等于 null 或者 undefined ，因为 null == undefinded 返回 truefunction fun(x) { if(x == null) {···}} 逻辑运算!参数参数&&参数||参数? :(三元运算符)if(参数)都会将非布尔的参数转换成布尔类型(使用 Boolean(参数) 函数)。阅读原文参考资料：https://wangdoc.com/javascript/features/conversion.htmlhttps://juejin.im/book/5bdc715fe51d454e755f75ef/section/5bdc715f6fb9a049c15ea4e0https://juejin.im/entry/589c29a9b123db16a3c18adf