JavaScript 双位非运算(~~ 操作符)使用场景实例探索

 更新时间:2024年01月23日 08:42:42   作者:南城FE  
本文为大家介绍JavaScript中双位非运算 ~~, ~~ 操作符是一个强大且经常被忽视的特性,它提供了一种快速、简洁的方式来处理数字和执行类型转换,通常可以被用于数学计算和类型转换,我们先了解一下 ~~ 的基本概念和它的一些应用场景

~~ 操作符简介

在 JavaScript 中,~~ 是双位非(bitwise NOT)操作符的双重使用。位非操作符 (~) 将其操作数的所有位进行反转(即,1 变成 0,0 变成 1)。当你连续使用两次(如 ~~),它会再次反转这些位,从而实际上返回原始值。

在给定表达式~foo的情况下,其最终的效果是-(foo + 1)。因此双位非操作~~foo将导致-(-(foo + 1) + 1)。这只适用于整数,给定所有可能的操作数,与~~等价的真实的表达式可能是下面这样的,但真实的内部计算肯定不是这样:

typeof foo === 'number' && !isNaN(foo) && foo !== Infinity
    ? foo > 0 ? Math.floor(foo) : Math.ceil(foo) : 0;

下面是一些双位非运算的例子:

~~null;      // => 0
~~undefined; // => 0
~~0;         // => 0
~~{};        // => 0
~~[];        // => 0
~~(1/0);     // => 0
~~false;     // => 0
~~true;      // => 1
~~1.2543;    // => 1
~~4.9;       // => 4
~~(-2.999);  // => -2

当你正在处理正数,~~ 的功能使其成为 Math.floor 的更好替代方案,虽然它的可读性不太好,但它速度更快且占用的字符更少。

应用场景

  • 将浮点数转换为整数

    • ~~ 可以用于快速将浮点数转换为整数。这种转换类似于 Math.floor(),但更简洁且在某些情况下性能更高。
    • 示例:~~4.9 结果是 4
  • 处理非数值

    • 当对非数值(如字符串)使用 ~~ 时,JavaScript 会首先尝试将其转换为数字。如果转换失败,则结果为 0
    • 示例:~~"hello" 结果是 0
  • 数据清洁和验证

    • 在处理用户输入或不确定的数据时,~~ 可以确保你最终得到一个整数,或者在无法转换的情况下得到 0
  • 性能优化

    • 在一些性能敏感的应用中,~~ 作为一种快速的整数转换方法,可以提供比标准方法更快的性能。

结论

~~ 运算符方法执行很快,当你执行数百万这样的操作非常适用,速度明显优于其他方法,但是代码的可读性比较差。还有一个需要要注意的地方,按位双非运算符方法仅适用于32位整数,即(2**31)-1 = 2147483647。所以对于任何高于2147483647的数字,按位运算符(~~)都会给出错误的结果,所以在这种情况下建议使用Math.floor()

以上就是JavaScript 双位非运算(~~ 操作符)使用场景实例探索的详细内容,更多关于JavaScript双位非运算的资料请关注脚本之家其它相关文章!

相关文章

  • 利用JavaScript编写一个花里胡哨的点击按钮

    利用JavaScript编写一个花里胡哨的点击按钮

    这篇文章主要介绍了如何利用HTML+CSS+JavaScript制作一个花里胡哨的点击按钮。文中的示例代码讲解详细,感兴趣的小伙伴可以了解一下
    2022-03-03
  • Bootstrap Validator 表单验证

    Bootstrap Validator 表单验证

    这篇文章主要介绍了Bootstrap Validator 表单验证的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-07-07
  • JavaScript实现获取设备网络连接信息

    JavaScript实现获取设备网络连接信息

    作为前端开发,做好用户体验是很重要的,日常开发中我们经常可以遇到用户网速慢导致静态资源加载慢,从而给影响用户体验,所以本文来和大家分享一个有趣的API,可以实现获取网络信息
    2023-05-05
  • 微信小程序组件生命周期的踩坑记录

    微信小程序组件生命周期的踩坑记录

    这篇文章主要给大家介绍了关于微信小程序组件生命周期的踩坑记录,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • layui实现table加载的示例代码

    layui实现table加载的示例代码

    今天小编就为大家分享一篇layui实现table加载的示例代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • 使用webpack4编译并压缩ES6代码的方法示例

    使用webpack4编译并压缩ES6代码的方法示例

    这篇文章主要介绍了使用webpack4编译并压缩ES6代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • SVG动画vivus.js库使用小结(实例代码)

    SVG动画vivus.js库使用小结(实例代码)

    本文通过代码给大家介绍SVG动画vivus.js库使用小结,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友参考下吧
    2017-09-09
  • 从延迟处理解析JavaScript惰性编程

    从延迟处理解析JavaScript惰性编程

    这篇文章主要为大家介绍了从延迟处理解析JavaScript惰性编程示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-10-10
  • js实现文章文字大小字号功能完整实例

    js实现文章文字大小字号功能完整实例

    这篇文章主要介绍了js实现文章文字大小字号功能的实现方法,可根据用户习惯调整显示文字的大小.详细讲述了实现这一功能的完整步骤.是非常实用的技巧,需要的朋友可以参考下
    2014-11-11
  • 微信小程序中吸底按钮适配iPhone X方案

    微信小程序中吸底按钮适配iPhone X方案

    这篇文章主要介绍了微信小程序中吸底按钮适配iPhone X方案,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-11-11

最新评论