数据类型转换看这篇就够了

平常开发中，咱们使用到的Js定义的每个值都属于某一种数据类型，常见的js数据类型有String（字符串）、Number（数字）、Boolean（布尔）、Object、Undefined、Null、Symbol等等，其中Symbol是ES6引入的新的数据类型，表示独一无二的数值。由于 JS 自己是一门弱类型语言，以致于类型转换发生的频繁很高，本文旨在帮助你们梳理各类类型之间的相互转换，在每一小节讲解转换前，还会跟你们介绍这些“老朋友”

数据转换分为显示转换和隐式转换

• ☀️显示转换：常见的️显式转换方法有：Boolean()、Number()、String()等等
• 🌛隐式转换：常见的隐式转换方法：四则运算(加减乘除) 、== 、判断语句(if)等

1.String

String是存储字符的变量,String使用长度属性length来计算字符串的长度

1.1 String转换为Number

• parseInt(string, 10)

parseInt() 函数可解析一个字符串，从位置 0 开始查看每一个字符，直到找到第一个非有效的字符为止,最后并返回一个整数。

parseInt() 方法还有基模式，能够把二进制、八进制、十六进制或其余任何进制的字符串转换成整数。基是由 parseInt() 方法的第二个参数指定的

• parseFloat(string)

相比上一节parseInt函数是将值转换成整数，parseFloat函数则是将值转换成浮点数且该方法方法也没有基模式（转换不了），只有对 String 类型调用这些方法，它们才能正确运行

• Number(string)

Number() 函数的强制类型转换与 parseInt() 和 parseFloat() 方法的处理方式类似，只是它转换的是整个值，而不是部分值

上两节提到的parseInt() 和 parseFloat() 方法只转换第一个无效字符以前的字符串，所以 "1.2.3" 将分别被转换为 "1" 和 "1.2"。 而用Number() 进行强制类型转换，"1.2.3" 将返回 NaN，由于整个字符串值不能转换成数字。若是字符串值能被完整地转换

• + string

经过在字符串前面加了个加号，这个数值就变成了number类型

1.2 String转Object

经过JSON.parse来完成，该注意的是JSON.parse遇到不可解析的字符串时，会抛出SyntaxError异常。

1.3 String转Object（Array数组类型）

2.Number

Number类型是以IEEE-754标准格式来表示的，包括整数和浮点数，若是是计算会转化为2进制再计算，这也是0.1 + 0.2不等于0.3的缘由

拓展：为何在 JavaScript 中，0.1+0.2 不等于 0.3：

console.log( 0.1 + 0.2 == 0.3);  //false
复制代码

由于在JavaScript中的二进制的浮点数0.1和0.2并非十分精确，在他们相加的结果并不是正好等于0.3，而是一个比较接近的数字 0.3000000x ，因此条件判断结果为false。

问题：有没有方法能够解决上述问题呢❓ 可使用 JavaScript 提供的最小精度值Number.EPSILON，在这个偏差的范围内就能够断定0.1+0.2===0.3为true，以下👇所示

多数状况下，Number 比 parseInt 和 parseFloat 等方法会更好

2.1 Number转String

• n.toString( )

toString() 方法把数字转换成指定进制形式的字符串。

• 一元运算符 +

经过在数字后面加了个空字符串，这个数值就变成了string类型

2.2 Number转Boolean

number类型转Boolean，除了0数值和NaN对应的是false,其余数值都对应true

3.Boolean

Boolean 类型有且只有两种值:true和false，主要用来表示逻辑意义上的真和假 boolean 这个类型比较简单，这里就不作复杂介绍

除了下面六个值被转为false，其余都为true

4.Object

Object对象是js中比较复杂的数据类型，涉及的东西比其余类型都多，简单描述对象的话，能够说是由key-value聚合的数据集合，即属性的集合。JS对象主要能够分为两大类，分别是内置对象和宿主对象

• 内置对象: JS内置对象也被定义为内部类，换句话说就是JavaScript里面封装好了的类，内部类大体有：Array，Boolean,RegExp，Date，Math，Number，String，也就是咱们平时看到的 如 new Date();
• 宿主对象: JS所运行的环境提供的对象如：BOM中的Window、DOM中的document

数组(Array)、日期(Date)、null等的数据类型都是 object

这里也介绍不一样类型对象toString()方法的返回值

注意：好比 10 与 new Number(10) 是两个不一样的值，前者是 Number 类型， 后者是对象类型

再举个列子好比 new Date 与 Date(),虽然得出结果同样，但内置对象 Date 做为构造器new 将产生新的对象,而做为函数时，则产生字符串，以下所示👇

4.1 Object转为String

4.2 Object对象转Object数组

对象转数组方式不少，其中包括如下几种👇

• Object.values(object)：返回一个对象全部可枚举属性对应数值组成的数组
• Object.keys(object)： 返回一个对象的自身可枚举属性组成的数组
• Object.entries(object)：返回一个给定对象自身可枚举属性的键值对数组

若是类数组对象或者可遍历的对象要转换，还能够用Array.from()方式，不过前提是object中必须有length属性，返回的数组长度取决于这个object中length长度，同时object的key值必须是数值

小朋友👦👧你是否有不少问号❓类对象是啥？

类数组对象你能够看作一种“伪数组”，虽然它没法调用数组的方法，可是具有length属性，能够索引获取内部项的数据结构

4.3 日期Object转Number

将日期对象转换为数字（时间戳的形式）,能够经过Number() 或者日期方法 getTime()

4.4 数组Object转String

经过join或toString()的方法，join()能够指定分隔符,若是不加参数，则默认使用逗号做为分隔符，与 toString() 方法转换操做效果相同

经过[1，2，3，4]初始化与new Array()做用同样，也是建立了一个对象，新建的对象a.proto == Array.prototype

5 Undefind和Null

二者都是JavaScript语言用来表示"无"的值，且二者有共同点也有不一样点，共同点在于都只有一个值，Null只有一个值 null,Undefined也只有一个值undefined。不一样点在于Null 表示为‘定义了可是值为空’,而Undefind 表示为'这里应该有一个值，可是尚未定义'

要注意的是，若是咱们用typeof来判断null的类型，会断定为 Object 类型，而不是Null类型只是为何呢？

是由于JavaScript 数据类型在底层都是以二进制的形式表示的，二进制的前三位为 0 会被 typeof 判断为对象类型，而 null 的二进制位刚好都是 0 ，所以，null 被误判断为 Object 类型。此时咱们能够用上一节谈到的经过Object上的 原型上的toString()方法，以下👇 Object.prototype.toString.call(null) //[object Null]来区分

5.1 Undefind和Null转Number

undefined没法转为数字、而Null被转换为0

再看一个例子👇

undefined没法转为数字,第一个调用返回NaN.第二个是null转为隐式转换为0因此是2 ，第三个是若是传入的参数是undefined会以默认值为准，因此是3

5.2 总结

• 不要对一个显式变量的赋值 undefined，当须要释放一个对象时，直接赋值为 null 便可
• == 双等号中若是两个值类型不一样，也有可能相等，undefind == null就是其中一个，包括 1 == '1'，可是若是null与undefined与其余数相等运算时就不行，由于它们不进行类型转换（隐式转换）

6.Symbol

Symbol是ES6新引入的数据类型，表示独一无二的值，相似于一种标识惟一性的ID，Symbol 函数不一样的是，直接用new 调用它会抛出错误，由于生成的是原始类型值，不是对象，是 Symbol 对象的构造器。下面简单用一个例子就能告诉你如何独一无二👇

symbol不能与其余类型的值进行运算，会报错（即不能隐式转换），可是部分能够显示转换为字符串或者布尔值

7.拓展

7.1 类型判断方法

由于类型识别中，若是使用 typeof 来判断数据类型，只能区分基本类型，即 number、string、undefined、boolean、object、function、symbol这几种，可是对于数组、null、对象这些来讲，使用 typeof 都会统一返回 “object” 。这时候就须要用到其它方式👇

经过Object.protptype.toString.call()截取字符串[object...]中间字符串来区分类型，去掉先后符号，好比 "[object Array]"就提取了array来判断,以前写的工具库有定义点我👉

那直接用 Object.prototype.toString(1) 能够吗？答案是不行的，由于考虑到为了每一个对象都能经过，因此才须要以 Function.prototype.call()的形式来调用，传递要检查的对象做为第一个参数

在举个例子，看以下👇

为何Object.prototype和Array.protoType是两个结果？ 这里涉及到一些原型链的问题，这里也大概讲一下

首先js中对象大多继承自Object，当在某个对象上调用方法时，会先优先在该对象上进行查找，若是没找到则会进入对象的原型（也就是.prototype）进行探索，若是仍是没找到这个方法，一样的也会进入对象原型的原型进行查找，直到找到或者进入原型链的顶端Object.prototype为止。

因此，好比它调用的是Array.prototype.toString，虽然Array也继承自Object，但js在Array.prototype上重写了toString，因此致使结果不一样，而第三个例子toString(),由于自己调用的是Array.prototype.toString，因此结果是跟第二种方式一致。

总结：只有Object.prototype上的toString才能用来进行复杂数据类型的判断

树酱但愿将前端的乐趣带给你们 本文已收录 github.com/littleTreem… 喜欢就star✨

往期文章

• 前端表单数据那些事
• 前端工程化那些事
• 从0到1开发工具库
• 从0到1开发简单脚手架
• 前端Nginx那些事
• 前端运维部署那些事