按位取反运算符~

~~ 把各种类型转换成数字的方法

Posted by callrenjie on February 8, 2022

在实际的使用过程中,有遇到过需要将undefined字段转为数字0的情况:

比如需要累加计算几个字段的值,其中某个字段可能会是undefined或者为字符串的情况,此时累加计算出的结果就不是一个数字,而是字符串累加或者NaN,影响计算结果。 使用~~来对变量进行二次取反,可得到整数数字:

~~运算符会将字符串数字会转化为数字,非数字字符、空、undefined会转化为整数数字0
var element = {a: 1, b: '0', c: 0}
let {a,b,c} = element;
var d = a + b + c;
// d = 100;

d = ~~a + ~~b + ~~c;
// d = 1;
~ 位取反运算符是把变量的底层数组取反。两次取反操作后会变成数字。

这里展示对各种类型测试的结果:

String
(数字内容字符串)~~“123” = 123  (非数字字符串)~~“asd” = 0   (空字符串)~~“” = 0

Boolean
(true)~~true = 1  (false) ~~false = 0

null
~~null = 0

undefined
~~undefined = 0

Symbol
~~Symbol() = 错误:Cannot convert a Symbol value to a number 不能把Symbol类型转换为数字

Object
~~{} = 0

Array
(空数组)~~[] = 0  (一个数字的数组)~~[1] = 1 (多个数字的数组)~~[1,2] = 0

Funciton
~~ function f(){} = 0

NaN
~~NaN = 0

由上述结果可得出结论:使用~~后除了Symbol不能转为数字,其他各类型都会转为数字,即使是 undefined 也不会出现NaN的情况。这可比 + 好用多了。