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

数据类型分类

基本数据类型

  • string
  • number
  • boolean
  • object
  • function
  • symbol

引用数据类型

  • Object
  • Date
  • Array

不包含任何值的数据类型

  • null
  • undefined

数据之间的转换

其他数据类型转换成 Number

转换方法

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

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

1
2
3
4
5
6
7
8
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:将字符串转换成浮点数

1
2
3
4
5
6
7
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)
1
2
3
4
5
6
7
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)
1
2
3
4
5
6
Boolean(undefined); // false
Boolean(0); // false
Boolean(NaN); // false
Boolean(""); // false
Boolean({}); // true
!Boolean(""); // true

+ 的转换规则

+ 可以把变量转换为数字

1
2
+"10";  // 10
+"asd"; // NaN

快速将时间转换为时间戳

1
+new Date();    //  1599039501529

== 的转换规则

类型一样时

比较的是堆内存中的地址

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

类型不一样时

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

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

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