位运算在前端开发中的真实应用：从日常开发到手撕大厂面试

2024-01-07 10:42:27

前言

“作为一名前端开发人员，你在实际工作中使用过哪些算法？”当被问及这个问题时，许多人的回答可能会是：树和位运算。位运算，作为一种高效且通用的算法技术，在前端开发的各个方面都扮演着至关重要的角色。从日常开发中的优化技巧到复杂的算法实现，位运算都为前端开发人员提供了强大的工具。

位运算的基础

位运算操作二进制数字，每个二进制数字由 0 或 1 组成。位运算符包括：

与运算（&）：对两个二进制数字的每一位进行与运算，结果为 0 或 1。
或运算（|）：对两个二进制数字的每一位进行或运算，结果为 0 或 1。
异或运算（^）：对两个二进制数字的每一位进行异或运算，结果为 0 或 1。
左移运算（<<）：将二进制数字向左移动指定位数，高位补 0。
右移运算（>>）：将二进制数字向右移动指定位数，低位补 0。

日常开发中的位运算应用

优化布尔值检测： 位运算可以优化布尔值检测，例如：

if (value === true) {
  // ...
}

可以用更简洁的方式写成：

if (value) {
  // ...
}

设置和清除标志位： 位运算可以方便地设置和清除标志位，例如：

let flags = 0b11111111;  // 所有标志位都为 1
flags &= ~(1 << 3);       // 清除第 3 位标志位

枚举处理： 位运算可用于简洁地表示和处理枚举值，例如：

const enum Colors {
  Red = 1 << 0,
  Green = 1 << 1,
  Blue = 1 << 2,
}

if (color & Colors.Red) {
  // ...
}

算法和面试中的位运算应用

查找唯一元素： 异或运算可用于查找一个数组中唯一出现的元素，例如：

const findUnique = (nums) => {
  let unique = 0;
  for (const num of nums) {
    unique ^= num;
  }
  return unique;
};

二进制加法： 位运算可以实现高效的二进制加法，例如：

const binaryAdd = (a, b) => {
  let carry = 0;
  let result = 0;
  while (a || b || carry) {
    const sum = (a & 1) + (b & 1) + carry;
    carry = sum > 1 ? 1 : 0;
    result = result | ((sum & 1) << carry);
    a >>= 1;
    b >>= 1;
  }
  return result;
};