饥人谷技术博客我爱编程

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

2018-06-10  本文已影响25人  EnochQin

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

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

注：下面介绍的三种转换成字符串的方法都不适用于对象，所得结果都是"[object Object]"

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(obj); // "[object Object]"
String(11); // "11"
String(true); // "true"
String(undefined); // "undefined"

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

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

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

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

注意：上面介绍的使用运算符的转换方法，字符串不能有除了数字外的其他字符（正负号，表示进制的标识除外），字符串中，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("ss"); // true
Boolean({}); // true

!!"ss" ; // true
!!NaN ; // false
!!{} ; // true

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

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变，这就是浅拷贝。

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属性来引用对象本身。

上一篇 下一篇

猜你喜欢

热点阅读