引言

本文翻譯自 Understanding the JavaScript Modulo Operator，作者：joshwcomeau， 略有刪改。

當(dāng)我第一次學(xué)習(xí)編碼時(shí)，我記得發(fā)現(xiàn)模運(yùn)算符（%）非常令人困惑。??

當(dāng)你不明白它的原理的時(shí)候，它產(chǎn)生的值看起來(lái)完全是隨機(jī)的：

const what = 10 % 4; // 2
const the = 10 % 10; // 0
const heck = 4 % 10; // 4

在這篇文章中，我們將通過(guò)改進(jìn)除法的心理模型來(lái)學(xué)習(xí)這個(gè)運(yùn)算符是如何工作的，文末還將介紹一個(gè)實(shí)用的日常實(shí)踐。

受眾群體:

這篇博客文章是為初級(jí)到中級(jí)JavaScript開發(fā)人員所寫。一些JavaScript知識(shí)是假設(shè)的，但核心內(nèi)容應(yīng)該對(duì)每個(gè)人都有用！

重新思考

假設(shè)我們有下面的計(jì)算：

12 ÷ 4

除法常常讓人感覺非常抽象或理論化，但有一種實(shí)用的方法來(lái)思考它：我們可以把一個(gè)數(shù)字分成大小相等的組。

12 ÷ 4的計(jì)算結(jié)果為3，因?yàn)槊總€(gè)組正好包含3個(gè)項(xiàng)目。從本質(zhì)上講我們正在計(jì)算每個(gè)組中將包含多少個(gè)項(xiàng)目。

在上面的示例中我們的被除數(shù)是12。使用除法時(shí)，它可以用很多不同的方式來(lái)分割。

假設(shè)我們有以下等式：

11 ÷ 4

這個(gè)方程式的值為2.75。每組有2個(gè)完整的項(xiàng)目，然后是另一個(gè)項(xiàng)目的3/4。

如果我們分披薩或蛋糕，這是可行的。但如果這些物品是不可摧毀的呢？如果我們不能把每一項(xiàng)分解成更小的部分呢？

在這種情況下，我們可以將2個(gè)項(xiàng)目放入每個(gè)組，然后剩下3個(gè)額外的項(xiàng)目放入一個(gè)組：

這被稱為余數(shù)。這是模運(yùn)算符產(chǎn)生的結(jié)果。

在這些數(shù)字可以被平均分為幾組的情況下（例如，12 ÷ 4），沒有余數(shù)：

12 % 4; // 0

在被除數(shù)（要被除的數(shù)）不能平均分成幾組的情況下，模運(yùn)算符讓我們知道還剩多少：

11 % 4; // 3

一個(gè)真實(shí)的使用案例

我不是一個(gè)數(shù)學(xué)家，我是一個(gè)Web開發(fā)人員。所有這些數(shù)學(xué)內(nèi)容都很有趣，接下來(lái)讓我們談?wù)勀＿\(yùn)算符如何在前端頁(yè)面上派上用場(chǎng)。

具體來(lái)說(shuō)，有一種問題我似乎經(jīng)常遇到，模運(yùn)算符提供了完美的解決方案：循環(huán)數(shù)組。

假設(shè)我們有一個(gè)三種顏色的數(shù)組。每一秒都想切換到列表中的下一個(gè)顏色。當(dāng)我們到達(dá)列表的末尾時(shí)，我們就繼續(xù)回到第一項(xiàng)：

這是一個(gè)比較棘手的問題。假設(shè)我們有一個(gè)名為timeElapsed的變量，它從0開始，每秒遞增1。我們必須以某種方式將這個(gè)不斷增加的值最終映射到一個(gè)只有3項(xiàng)的數(shù)組。

基于以上我們可以編寫一個(gè)函數(shù)，它會(huì)產(chǎn)生以下結(jié)果：

const COLORS = ['red', 'yellow', 'blue'];
getColor({ timeElapsed: 0 }); // 'red'
getColor({ timeElapsed: 1 }); // 'yellow'
getColor({ timeElapsed: 2 }); // 'blue'
getColor({ timeElapsed: 3 }); // 'red'
getColor({ timeElapsed: 4 }); // 'yellow'
getColor({ timeElapsed: 5 }); // 'blue'
getColor({ timeElapsed: 6 }); // 'red'
getColor({ timeElapsed: 7 }); // 'yellow'
getColor({ timeElapsed: 8 }); // 'blue'

讓我們看看模運(yùn)算符如何幫助我們解決這個(gè)問題：

const COLORS = ['red', 'yellow', 'blue'];
function getColor({ timeElapsed }) {
  const colorIndex = timeElapsed % COLORS.length;
  return COLORS[colorIndex];
}

奇跡般地這正是我們所需要的結(jié)果！只要timeElapsed是一個(gè)整數(shù)，這個(gè)方法總是返回三種顏色中的一種。它會(huì)隨著timeElapsed的增加而循環(huán)通過(guò)3種顏色。

COLORS.length等于3，因?yàn)槲覀兊臄?shù)組中有3種顏色。因此隨著timeElapsed從0遞增到8，該函數(shù)最終執(zhí)行以下計(jì)算序列：

const colorIndex = 0 % 3; // 0
const colorIndex = 1 % 3; // 1
const colorIndex = 2 % 3; // 2
const colorIndex = 3 % 3; // 0
const colorIndex = 4 % 3; // 1
const colorIndex = 5 % 3; // 2
const colorIndex = 6 % 3; // 0
const colorIndex = 7 % 3; // 1
const colorIndex = 8 % 3; // 2

然后我們可以使用這個(gè)colorIndex從COLORS數(shù)組中查找顏色。它保證總是在該數(shù)組的可用索引范圍內(nèi)循環(huán)。

要理解為什么這樣做，值得記住我們的新除法模型：我們?cè)噲D將timeElapsed分成3個(gè)大小相等的組，沒有任何分?jǐn)?shù)或小數(shù)值。余數(shù)總是0、1或2。它永遠(yuǎn)不會(huì)是3+，因?yàn)槿绻€有3個(gè)，我們可以在每組中再放1個(gè)！

從本質(zhì)上講，這就好像我們有能力創(chuàng)建一個(gè)“圓形”數(shù)組。無(wú)論底層的timeElapsed值增長(zhǎng)到多大，我們都可以讓它在COLORS數(shù)組中無(wú)限循環(huán)。

在我看來(lái)，僅憑這個(gè)小技巧，模運(yùn)算符就值得學(xué)習(xí)！這些年來(lái)，我已經(jīng)多次使用這種循環(huán)數(shù)組技巧，這只是模運(yùn)算符的幾個(gè)實(shí)際用例之一。

最后

本文通過(guò)改進(jìn)除法的心理模型來(lái)學(xué)習(xí)模運(yùn)算是如何工作的，并介紹了一個(gè)很實(shí)用的日常實(shí)踐，希望對(duì)你有所幫助。

更多關(guān)于JavaScript模運(yùn)算符的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論