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

JavaScriptで元の配列を変更せずにオブジェクトのキー名を変更する方法

JavaScriptで配列内のオブジェクトのキー名（プロパティ名）を変更したい場合、deleteで直接削除してしまうと元のオブジェクトまで書き換わってしまいます。そこで役立つのが、map()メソッドとスプレッド構文（...）、分割代入を組み合わせたイミュータブル（非破壊的）な手法です。

この記事では、オブジェクトのキー「name」を「fullName」に変更しながら、元の配列を一切変更しない方法をサンプルコード付きで解説します。

サンプルコード

<!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;
    }
</style>
</head>
<body>
<h1>元の配列を変更せずにオブジェクトのキーを変更する</h1>
<button class="Btn">CLICK HERE</button>
<p class="sample"></p>
<p class="result"></p>
<script>
    let BtnEle = document.querySelector(".Btn");
    let resEle = document.querySelector(".result");
    let sampleEle = document.querySelector(".sample");
    let obj = [
        { name: "Rohan Sharma", age: 12 },
        { name: "Shawn Mendes", age: 18 },
        { name: "Michael Shaw", age: 15 },
        { name: "Mitch Johansson", age: 19 },
    ];
    BtnEle.addEventListener("click", () => {
        // 分割代入とスプレッド構文で、元のオブジェクトを壊さずにキーを入れ替える
        const newArr = obj.map((ele) => {
            const { name, ...rest } = ele;
            return { fullName: name, ...rest };
        });
        console.log("新しい配列：", newArr);
        console.log("元の配列：", obj);
    });
</script>
</body>
</html>

実行結果

上記のコードを実行し、「CLICK HERE」ボタンをクリックしてコンソールを確認すると、次のように出力されます。

  • 新しい配列：すべてのオブジェクトで name キーが fullName に置き換えられている
  • 元の配列：name と age を持った状態のまま、まったく変更されていない

コードの解説

ポイントは map() のコールバック関数内にある次の2行です。

const { name, ...rest } = ele;
return { fullName: name, ...rest };
  • const { name, ...rest } = ele; で、オブジェクトから name プロパティを取り出し、残りのプロパティ（ここでは age）を rest にまとめています。
  • { fullName: name, ...rest } で、新しいキー fullName に元の値を設定し、残りのプロパティを展開することでまったく新しいオブジェクトを生成しています。
  • map() は常に新しい配列を返すため、元の配列 obj やその中身のオブジェクトは一切変更されません。

注意点：delete を使う方法との違い

よく見かける次のような書き方は、一見うまく動くように見えますが注意が必要です。

obj = obj.map((ele) => {
    ele["fullName"] = ele["name"];
    delete ele["name"];
    return ele;
});

この方法では map() が新しい配列を返すものの、各要素は元のオブジェクトへの参照のままのため、delete を実行した時点で元のオブジェクト自体が書き換わってしまいます。元のデータを後から使いたいケースでは、冒頭で紹介したスプレッド構文によるコピー方式を使いましょう。


  1. 【JavaScript】オブジェクト配列内に同じキーの値を持つ要素がいくつあるか数える方法

    例えば、ユーザーに関するデータを格納した、次のようなオブジェクトの配列があるとします。const arr = [     {         name: aaa,         id: 2100,         designation: developer     }, &n

  2. JavaScriptで「#」の位置を固定したまま配列を反転させる方法

    今回は、リテラル値の配列を受け取り、「#」が含まれているインデックスはそのまま維持しつつ、それ以外の要素だけを反転させて返すJavaScript関数を作成します。 たとえば、次のような配列が与えられた場合： [18, -4, #, 0, 8, #, 5] 期待される出力は以下のとおりです。 [5, 8, #, 0, -4, #, 18] ご覧のとおり、数値部分だけが逆順に並べ替えられ、「#」は元の位置（インデックス）に残ったままになっています。 解決のアプローチ この問題は、次の3つのステップで解決できます。 ステップ1： reduce() を使って、「#」が存在するすべてのインデックス番号