JavaScript中的位运算符在实际开发中有哪些妙用?

位运算符在JavaScript中可用于高效取整、奇偶判断、布尔切换、变量交换、权限管理及集合操作。1. ~~和|0可快速取整;2. &1判断奇偶;3. ^1切换布尔值;4. 异或交换变量;5. 位掩码管理权限;6. 位运算模拟集合操作,适用于性能敏感场景。

javascript中的位运算符在实际开发中有哪些妙用?

JavaScript中的位运算符虽然看起来偏底层,但在实际开发中确实有不少巧妙且实用的场景。它们操作的是数值的二进制表示,因此在某些特定情况下效率高、代码简洁。

1. 快速取整:~~ 和 |0

JavaScript中浮点数和整数没有严格区分,但有时需要快速将数字转为整数,位运算是一种高效方式。

使用~~num或num | 0可以去掉小数部分,效果类似Math.floor(对正数)或Math.trunc。

// 示例

~~3.7 → 3
12.9 | 0 → 12
~~(-3.7) → -3(比 Math.floor 更符合直觉)

适合用于解析坐标、索引等不需要四舍五入的场景。

立即学习“Java免费学习笔记(深入)”;

2. 判断奇偶性:& 1

一个数与 1 进行按位与,结果为 1 表示奇数,0 表示偶数。

num & 1 === 1 → 奇数
num & 1 === 0 → 偶数

// 比 num % 2 === 1 更快,尤其在循环中处理大量数据时

例如遍历数组时交替样式:

index & 1 ? ‘odd’ : ‘even’

3. 切换布尔值:^ 1(异或)

利用异或运算可以快速翻转布尔值对应的 0/1。

假设用 0 表示 false,1 表示 true:

flag = flag ^ 1 → 实现 toggle 效果

// 初始 flag = 0,第一次执行变为 1,第二次变回 0

适合状态机、开关逻辑等简单切换场景。

4. 交换两个变量:不使用临时变量

通过异或可以实现两个整数的交换:

a = a ^ b;
b = a ^ b; // 相当于 a
a = a ^ b; // 相当于 b

// 结果 a 和 b 互换

虽然现代 JS 引擎优化很好,这种写法更多是技巧展示,实际开发推荐使用解构赋值:[a, b] = [b, a]

5. 权限管理:使用位掩码(Bit Masking)

多个权限可以用一个整数的每一位来表示,节省存储空间,操作高效。

例如定义权限:

const READ = 1 // 1
const WRITE = 1 // 2
const DELETE = 1 // 4

组合权限:

const ADMIN = READ | WRITE | DELETE; // 7

检查权限:

(ADMIN & READ) !== 0 → 有读权限
(role & WRITE) !== 0 → 有写权限

这种模式在后端返回权限码、前端做按钮控制时很实用。

6. 数组去重合并:Set + 位运算(特定场景)

虽然不常见,但在处理小范围整数集合时,可以用位运算模拟集合操作。

比如用一个数字的每一位代表是否包含某个值(仅适用于 0~31):

setA = (1 // 包含 1,3,5
setB = (1
union = setA | setB; // 并集
intersection = setA & setB; // 交集
difference = setA & ~setB; // 差集

适合处理标志位、游戏状态标记等轻量级集合操作。

基本上就这些。位运算不是日常必备,但在性能敏感、代码简洁性要求高的地方能派上用场。理解它们有助于阅读他人代码,也能在合适时机写出更“巧”的解决方案。

以上就是JavaScript中的位运算符在实际开发中有哪些妙用?的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1524740.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
如何利用CSS-in-JS技术动态管理组件样式?
上一篇 2025年12月20日 17:04:27
Vuetify v-data-table 行删除:避免误删最后一行的策略
下一篇 2025年12月20日 17:04:41

相关推荐

  • VSCode里怎么卸载TS_VSCode移除TypeScript及相关依赖包教程

    答案:彻底卸载TypeScript需禁用VSCode内置服务、卸载相关扩展并清理项目与全局的TypeScript包。首先在设置中调整typescript.tsdk路径或禁用自动类型获取,将.ts文件关联为纯文本;其次通过扩展面板卸载所有TypeScript相关插件;最后删除项目中的typescrip…

    2026年9月2日
    000
  • VSCode怎么写CSS文件_VSCode创建和编写CSS样式表的详细方法与技巧教程

    首先在VSCode中创建CSS文件并编写样式,利用IntelliSense和Emmet实现智能补全与高效编码;接着通过模块化文件结构和扩展如CSS Peek管理大型项目;最后结合Live Server实时预览和浏览器开发者工具联动调试,提升CSS开发效率。 VSCode中编写CSS文件远比你想象的要…

    2026年9月2日
    100
  • Swoole怎么在不重启服务的情况下更新配置

    答案:Swoole通过信号机制、配置中心定时检查、管理接口触发实现配置热加载,需注意多进程同步与性能优化。 在使用 Swoole 时,想要在不重启服务的情况下更新配置,核心思路是利用进程间通信机制实现配置热加载。Swoole 提供了信号机制和自定义事件,可以结合这些特性动态重载配置。 1. 使用信号…

    2026年9月2日
    200
  • VSCode的代码怎么运行_VSCode多语言代码执行方法与配置教程

    VSCode通过调用系统已安装的语言运行时来运行代码,需先安装对应语言环境,再结合扩展、集成终端或配置文件实现执行。 VSCode运行代码,说白了,它自己其实不“运行”代码,它更像是一个极其智能的遥控器和指挥中心。它利用你系统里已经安装好的各种语言运行时、编译器或解释器来完成这个任务。核心思路就是:…

    2026年9月2日
    200
  • VSCode怎么侧边显示函数_VSCode大纲视图侧边栏函数列表教程

    最直接的方式是启用VSCode的“大纲视图”功能,它能清晰列出文件中的函数、类等符号,支持快速导航与筛选,提升代码阅读与重构效率。 VSCode中想要在侧边栏看到函数列表,最直接、也是我个人觉得效率最高的方式,就是利用它的“大纲视图”(Outline View)。这个功能就像给你的代码文件画了一张清…

    2026年9月2日
    200
  • Java中如何创建一个小型学习笔记管理工具

    答案:Java学习笔记管理工具包含Note类和NoteManager类,通过Main类实现添加、查看、搜索笔记功能,支持用户交互。 用Java创建一个小型学习笔记管理工具,关键在于结构清晰、功能实用。核心功能包括添加笔记、查看笔记、搜索笔记和保存数据。下面是一个简单但完整的实现思路和代码示例。 1.…

    2026年9月2日
    100
  • 如何在Java中开发小型库存系统

    答案:通过Java面向对象设计实现小型库存系统,包含商品类Item和库存管理类InventoryManager,使用HashMap存储商品信息,支持增删改查、入库出库操作,并提供命令行界面进行交互,适合学习基础语法与集合应用。 开发一个小型库存系统在Java中可以通过面向对象的设计思路来实现,重点是…

    2026年9月2日
    100
  • 在VS Code中正确配置Docker容器PHP环境

    本文旨在解决在使用VS Code进行Docker化PHP项目开发时,IDE无法识别容器内PHP版本,反而使用本地PHP版本的问题。核心解决方案是利用VS Code的Remote Containers扩展,实现直接在Docker容器内部进行开发,从而确保VS Code的PHP工具链与容器环境保持一致,…

    2026年9月1日
    200
  • 详解MySql Group by函数真正的打开方法!

    本篇文章给大家介绍mysql group by 函数的正确打开方式,希望对大家有帮助! MySql Group by 函数的正确打开方式 在使用分组函数时, 进行结果集筛选, 遇到的一些问题以及解决办法【推荐:mysql视频教程】 1. 应用场景 有两张表 文章表(一对多留言表) t_posts: …

    用户投稿 2026年9月1日
    100
  • Java方法重载与重写有什么区别 如何合理使用

    方法重载发生在同一类中,方法名相同但参数列表不同,用于提供多种调用方式;方法重写发生在子类继承父类时,方法名、参数列表和返回类型必须一致,用于改变父类方法的实现。 方法重载(Overload)和重写(Override)是Java中实现多态的两种重要机制,它们虽然都涉及方法名的重复使用,但应用场景和规…

    2026年9月1日
    200
  • Java Stream.flatMap方法处理嵌套集合

    flatMap可将嵌套集合展平为单一流,通过将每个元素转换为流并合并结果,实现一对多映射。例如,二维字符串列表经flatMap处理后得到单一字符串列表;在对象集合中,如学生含课程列表,可通过flatMap提取所有课程并去重;对于多层结构(学校→班级→学生→课程),可连续使用flatMap逐层展开,最…

    2026年9月1日
    200
  • VSCode标签怎么自动补齐_VSCodeHTML/XML标签自动补全设置教程

    答案:VSCode中HTML/XML标签自动补齐失效通常由Emmet未启用、文件类型识别错误或设置冲突导致。需检查emmet.triggerCharacters和editor.quickSuggestions设置,确认文件语言模式正确,并确保emmet.includeLanguages配置合理。同时…

    2026年9月1日
    100
  • PHP cURL查询Notion数据库:掌握正确的过滤条件构建方法

    本教程详细阐述了使用PHP cURL向Notion API查询数据库时,如何正确构建包含过滤条件的POST请求体。核心问题在于,过滤条件必须嵌套在请求载荷的filter键下,而非直接作为顶级属性。文章通过对比错误与正确的代码示例,指导开发者精确地筛选Notion数据库数据,避免获取冗余信息,从而提高…

    2026年9月1日
    100
  • Java Collections.frequency方法如何统计频率

    Collections.frequency方法用于统计集合中某元素出现次数,接收集合和目标元素为参数,遍历集合通过equals()比较并返回匹配次数;适用于List等Collection类型,支持自定义对象(需重写equals),可统计null,但集合为null时抛异常,时间复杂度O(n),对Set…

    2026年9月1日
    300
  • java学习应用篇|windows安装JDK及配置环境变量

    java学习应用篇|windows安装JDK及配置环境变量java学习应用篇|windows安装JDK及配置环境变量java学习应用篇|windows安装JDK及配置环境变量java学习应用篇|windows安装JDK及配置环境变量

    学习前言 实际上,本系统中最有价值的内容已经在前两篇文章中介绍完毕,接下来的内容主要是对前面知识的应用。新知识层出不穷,每隔几天就会有新的概念和框架出现。我们在本系列学习中,力求通过基本的学习方法来深入探究代码的本质,这样无论将来出现什么新的知识点,我们都能迅速学习并应用。小刀的水平有限,欢迎大家在…

    2026年9月1日 用户投稿
    200
  • ChatGPT怎么用_ChatGPT注册登录与基础使用教程

    答案是注册并掌握提问技巧后,ChatGPT能成为高效工具。需通过官网注册,验证邮箱和手机号,登录后可在聊天界面输入问题,利用上下文记忆、角色设定、明确指令等技巧提升回答质量,免费版适合初试,Plus版则提供GPT-4、插件、数据分析等高级功能,适合高频深度使用者。 ☞☞☞AI 智能聊天, 问答助手,…

    2026年9月1日
    200
  • 怎么在VSCode安装Pylint_VSCode配置Python代码检查工具Pylint教程

    答案是安装并配置Pylint扩展与Python包,再在VSCode中启用并自定义规则。首先安装VSCode的Pylint扩展,然后通过pip install pylint在Python环境中安装库;接着在settings.json中设置”python.linting.pylintEnab…

    2026年9月1日
    700
  • PHP集成Notion API:数据库查询过滤实战指南

    本文旨在解决PHP通过cURL调用Notion API进行数据库查询时,因请求体结构不当导致过滤无效的问题。核心内容是阐明Notion API的POST /v1/databases/{database_id}/query接口要求将所有过滤条件封装在filter键下,并提供正确的PHP代码示例,确保开…

    2026年9月1日
    100
  • 怎么清除VSCode的设置_VSCode恢复默认设置与用户配置清除教程

    清除VSCode设置需删除用户配置文件夹,路径因系统而异,可选择完全或部分清除,建议先备份;用户设置影响全局,工作区设置仅限当前项目,优先级依次升高;扩展设置通常存于settings.json,卸载或手动删除可清除,部分数据可能残留;也可通过命令面板清空设置或重置单项,同步功能需注意云端覆盖。 清除…

    2026年9月1日
    300
  • Piti插件怎样添加过渡动画效果_Piti插件添加过渡动画效果步骤

    首先启用Piti插件动画模块,再设置元素初始与目标状态,接着配置过渡时间及缓动函数,然后绑定悬停或点击等触发事件,最后导出CSS或JSON代码用于开发或在Figma中预览动画效果。 如果您在使用Piti插件进行页面元素设计时,希望增强视觉流畅性,可以通过添加过渡动画效果来实现元素状态变化的平滑呈现。…

    2026年9月1日
    1400

发表回复

登录后才能评论
关注微信