判斷是否是4的冪
- 🤹序言
- 🚴一、需求分析 - 判斷是否是4的冪等
- 🤾二、實作版本
- 1. 版本一：中規中矩法
- 2. 版本二：按位與
- 3. 版本三：按位與優化
- 4. 版本四：正則匹配法
- ??三、結束語
- 🤼往期推薦
🤹序言
我們以前在做數學的時候，經常會有各種冪等計算，比如說，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;
}
最中規中矩的方法是上面這一種方法，首先先將 num 對 4 取余，如果發現取余后不為 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 的二進制數，
第三個條件是判斷，這些數的末位不能有 1 、3 、 5 、 7 、9 等奇數個 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（下）
👉每天都在紅綠燈前面梭行，不如自己來實作個紅綠燈？
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/304367.html
標籤：其他
上一篇：前端之變（一）：技術的變與不變