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



3會員
13Content count
歡迎來到我的部落格!這裡是一個分享前端開發、貓咪寫真以及與菲律賓女友生活的文化衝擊與英文學習的個人空間。我熱愛前端技術,喜歡追求最新的網頁開發趨勢,並將這些知識分享給大家。
留言0
查看全部
發表第一個留言支持創作者!
當前大多數網站不再是靜態網站,需要向後端的 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
你可能也想看
Thumbnail
重點摘要: 1.9 月降息 2 碼、進一步暗示年內還有 50 bp 降息 2.SEP 上修失業率預期,但快速的降息速率將有助失業率觸頂 3.未來幾個月經濟數據將繼續轉弱,經濟復甦的時點或是 1Q25 季底附近
Thumbnail
近期的「貼文發佈流程 & 版型大更新」功能大家使用了嗎? 新版式整體視覺上「更加凸顯圖片」,為了搭配這次的更新,我們推出首次貼文策展 ❤️ 使用貼文功能並完成這次的指定任務,還有機會獲得富士即可拍,讓你的美好回憶都可以用即可拍珍藏!
Thumbnail
說故事和行銷有什麼關係?為什麼需要學會說故事?以本書作者為例,運用故事行銷技巧,讓他短短一天賣出兩萬本書!有人說,未來一切產業都是媒體產業,各種職場與商業領域,人人都需要會說故事。學會說故事行銷,你可以三分鐘內打動面試官,五分鐘內與人達成合作共識。
Thumbnail
過去當記者,採訪時找線索跟重點,是必備能力。 當企業公關,專長是幫人事物找亮點,讓媒體有興趣。 重要的地方建設,精采有趣的活動,主廚得了餐飲金牌;原本自身就有的優勢,我幫忙找出特別之處,發揚光大。或著是順著時事議題、節慶,跟著推上一波活動,也可以搭上新聞便車。 但是若要針對商品,做品牌行銷跟經營,好
Thumbnail
從量子科學中發現,我們的思想都是能量振動,因此,我們若是能夠運用這原理來轉換、調整思想的話,心想事成就變成一種超好用的生命改寫工具。但具體的方法要怎麼做?在這裡,我融合了吸引力法則、顯化法則等各種技巧,透過5個故事,具體來說明如何操作這些技巧創造心想事成的經驗。這是上篇文章,主要聚焦在運用「圖像」來
Thumbnail
現代社會資訊傳播快速,我們習慣不假思索聽信主流媒體的內容,陷入單一故事危險中, 從今天的分享能了解如何從更多角度看待同一個故事,也學習到如何擺脫他人的控制。
Thumbnail
在这一快要过去的2020年尾声中,容祖儿带来了她首次参与作曲的《东京人寿》。这首由老搭档黄伟文作的词很妙,用一向他擅长的【勇】派冲劲,以歌词中鼓励此刻就该踏上的东京之旅,来提醒人们,在这一好似静止的一年,不要因为此刻或处困境中的顾虑犹豫,忘了好好把握当下本可以尽兴的快乐。
Thumbnail
去年開始寫作後,深深感受到故事的「魔力」。 一篇文章,若是沒有足夠的故事、例子來做解釋,只是靠著理論,讀者不但會覺得太過艱澀,也不會有興趣去了解作者的意涵與觀點。一個領導者,能夠使用故事,更能夠使溝通順暢、讓跟隨者更容易了解你的意思。 本文教你在手機上整理書本中看到的故事與名言!
Thumbnail
當你刻意強調,而不是讓它融入故事、成為故事的一體,那它不僅毀掉了這本該能好好述說的故事,同時還毀掉了玩家、讀者傳承自前作的記憶。畢竟你已經在先前刻下了對人物的描寫,這一切都令他們印象深刻了,卻在續作後為了說教意圖而導致他們的人物特質、形象、故事敘述被壓縮、偏歪── 很沒價值,這真的很沒價值。
Thumbnail
重點摘要: 1.9 月降息 2 碼、進一步暗示年內還有 50 bp 降息 2.SEP 上修失業率預期,但快速的降息速率將有助失業率觸頂 3.未來幾個月經濟數據將繼續轉弱,經濟復甦的時點或是 1Q25 季底附近
Thumbnail
近期的「貼文發佈流程 & 版型大更新」功能大家使用了嗎? 新版式整體視覺上「更加凸顯圖片」,為了搭配這次的更新,我們推出首次貼文策展 ❤️ 使用貼文功能並完成這次的指定任務,還有機會獲得富士即可拍,讓你的美好回憶都可以用即可拍珍藏!
Thumbnail
說故事和行銷有什麼關係?為什麼需要學會說故事?以本書作者為例,運用故事行銷技巧,讓他短短一天賣出兩萬本書!有人說,未來一切產業都是媒體產業,各種職場與商業領域,人人都需要會說故事。學會說故事行銷,你可以三分鐘內打動面試官,五分鐘內與人達成合作共識。
Thumbnail
過去當記者,採訪時找線索跟重點,是必備能力。 當企業公關,專長是幫人事物找亮點,讓媒體有興趣。 重要的地方建設,精采有趣的活動,主廚得了餐飲金牌;原本自身就有的優勢,我幫忙找出特別之處,發揚光大。或著是順著時事議題、節慶,跟著推上一波活動,也可以搭上新聞便車。 但是若要針對商品,做品牌行銷跟經營,好
Thumbnail
從量子科學中發現,我們的思想都是能量振動,因此,我們若是能夠運用這原理來轉換、調整思想的話,心想事成就變成一種超好用的生命改寫工具。但具體的方法要怎麼做?在這裡,我融合了吸引力法則、顯化法則等各種技巧,透過5個故事,具體來說明如何操作這些技巧創造心想事成的經驗。這是上篇文章,主要聚焦在運用「圖像」來
Thumbnail
現代社會資訊傳播快速,我們習慣不假思索聽信主流媒體的內容,陷入單一故事危險中, 從今天的分享能了解如何從更多角度看待同一個故事,也學習到如何擺脫他人的控制。
Thumbnail
在这一快要过去的2020年尾声中,容祖儿带来了她首次参与作曲的《东京人寿》。这首由老搭档黄伟文作的词很妙,用一向他擅长的【勇】派冲劲,以歌词中鼓励此刻就该踏上的东京之旅,来提醒人们,在这一好似静止的一年,不要因为此刻或处困境中的顾虑犹豫,忘了好好把握当下本可以尽兴的快乐。
Thumbnail
去年開始寫作後,深深感受到故事的「魔力」。 一篇文章,若是沒有足夠的故事、例子來做解釋,只是靠著理論,讀者不但會覺得太過艱澀,也不會有興趣去了解作者的意涵與觀點。一個領導者,能夠使用故事,更能夠使溝通順暢、讓跟隨者更容易了解你的意思。 本文教你在手機上整理書本中看到的故事與名言!
Thumbnail
當你刻意強調,而不是讓它融入故事、成為故事的一體,那它不僅毀掉了這本該能好好述說的故事,同時還毀掉了玩家、讀者傳承自前作的記憶。畢竟你已經在先前刻下了對人物的描寫,這一切都令他們印象深刻了,卻在續作後為了說教意圖而導致他們的人物特質、形象、故事敘述被壓縮、偏歪── 很沒價值,這真的很沒價值。