Fancy Front End Fancy Front End
  • 开始上手
  • 基础
  • 调度器(Scheduler)
  • 更新器(Updater)
  • 渲染器(Render)
  • 更新周期
  • hooks 原理
  • 总结
  • 📙 React源码漂流记
  • 开始上手
  • 基础
  • reactivity
  • runtime-core
  • runtime-dom
  • Awesome Web
  • Awesome NodeJS
话题
  • 导航
  • Q&A
  • 幻灯片
  • 关于
  • 分类
  • 标签
  • 归档
博客 (opens new window)
GitHub (opens new window)

Jonsam NG

让有意义的事变得有意思,让有意思的事变得有意义
  • 开始上手
  • 基础
  • 调度器(Scheduler)
  • 更新器(Updater)
  • 渲染器(Render)
  • 更新周期
  • hooks 原理
  • 总结
  • 📙 React源码漂流记
  • 开始上手
  • 基础
  • reactivity
  • runtime-core
  • runtime-dom
  • Awesome Web
  • Awesome NodeJS
话题
  • 导航
  • Q&A
  • 幻灯片
  • 关于
  • 分类
  • 标签
  • 归档
博客 (opens new window)
GitHub (opens new window)
  • 开始上手
  • plan 计划
  • 基础

  • 调和(Reconciliation)

  • 调度器(Scheduler)

  • 更新器(Updater)

  • 渲染器(Render)

  • hooks原理

  • 总结

    • 开始上手
    • 位运算初探
      • 目录
      • 运算规则
      • 常用的技巧
      • 参考链接
    • React 首次渲染过程
    • React 中的事件监听机制
    • 30 分钟看懂 React 框架原理
  • React源码漂流记

  • react
  • 总结
jonsam
2022-04-14
目录

位运算初探

标签: React17

# 目录

  • 目录
  • 运算规则
  • 常用的技巧
    • 按位与(&)
    • 按位或(|)
    • 按位亦或(^)
    • 按位取反(~)
    • 左移(<<)
    • 右移(>>)
  • 参考链接

# 运算规则

符号 描述 运算规则
& 与 两个位都为 1 时,结果才为 1
| 或 两个位都为 0 时,结果才为 0
^ 异或 两个位相同为 0,相异为 1
~ 取反 0 变 1,1 变 0
<< 左移 各二进位全部左移若干位,高位丢弃,低位补 0
>> 右移 各二进位全部右移若干位,对无符号数,高位补 0,有符号数,各编译器处理方法不一样,有的补符号位(算术右移),有的补 0(逻辑右移)

# 常用的技巧

# 按位与 (&)

  • 清零。任何数与 0 结果都是 0.
  • 取二进制数的指定位:0、1 与 1 与都是其本身,因此只要将需要取得二进制数位为 1,需要舍弃的位置为 0,如 00001111,取二进制数后四位。
  • 判断奇偶:任何偶数的二进制的最后一位都是 0,任何奇数的二进制的最后一位都是 1。因此可以用 (x&1)===0 判断偶数,(x&1)===1 判断奇数,但是注意得是整数。
  • x & (x - 1) 用于消去二进制中 x 最后一位的 1。
  • 位操作统计二进制中 1 的个数:
let count = 0  
while(a){  
  a &= (a - 1);  // 每计算一次二进制中就少了一个 1
  count++;  
}
1
2
3
4
5

# 按位或 (|)

  • 将二进制的某些位置置为 1:0、1 与 1 或都是 1,因此可以将需要置为 1 的位置为 1,如 00001111 将后四位置为 1。
  • 将偶数变成奇数(整数):将整数的二进制最后一位置为 1 就变成了奇数,如 (-4|1)=-3、(4|1)=5。

# 按位亦或 (^)

  • 翻转指定位:0/1 与 1 亦或就会翻转,与 0 亦或则会保持不变。按照这个规则,将需要翻转的位置 1,不需要翻转的位置 0 即可,如 00001111 将翻转后四位。
  • 两数交换:
a ^= b;
b ^= a;
a ^= b;
1
2
3

我们可以从某一个二进制位的变化来理解这个问题:

a:0 b:1
a:1 b:1
a:1 b:0
a:1 b:0
1
2
3
4

# 按位取反 (~)

x 按位取反相当于 -(x+1)。

  • 交互正负:a=~a + 1。
  • 取绝对值:a=a>=0?a:~a+1。

# 左移(<<)

  • 每左移一位,相当于该数乘以 2。

# 右移(>>)

  • 每右移一位,相当于该数除以 2。
  • 正整数和 0 右移 31 位是 0,负整数右移 31 位是 - 1。
  • 16 位的无符号整数,将其高 8 位与低 8 位进行交换,求出交换后的值: a = (a>> 8) | (a << 8)。

# 参考链接

  • 位运算有什么奇技淫巧? (opens new window)
编辑 (opens new window)
上次更新: 2022/04/15, 00:23:56
开始上手
React 首次渲染过程

← 开始上手 React 首次渲染过程→

最近更新
01
渲染原理之组件结构与 JSX 编译
09-07
02
计划跟踪
09-06
03
开始上手
09-06
更多文章>
Theme by Vdoing | Copyright © 2022-2022 Fancy Front End | Made by Jonsam by ❤
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式