typescript オブジェクトのキーでマップ処理

Question

以下のコードで、オブジェクトの配列で、複数指定したキーを持つオブジェクトのみにマップ関数でリスト処理をしたいのですが場合分けがべた書きスマートじゃないです。（オブジェクトのキーが増えた場合などにリファクタしづらい。）keyを一気に扱う方法はありませんか？
他言語の
int x = 5
int y = 2
x in (1, 2, 3) → false
y in (1, 2, 3) → true
みたいな感じです

type Obj = {
    key: string,
    name: string
}
const objs: Obj[] = [
    {key: "human", name: "私"},
    {key: "fish", name: "鮭"},
    {key: "mouse", name: "ハムスター"},
    {key: "flog", name: "アマガエル"}
]
const keys = objs.map(o => o.key)
console.log(
    keys.map(
        key => { 
            if(key === "human" || key === "mouse")
                return "哺乳類"
            else if(key === "fish")
                return "魚類"
            else(key === "flog")
                return "両生類"
            }
        )
    )
// 期待値
["哺乳類", "魚類", "哺乳類", "両生類"]

Answer 1

こんにちは

"human" から "哺乳類" が得られるようなマップを作っておくのは、いかがでしょうか？ 以下は、そのようなマップとして機能するオブジェクトkeyToLabelを作っておき、これを利用する例です。

以下のような内容のTSファイルを作っておきます。ファイルを仮に keyToLabel.ts としておきます。

keyToLabel.ts:

const groups = {
  哺乳類: ["human", "mouse"],
  魚類: ["fish"],
  両生類: ["flog"]
} as const;


type KV = [string, string];
type KVS = [string, readonly string[]];

const keyToLabel = Object.fromEntries(
  Object.entries(groups).reduce(
    (a: KV[], [label, keys]: KVS) => [
      ...a,
      ...keys.map((k) => [k, label] as KV)
    ],
    []
  )
);

export default keyToLabel;

今後、たとえば、哺乳類に "dog" を追加したり、"鳥類" を追加する場合は、groups に追加します。
上記のkeyToLabel.tsを作っておくと、ご質問の本題である配列を得るには、以下のようにすればよいです。

import keyToLabel from "./keyToLabel";

const keys = objs.map(({ key }: Obj) => keyToLabel[key]);

• 動作確認用サンプル: https://codesandbox.io/s/q296522-il5uy

参考になれば幸いです。

備考

上記では、'哺乳類' => ["human", "mouse"] というエントリを含むオブジェクト groups をマスターデータとして、これの逆引きのマップであるkeyToLabel をプログラムで作りましたが、以下のように、はじめから keyToLabel をリテラルで書いてしまって、dog や 鳥類のcrow が追加されたときに、これに追加することもできます。

const keyToLabel = {
  human: '哺乳類',
  mouse: '哺乳類',
  fish: '魚類',
  flog: '両生類'
} as const;

export default keyToLabel;

ただし、この場合は逆に、哺乳類 であるすべてのkeyを配列で得たいという場合は、なにがしかのコードを書く必要があります。

Comments

[yochun02]

詳しく教えていただきありがとうございます！
浅学で恐縮ですが、
map(({ key }: Obj) => keyToLabel[key])の部分は何をしているのかざっくりで良いので教えていただけませんか？(特に前半の形はあまり慣れてないので。。。map(x => {xの加工})の形しかみたことなかったです)

[jun68ykt]

どういたしまして

const keys = objs.map(({ key }: Obj) => keyToLabel[key]);

についてですが、これを

> map(x => {xの加工})の形

で書くと、ご質問にあるのと同様に

const keys = objs.map((o: Obj) => keyToLabel[o.key]);

となります。このときに、 map に与えている関数の引数 o を { key } としておき、関数本体のほうで、o.key ではなく、単に key を変数として使うのは、オブジェクトの分割代入の応用です。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

の中にある、「引数に指定されたオブジェクトの属性への参照」に、いくつかの事例が出ています。

[jun68ykt]

補足

関数本体で、name も使うのであれば、

({ key, name }: Obj) => ･･･

とします。

[yochun02]

なるほど！map内で分割代入もできるのですね。重ね重ね解答ありがとうございます。m(_ _)m

Answer 2

配列を使って逆に考えてみました。ifの中を
にすればいいですかね。

if(["human", "mouse"].some(arr => arr === key))
                return "哺乳類"

それでもって["human", "mouse"]のところをあらかじめ切り出しておけば。。