JavaScript中的数据类型转换

2023-08-13 17:19:34

一、概述

1、JavaScript的数据类型：

JavaScript中设计了5种简单数据类型Number、String、Boolean、Undefined、Null。和复杂数据类型Object。

ES6新增的Symbol数据类型，Symbol在开发中很少遇到，一般在写类库、或保证对象键不重复，这里不做讨论

2、JavaScript中的特殊类型值：

特殊类型的值有：

0、NaN、空字符串""、false、undefined、null

这6个值在 Boolean转型函数中，结果均为false。由于程序控制语句 if 自动使用Boolean函数转换为布尔值，因此这6个值非常重要。

对于Number类型，特殊的值有 0、NaN；（Infinity转换结果与一般Number类型值转换结果一致）
对于String类型，特殊的值为空字符串 ""，
对于Boolean类型，只有true、false两种，false为特殊值；
对于Undefined类型，只有一种类型，特殊值为undefined；
对于Null类型，只有一种类型，特殊值为null。

二、转型函数

一般使用的转型函数：Number()、String()、Boolean()：

1、Number()：

对于Number函数，用于将其他类型的值转换成Number类型，但转换字符串结果不够合理，大多数情况下，使用parseInt、parseFloat函数替代；

转换规则：

如果是布尔值：true、false将会被转换成1、0；
如果是数字值：只是简单的传入和返回；
如果是null值：返回0；
如果是undefined：返回NaN；
如果是字符串：只能识别有效的字符串类型，比如：整数型字符串（忽略前导0）、浮点型字符串（忽略前导0）、16进制格式、空字符串、其他类型均返回NaN；

2、String()：

对于String函数，用于将其他类型的值转换成String类型，转换规则如下：

如果值有toString方法，则调用该没有参数的toString方法；
如果是null，返回"null"；
如果是undefined，返回"undefined";

3、Boolean()：

对于Boolean()函数，使用if语句时会自动调用Boolean函数将其转换为布尔值。对于转换结果，只要记住了上述6中特殊值转换结果均为false，其他均为true。

4、验证：

let specialData = [0, NaN, null, undefined, '', false];
let funArray = [Boolean, String, Number];

funArray.forEach(fun => {
  var tem = {};
  specialData.forEach(data => {
    tem[`${fun.name}( ${data} )`] = fun(data);
  });
  console.table(tem);
})

Boolean( 0 )   //false
Boolean( NaN )  //false
Boolean( null )  //false
Boolean( undefined )  //false
Boolean(  )  //false
Boolean( false )  //false

String( 0 )  //0
String( NaN )  //NaN
String( null )  //null
String( undefined )  //undefined
String(  )  //<empty string>
String( false )  //false

Number( 0 )  //0
Number( NaN )  //NaN
Number( null )  //0
Number( undefined )  //NaN
Number(  )  //0
Number( false )  //0

三、布尔操作

1、逻辑非：

逻辑非是一个操作符，使用!表示，用于将一个操作数转换为布尔值，由于使用双重逻辑非与 Boolean函数的转换结果一致，因此，只要记住了以上6种特殊值，很容易得到转换结果。

let specialData = [0, NaN, null, undefined, '', false];
let tem = {};

specialData.forEach(data => {
  tem[`!!${data}`] = !!(data);
});
console.table(tem)

!!0  //false
!!NaN  //false
!!null  //false
!!undefined  //false
!!   //false
!!false  //false

2、逻辑与(&&)：

逻辑与经常用于判断对象属性是否存在，有助于提高程序健壮性。它遵守以下规则：

如果第一个操作数是对象，返回第二个操作数；
如果第二个操作数为对象，只有在第一个操作数求值结果为true的时候返回该对象；
如果两个操作数均为对象，返回第二个操作数；
如果有一个操作数为null、NaN、undefined，返回对应的null、NaN、undefined；

总结：

逻辑与在对第一个操作数求值结果为true 的时候，返回第二个操作数；当第一个操作数求值结果为false的时候，返回第一个操作数。

3、逻辑或(||)：

逻辑或经常应用在当个结果为false的时候，提供一个默认值。转换规则如下：

如果第一个操作数为对象，返回第一个操作数；
如果第一个操作数结果为false，返回第二个操作数；
如果两个操作数均为对象，返回第一个操作数；
如果两个操作数均为null、NaN、undefined，返回对应的值；

总结：

与逻辑与相反，逻辑或在第一个操作数求值结果为true的时候，返回第一个操作数；当第一个操作数求值结果为false的时候，返回第二个操作数。

码农公寓