JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでオブジェクトの値からキーを取得する方法

JavaScriptでは、オブジェクトの値(value)から対応するキー(key)を取得したいケースがよくあります。本記事では、その実装方法をわかりやすく解説します。

前提となるオブジェクト

まず、次のようなオブジェクトがあると仮定しましょう。

const products = {
    "Pineapple":38,
    "Apple":110,
    "Pear":109
};

このオブジェクトでは、すべてのキーが互いに重複せず、すべての値も互いに一意であるものとします。

ここで求められているのは、値を受け取ると、その値に対応するキーを返す関数を作成することです。

期待される動作

例えば findKey(110) を呼び出した場合、戻り値は次のようになるべきです。

"Apple"

実装のアプローチ

この問題には、「値からキーへの逆マッピング(reverse mapping)」を作成し、その後オブジェクトのブラケット記法を使ってキーを参照するというアプローチが有効です。

具体的な手順は以下の通りです。

  1. 空のオブジェクト res を用意する
  2. 元のオブジェクトの各キーを走査し、「値 → キー」という対応関係を持つ新しいオブジェクトを構築する
  3. 引数として渡された値を res のキーとして参照し、対応するキーを返す
  4. 該当する値が存在しない場合は false を返す

サンプルコード

以下が実際のコードです。

const products = {
    "Pineapple":38,
    "Apple":110,
    "Pear":109
};
const findKey = (obj, val) => {
    const res = {};
    Object.keys(obj).map(key => {
        res[obj[key]] = key;
    });
    // 値がオブジェクト内に存在しない場合は
    // false を返す
    return res[val] || false;
};
console.log(findKey(products, 110));

実行結果

このコードを実行すると、コンソールには次の出力が表示されます。

Apple

補足:別の書き方(Object.entries を使う方法)

Object.keys() の代わりに Object.entries() を使うと、より簡潔に記述できます。

const findKey = (obj, val) => {
    const entry = Object.entries(obj).find(([, value]) => value === val);
    return entry ? entry[0] : false;
};
console.log(findKey(products, 110)); // "Apple"

この方法では、中間オブジェクトを生成せずに目的のキーを見つけられるため、パフォーマンス面でも有利です。用途に応じて使い分けてみてください。

  1. JavaScriptのObject.keys().map()とArray.map()の違いを徹底解説

    JavaScriptにおいて、Array.map()は配列の各要素に関数を適用し、その結果を新しい配列として返すメソッドです。一方、オブジェクトには直接map()メソッドが用意されていないため、Object.keys().map()という形で、まずObject.keys()を使ってオブジェクトのキーを配列として取得し、そこにmap()を適用するのが一般的なテクニックとなります。 この記事では、両者の使い方の違いを、実際に動作するサンプルコードと実行結果をもとにわかりやすく解説します。 サンプルコード 以下は、Object.keys().map()とArray.map()の動作を比較できるJa

  2. JavaScriptでオブジェクトの値を動的に設定する方法をわかりやすく解説

    JavaScriptでは、オブジェクトのプロパティ(値)を後から動的に変更・設定することができます。本記事では、ボタンをクリックしたタイミングでオブジェクトの値を書き換える具体的なコード例を紹介します。 実装例:オブジェクトの値を動的に変更する 以下のコードでは、student オブジェクトの name プロパティと age プロパティを、ボタンクリック時に動的に更新しています。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" />