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

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

Map 的好處

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

基本操作

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

可以看到，如果用原本 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