幂等问题 vs 如何判断是否是4的幂

简介: 该文章探讨了如何判断一个给定的十进制整数是否为4的幂,并提供了多种JavaScript实现方法,包括使用循环、位运算以及正则表达式等不同的解决方案。

🤹序言

我们以前在做数学的时候,经常会有各种幂等计算。比如说,40=1;41=4;42=16;43=64;44=256;像诸如此类的计算就是幂等。

那如果把它放到前端的程序中,又该如何来说判断呢?

🚴一、需求分析 - 判断是否是4的幂等

首先,我们想要实现的是,当输入一个数时,点击判断。如果符合4的幂,那么输入框里面的数变为绿色;反之不符合的话,那么输入框的数就变为红色。如下图所示:

实现效果

那么接下来,我们由浅入深的来讲解一种实现效果。

🤾二、实现版本

1. 版本一:中规中矩法

先附上代码:

HTML 代码:

<input id="num" value="65536"></input>
<button id="checkBtn">判断</check>

CSS 代码:

#num {
   
  color: black;
}

#num.yes {
   
  color: green;
}

#num.no {
   
  color: red;
}

JS 代码:

funciton isPowerOfFour(num) {
   
    num = parseInt(num);

    while(num > 1) {
   
        if(num % 4) return false;
        num /= 4;
    }
    return true;
}

最中规中矩的方法是上面这一种方法,首先先将 num4 取余,如果发现取余后不为 0 ,那么返回 false

如果满足,那么继续对 num 进行除以 4 操作,以此步骤进行循环,直到 num <= 1 为止。

2. 版本二:按位与

先附上代码:

HTML 代码:

<input id="num" value="65536"></input>
<button id="checkBtn">判断</check>

CSS 代码:

#num {
   
  color: black;
}

#num.yes {
   
  color: green;
}

#num.no {
   
  color: red;
}

JS 代码:

function isPowerOfFour(num) {
   
    num = parseInt(num);

    while(num > 1) {
   
        // 对4取余相当于判断二进制数的末两位
        if(num & 0b11) return false;
        // 将 num 右移两位
        num >>>= 2;
    }
    return true;
}

第二种方式我们可以采用按位与操作,对 4 取余就相当于判断二进制数的末两位,也就是 0b11 。之后将 num 右移两位,即 num >>>= 2

3. 版本三:按位与优化

先附上代码:

HTML 代码:

<input id="num" value="65536"></input>
<button id="checkBtn">判断</check>

CSS 代码:

#num {
   
  color: black;
}

#num.yes {
   
  color: green;
}

#num.no {
   
  color: red;
}

JS 代码:

function isPowerOfFour(num) {
   
    num = parseInt(num);

    return num > 0 &&
            (num & (num - 1)) === 0 &&
            (num & 0xAAAAAAAA) === 0
}

版本二事实上是 log(n) 的一个事件复杂度,那我们还可以再继续优化,也就是上面的版本三,常数复杂度的算法 O(1)

首先第一个条件是, num 必须大于 0

第二个条件呢,是 (num & (num - 1)) === 0 。用于在每一次计算后去掉当前数最末位的 1 。如果数字只有一个 1 时,过滤出数字里面只有一个 1 的二进制数。

第三个条件是判断,这些数的末位不能有 13579 等奇数个 0 的情况。

对于这种算法来说,算是性能相对较好、代码相对也比较简洁,所以在实际的使用中,还是值得使用的。

4. 版本四:正则匹配法

先附上代码:

HTML 代码:

<input id="num" value="65536"></input>
<button id="checkBtn">判断</check>

CSS 代码:

#num {
   
  color: black;
}

#num.yes {
   
  color: green;
}

#num.no {
   
  color: red;
}

JS 代码:

function isPowerOfFour(num) {
   
    // 先把 num 转成一个二进制的字符串
    num = parseInt(num).toString(2);
    // 再用正则表达式来匹配这个二进制的字符串
    return /^1(?:00)*$/.test(num);
}

如果遇到计算规模不是很大的时候,我们还可以用正则表达式的方式来处理。上面这种方法利用 JavaScript 转换字符串和正则的特性,来对 4 的幂等进行计算。

相比于第三种方法来说,时间开销确实会大一点,但还是算在可以接受的范围内。

⛹️三、结束语

在上面的文章中,我们使用了 4 种方法来解决幂等问题,有时间复杂度很低的按位与优化,还有简洁明了的正则匹配法。不知道大家是否都掌握了呢?

如果您觉得这篇文章有帮助到您的的话不妨点赞支持一下哟~~😉

🤼往期推荐

👉紧跟月影大佬的步伐,一起来学习如何写好JS(上)

👉紧跟月影大佬的步伐,一起来学习如何写好JS(下)

👉每天都在红绿灯前面梭行,不如自己来实现个红绿灯?

相关文章
|
小程序
微信小程序 - 二维码数据解析,如何扫码进入开发版测试二维码数据
微信小程序 - 二维码数据解析,如何扫码进入开发版测试二维码数据
764 0
|
小程序 开发者
微信小程序通过普通二维码扫码进入指定页面带参数
微信小程序通过普通二维码扫码进入指定页面带参数
|
缓存
IDEA 卡住不动的解决办法,超级管用。。。
IDEA 卡住不动的解决办法,超级管用。。。
2142 0
IDEA 卡住不动的解决办法,超级管用。。。
|
12月前
|
JavaScript 前端开发 API
紧跟月影大佬的步伐,一起来学习如何写好JS(上)
该文章跟随月影老师的指导,探讨了编写优质JavaScript代码的三大原则:各司其职、组件封装与过程抽象,通过具体示例讲解了如何在实际开发中应用这些原则以提高代码质量和可维护性。
紧跟月影大佬的步伐,一起来学习如何写好JS(上)
|
12月前
|
JavaScript 前端开发 算法
紧跟月影大佬的步伐,一起来学习如何写好JS(下)
该文章延续了上篇的内容,进一步探讨了编写优秀JavaScript代码的实践,强调了代码风格一致性、性能优化、团队约定的重要性,并通过实际案例分析了如何在不同场景下写出合适的代码。
|
4月前
|
人工智能 边缘计算 5G
5G时代,别让能耗成为“隐形杀手”——聊聊5G网络的能耗管理
5G时代,别让能耗成为“隐形杀手”——聊聊5G网络的能耗管理
205 13
|
12月前
|
JavaScript 前端开发
每天都在红绿灯前面梭行,不如自己来实现个红绿灯?
该文章通过JavaScript实现了交通信号灯的模拟,使用HTML、CSS和JS创建了一个自动循环变换红黄绿三色灯状态的动态效果,并详细解释了其实现过程和技术要点。
|
12月前
|
算法 JavaScript C++
如何给扑克洗牌才能更公平
该文章讨论了在线桌游中实现公平洗牌的算法,介绍了几种随机化技术来确保卡牌或游戏元素的排列真正随机,从而保证游戏的公正性和玩家体验。
|
10月前
|
消息中间件 监控 Java
线程池关闭时未完成的任务如何保证数据的一致性?
保证线程池关闭时未完成任务的数据一致性需要综合运用多种方法和机制。通过备份与恢复、事务管理、任务状态记录与恢复、数据同步与协调、错误处理与补偿、监控与预警等手段的结合,以及结合具体业务场景进行分析和制定策略,能够最大程度地确保数据的一致性,保障系统的稳定运行和业务的顺利开展。同时,不断地优化和改进这些方法和机制,也是提高系统性能和可靠性的重要途径。
279 62
|
11月前
|
Java API Apache
Springboot+shiro,完整教程,带你学会shiro
这篇文章提供了一个完整的Apache Shiro与Spring Boot结合使用的教程,包括Shiro的配置、使用以及在非Web和Web环境中进行身份验证和授权的示例。
648 2
Springboot+shiro,完整教程,带你学会shiro

热门文章

最新文章