~~的妙用及各类型与数字转换的两种方法

323 阅读1分钟

前言

在项目中常常会遇到需要将各种非Number类型转成Number的情况,尤其是使用了Typescript后对于类型的使用更加敏感,一不留神就是一片‘红海’。

一、+的妙用

我们经常使用toFixed()来保留2位小数,而在使用过程中发现,toFixed()返回的却是String类型,我们可以利用+的类型转换规则来转换成Number类型,但是是否所有的类型都可以使用+来转成number类型呢?

//string
const stringA = +'123';  //123
//boolean
const booleanA = +false;  //0
//null
const nullA = +null;  //0
//Array
const arrayA = +[];  //0
const arrayA = +[1];  //1
const arrayA = +[1,2];  //NaN
//object
const objectA = +{ };  //NaN
//Function
const functionA = +function () { };  //NaN
//undefined
const undefinedA = +undefined;  //NaN
//NaN
const NaNA = +NaN;  //NaN
//Symbol
const symbolA = +Symbol();  //报错

由上面各种情况可知,项目中的水太深,+ 把握不住!

二、~~的妙用

~ 按位取反运算符是把变量的底层数组取反,两次取反操作后会变成数字。同样我们测试一下:

//Array
const arrayA = ~~[1,2];  //0
//object
const objectA = ~~{ };  //0
//Function
const functionA = ~~function () { };  //0
//undefined
const undefinedA = ~~undefined;  //0
//NaN
const NaNA = ~~NaN;  //0
//Symbol
const symbolA = ~~Symbol();  //报错

可以看出,~~除了Symbol不能转为数字,其他各类型都会转为数字,即使是 undefined 也不会出现NaN的情况。