如何用故事記憶法記住 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



留言
avatar-img
Shang的 前端開發筆記
4會員
14內容數
歡迎來到我的部落格!這裡是一個分享前端開發、貓咪寫真以及與菲律賓女友生活的文化衝擊與英文學習的個人空間。我熱愛前端技術,喜歡追求最新的網頁開發趨勢,並將這些知識分享給大家。
2024/03/21
CatHelper是我開發的前端 SideProject,是貓咪募資收養的一站式平台。 我用戶使用流程、資料庫、頁面來構思這個專案。
Thumbnail
2024/03/21
CatHelper是我開發的前端 SideProject,是貓咪募資收養的一站式平台。 我用戶使用流程、資料庫、頁面來構思這個專案。
Thumbnail
2024/02/08
當前大多數網站不再是靜態網站,需要向後端的 Server 請求資料。而且,這些資料的請求通常是非同步進行的。在React中,目前被視為最佳實踐的方式是使用 useEffect。
2024/02/08
當前大多數網站不再是靜態網站,需要向後端的 Server 請求資料。而且,這些資料的請求通常是非同步進行的。在React中,目前被視為最佳實踐的方式是使用 useEffect。
2023/10/20
我在學習vue的過程中,一開始是先從輕前端(用CDN引入)開始學。這時候看Vue的官方文件會有些困惑,原因是有沒有用vite建構,在元件寫法上會有些差異。所以我寫下這篇筆記來整理這兩者寫法上的差異。 起手式 1.非建構:使用cdn 在html的header中插入以下script標籤 <s
2023/10/20
我在學習vue的過程中,一開始是先從輕前端(用CDN引入)開始學。這時候看Vue的官方文件會有些困惑,原因是有沒有用vite建構,在元件寫法上會有些差異。所以我寫下這篇筆記來整理這兩者寫法上的差異。 起手式 1.非建構:使用cdn 在html的header中插入以下script標籤 <s
看更多
你可能也想看
Thumbnail
在 vocus 與你一起探索內容、發掘靈感的路上,我們又將啟動新的冒險——vocus App 正式推出! 現在起,你可以在 iOS App Store 下載全新上架的 vocus App。 無論是在通勤路上、日常空檔,或一天結束後的放鬆時刻,都能自在沈浸在內容宇宙中。
Thumbnail
在 vocus 與你一起探索內容、發掘靈感的路上,我們又將啟動新的冒險——vocus App 正式推出! 現在起,你可以在 iOS App Store 下載全新上架的 vocus App。 無論是在通勤路上、日常空檔,或一天結束後的放鬆時刻,都能自在沈浸在內容宇宙中。
Thumbnail
vocus 慶祝推出 App,舉辦 2026 全站慶。推出精選內容與數位商品折扣,訂單免費與紅包抽獎、新註冊會員專屬活動、Boba Boost 贊助抽紅包,以及全站徵文,並邀請你一起來回顧過去的一年, vocus 與創作者共同留下了哪些精彩創作。
Thumbnail
vocus 慶祝推出 App,舉辦 2026 全站慶。推出精選內容與數位商品折扣,訂單免費與紅包抽獎、新註冊會員專屬活動、Boba Boost 贊助抽紅包,以及全站徵文,並邀請你一起來回顧過去的一年, vocus 與創作者共同留下了哪些精彩創作。
Thumbnail
以注音為排序標準,範圍為N5-N3的日語漢字筆記。 本次排序為ㄕ。
Thumbnail
以注音為排序標準,範圍為N5-N3的日語漢字筆記。 本次排序為ㄕ。
Thumbnail
以注音為排序標準,範圍為N5-N3的日語漢字筆記。 本次排序為ㄓ。
Thumbnail
以注音為排序標準,範圍為N5-N3的日語漢字筆記。 本次排序為ㄓ。
Thumbnail
高效生活,幫助你找回更多自己的時間 歡迎來到 AL 的 Googlesheet 學習筆記系列文章。在這個系列中,我們將一步步介紹各種函數,並將它們應用於日常生活中,加速工作、提高效率。 今天要介紹的是使用 Index 、 Counta 函數尋找最後一列的資料!
Thumbnail
高效生活,幫助你找回更多自己的時間 歡迎來到 AL 的 Googlesheet 學習筆記系列文章。在這個系列中,我們將一步步介紹各種函數,並將它們應用於日常生活中,加速工作、提高效率。 今天要介紹的是使用 Index 、 Counta 函數尋找最後一列的資料!
Thumbnail
題目敘述 Sort Colors 給定一個色彩陣列,裡面的顏色包含0紅色,1白色,2藍色。 要求我們透過in-place操作,把色彩陣列依序從左到右排好, 依序出現的是紅色、白色、藍色。
Thumbnail
題目敘述 Sort Colors 給定一個色彩陣列,裡面的顏色包含0紅色,1白色,2藍色。 要求我們透過in-place操作,把色彩陣列依序從左到右排好, 依序出現的是紅色、白色、藍色。
Thumbnail
了解這些運算子及其優先等級有助於更好地理解和編寫 JavaScript 代碼
Thumbnail
了解這些運算子及其優先等級有助於更好地理解和編寫 JavaScript 代碼
Thumbnail
本文介紹了各種運算符的用法和優先級,包括算術運算符、比較運算符、賦值運算符、邏輯運算符、位元運算符、成員運算符和身份運算符。每種運算符都有詳細的描述和示例程式碼,幫助理解其功能和用法。
Thumbnail
本文介紹了各種運算符的用法和優先級,包括算術運算符、比較運算符、賦值運算符、邏輯運算符、位元運算符、成員運算符和身份運算符。每種運算符都有詳細的描述和示例程式碼,幫助理解其功能和用法。
Thumbnail
我捨棄了編號系統,解放三倍大腦思考能量
Thumbnail
我捨棄了編號系統,解放三倍大腦思考能量
Thumbnail
排序是EXCEL很常用很基礎的一個功能,他可以幫我們把資料依照指定的順序排列。 但通常我們使用都是以欄(直)的方向進行排序,其實EXCEL也可以依據列(橫)的方向進行排續哦😁 下圖是LINE社群網友提出的問題,想要把上圖的原始資料變成下圖。(相關問題可以加入LINE社群唷) 這時候用排序(尋
Thumbnail
排序是EXCEL很常用很基礎的一個功能,他可以幫我們把資料依照指定的順序排列。 但通常我們使用都是以欄(直)的方向進行排序,其實EXCEL也可以依據列(橫)的方向進行排續哦😁 下圖是LINE社群網友提出的問題,想要把上圖的原始資料變成下圖。(相關問題可以加入LINE社群唷) 這時候用排序(尋
Thumbnail
不同的運算子一起出現時,會根據其優先性(Precedence)來決定誰先誰後。MDN也很貼心的整理成表格了。 雖然有表格可以供我們查找,但是總不可能每一次用到運算子的時候,我們都去查找吧?我們最好對這張表有直觀上的理解與記憶。 那麼就讓我來分享我如何理解與記憶這張表吧! 運算子在做甚麼
Thumbnail
不同的運算子一起出現時,會根據其優先性(Precedence)來決定誰先誰後。MDN也很貼心的整理成表格了。 雖然有表格可以供我們查找,但是總不可能每一次用到運算子的時候,我們都去查找吧?我們最好對這張表有直觀上的理解與記憶。 那麼就讓我來分享我如何理解與記憶這張表吧! 運算子在做甚麼
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News