JavaScript按位非运算符（~）原理与实战技巧

按位非运算符的基本原理

在JavaScript中，按位非运算符由波浪线（~）表示。它的核心作用是执行按位取反操作，即把操作数的二进制形式每一位翻转（0变1，1变0）。对于整数而言，其数学规律可以表示为：
x ~y = -(x + 1)（注：原文公式有误，应为 ~x = -x - 1）。

以下是基础运算示例：

// 示例 1: 3 的二进制原码为 ...00011，取反后为 ...11100，对应十进制 -4
var num1 = 3;
console.log(~num1); // -4

// 示例 2: -3 取反
var num3 = -3;
console.log(~num3); // 2

// 示例 3: 0 取反
console.log(~0); // -1

实战应用：配合 indexOf 简化代码

在实际开发中，按位非最常见的应用场景是与字符串或数组的 indexOf 方法结合使用，用于判断某元素是否存在。

indexOf 方法返回目标元素首次出现的索引位置。如果找不到，则返回 -1。利用按位非的特性：

• 当找到元素时，索引为 0 或正整数。对其取反后变为 -1 或负数。在布尔上下文中，任何非零数字均为 true。
• 当未找到元素时，返回 -1。对其取反后变为 0。在布尔上下文中，0 被视为 false。

因此，if (~item.indexOf(query)) 等价于传统的 if (item.indexOf(query) > -1) 或 if (item.indexOf(query) !== -1)。

一段典型的优化代码示例如下：

// 假设 item[search_key] 是一个字符串，query 是搜索关键词
if (~item[search_key].toLowerCase().indexOf(query)) {
    _results.push(item);
}

性能对比：真的更快吗？

许多开发者认为位运算在底层比比较运算效率更高。为了验证这一点，我们可以通过简单的循环测试来对比两种写法的执行时间。

var str = "hutaoer go go go!!!!! My lucky number is 33!!";
var query = "33"; // 注意此处 query 应为字符串以匹配 indexOf 行为

// 方案 A: 使用按位非 ~
var timeStart1 = new Date() - 0;
for(var i = 0; i < 1000000; i++) {
    ~str.indexOf(query)
}
var timeEnd1 = new Date() - 0;
console.log('~ cost time:' + (timeEnd1 - timeStart1)); 
// 例如: 循环1000000次 约 127ms

// 方案 B: 使用比较运算 >= 0
var timeStart2 = new Date() - 0;
for(var j = 0; i < 1000000; j++) {
    str.indexOf(query) >= 0
}
var timeEnd2 = new Date() - 0;
console.log('>= cost time:' + (timeEnd2 - timeStart2));
// 例如: 循环1000000次 约 101ms

// 方案 C: 强制类型转换 Boolean(~...)
var timeStart3 = new Date() - 0;
for(var k = 0; k < 1000000; k++) {
    Boolean(~str.indexOf(query))
}
// ...

测试结果通常显示，在百万级循环中，使用比较运算符 >= 0 或 != -1 的性能表现往往优于或不劣于按位非运算。这表明在常规业务场景中，两者性能差异可忽略不计。

代码可读性与最佳实践

尽管 ~ 符号能让代码变得简练，但它牺牲了一定的可读性。对于不熟悉位运算新手的开发者来说，if (~index) 不如 if (index !== -1) 直观。在团队协作中，清晰的意图表达通常优于极致的代码压缩。

建议：

1. 个人项目或极客风格：可以放心使用 ~ 技巧，它确实能减少冗余字符。
2. 企业级团队开发：优先使用 !== -1、>= 0 或 ES6 新增的 .includes() 方法（如 array.includes(value)），以确保代码的可维护性和自解释性。

以上就是JavaScript按位非运算符~原理与应用的内容，更多关于JavaScript位运算技巧的资料请关注本站其它相关文章！