!!~奇怪的写法增加了

群里有小伙伴问这个代码写的什么意思

我最开始也是一脸懵逼, 查了一下才发现这是一个很简便的语法

拆开来看

按位非 ~

对二进制按位取反, 按照MDN的示例:

const a = 5;     // 00000000000000000000000000000101
const b = -3;    // 11111111111111111111111111111101

console.log(~a); // 11111111111111111111111111111010
// Expected output: -6

console.log(~b); // 00000000000000000000000000000010
// Expected output: 2

简单理解, 输出的结果就是 取负 再减1

~(5) == -6
~(-4) == 3
~(0) == -1
~(-1) == 0

转布尔值 !!

!是取反, 并返回布尔值

!!是取反再取反, 将其他数据类型转化为布尔值

! 0 == true
!! 0 == false

! 'aaa' = false
!! 'aaa' == true

! 10 == false
!! 10 == true

~和!!结合indexOf()使用

const arr = ['a', 'b', 'c']
// 正常使用indexOf
if(arr.indexOf('a') === -1){}

// 新写法(下面两种写法效果相同)
if(~arr.indexOf('a')){}
if(!!~arr.indexOf('a')){}

虽然但是, 用includes()方法更方便🤣

const arr = ['a', 'b', 'c']
if (arr.includes('a')) {}

总结

综上, !!~arr.indexOf()写法也就适合作为一个知识点了解一下, 并不适合运用在团队项目, 因为可读性不高, 同时includes()写法更方便.