※ 讓程式碼更簡潔的方法

閱讀時間約 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
    查看全部
    avatar-img
    發表第一個留言支持創作者!
    ※ 查找 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?
    你可能也想看
    Google News 追蹤
    Thumbnail
    這篇內容,將會講解什麼是陣列,以及與陣列相關的知識。包括陣列的簡介、陣列的資料限制、陣列的維度、一維陣列、二維陣列。
    Thumbnail
    for loop、while loop、repeat
    Thumbnail
    給定一個字串陣列,請把它們所共有的字元伴隨著出現次數輸出。這篇文章介紹如何使用字典統計出現次數,和字典取交集的方法來解決此問題。並提供了複雜度分析和關鍵知識點。
    Thumbnail
    【這個系列,目標是以比較輕鬆的方式讓大家一起學習AE表達式。】 本文是番外篇 3,主要是一些概念的補充,介紹陣列。
    Thumbnail
    分享在網路上看到的陣列題目。通常 for...of 的 value 是陣列中的每個值,那如果我們在迭代中對陣列操作會發生什麼事? 題目來源:https://x.com/_jayphelps/status/1774640511158022335?s=20
    Thumbnail
    這篇文章,會帶著大家複習以前學過的遞回框架, 並且鏈結串列的概念與應用為核心, 貫穿一些相關聯的題目,透過框架複現來幫助讀者理解這個演算法框架。 遞回框架 尋找共通模式(common pattern),對應到演算法的General case 確立初始條件(initial conditio
    今天要來嘗試的是,如何不用好用的Array.map 方法,來實現 Array.map 的功能。 What is Array.map map() 方法會建立一個新的陣列,其內容為原陣列的每一個元素經由回呼函式運算後所回傳的結果之集合。 簡單來說就是把陣列內的每一個值,個別跑函式,把新的值回傳出成
    Thumbnail
    題目會給定一個陣列nums和一個目標值goal。計算子陣列總和=goal的數目有多少。演算法包含前綴和和字典的技巧,時間複雜度為O(n),空間複雜度為O(n)。
    Thumbnail
    列出一套完整的程式 程式設計有許多種方法,不過通常會先列出清單的再逐一執行,這樣會加快程式設計的速度。設計通常會採取順推的辦法。所以順推的程式設計方式就是經歷觀念溝通、系統分析、資料統合、權限管理、頻率與時間、後台管理、畫面設計等等階段後,將框架設計完了以後,先列出一套完整的程式,將所有使用者都確
    Thumbnail
    這篇內容,將會講解什麼是陣列,以及與陣列相關的知識。包括陣列的簡介、陣列的資料限制、陣列的維度、一維陣列、二維陣列。
    Thumbnail
    for loop、while loop、repeat
    Thumbnail
    給定一個字串陣列,請把它們所共有的字元伴隨著出現次數輸出。這篇文章介紹如何使用字典統計出現次數,和字典取交集的方法來解決此問題。並提供了複雜度分析和關鍵知識點。
    Thumbnail
    【這個系列,目標是以比較輕鬆的方式讓大家一起學習AE表達式。】 本文是番外篇 3,主要是一些概念的補充,介紹陣列。
    Thumbnail
    分享在網路上看到的陣列題目。通常 for...of 的 value 是陣列中的每個值,那如果我們在迭代中對陣列操作會發生什麼事? 題目來源:https://x.com/_jayphelps/status/1774640511158022335?s=20
    Thumbnail
    這篇文章,會帶著大家複習以前學過的遞回框架, 並且鏈結串列的概念與應用為核心, 貫穿一些相關聯的題目,透過框架複現來幫助讀者理解這個演算法框架。 遞回框架 尋找共通模式(common pattern),對應到演算法的General case 確立初始條件(initial conditio
    今天要來嘗試的是,如何不用好用的Array.map 方法,來實現 Array.map 的功能。 What is Array.map map() 方法會建立一個新的陣列,其內容為原陣列的每一個元素經由回呼函式運算後所回傳的結果之集合。 簡單來說就是把陣列內的每一個值,個別跑函式,把新的值回傳出成
    Thumbnail
    題目會給定一個陣列nums和一個目標值goal。計算子陣列總和=goal的數目有多少。演算法包含前綴和和字典的技巧,時間複雜度為O(n),空間複雜度為O(n)。
    Thumbnail
    列出一套完整的程式 程式設計有許多種方法,不過通常會先列出清單的再逐一執行,這樣會加快程式設計的速度。設計通常會採取順推的辦法。所以順推的程式設計方式就是經歷觀念溝通、系統分析、資料統合、權限管理、頻率與時間、後台管理、畫面設計等等階段後,將框架設計完了以後,先列出一套完整的程式,將所有使用者都確