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

JavaScriptで辞書（連想配列）をオブジェクトのリストに変換する方法

JavaScriptでは、キーと値のペアを持つ「辞書」のようなオブジェクトを、Object.values()メソッドを使うことで簡単にオブジェクトの配列（リスト）へ変換できます。以下に具体的なサンプルコードを示します。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .sample{
        font-size: 18px;
        font-weight: 500;
        color: rebeccapurple;
    }
</style>
</head>
<body>
<h1>辞書をJavaScriptオブジェクトのリストに変換する</h1>
<div class="sample">
{ A: { 1: "Apple", 2: "Apricot" }, B: { 1: "Ball", 2: "Bull" }, C: { 1:
"Cat", 2: "Cow" }, D: { 1: "Dog", 2: "Drill" }}
</div>
<button class="Btn">CLICK HERE</button>
<h3>上のボタンをクリックすると、辞書がオブジェクトのリストに変換されます</h3>
<script>
    let BtnEle = document.querySelector(".Btn");
    let arr;
    const obj = {
        A: { 1: "Apple", 2: "Apricot" },
        B: { 1: "Ball", 2: "Bull" },
        C: { 1: "Cat", 2: "Cow" },
        D: { 1: "Dog", 2: "Drill" },
    };
    BtnEle.addEventListener("click", () => {
        arr = Object.values(obj);
        console.log(arr);
    });
</script>
</body>
</html>

実行結果

上記のコードを実行すると、ブラウザには次のように表示されます。

JavaScriptで辞書（連想配列）をオブジェクトのリストに変換する方法

「CLICK HERE」ボタンをクリックし、コンソールのログを確認すると、変換後の配列が出力されていることがわかります。

JavaScriptで辞書（連想配列）をオブジェクトのリストに変換する方法

コードの解説

変換のポイントとなるのは、次の1行です。

arr = Object.values(obj);

Object.values()は、引数として渡されたオブジェクトが持つすべてのプロパティの値を抽出し、それらを要素とする新しい配列を返します。この例では、入れ子になった4つのオブジェクト（A〜Dの各値）が配列の要素として順番に格納されます。

補足：キー情報も保持したい場合

値だけでなくキーの情報も残したい場合は、Object.entries()やObject.keys()を組み合わせると便利です。

// キーと値のペアを [key, value] の形式で取得
const entries = Object.entries(obj);

// map() を使って任意の形式に整形する例
const list = Object.keys(obj).map(key => ({ key, value: obj[key] }));

用途に応じてこれらのメソッドを使い分けることで、柔軟にデータ構造を変換できます。

  1. 【JavaScript】NodeList（ノードリスト）を配列に変換する方法をわかりやすく解説

    JavaScriptでdocument.querySelectorAll()などのDOM操作メソッドを使うと、戻り値として「NodeList（ノードリスト）」と呼ばれるノードのコレクションが返されます。NodeListは配列に似ていますが、map()やfilter()などArrayオブジェクトが持つ便利なメソッドの多くを使用できません。そこで実践では、NodeListを本物の配列に変換してから操作するのが一般的です。 NodeListを配列に変換する主な方法 1. Array.from() を使う 最もシンプルで広く使われている方法です。NodeListを渡すと、それをもとにした新しい配列を生

  2. Pythonでリストをタプルに変換する方法

    Pythonでは、リストをタプルに変換するのは非常に簡単です。組み込み関数である tuple() 関数にリストを引数として渡すだけで、変換することができます。サンプルコードmy_list = [1, 2, 3] my_tuple = tuple(my_list) print(my_tuple)出力結果上記のコードを実行すると、以下のような出力が得られます。(1, 2, 3)解説tuple() 関数は、リストだけでなく文字列や辞書などのイテラブル（反復可能なオブジェクト）もタプルに変換できます。タプルはリストと異なりイミュータブル（変更不可）であるため、データを誤って書き換えたくない場合や、辞書