在 JavaScript 中，运算符是操作数据、控制逻辑和管理状态的基础工具。Vue 源码中常出现的 1 << n 便是利用位运算符实现高效状态管理的典型案例。本文将系统介绍相关运算符及其在 Vue 中的应用。
1. 算术运算符：+ - * /
+：加法或字符串拼接-：减法*：乘法/：除法
css
let a = 10, b = 3;
console.log(a + b); // 13
console.log(a - b); // 7
console.log(a * b); // 30
console.log(a / b); // 3.3333执行特点：
- 操作数先求值，再应用运算符
+会根据类型触发数字加法或字符串拼接
2. 位运算符：& | ^ ~
&：按位与|：按位或^：按位异或~：按位取反
javascript
let x = 5, y = 3; // 二进制: 0101 & 0011
console.log(x & y); // 1
console.log(x | y); // 7
console.log(x ^ y); // 6
console.log(~x); // -6执行特点：
- 操作数会先转为 32 位整数
- 按位操作直接在二进制层面完成
- 高效且适合做状态标记、掩码操作
3. 位移运算符：<< >> >>>
<<：左移 → 相当于乘以 2 的 n 次方>>：带符号右移 → 左侧补符号位>>>：无符号右移 → 左侧补 0
arduino
console.log(1 << 2); // 4
console.log(-8 >> 2); // -2
console.log(-8 >>> 2); // 1073741822执行特点：
- 操作数转为 32 位整数
- 左移/右移直接在 CPU 层面完成
1 << n可用于生成第 n 位标记值
4. 逻辑运算符：&& ||
&&：逻辑与||：逻辑或
javascript
let a = true, b = false;
console.log(a && "ok"); // "ok"
console.log(b || "default"); // "default"执行特点：
- 左操作数先求值
- 支持 短路求值 → 左操作数可决定是否执行右操作数
- 返回操作数本身，而非布尔值
5. Vue 中的 1 << n 应用
5.1 为什么使用 1 << n
在 Vue 源码中，1 << n 常用于状态标记：
javascript
const STATE = {
INIT: 1 << 0, // 0001
MOUNTED: 1 << 1, // 0010
UPDATED: 1 << 2, // 0100
DESTROYED: 1 << 3 // 1000
};
let status = 0;
status |= STATE.INIT; // 设置 INIT
status |= STATE.UPDATED; // 设置 UPDATED
if (status & STATE.UPDATED) {
console.log('组件已更新');
}5.2 优势
- 内存占用少：一个整数即可表示多个状态
- 操作高效 ：使用
| & ^快速设置、判断、切换状态 - CPU 原子操作：位运算在底层寄存器完成，性能高
- 代码清晰 ：
1 << n清楚表示第 n 个状态
6. 总结
- 算术运算符
+ - * /：数字计算与字符串拼接 - 位运算符
& | ^ ~：二进制操作，高效状态标记 - 位移运算符
<< >> >>>：快速生成标记或移位运算 - 逻辑运算符
&& ||：短路布尔判断，返回操作数本身 - Vue 使用
1 << n：利用位运算管理组件状态、Watcher状态或权限标记，节省内存并提高性能
理解这些运算符及其组合使用，可以更好地阅读 Vue 源码，也能在前端开发中写出高性能、可读性强的代码。
本文部分内容借助 AI 辅助生成，并由作者整理审核。