なにが言いたいのかタイトルで伝わり辛いと思いますので以下、コードで書きます。

やりたいこと


こんな感じの週を表すオブジェクト配列があったとして、そいつらそれぞれに漢字を割り当てたい。

1
2
3
4
5
6
7
8
9
[
{ id: 0, dayOfWeek: 'Sun' },
{ id: 1, dayOfWeek: 'Mon' },
{ id: 2, dayOfWeek: 'Tue' },
{ id: 3, dayOfWeek: 'Wed' },
{ id: 4, dayOfWeek: 'Thu' },
{ id: 5, dayOfWeek: 'Fri' },
{ id: 6, dayOfWeek: 'Sat' }
]

下記のようにしたい。

1
2
3
4
5
6
7
8
9
[
{ id: 0, dayOfWeek: 'Sun', kanji: '日' },
{ id: 1, dayOfWeek: 'Mon', kanji: '月' },
{ id: 2, dayOfWeek: 'Tue', kanji: '火' },
{ id: 3, dayOfWeek: 'Wed', kanji: '水' },
{ id: 4, dayOfWeek: 'Thu', kanji: '木' },
{ id: 5, dayOfWeek: 'Fri', kanji: '金' },
{ id: 6, dayOfWeek: 'Sat', kanji: '土' }
]

前提


これを実現するにあたって、今回は下記の制限がありました。

  • 初めにオブジェクト配列を生成する時点で漢字の要素を作成することができない
  • 週のオブジェクト配列だけでなく、例えば月(month)のオブジェクト配列でもマッピングできるといったように汎用的にしたい

この条件を満たす汎用的なコードを書いてみます。

コード


今回はもともとのオブジェクト配列とそれをマップするための別のオブジェクト配列を準備することにしました。こんな感じです。

1
2
3
4
5
6
7
8
9
const weekdayKanji = [
{ key: 'Sun', value: '日' },
{ key: 'Mon', value: '月' },
{ key: 'Tue', value: '火' },
{ key: 'Wed', value: '水' },
{ key: 'Thu', value: '木' },
{ key: 'Fri', value: '金' },
{ key: 'Sat', value: '土' }
];

で、2つのオブジェクト配列をマップさせる関数がこれ。

1
2
3
4
5
6
7
8
9
10
11
12
13
/**
* @param {array} list 基のオブジェクト配列
* @param {array} types マッピングするオブジェクト配列
* @param {string} key どのキーでマッピングさせるか
* @param {string} newKeyName 新規作成するキー名
*/
function objectMapper(list, types, key, newKeyName) {
return list.map((x) => {
const obj = types.find(t => t.key === x[key]);
x[newKeyName] = obj.value;
return x;
});
}

引数に下記を取るような関数を作ってみました。

  • 基のオブジェクト配列
  • マッピングさせるオブジェクト配列 (weekdayKanji
  • 基のオブジェクト配列のうちマッピングでキーとするもの(dayOfWeek
  • 新規作成するキー名(kanji

実行してみる


作ったものを実行してみます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
const weekday = [
{ id: 0, dayOfWeek: 'Sun' },
{ id: 1, dayOfWeek: 'Mon' },
{ id: 2, dayOfWeek: 'Tue' },
{ id: 3, dayOfWeek: 'Wed' },
{ id: 4, dayOfWeek: 'Thu' },
{ id: 5, dayOfWeek: 'Fri' },
{ id: 6, dayOfWeek: 'Sat' }
];

const weekdayKanji = [
{ key: 'Sun', value: '日' },
{ key: 'Mon', value: '月' },
{ key: 'Tue', value: '火' },
{ key: 'Wed', value: '水' },
{ key: 'Thu', value: '木' },
{ key: 'Fri', value: '金' },
{ key: 'Sat', value: '土' }
];

function objectMapper(list, types, key, newKeyName) {
return list.map((x) => {
const obj = types.find(t => t.key === x[key]);
x[newKeyName] = obj.value;
return x;
});
}

let result = objectMapper(weekday, weekdayKanji, 'dayOfWeek', 'kanji');
console.log(result);

//結果
[ { id: 0, dayOfWeek: 'Sun', kanji: '日' },
{ id: 1, dayOfWeek: 'Mon', kanji: '月' },
{ id: 2, dayOfWeek: 'Tue', kanji: '火' },
{ id: 3, dayOfWeek: 'Wed', kanji: '水' },
{ id: 4, dayOfWeek: 'Thu', kanji: '木' },
{ id: 5, dayOfWeek: 'Fri', kanji: '金' },
{ id: 6, dayOfWeek: 'Sat', kanji: '土' } ]

と、こんな感じで、当初の目的が達成できました。引数を変えれば汎用的に使用できます。