JS 9种数据类型区别及相互转换

数据类型分类

基本数据类型

• string
• number

• boolean
• object
• function
• symbol

引用数据类型

• Object
• Date
• Array

不包含任何值的数据类型

• null
• undefined

数据之间的转换

其他数据类型转换成 Number

转换方法

• Number(val)
• parseInt/parseFloat(val)

Number

浏览器内部默认 Number 转换在进行计算

Number("1");    // 1
Number("");     // 0
Number("  ");   // 0
Number("1 2");  // NaN
Number(true);   // 1
Number(null);   // 0
Number(undefined);  // NaN
Number("12px");     // NaN

结论：

• 布尔值转为数字 1 或 0
• null 转为数字 0
• 空字符串转换为数字 0
• undefined 转为 NaN，任何数加上 NaN 都等于 NaN
• 字符串中出现了非数字都将会转换为 NaN

parseInt/parseFloat

parseFloat：顾名思义，将字符串转换成整数

parseFloat：将字符串转换成浮点数

parseInt("1.1");    // 1
parseFloat("1.1");  // 1.1
parseInt("10px");   // 10
parseInt("");   // NaN
parseInt(null); // NaN
parseInt(undefined);    // NaN
parseInt("asd");    // NaN

结论：

• 从左侧第一个字符开始查找，遇到非数字就停止
• parseFloat 比 parseFloat 多识别一个小数点
• 字符串中出现了非数字都将会转换为 NaN

其他数据转换成 String

转换方法

• toString(val)
• String(val)

String(123);    // "123"
String(123 + 1);    // "124"
(123).toString();   // "123"
(123 + 1).toString();   // "124"
[1, 2].toString();  // "1,2"
new Date().toString();  // "Wed Sep 02 2020 17:25:51 GMT+0800 (中国标准时间)"
(123 + "1").toString(); // "1231"

如果 + 号左边出现字符串或对象，就会按照字符串来拼接

其他数据转换成 Boolean

规则

• 只有 0、NaN、null、undefined、空字符串 五个值会被转为 false，其余都是true

• 隐式

• • 在条件判断中，条件处理的结果就是布尔值

• 显式

• • ! 转换为布尔值后取反
  • !! 取反之后再取反
  • Boolean(val)

Boolean(undefined); // false
Boolean(0); // false
Boolean(NaN);   // false
Boolean("");    // false
Boolean({});    // true
!Boolean("");   // true

+ 的转换规则

+ 可以把变量转换为数字

+"10";  // 10
+"asd"; // NaN

快速将时间转换为时间戳

+new Date();    //  1599039501529

== 的转换规则

类型一样时

比较的是堆内存中的地址

1 == 1; // true
"1" == "1"; // true
{} == {};   // false

类型不一样时

只要 null == undefined 为 true，且 null/undefined 和其他任何数据类型的值都不相等

null == undefined;  // true
undefined == "1";   // false
null == "1";    // false

如果 == 号两边数据类型不同，会把两边的数据类型转为数字再做比较