如何用故事記憶法記住 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
查看全部
發表第一個留言支持創作者!
當前大多數網站不再是靜態網站,需要向後端的 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
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
美國總統大選只剩下三天, 我們觀察一整週民調與金融市場的變化(包含賭局), 到本週五下午3:00前為止, 誰是美國總統幾乎大概可以猜到60-70%的機率, 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Thumbnail
Faker昨天真的太扯了,中國主播王多多點評的話更是精妙,分享給各位 王多多的點評 「Faker是我們的處境,他是LPL永遠繞不開的一個人和話題,所以我們特別渴望在決賽跟他相遇,去直面我們的處境。 我們曾經稱他為最高的山,最長的河,以為山海就是盡頭,可是Faker用他28歲的年齡...
Thumbnail
說故事和行銷有什麼關係?為什麼需要學會說故事?以本書作者為例,運用故事行銷技巧,讓他短短一天賣出兩萬本書!有人說,未來一切產業都是媒體產業,各種職場與商業領域,人人都需要會說故事。學會說故事行銷,你可以三分鐘內打動面試官,五分鐘內與人達成合作共識。
Thumbnail
過去當記者,採訪時找線索跟重點,是必備能力。 當企業公關,專長是幫人事物找亮點,讓媒體有興趣。 重要的地方建設,精采有趣的活動,主廚得了餐飲金牌;原本自身就有的優勢,我幫忙找出特別之處,發揚光大。或著是順著時事議題、節慶,跟著推上一波活動,也可以搭上新聞便車。 但是若要針對商品,做品牌行銷跟經營,好
Thumbnail
從量子科學中發現,我們的思想都是能量振動,因此,我們若是能夠運用這原理來轉換、調整思想的話,心想事成就變成一種超好用的生命改寫工具。但具體的方法要怎麼做?在這裡,我融合了吸引力法則、顯化法則等各種技巧,透過5個故事,具體來說明如何操作這些技巧創造心想事成的經驗。這是上篇文章,主要聚焦在運用「圖像」來
Thumbnail
現代社會資訊傳播快速,我們習慣不假思索聽信主流媒體的內容,陷入單一故事危險中, 從今天的分享能了解如何從更多角度看待同一個故事,也學習到如何擺脫他人的控制。
Thumbnail
在这一快要过去的2020年尾声中,容祖儿带来了她首次参与作曲的《东京人寿》。这首由老搭档黄伟文作的词很妙,用一向他擅长的【勇】派冲劲,以歌词中鼓励此刻就该踏上的东京之旅,来提醒人们,在这一好似静止的一年,不要因为此刻或处困境中的顾虑犹豫,忘了好好把握当下本可以尽兴的快乐。
Thumbnail
去年開始寫作後,深深感受到故事的「魔力」。 一篇文章,若是沒有足夠的故事、例子來做解釋,只是靠著理論,讀者不但會覺得太過艱澀,也不會有興趣去了解作者的意涵與觀點。一個領導者,能夠使用故事,更能夠使溝通順暢、讓跟隨者更容易了解你的意思。 本文教你在手機上整理書本中看到的故事與名言!
Thumbnail
你平常會和孩子說故事嗎? 自從當了兩寶爸之後,陪孩子說故事成為了日常必做的任務,特別是當家中老婆看到以下資訊時,身為父親更是責無旁貸啊! l美國最新研究發現,連「是誰」講故事都會有不同影響。研究指出,由於媽媽和爸爸說故事的方法不一樣,母親比較像老師,會問具體問題;而父親會以抽象的說法詢問,能開發孩子
Thumbnail
當你刻意強調,而不是讓它融入故事、成為故事的一體,那它不僅毀掉了這本該能好好述說的故事,同時還毀掉了玩家、讀者傳承自前作的記憶。畢竟你已經在先前刻下了對人物的描寫,這一切都令他們印象深刻了,卻在續作後為了說教意圖而導致他們的人物特質、形象、故事敘述被壓縮、偏歪── 很沒價值,這真的很沒價值。
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
美國總統大選只剩下三天, 我們觀察一整週民調與金融市場的變化(包含賭局), 到本週五下午3:00前為止, 誰是美國總統幾乎大概可以猜到60-70%的機率, 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Thumbnail
Faker昨天真的太扯了,中國主播王多多點評的話更是精妙,分享給各位 王多多的點評 「Faker是我們的處境,他是LPL永遠繞不開的一個人和話題,所以我們特別渴望在決賽跟他相遇,去直面我們的處境。 我們曾經稱他為最高的山,最長的河,以為山海就是盡頭,可是Faker用他28歲的年齡...
Thumbnail
說故事和行銷有什麼關係?為什麼需要學會說故事?以本書作者為例,運用故事行銷技巧,讓他短短一天賣出兩萬本書!有人說,未來一切產業都是媒體產業,各種職場與商業領域,人人都需要會說故事。學會說故事行銷,你可以三分鐘內打動面試官,五分鐘內與人達成合作共識。
Thumbnail
過去當記者,採訪時找線索跟重點,是必備能力。 當企業公關,專長是幫人事物找亮點,讓媒體有興趣。 重要的地方建設,精采有趣的活動,主廚得了餐飲金牌;原本自身就有的優勢,我幫忙找出特別之處,發揚光大。或著是順著時事議題、節慶,跟著推上一波活動,也可以搭上新聞便車。 但是若要針對商品,做品牌行銷跟經營,好
Thumbnail
從量子科學中發現,我們的思想都是能量振動,因此,我們若是能夠運用這原理來轉換、調整思想的話,心想事成就變成一種超好用的生命改寫工具。但具體的方法要怎麼做?在這裡,我融合了吸引力法則、顯化法則等各種技巧,透過5個故事,具體來說明如何操作這些技巧創造心想事成的經驗。這是上篇文章,主要聚焦在運用「圖像」來
Thumbnail
現代社會資訊傳播快速,我們習慣不假思索聽信主流媒體的內容,陷入單一故事危險中, 從今天的分享能了解如何從更多角度看待同一個故事,也學習到如何擺脫他人的控制。
Thumbnail
在这一快要过去的2020年尾声中,容祖儿带来了她首次参与作曲的《东京人寿》。这首由老搭档黄伟文作的词很妙,用一向他擅长的【勇】派冲劲,以歌词中鼓励此刻就该踏上的东京之旅,来提醒人们,在这一好似静止的一年,不要因为此刻或处困境中的顾虑犹豫,忘了好好把握当下本可以尽兴的快乐。
Thumbnail
去年開始寫作後,深深感受到故事的「魔力」。 一篇文章,若是沒有足夠的故事、例子來做解釋,只是靠著理論,讀者不但會覺得太過艱澀,也不會有興趣去了解作者的意涵與觀點。一個領導者,能夠使用故事,更能夠使溝通順暢、讓跟隨者更容易了解你的意思。 本文教你在手機上整理書本中看到的故事與名言!
Thumbnail
你平常會和孩子說故事嗎? 自從當了兩寶爸之後,陪孩子說故事成為了日常必做的任務,特別是當家中老婆看到以下資訊時,身為父親更是責無旁貸啊! l美國最新研究發現,連「是誰」講故事都會有不同影響。研究指出,由於媽媽和爸爸說故事的方法不一樣,母親比較像老師,會問具體問題;而父親會以抽象的說法詢問,能開發孩子
Thumbnail
當你刻意強調,而不是讓它融入故事、成為故事的一體,那它不僅毀掉了這本該能好好述說的故事,同時還毀掉了玩家、讀者傳承自前作的記憶。畢竟你已經在先前刻下了對人物的描寫,這一切都令他們印象深刻了,卻在續作後為了說教意圖而導致他們的人物特質、形象、故事敘述被壓縮、偏歪── 很沒價值,這真的很沒價值。