使用 reduce() 與 Array Destructuring 實作

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

Imperative


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
const obj1 = {
firstName: 'Sam',
lastName: 'Xiao',
age: 20,
};

const autoMap = (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 = autoMap(obj1, {
firstName: 'shortName',
lastName: 'familyName',
});

console.log(obj2);

obj1 的 property key 為 firstNamelastNameage,欲轉為 obj2shortNamefamilyNameage 則不變,且 property value 則完全一樣。

19 行

1
2
3
4
5
6
const obj2 = autoMap(obj1, {
firstName: 'shortName',
lastName: 'familyName',
});

console.log(obj2);

autoMapper() 只傳入兩個 argument:

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

第 7 行

1
2
3
4
5
6
7
8
9
10
11
const autoMap = (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;
};
1
const entries = Object.entries(obj);

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

1
let result = {};

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

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

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

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

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

1
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 將全部保留。

1
return result;

最後將 result object 回傳。

auto000

Functional


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const obj1 = {
firstName: 'Sam',
lastName: 'Xiao',
age: 20,
};

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

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

console.log(obj2);

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

1
Object.entries(obj).reduce()

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

1
2
3
4
(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 直接分解成 keyvalue

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

auto001

Conclusion

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