周一同学Zelina🤹 序言
我们以前在做数学的时候，经常会有各种幂等计算。比如说，40=1；41=4；42=16；43=64；44=256；像诸如此类的计算就是幂等。
那如果把它放到前端的程序中，又该如何来说判断呢？
🚴 一、需求分析 - 判断是否是 4 的幂等
首先，我们想要实现的是，当输入一个数时，点击判断。如果符合 4 的幂，那么输入框里面的数变为绿色；反之不符合的话，那么输入框的数就变为红色。如下图所示：
那么接下来，我们由浅入深的来讲解一种实现效果。
🤾 二、实现版本
1. 版本一：中规中矩法
先附上代码：
HTML 代码：
<input id="num" value="65536"></input>
<button id="checkBtn">判断</check><input id="num" value="65536"></input>
<button id="checkBtn">判断</check>CSS 代码：
#num {
color: black;
}
#num.yes {
color: green;
}
#num.no {
color: red;
}#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;
}funciton isPowerOfFour(num) {
num = parseInt(num);
while(num > 1) {
if(num % 4) return false;
num /= 4;
}
return true;
}最中规中矩的方法是上面这一种方法，首先先将 num 对 4 取余，如果发现取余后不为 0 ，那么返回 false ；
如果满足，那么继续对 num 进行除以 4 操作，以此步骤进行循环，直到 num <= 1 为止。
2. 版本二：按位与
先附上代码：
HTML 代码：
<input id="num" value="65536"></input>
<button id="checkBtn">判断</check><input id="num" value="65536"></input>
<button id="checkBtn">判断</check>CSS 代码：
#num {
color: black;
}
#num.yes {
color: green;
}
#num.no {
color: red;
}#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;
}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><input id="num" value="65536"></input>
<button id="checkBtn">判断</check>CSS 代码：
#num {
color: black;
}
#num.yes {
color: green;
}
#num.no {
color: red;
}#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;
}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 的二进制数。
第三个条件是判断，这些数的末位不能有 1 、3 、 5 、 7 、9 等奇数个 0 的情况。
对于这种算法来说，算是性能相对较好、代码相对也比较简洁，所以在实际的使用中，还是值得使用的。
4. 版本四：正则匹配法
先附上代码：
HTML 代码：
<input id="num" value="65536"></input>
<button id="checkBtn">判断</check><input id="num" value="65536"></input>
<button id="checkBtn">判断</check>CSS 代码：
#num {
color: black;
}
#num.yes {
color: green;
}
#num.no {
color: red;
}#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);
}function isPowerOfFour(num) {
// 先把 num 转成一个二进制的字符串
num = parseInt(num).toString(2);
// 再用正则表达式来匹配这个二进制的字符串
return /^1(?:00)*$/.test(num);
}如果遇到计算规模不是很大的时候，我们还可以用正则表达式的方式来处理。上面这种方法利用 JavaScript 转换字符串和正则的特性，来对 4 的幂等进行计算。
相比于第三种方法来说，时间开销确实会大一点，但还是算在可以接受的范围内。
⛹️ 三、结束语
在上面的文章中，我们使用了 4 种方法来解决幂等问题，有时间复杂度很低的按位与优化，还有简洁明了的正则匹配法。不知道大家是否都掌握了呢？
如果您觉得这篇文章有帮助到您的的话不妨点赞支持一下哟~~😉