運用 JavaScript ES6 的 Map Object 寫錯誤 mapping 表

如何潮到飛起的運用 JavaScript map object 製作一個錯誤訊息的 mapping 表,優雅的管理錯誤訊息。

運用 JavaScript ES6 的 Map Object 寫錯誤 mapping 表
Photo by Adrien Delforge / Unsplash

雖然說 ES6 已經普及有一陣子了,當中我最喜歡的就是 map object 最近經常處理到錯誤訊息的 mapping 表,在 ES6 之前處理方式都是用原生的 object 來寫 mapping key value,操作起來簡單,也直覺。直到接觸到 map object 覺得又提升了一點。

Map 的好處

  • 可以不用一開始就定義 key value,可以動態加入
  • key 可以是任何的 primitive type(雖然可能很少會這樣用)
  • key 排序不會被變動
  • 可迭代的

基本操作

請原諒我很懶直接貼上 MDN 範例

CleanShot-2021-07-28-at-01.46.31

可以看到,如果用原本 object 的操作,會導致 map 方法無法作用,所以還是用包裝好的方法來使用會比較妥當,也可以避免意外的 bug。

範例

這邊是使用 vuelidate 套件來做驗證。
如果有錯誤驗證沒通過,object 可能長這樣

{
  required: false,
  integer: false
}

整個 mapping 寫起來就可以很舒爽的往下長

message() {
  const msg = []
  const errorMap = new Map([
    ['required', '此欄位必填'],
    ['minLength', '長度過短'],
    ['integer', '必須為數字']
    // ...
  ])

  for (const [key, value] of errorMap) {
    if (key in this.vuelidate && this.vuelidate[key] === false) {
      msg.push(value)
    }
  }

  return msg.join(',')
}

最後這個錯誤訊息可以得到 "此欄位必填,必須為數字"

參考資料

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map