欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

2018-06-10 JS 里的数据类型转换

程序员文章站 2022-06-01 16:06:51
...

前言：之前的博客介绍了JS中的各种数据类型，那么可不可以把已经确定的数据类型转换成其他的数据类型呢？本文就将介绍一些方法达成此目的，另外还会引申的简单介绍一下JS中的内存管理、深拷贝与浅拷贝等相关知识。

1、如何将其他的数据类型转换成String字符串类型？

注：下面介绍的三种转换成字符串的方法都不适用于对象，所得结果都是”[object Object]”
- toSring()
toString方法适用于number类型和boolean类型，如：

true.toString(); // "true"
 (11).toString(); // "11"

但是对于null和undefined，使用这种方法会报错，如：

undefined.toString(); // Cannot read property 'toString' of undefined
null.toString(); // Cannot read property 'toString' of null

对于object，toSring方法结果不正确，结果永远是”[object Object]”

var obj = {}
obj.toString()
==> 结果为 "[object Object]"
  • String() 该方法适用于所有数据类型（除了对象，结果同toString()）
String(obj); // "[object Object]"
String(11); // "11"
String(true); // "true"
String(undefined); // "undefined"
  • + '' 即使用+运算符加上空字符串（同样对object无效）
    注：上面介绍的toString()以及String()方法是比较常规的方法，而这种不常规的操作，才是程序员的日常。这种方法的原理是：‘+’ 运算符只能相加相同的数据类型，如果两边的数据类型不同，他会优先将其转换成字符串来相加。因此就有一个很常见的坑：1+'1'的结果是多少？有些经验尚浅的程序员会以为结果是2，但很明显，这句话是按照字符串相加的规则来计算的，所以结果为"11"

使用此方法转换成字符串的例子如下：

true+""; // "true"
undefined+""; // "undefined"
obj+""; // "[object Object]"
11+""; // "11"

2、如何将其他的数据类型转换成Number数值类型？

  • Number()
    使用Number函数，可以将任意类型的值转化成数值。Number函数将字符串转为数值，要比parseInt函数严格很多。基本上，只要有一个字符无法转成数值，整个字符串就会被转为NaN。
    示例如下：
// 数值：转换后还是原来的值
Number(324) // 324

// 字符串：如果可以被解析为数值，则转换为相应的数值
Number('324') // 324

// 字符串：如果不可以被解析为数值，返回 NaN
Number('324abc') // NaN

// 空字符串转为0
Number('') // 0

// 布尔值：true 转成 1，false 转成 0
Number(true) // 1
Number(false) // 0

// undefined：转成 NaN
Number(undefined) // NaN

// null：转成0
Number(null) // 0
  • parseInt()
    parseInt方法用于将字符串转为整数。
    如：parseInt('123') // 123
    如果字符串头部有空格，空格会被自动去除。parseInt(' 81') // 81
    如果parseInt的参数不是字符串，则会先转为字符串再转换。
parseInt(1.23) // 1
// 等同于
parseInt('1.23') // 1

字符串转为整数的时候，是一个个字符依次转换，如果遇到不能转为数字的字符，就不再进行下去，返回已经转好的部分，如：

parseInt('12.34') // 12
parseInt('15e2') // 15
parseInt('15px') // 15

如果字符串的第一个字符不能转化为数字（后面跟着数字的正负号除外），返回NaN。

parseInt('abc') // NaN
parseInt('.3') // NaN
parseInt('') // NaN
parseInt('+') // NaN
parseInt('+1') // 1

注：parseInt()方法默认转换成十进制，不过需要注意的是，如果参数本身就是number类型，且是0x开头（16进制），或0o开头（八进制），0b开头（二进制），0开头且后面的数字没有8和9（视为八进制），那么parseInt方法会将其以相应的进制转换成十进制展示出来。另外，如果参数是0x开头的字符串，也会以16进制解析，如parseInt('0x10') // 16
因此，为了防止意外解析成其他进制，建议添加第二个参数按照特定进制解析：如：

parseInt('0x16'); // 22
parseInt('0x16',10) ; // 0
  • parseFloat()
    parseFloat方法用于将一个字符串转为浮点数。parseFloat('3.14') // 3.14
    如果字符串符合科学计数法，则会进行相应的转换。
parseFloat('314e-2') // 3.14
parseFloat('0.0314E+2') // 3.14

如果字符串包含不能转为浮点数的字符，则不再进行往后转换，返回已经转好的部分。如：parseFloat('3.14more non-digit characters') // 3.14
parseFloat方法会自动过滤字符串前导的空格。如：parseFloat('\t\v\r12.34\n ') // 12.34
如果参数不是字符串，或者字符串的第一个字符不能转化为浮点数，则返回NaN。

parseFloat([]) // NaN
parseFloat('FF2') // NaN
parseFloat('') // NaN  注意，parseFloat会将空字符串转为NaN。

parseFloat的转换结果不同于Number函数的地方如下：

parseFloat(true)  // NaN
Number(true) // 1

parseFloat(null) // NaN
Number(null) // 0

parseFloat('') // NaN
Number('') // 0

parseFloat('123.45#') // 123.45
Number('123.45#') // NaN
  • 程序员爱用的非常规方法：字符串 - 0
    如：'22' - 0
  • 更加非常规的方法： + 字符串，这里的+并不是取正值的意思，负数一样可行
    如：+ '22'、+ '-011' ; // -11

注意：上面介绍的使用运算符的转换方法，字符串不能有除了数字外的其他字符（正负号，表示进制的标识除外），字符串中，0b、0x、0o开头会以对应表示的进制解析，如果是’011’，则会解析成十进制而不是二进制，小数同样可以用这两种方法进行转换：

'011'-0  // 11
'0b11'-0  // 3
'0o11'-0  // 9
'0x11'-0  // 17
'0x11.1'-0  // NaN
'011.1'-0  // 11.1

3、如何将将其他数据类型转换为Boolean布尔类型？

  • 常规方法：Boolean() ，如：
Boolean("ss"); // true
Boolean({}); // true
  • 程序员喜欢用的非常规方法 ，双重取反：!! x ，如：
!!"ss" ; // true
!!NaN ; // false
!!{} ; // true
  • 五个falsy值，即转换成Boolean后为false的值：
    0 、 NaN 、 null 、 undefined 、‘’（空字符串）

4、关于JS中的数据在内存中的存储方式

  • 内存
    什么是内存呢，举个例子：你买一个8G 的内存条，操作系统开机即占用 512MB，Chrome 打开即占用 1G 内存， Chrome 各每个网页分配一定数量的内存， 这些内存要分给页面渲染器、网络模块、浏览器外壳和 JS 引擎（V8引擎）。
    JS 引擎将内存分为代码区和数据区， 我们只研究数据区。 数据区分为 Stack（栈内存） 和 Heap（堆内存）。 简单类型的数据（如Number，string等）直接存在 Stack 里， 复杂类型的数据（object对象）是把 Heap 地址存在 Stack 里。如图：
    2018-06-10 JS 里的数据类型转换

  • 对象的存储方式
    上一条说了，对象的存储方式是在stack内存存储一个地址，形成对对象的引用，地址指向heap内存的某个位置，这样才能达到可以随时为对象添加或删除内容的目的。所以有句话这么说，object是对象的引用。它在stack内存存的是地址，而不像其他数据类型直接把内容存在stack内存。

  • 内存图
    因此，这里就要引入“内存图”的概念，方便解决一些复杂问题，具体的内存图样式和应用会在第六部分的面试题中体现。

  • 垃圾回收
    JS中的垃圾回收机制：如果一个对象没有被引用，他就是垃圾，将会被回收。
    内存泄漏就和垃圾回收机制有一定的联系：由于浏览器的一些bug，使得本应被被标记为垃圾的数据没有被标记，而这些垃圾数据占用的内存将永远被占用，哪怕你把当前页面关掉都不会被释放，除非直接关掉整个浏览器。（IE6就有此类bug）

5、深拷贝与浅拷贝

  • 深拷贝：
    先举个例子：
var a = 1;
var b = a;
b = 2 ;

那么经过了上述操作，很明显a的值仍然还是1。
即 b 变而不影响 a，就叫深拷贝（简单数据类型的赋值都是深拷贝）
- 浅拷贝
同样举个栗子先：

var a = {x:1} ;
var b = a ;
b.x = 2;

经过了上述操作，明显，a.x也变成了2.
即 b 变而导致了a变，这就是浅拷贝。

  • 那么有人就问了，难道对象就不能实现深拷贝了吗？
    当然……不是，对象的深拷贝的基本原理大概就是在b = a的这个环节，让 a所引用的对象复制一份，然后重新存在heap内存中的另一个位置，然后b再引用新生成的对象的地址，这样就实现了对象的深拷贝，不过具体代码很复杂，这里暂且不表。

6、几道面试题目

  • 题目一：
var a = 1
var b = a
b = 2
请问 a 显示是几？

内存图解决思路：
2018-06-10 JS 里的数据类型转换

  • 题目二：
var a = {name: 'a'}
var b = a
b = {name: 'b'}
请问现在 a.name 是多少？

2018-06-10 JS 里的数据类型转换

  • 题目三：
var a = {name: 'a'}
var b = a
b.name = 'b'
请问现在 a.name 是多少？

2018-06-10 JS 里的数据类型转换

  • 题目四：
var a = {name: 'a'}
var b = a
b = null
请问现在 a 是什么？

2018-06-10 JS 里的数据类型转换

  • 题目五：
var a = {n:1};  
var b = a; 
a.x = a = {n:2};  
alert(a.x);
alert(b.x);

这道题最坑的一点在这句话a.x = a = {n:2};，很显然如果在日常工作中这么写代码迟早得被打死，但是既然作为题目被写出来了，那咱们还是先仔细分析一下这句话：

赋值是从右到左的，但不要被绕晕了， 其实很简单，从运算符优先级来考虑
a.x = a = {n:2};
.运算优先于=赋值运算，因此此处赋值可理解为

声明a对象中的x属性，用于赋值，此时b指向a，同时拥有未赋值的x属性
对a对象赋值，此时变量名a改变指向到对象{n:2}
对步骤1中x属性，也即a原指向对象的x属性，也即b指向对象的x属性赋值
赋值结果：
a => {n: 2}
b => {n: 1, x: {n: 2 } }

然后老办法，我们画个内存图分析一下吧：
2018-06-10 JS 里的数据类型转换

7、JS中对象的循环引用

什么是对象的循环引用呢？举个例子先：

var obj = {name:'enoch'} ; 
obj.self = obj; 
obj.self.self.self.name; // "enoch"

上述代码就可以实现对象的循环引用，原理是：为对象添加一个属性，属性值就是对象自己（在内存中就是对象引用的地址），从而达到可以通过引用该对象的self属性来引用对象本身。

相关标签： js 前端

上一篇： js中offset、client、scroll的区别

下一篇： js学习笔记3：window的方法，定时器，图片切换

推荐阅读