如何用故事記憶法記住 JavaScript 運算子優先順序表

更新於 發佈於 閱讀時間約 3 分鐘
raw-image



不同的運算子一起出現時,會根據其優先性(Precedence)來決定誰先誰後。MDN也很貼心的整理成表格了。

雖然有表格可以供我們查找,但是總不可能每一次用到運算子的時候,我們都去查找吧?我們最好對這張表有直觀上的理解與記憶。

那麼就讓我來分享我如何理解與記憶這張表吧!

運算子在做甚麼?有哪些種類?

根據記憶法,要記憶一大堆資訊時。第一步就是將用我們可以理解的方式分成幾個大類(根據頭腦記憶的極限,最好限縮在 7+-2個大類)。第二步就是用我們已經熟悉的知識架構來切入分類。

那我們就從熟悉的四則運算開始吧,大家應該都記得其原則是

1.先乘除,後加減

2.()裡面的優先計算

所以得出,運算會有三種: 加減、乘除、括號()

接著,我們已寫code的經驗去想運算子還會做什麼事?

  • 比較
    • >
    • <
    • ==
  • 邏輯 AND OR NOT
  • 賦值 =

到目前為止,我們可以將運算子分成六大類

  • ()
  • 乘除
  • 加減
  • 比較
  • 邏輯
  • 賦值

記憶優先表記憶

接著,讓我們來看看MDN整理的,這張表的優先性是從19(最高)排到最低(1)。我們就用數字王室與平民的故事來記憶這張表吧。

數字王室的成員

1.()

讓我們想想四則運算中的(),用()就能決定那些運算先進行。所以()的優先性會是最高的,所以其對應到的優先性是19

2.加減乘除

再來,讓我們回到基礎的運算,加減。他們對應到的優先性是12。為了幫助記憶,我們可以想像是撲克牌中的Q,你可以想像皇后的職責是對事物進行加減。

比加減更高一層就是 乘除,。他們對應到的優先性是13。你可以把它記成K國王的職等比皇后高,可以對事物進行乘除。


在運算中,除了基礎的加減乘除,還會有 累積、累減、指數運算等計算,他們的優先性都高於基本的運算。

3.指數運算 ...**…

先看指數運算,他的符號是...**…

這裡我跟各位坦承,這個除非要做演算法之類的運算,不然很少用。但是它對於我的這套記憶方法很有用處。

指數運算對應的優先性是14,延續剛剛13是k的聯想。我可以把**… ** …** 聯想成 法國國王路易14。它的下場是被斷頭台砍頭,而這個符號剛好蠻像被斷頭台斷頭的樣子(發揮你的想像力)。

4.累加累減

再來則是前後的累加累減 ++ … 與 … ++

前累加( ++ … )的優先性對應到15,後累加(… ++)對應的是16

我們一樣從圖像來想像,++長得像皇冠,我們可以延續路易14的故事。在可憐的路易14被砍頭後,他們後代又戴上了皇冠(對應到 ++ … 15),但後來皇冠又掉落了(對應… ++ 16)

平民-比較 與 邏輯

在記憶完數字王室後,我們來看看屬於平民階層的比較與邏輯。

為了分成勝負,比誰的拳頭大往往比邏輯有用。所以比較的優先性會高於邏輯。

1.比較

而比較,就是想分出高低,所以最高的比較會是 > 或 < ,他們對應的優先性是10。對應撲克牌剛好就只是數字,不再是穿西裝的牌了。

在無法分出高下時,我們才會求和,來看我們相不相等。所以接著是 === ! ==,他們對應的是9

2.邏輯

在比較之後,我們才要講邏輯。邏輯中有 AND 與 OR。

AND必須兩者都相等,比較嚴格,所以優先性較高,是 5。

OR 只要有一者正確,沒那嚴格。優先性是4。

等等,我們遺忘了NOT這個邏輯。

NOT的優先性超高,是15。

這裡我們一樣用上面的數字王室的故事來講,當15號王重拾皇冠後,人民對國王說,我們有否定你的權利,所以人民的 NOT 與15號王的優先性一樣高。

最後的賦值

在我們為了運算子安排好優先位置後,我們還剩下賦值這一類。而他們優先性真的相較之下真的是最低的。他們優先性是2。

這已寫程式的經驗也好理解,通常都要先等運算完再賦值。

最後現在我們的表會長這樣

raw-image



歡迎來到我的部落格!這裡是一個分享前端開發、貓咪寫真以及與菲律賓女友生活的文化衝擊與英文學習的個人空間。我熱愛前端技術,喜歡追求最新的網頁開發趨勢,並將這些知識分享給大家。
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
當前大多數網站不再是靜態網站,需要向後端的 Server 請求資料。而且,這些資料的請求通常是非同步進行的。在React中,目前被視為最佳實踐的方式是使用 useEffect。
我在學習vue的過程中,一開始是先從輕前端(用CDN引入)開始學。這時候看Vue的官方文件會有些困惑,原因是有沒有用vite建構,在元件寫法上會有些差異。所以我寫下這篇筆記來整理這兩者寫法上的差異。 起手式 1.非建構:使用cdn 在html的header中插入以下script標籤 <s
我相信大家應該都有在表單上看過開關元件,那麼我們會拿它來做甚麼?要怎麼把它做出來?
Media query可以很複雜,但是這裡KP只談最簡單、最實用的基礎。
對於前端工程師而言,如何處理圖片是一個看是基本但是又重要的技能。就像是日本料理的師傅要懂得處理生魚片一樣。 因為flexbox的flex-item有自動伸縮的功能,所以要注意裡面的圖片如何被伸縮。
在上一篇文章-跟著KP用21天征服Responsive Layout-W2-Flexbox基礎-flex-item的伸縮 。我們提到了flex-item的width會由自身的內容長度決定。這其實是件很不可控的事情,所以我們在開發上會傾向於對flex-item設置width。 flex-item
當前大多數網站不再是靜態網站,需要向後端的 Server 請求資料。而且,這些資料的請求通常是非同步進行的。在React中,目前被視為最佳實踐的方式是使用 useEffect。
我在學習vue的過程中,一開始是先從輕前端(用CDN引入)開始學。這時候看Vue的官方文件會有些困惑,原因是有沒有用vite建構,在元件寫法上會有些差異。所以我寫下這篇筆記來整理這兩者寫法上的差異。 起手式 1.非建構:使用cdn 在html的header中插入以下script標籤 <s
我相信大家應該都有在表單上看過開關元件,那麼我們會拿它來做甚麼?要怎麼把它做出來?
Media query可以很複雜,但是這裡KP只談最簡單、最實用的基礎。
對於前端工程師而言,如何處理圖片是一個看是基本但是又重要的技能。就像是日本料理的師傅要懂得處理生魚片一樣。 因為flexbox的flex-item有自動伸縮的功能,所以要注意裡面的圖片如何被伸縮。
在上一篇文章-跟著KP用21天征服Responsive Layout-W2-Flexbox基礎-flex-item的伸縮 。我們提到了flex-item的width會由自身的內容長度決定。這其實是件很不可控的事情,所以我們在開發上會傾向於對flex-item設置width。 flex-item
你可能也想看
Google News 追蹤
Thumbnail
隨著理財資訊的普及,越來越多台灣人不再將資產侷限於台股,而是將視野拓展到國際市場。特別是美國市場,其豐富的理財選擇,讓不少人開始思考將資金配置於海外市場的可能性。 然而,要參與美國市場並不只是盲目跟隨標的這麼簡單,而是需要策略和方式,尤其對新手而言,除了選股以外還會遇到語言、開戶流程、Ap
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
如果我很在意說話排序,那一定也有人特別在意做事順序。如果用這個視角去看待別人的話,就不會覺得對方的需求是不重要的。
Thumbnail
以注音為排序標準,範圍為N5-N3的日語漢字筆記。 本次排序為ㄕ。
Thumbnail
「輕重緩急」講不明白輕且急、重且緩怎麼訂先後。成語就是欺人:描繪力強到讓人以為自己懂了;資訊量弱到沒有執行參考價值。
Thumbnail
以注音為排序標準,範圍為N5-N3的日語漢字筆記。 本次排序為ㄓ。
Thumbnail
了解這些運算子及其優先等級有助於更好地理解和編寫 JavaScript 代碼
※ JavaScript的五種運算子: 我們希望操控這些值,來達成我們想要的結果。 運算式由運算元和運算子組成。運算元是指我們要拿去做運算的東西是什麼?例如:5和4。運算子是他要做什麼樣子的運算?例如:"+"。 算術運算子:"+加"、"-減"、"*乘"、"/除"、"%(mod餘數概念)"。
Thumbnail
排序是EXCEL很常用很基礎的一個功能,他可以幫我們把資料依照指定的順序排列。 但通常我們使用都是以欄(直)的方向進行排序,其實EXCEL也可以依據列(橫)的方向進行排續哦😁 下圖是LINE社群網友提出的問題,想要把上圖的原始資料變成下圖。(相關問題可以加入LINE社群唷) 這時候用排序(尋
Thumbnail
題目敘述 題目會給定我們兩個字串。 第一個是指定順序的字串order。 第二個是輸入字串s。 要求我們依據order給定的順序,重新排列s。 如果出現order中沒有出現的字母,任意位置皆可。 合法答案可能不只一組,輸出其中一種即可。 題目的原文敘述 測試範例 Example
描述順序的方式有很多種,可以用數字標示文字的方式,如下 文字 文字 文字 用數字標示文字的方式我覺得有個特質是,文字重要的程度是遞減的,也就是數字從一往後會越來越不重要。這個現象是我在寫這篇文的當下感覺到的,可能是我在過去經驗聽過有人說越重要的東西要先擺在前面;又或者是我在高中以前的
Thumbnail
調整你的優先順序, 在你的世界裡,練習照顧自己,為自身的幸福與快樂,需要與期待負起責任, 在別人的世界裡,尊重對方的界線,選擇與決定。
Thumbnail
隨著理財資訊的普及,越來越多台灣人不再將資產侷限於台股,而是將視野拓展到國際市場。特別是美國市場,其豐富的理財選擇,讓不少人開始思考將資金配置於海外市場的可能性。 然而,要參與美國市場並不只是盲目跟隨標的這麼簡單,而是需要策略和方式,尤其對新手而言,除了選股以外還會遇到語言、開戶流程、Ap
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
如果我很在意說話排序,那一定也有人特別在意做事順序。如果用這個視角去看待別人的話,就不會覺得對方的需求是不重要的。
Thumbnail
以注音為排序標準,範圍為N5-N3的日語漢字筆記。 本次排序為ㄕ。
Thumbnail
「輕重緩急」講不明白輕且急、重且緩怎麼訂先後。成語就是欺人:描繪力強到讓人以為自己懂了;資訊量弱到沒有執行參考價值。
Thumbnail
以注音為排序標準,範圍為N5-N3的日語漢字筆記。 本次排序為ㄓ。
Thumbnail
了解這些運算子及其優先等級有助於更好地理解和編寫 JavaScript 代碼
※ JavaScript的五種運算子: 我們希望操控這些值,來達成我們想要的結果。 運算式由運算元和運算子組成。運算元是指我們要拿去做運算的東西是什麼?例如:5和4。運算子是他要做什麼樣子的運算?例如:"+"。 算術運算子:"+加"、"-減"、"*乘"、"/除"、"%(mod餘數概念)"。
Thumbnail
排序是EXCEL很常用很基礎的一個功能,他可以幫我們把資料依照指定的順序排列。 但通常我們使用都是以欄(直)的方向進行排序,其實EXCEL也可以依據列(橫)的方向進行排續哦😁 下圖是LINE社群網友提出的問題,想要把上圖的原始資料變成下圖。(相關問題可以加入LINE社群唷) 這時候用排序(尋
Thumbnail
題目敘述 題目會給定我們兩個字串。 第一個是指定順序的字串order。 第二個是輸入字串s。 要求我們依據order給定的順序,重新排列s。 如果出現order中沒有出現的字母,任意位置皆可。 合法答案可能不只一組,輸出其中一種即可。 題目的原文敘述 測試範例 Example
描述順序的方式有很多種,可以用數字標示文字的方式,如下 文字 文字 文字 用數字標示文字的方式我覺得有個特質是,文字重要的程度是遞減的,也就是數字從一往後會越來越不重要。這個現象是我在寫這篇文的當下感覺到的,可能是我在過去經驗聽過有人說越重要的東西要先擺在前面;又或者是我在高中以前的
Thumbnail
調整你的優先順序, 在你的世界裡,練習照顧自己,為自身的幸福與快樂,需要與期待負起責任, 在別人的世界裡,尊重對方的界線,選擇與決定。