※ 讓程式碼更簡潔的方法

閱讀時間約 2 分鐘

※ 好用的陣列迭代器:forEach

forEach 的使用時機:

需要從頭到尾把陣列中的每一個元素都印出來 ,就適合使用 forEach 方法

forEach 的必要參數是一個函式:

forEach() 的功能是把陣列的每個元素都丟進某個函式執行一次,因此必要的參數是一個函式。

raw-image

語法:

raw-image

留意的三個點是:

  • forEach 沒有回傳值forEach方法的角色是領路人,把陣列中的每個元素依序交給 function 處理,交付完它的任務就結束了。
  • function 的參數可以自由命名慣用的命名手法是陣列用複數單字命名 (例如 words, scores ),代表單一陣列元素的參數就用單數命名 (例如 word, score)。另外 item 和 element 也常被用來代表單一元素。不論取什麼名字,都只會在這個函式中有效。
  • function 可以匿名由於這個函式只會在 forEach 裡面運作,別的地方用不到,因此沒有特別取名的必要也常使用箭頭函式。

※ 箭頭函式

語法要注意兩個地方:

  • 只有「匿名函式」才能改寫成箭頭函式
  • 箭頭函式並不是新功能,它只是簡潔版的新語法。

※ 把匿名函式改寫成箭頭函式

原本:

const triangleArea = function (width, height) {
return (width * height) / 2
}

省略了關鍵字 function,並且在參數與程式主體之間加了 =>,改寫成一行:

const triangleArea = (width, height) => { return (width * height) / 2 }

注意事項

如果參數只有一個,能省略括號:

const regularTriangle = length => { return (length * length) / 2 }

如果回傳值只有一行程式碼,可以進一步省略大括號和 return

const regularTriangle = length => (length * length) / 2

如果沒有參數時,一定要有括號:

const  sayHi = () => 'This is a triangle !'


    全端網頁開發專業知識分享
    留言0
    查看全部
    發表第一個留言支持創作者!
    ※ 查找 DOM 元素有兩種途徑: 直接選出一個節點 (select):要在樹狀結構裡查找資料,至少要先選出第一個元素。 從一個特定節點,查找到週邊的節點 :選出一個元素後,就可以順著結構找出父元素、子元素 、甚至同一層的兄弟元素,這種行為稱為「遍歷 (traverse)」。 ※ 選出特定 D
    ※ Javascript和HTML的關係 當我們輸入新的網址或按下重新整理時,從解析檔案到畫面顯示出來,瀏覽器會進行以下流程: 解析 HTML / CSS 檔案,建立物件模型: HTML → DOM (Document Object Model)。 CSS → CSSOM (CSS Obje
    ※ DOM是什麼? DOM 全名為 Document Object Model 中文翻譯為 文件物件模型,就是把一份 HTML 文件內的各個標籤,包括文字、圖片等等都定義成物件,而這些物件最終會形成一個樹狀結構。 就 Document Object Model 這個名字來說,其中 documen
    ※ 非同步概念總複習 為什麼要使用 Promise? 在 JavaScript 開發中,處理非同步操作是常見需求,涉及如文件讀寫、數據庫查詢或網路請求等耗時任務。傳統的回調方式可能導致代碼結構混亂,稱為「回調地獄」,難以維護和理解。 Promise 是解決這問題的方法。它是一個物件(objec
    認識 async/await基本概念: async 的本質是 promise 的語法糖 ,只要 function 標記為 async,就表示裡頭可以撰寫 await 的同步語法,而 await 顧名思義就是「等待」,它會確保一個 promise 物件都解決 ( resolve ) 或出錯 ( re
    什麼是 Promise.all? 在有多個 Promise 的時候,使用 Promise.all 可以確保「所有的 Promise 都執行完以後,才進入 then」。 Promise.all 語法結構: Promise.all 接受的參數是陣列形式。 什麼時候要使用 Promise.all?
    ※ 查找 DOM 元素有兩種途徑: 直接選出一個節點 (select):要在樹狀結構裡查找資料,至少要先選出第一個元素。 從一個特定節點,查找到週邊的節點 :選出一個元素後,就可以順著結構找出父元素、子元素 、甚至同一層的兄弟元素,這種行為稱為「遍歷 (traverse)」。 ※ 選出特定 D
    ※ Javascript和HTML的關係 當我們輸入新的網址或按下重新整理時,從解析檔案到畫面顯示出來,瀏覽器會進行以下流程: 解析 HTML / CSS 檔案,建立物件模型: HTML → DOM (Document Object Model)。 CSS → CSSOM (CSS Obje
    ※ DOM是什麼? DOM 全名為 Document Object Model 中文翻譯為 文件物件模型,就是把一份 HTML 文件內的各個標籤,包括文字、圖片等等都定義成物件,而這些物件最終會形成一個樹狀結構。 就 Document Object Model 這個名字來說,其中 documen
    ※ 非同步概念總複習 為什麼要使用 Promise? 在 JavaScript 開發中,處理非同步操作是常見需求,涉及如文件讀寫、數據庫查詢或網路請求等耗時任務。傳統的回調方式可能導致代碼結構混亂,稱為「回調地獄」,難以維護和理解。 Promise 是解決這問題的方法。它是一個物件(objec
    認識 async/await基本概念: async 的本質是 promise 的語法糖 ,只要 function 標記為 async,就表示裡頭可以撰寫 await 的同步語法,而 await 顧名思義就是「等待」,它會確保一個 promise 物件都解決 ( resolve ) 或出錯 ( re
    什麼是 Promise.all? 在有多個 Promise 的時候,使用 Promise.all 可以確保「所有的 Promise 都執行完以後,才進入 then」。 Promise.all 語法結構: Promise.all 接受的參數是陣列形式。 什麼時候要使用 Promise.all?
    你可能也想看
    Thumbnail
    重點摘要: 1.9 月降息 2 碼、進一步暗示年內還有 50 bp 降息 2.SEP 上修失業率預期,但快速的降息速率將有助失業率觸頂 3.未來幾個月經濟數據將繼續轉弱,經濟復甦的時點或是 1Q25 季底附近
    Thumbnail
    近期的「貼文發佈流程 & 版型大更新」功能大家使用了嗎? 新版式整體視覺上「更加凸顯圖片」,為了搭配這次的更新,我們推出首次貼文策展 ❤️ 使用貼文功能並完成這次的指定任務,還有機會獲得富士即可拍,讓你的美好回憶都可以用即可拍珍藏!
    Thumbnail
    pipe 代表函數式程式設計中的概念,利用多個功能結合在一起,資料依序通過每個功能進行處理。文章中介紹了 pipe 的優點、兩個等效的程式碼比較以及 remeda 套件的使用。詳細介紹了使用 pipe 的好處,並提供了多個相關的例子,展示了 pipe 可讀性的提升。
    Thumbnail
    如果用一段話來說這次馬拉松的感想,應該可以用「老天助攻、正常演出」來形容。
    Thumbnail
    KritAI 的程式碼產生功能可以根據你的需求產生符合標準的、高品質的程式碼,讓你在編碼過程中減少重複工作,實現高效工作。 另外,KritAI 的內容產生功能可以幫助你快速產生SEO 優化的內容,讓你的部落格、廣告、電子郵件和網站內容更具吸引力,同時提高搜尋引擎的排名。
    Thumbnail
    新建專案 一開始,當我們新建立一個專案時,我們可以看到,程式編輯區會出現兩個基本的積木,分別是『當啟動時』和『重複無限次』 『當啟動時』和『重複無限次』,顧名思義就是一個只能執行一次,另一個可以一直重複執行。 寫程式時間 現在我們就來使用『5X5 LED 矩陣』來寫我們
    Thumbnail
    【書院晨音】 老子在警醒我們世人面對得失寵辱都要處之泰然。 我們要懂得去御物,去領導統御外在的事物, 而不能讓外在的事物來領導統御我們的精神、我們的的心態。 _節錄 老子書 第13章 寵辱若驚 ∷∷∷∷∷∷∷∷∷ 人生不會因為得失榮辱就變得比較好, 你永遠是你, 能讓你更好的人,只有你自己,
    Thumbnail
    手機已經是生活的一部份。與其強迫自己不要滑手機,不如反過來利用這個方便的小玩意,幫助管理生活大小事。
    Thumbnail
    走出馬賽聖查爾斯車站的人群和喧鬧,我蹣跚地直接走入市區。在低價位的百貨公司和厚玻璃板的報攤之間,戴著滑雪帽的黑人們購買上面標示「符合清真」的小吃──這是我第一次聞到地中海的垃圾及冷冽的氣息。
    Thumbnail
    「2020年世界設計之都」里爾近年來積極投入閒置空間活化,以數位科技與文化創意推動產業轉型,創新設計的實力獲得法國政府的注目,在「法國科技」(La French Tech)被定位為「法國發展數位創新的重要實驗基地」。里爾也將實驗精神落實在世界之都活動中,以「概念性驗證」(POC)為架構,透過全體市民
    Thumbnail
    將與好萊塢團隊合作 以品牌溝通和影視娛樂內容行銷顛覆傳播界   隨著數位時代的崛起,各大品牌行銷極力推出創意內容來與目標族群溝通,而如何為品牌創作出獨特又吸睛的創意內容考驗著各大行銷傳播代理商。於2013年創立的橙方數位,突破行銷傳播代理商既定的成長和經營模式,宣告擴編正式成立「格帝集團
    Thumbnail
    重點摘要: 1.9 月降息 2 碼、進一步暗示年內還有 50 bp 降息 2.SEP 上修失業率預期,但快速的降息速率將有助失業率觸頂 3.未來幾個月經濟數據將繼續轉弱,經濟復甦的時點或是 1Q25 季底附近
    Thumbnail
    近期的「貼文發佈流程 & 版型大更新」功能大家使用了嗎? 新版式整體視覺上「更加凸顯圖片」,為了搭配這次的更新,我們推出首次貼文策展 ❤️ 使用貼文功能並完成這次的指定任務,還有機會獲得富士即可拍,讓你的美好回憶都可以用即可拍珍藏!
    Thumbnail
    pipe 代表函數式程式設計中的概念,利用多個功能結合在一起,資料依序通過每個功能進行處理。文章中介紹了 pipe 的優點、兩個等效的程式碼比較以及 remeda 套件的使用。詳細介紹了使用 pipe 的好處,並提供了多個相關的例子,展示了 pipe 可讀性的提升。
    Thumbnail
    如果用一段話來說這次馬拉松的感想,應該可以用「老天助攻、正常演出」來形容。
    Thumbnail
    KritAI 的程式碼產生功能可以根據你的需求產生符合標準的、高品質的程式碼,讓你在編碼過程中減少重複工作,實現高效工作。 另外,KritAI 的內容產生功能可以幫助你快速產生SEO 優化的內容,讓你的部落格、廣告、電子郵件和網站內容更具吸引力,同時提高搜尋引擎的排名。
    Thumbnail
    新建專案 一開始,當我們新建立一個專案時,我們可以看到,程式編輯區會出現兩個基本的積木,分別是『當啟動時』和『重複無限次』 『當啟動時』和『重複無限次』,顧名思義就是一個只能執行一次,另一個可以一直重複執行。 寫程式時間 現在我們就來使用『5X5 LED 矩陣』來寫我們
    Thumbnail
    【書院晨音】 老子在警醒我們世人面對得失寵辱都要處之泰然。 我們要懂得去御物,去領導統御外在的事物, 而不能讓外在的事物來領導統御我們的精神、我們的的心態。 _節錄 老子書 第13章 寵辱若驚 ∷∷∷∷∷∷∷∷∷ 人生不會因為得失榮辱就變得比較好, 你永遠是你, 能讓你更好的人,只有你自己,
    Thumbnail
    手機已經是生活的一部份。與其強迫自己不要滑手機,不如反過來利用這個方便的小玩意,幫助管理生活大小事。
    Thumbnail
    走出馬賽聖查爾斯車站的人群和喧鬧,我蹣跚地直接走入市區。在低價位的百貨公司和厚玻璃板的報攤之間,戴著滑雪帽的黑人們購買上面標示「符合清真」的小吃──這是我第一次聞到地中海的垃圾及冷冽的氣息。
    Thumbnail
    「2020年世界設計之都」里爾近年來積極投入閒置空間活化,以數位科技與文化創意推動產業轉型,創新設計的實力獲得法國政府的注目,在「法國科技」(La French Tech)被定位為「法國發展數位創新的重要實驗基地」。里爾也將實驗精神落實在世界之都活動中,以「概念性驗證」(POC)為架構,透過全體市民
    Thumbnail
    將與好萊塢團隊合作 以品牌溝通和影視娛樂內容行銷顛覆傳播界   隨著數位時代的崛起,各大品牌行銷極力推出創意內容來與目標族群溝通,而如何為品牌創作出獨特又吸睛的創意內容考驗著各大行銷傳播代理商。於2013年創立的橙方數位,突破行銷傳播代理商既定的成長和經營模式,宣告擴編正式成立「格帝集團