前言：之前的博客介绍了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 里。如图：
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 显示是几？
内存图解决思路：
题目一
- 题目二：
var a = {name: 'a'}
var b = a
b = {name: 'b'}
请问现在 a.name 是多少？
题目二
- 题目三：
var a = {name: 'a'}
var b = a
b.name = 'b'
请问现在 a.name 是多少？
题目三
- 题目四：
var a = {name: 'a'}
var b = a
b = null
请问现在 a 是什么？
题目四
- 题目五：
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 } }
然后老办法，我们画个内存图分析一下吧：
题目五
7、JS中对象的循环引用
什么是对象的循环引用呢？举个例子先：
var obj = {name:'enoch'} ;
obj.self = obj;
obj.self.self.self.name; // "enoch"
上述代码就可以实现对象的循环引用，原理是：为对象添加一个属性，属性值就是对象自己（在内存中就是对象引用的地址），从而达到可以通过引用该对象的self属性来引用对象本身。
网友评论