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

JavaScriptでオブジェクトのキーと値を反転する方法！_.invert()メソッドの使い方を解説

JavaScriptでオブジェクトのキーと値（key/value）を入れ替える作業は、かつてはかなり手間のかかる処理でした。しかし、JavaScriptフレームワークであるunderscore.js（およびその派生ライブラリであるlodash）の登場により、この作業は驚くほど簡単になりました。

これらのライブラリには便利な関数が多数用意されており、その中のひとつが_.invert()メソッドです。このメソッドを使うと、オブジェクトのキーと値を一瞬で反転できます。

例えば、name: "Kiran" というキーと値のペアを持つオブジェクトに _.invert() を適用すると、Kiran: "name" のように元の値がキーになり、元のキーが値へと変換されます。この記事では、具体的なコード例を交えながら _.invert() メソッドの使い方をわかりやすく解説します。

_.invert()の構文

_.invert(object);

このメソッドは引数としてオブジェクトを受け取り、その中身を反転します。つまり、すべてのkey/valueペアがvalue/keyペアへと変換されるのです。

サンプルコード例1

次の例では、人物オブジェクトが持つ「name（名前）」「age（年齢）」「salary（給与）」の各キーが、それぞれの値をキーとする形へ反転されます。

<html>
<body>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/0.10.0/lodash.min.js"></script>
<script>
  var res = JSON.stringify(_.invert({name: 'Raj', age: 38, salary: 120000}));
  document.write(res);
</script>
</body>
</html>

実行結果

{"38":"age","120000":"salary","Raj":"name"}

出力を見ると、「name」「age」「salary」というキーが消え、代わりに「Raj」「38」「120000」が新しいキーになっていることが確認できます。

サンプルコード例2

もうひとつの例として、人物情報の「name（名前）」「age（年齢）」「Organization（所属組織）」を反転してみましょう。

<html>
<body>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/0.10.0/lodash.min.js"></script>
<script type="text/javascript">
  var res = JSON.stringify(_.invert({"name": 'ElonMusk', age: 47, "Organization": 'Spacex'}));
  document.write(res);
</script>
</body>
</html>

実行結果

{"47":"age","ElonMusk":"name","Spacex":"Organization"}

_.invert()を使う際の注意点

_.invert() を使うときは、いくつか気をつけたいポイントがあります。

  • 値は文字列化される： 数値の値（38や47など）も、出力結果の通り文字列型のキーとして扱われます。これはオブジェクトのキーが必ず文字列になるためです。
  • 重複する値がある場合： 元のオブジェクトに同じ値が複数存在すると、反転後のキーが衝突し、後から処理された要素で上書きされます。ユニークな値を持つオブジェクトでの使用が推奨されます。

まとめ

_.invert() メソッドを使えば、これまで手動でループを回して書いていたようなキーと値の入れ替え処理を、たった1行のコードで実現できます。lodashやunderscore.jsを読み込むだけで利用できるため、データ変換処理が必要な場面でぜひ活用してみてください。

  1. JavaScriptでインポートしたオブジェクトを分割代入（デストラクチャリング）する方法

    JavaScriptでは、ESモジュールからインポートしたオブジェクトに対して分割代入（デストラクチャリング）を使うことで、必要なプロパティだけを個別の変数として簡潔に取り出すことができます。ここでは、import で読み込んだオブジェクトを分割代入する具体的な手順とコード例を紹介します。 ポイント：分割代入の基本構文 オブジェクトの分割代入は、次のように波括弧 { } の中に取り出したいプロパティ名を並べて記述します。let {プロパティ1, プロパティ2, プロパティ3} = オブジェクト;この構文は、インポートされたデフォルトエクスポートのオブジェクトにもそのまま適用できます。 コード例

  2. JavaScriptで多次元オブジェクトを作成する方法【サンプルコード付き】

    はじめに JavaScriptでは、オブジェクトのプロパティの値として別のオブジェクトを持たせることで、多次元（ネストされた）オブジェクトを作成できます。この構造を活用すると、氏名や学校情報、住所のように階層関係のあるデータを、直感的かつ整理された形で表現することが可能です。 サンプルコード 以下は、多次元JavaScriptオブジェクトを作成し、コンソールに表示するためのコード例です。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /