如何實作 AutoMapper ?

實務上由 API 所傳回的資料，其 Object 的 Key 與 Store 內 Object 的 Key 可能會不一樣，但 Value 相同，也就是所謂的 AutoMapper，ECMAScript 的 Object 並沒有內建 method 實現此功能，該如何只做 Key 的轉換呢 ?

Version

ECMAScript 2015

Imperative

const obj1 = {
  firstName: 'Sam',
  lastName: 'Xiao',
  age: 20,
};

const autoMapper = (obj, mapping) => {
  const entries = Object.entries(obj);
  
  let result = {};
  for(let i = 0; i < entries.length; i++) {
    let [key, value] = entries[i];
    result[mapping[key] || key] = value;
  }
  
  return result;
};

const obj2 = autoMapper(obj1, {
  firstName: 'shortName',
  lastName: 'familyName',
});

console.log(obj2);

obj1 的 property key 為 firstName 、 lastName 與 age ，欲轉為 obj2 的 shortName 與 familyName ， age 則不變，且 property value 則完全一樣。

19 行

const obj2 = autoMapper(obj1, {
  firstName: 'shortName',
  lastName: 'familyName',
});

console.log(obj2);

autoMapper() 只傳入兩個 argument：

• 第一個 argument 為原本的 object
• 第二個 argument 也是 object，其中 key 為原本 key，而 value 則為新的 key

第 7 行

const autoMapper = (obj, mapping) => {
  const entries = Object.entries(obj);
  
  let result = {};
  for(let i = 0; i < entries.length; i++) {
    let [key, value] = entries[i];
    result[mapping[key] || key] = value;
  }
  
  return result;
};

const entries = Object.entries(obj);

由於想借用 array 豐富的功能，先利用 Object.entries() 將 object 轉成 array。

let result = {};

因為結果為 object，所以先建立 result 為 empty object。

for(let i = 0; i < entries.length; i++) {

因為 object 已經轉成 entries array，開始 for loop 每個 item 依次執行。​

let [key, value] = entries[i];

Object.entries() 很特殊，所轉出來的 array 是 array 中帶有 array，也就是每個 item 仍是 array，因此使用 ECMAScript 2015 的 Array Destructuring 直接拆成 key 與 value 兩個變數。

result[mapping[key] || key] = value;

mapping 為我們傳進來的 mapping object，也就是 key 的對照表。

由於 ECMAScript object 的 key / value 特性，因此可以直接使用 mapping[key] 找到新的 key。

若在 mapping object 找不到，回傳為 undefined ，利用 || logic operator 的特性，直接回傳此 key ，這樣的優點是 mapping object 並不用提供所有 key 的對照表，只需提供不一樣的 key 即可，原本相同的 key 將全部保留。

return result;

最後將 result object 回傳。

Functional

const obj1 = {
  firstName: 'Sam',
  lastName: 'Xiao',
  age: 20,
};

const autoMapper = (obj, mapping) =>
  Object.entries(obj).reduce((accm, [key, value]) => {
    accm[mapping[key] || key] = value;
    return accm;
  }, {});

const obj2 = autoMapper(obj1, {
  firstName: 'shortName',
  lastName: 'familyName',
});

console.log(obj2);

所有的 for loop 都能使用 reduce() 改寫，當然在此也不例外。

Object.entries(obj).reduce()

由於 Object.entries() 回傳已經是 array，因此可直接使用 reduce() 。

(accm, [key, value]) => {
  accm[mapping[key] || key] = value;
  return accm;
}

reduce() 的第一個 argument 為 reducer() ，為一 function，此 function 有兩個 argument：

• 第一個 argument 為 accm ，相當於 Imperative 的 result ，
• 第二個 argument 為 item ，相當於 Imperative 的 data[i]

因為 Object.entries() 回傳的為 array 中的 array，因此 item 仍然是 array，所以可用 Array Destructuring 直接分解成 key 與 value 。

之後的寫法則與 Imperative 一樣，就不再解釋。

Conclusion

• 此為實務上常見的功能，直覺會使用 Imperative 方式實作，但別忘了結果仍是 單一 object ，因此可利用 reduce() 思考，使用 Functional 方式實現