※ 讓程式碼更簡潔的方法

閱讀時間約 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
    查看全部
    發表第一個留言支持創作者!
    ※ 認識非同步概念(三)
    閱讀時間約 2 分鐘
    ※ 認識非同步概念(四)
    閱讀時間約 6 分鐘
    ※ 認識非同步概念(五)
    閱讀時間約 1 分鐘
    ※ 認識DOM(一)
    閱讀時間約 2 分鐘
    ※ 認識DOM(二)
    閱讀時間約 1 分鐘
    ※ 認識DOM(三)
    閱讀時間約 6 分鐘