JS里的数据类型转换

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

注：下面介绍的三种转换成字符串的方法都不适用于对象object，所得结果都是”[object Object]”,但是对于函数和数组是可以转换的

• ?.toString()

• String(?)

• ‘’+ ?

  上面的问号？代表是其他数据类型，这样可以快速得知使用方法

方法1：?.toString()

toString方法适用于number类型和boolean类型，但是将数字转换为字符串时，要特别注意，如

//将数字转换为字符串错误写法
1.toString() //Uncaught SyntaxError: Invalid or unexpected token
//正确写法
(1).toString() //"1"
true.toString() //"true"

但是对于null和undefined，使用这种方法会报错，如：
报错信息揭秘：
不能读null的toString方法，null没有toString的api，所以报错，undefined类似

null.toString() //Uncaught TypeError: Cannot read property 'toString' of null
undefined.toString() //Uncaught TypeError: Cannot read property 'toString' of undefined

对于object，toSring方法结果不正确，结果永远是”[object Object]”，函数和数组是比较特别,具体请看代码

//错误写法
{}.toString() //Uncaught SyntaxError: Unexpected token .
//正确写法
({}).toString() //"[object Object]"
var obj = {}
obj.toString() //结果为 "[object Object]"

//函数
//错误写法
function(){}.toString() //Uncaught SyntaxError: Unexpected token (
//正确写法
(function(){}).toString()  //"function(){}"

//数组
[].toString()  //"" 
[1,2,3].toString() //"1,2,3"

方法2：String(?)

String() 该方法适用于所有数据类型（除了对象，结果同toString()）

String(123)  //"123"
String(true) //"true"
String(null) //"null"
String(undefined) //"undefined"
String({name:'frank'}) //"[object Object]"
String([1,2,3])  //"1,2,3"
String(function(){}) //"function(){}"

方法3：’’+ ?（老司机做法）

注：这种方法的原理是：‘+’ 运算符只能相加相同的数据类型，如果两边的数据类型不同，他会优先将其转换成字符串来相加。
‘’+ ? 即使用+运算符加上空字符串（同样对object无效）该方法适用于所有数据类型（除了对象，结果同toString()）

1 + ''   //"1"
false + ''  //"false"
null + ''  //"null"
undefined + ''  //"undefined"
[1,2,3] + ''  //"1,2,3"

var obj = {name : 'frank'}
obj + ''  //"[object Object]"

function(){} + '' //Uncaught SyntaxError: Unexpected token (
(function(){}) + ''  //"function(){}"

[1,2,3] + ''  //"1,2,3"

踩坑时间到

小谷问：1+’1’的结果是多少？
小白说：你这是看不起我吗？2啊
小谷说：你踩坑啦，当然不是，具体，我一一给你道来

1+'1'  //"11"
//上面的做法，相当于是下面这个步骤，根据上面的那个原理得出
(1).toString() + '1'  //"11"

小Tips：

• 三种转换成字符串的方法对于对象来说，是特殊的
• 使用这种方法?.toString()报错，只需给需要转换的东西加上个括号，具体例子请看上面

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

注：parseInt逐个解析字符，而Number函数整体转换字符串的类型。parseInt,parseFloat和Number函数都会自动过滤一个字符串前导和后缀的空格。parseInt(?,?)说明parseInt可以有两个参数

• Number(?)
• parseInt(?,?)
• parseFloat(?)
• ‘?’ - 0
• ‘?’ +

方法1：Number(?)

使用Number函数，可以将任意类型的值转化成数值。Number函数将字符串转为数值，要比parseInt函数严格很多。基本上，只要有一个字符无法转成数值，整个字符串就会被转为NaN。
下面分成两种情况讨论，一种是参数是原始类型的值，另一种是参数是对象。

(1)原始类型值

示例如下：

// 数值：转换后还是原来的值
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

Number('42 cats') // NaN

(2)对象

Number方法的参数是对象时，将返回NaN，除非是包含单个数值的数组。
示例如下：

Number({a: 1}) // NaN
Number([1, 2, 3]) // NaN
Number([5]) // 5

Number背后的转换规则比较复杂。
第一步，调用对象自身的valueOf方法。如果返回原始类型的值，则直接对该值使用Number函数，不再进行后续步骤。
第二步，如果valueOf方法返回的还是对象，则改为调用对象自身的toString方法。如果toString方法返回原始类型的值，则对该值使用Number函数，不再进行后续步骤。
第三步，如果toString方法返回的是对象，就报错。

方法2：parseInt()

parseInt方法用于将字符串转为整数。
如：parseInt(‘123’) // 123
如果字符串头部有空格，空格会被自动去除。parseInt(‘ 81’) // 81
如果parseInt的参数不是字符串，则会先转为字符串再转换。

parseInt(1.23) // 1
// 等同于
parseInt('1.23') // 1

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

parseInt('8a') // 8
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方法会将其以相应的进制转换成十进制展示出来。

parseInt(0o377)  //255
parseInt(0xff)  //255
parseInt(0b11)  //3

如果字符串以0x或0X开头，parseInt会将其按照十六进制数解析。

parseInt('0x10') // 16

如果字符串以0开头，将其按照10进制解析。

parseInt('011') // 11

因此，为了防止意外解析成其他进制，建议添加第二个参数按照特定进制解析：如：
如果第二个参数不是数值，会被自动转为一个整数。这个整数只有在2到36之间，才能得到有意义的结果，超出这个范围，则返回NaN。如果第二个参数是0、undefined和null，则直接忽略。

parseInt('1000', 2) // 8
parseInt('1000', 6) // 216
parseInt('1000', 8) // 512
parseInt('10', 37) // NaN
parseInt('10', 1) // NaN
parseInt('10', 0) // 10
parseInt('10', null) // 10
parseInt('10', undefined) // 10

方法3：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与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

方法4：’?’ - 0

字符串 - 0。如：’11’ - 0 //11`

方法5： + ‘?’

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

• Number方法基本上，只要有一个字符无法转成数值，整个字符串就会被转为NaN
• parseInt方法为了防止意外解析成其他进制，建议添加第二个参数按照特定进制解析
• parseFloat会将空字符串转为NaN

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

小白做法：Boolean() ，如：

Boolean(1)  //true
Boolean({})  //true

老司机做法：双重取反：!! x ，如：

!true //false
!!true //true
!!1 //true

五个falsy值，即转换成Boolean后为false的值：
0 、 NaN 、 null 、 undefined 、‘’（空字符串）

JS中的数据在内存中的存储方式

什么是内存呢，举个例子：

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

对象存储数据的方式

对象的存储方式是在stack栈内存存储一个地址，形成对对象的引用，地址指向heap堆内存的某个位置，object是对象的引用。它在stack栈内存存的是地址，而不像其他数据类型直接把内容存在stack栈内存

垃圾回收

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

window.onunload = function(){
  //需要将所有的事件监听为null，十分麻烦
  document.body.onclick = null;
}

四个关于内存的题目

画内存图（解决问题的方法），只要你不画图，就会错，以不变应万变

题目一：

var a = 1;
var b = a;
b =2;
 //请问 a 是什么？   
//a = ? => a === 1
使用内存图解决思路：

题目二：

var a = {name:'a'};
var b = a;
b = {name: 'b'};
 //请问 a.name 是什么？  
//a.name === " a"

题目三：

var a = {name: 'a'};
var b = a;
b.name = 'b'；
 //请问 a.name 是什么？  
//a.name === " b"

题目四：

var a = {name:'a'};
var b = a;
b = null;
 //请问 a是什么？  
//a === {name: '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是什么？
浏览器读到a.x = a = {n:2};这句话时，先看左面，再往右边看

a.x = a = {n:2}
//a = {n:2},此时的a指向新的地址
//a.x还是之前的地址，并没有发生改变

注：这些箭头并不是真实存在的，只是虚拟的示意

深拷贝与浅拷贝

深拷贝：
var a = 1;
var b = a;
b = 2 ;
//请问a是什么？

a的值仍然还是1。
即 b 变而不影响 a，就叫深拷贝（简单数据类型的赋值都是深拷贝）
浅拷贝

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

变而导致 a变，就叫浅拷贝

JS中对象的循环引用

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

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