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

JavaScriptの分割代入（デストラクチャリング）でオブジェクトに新しいプロパティを割り当てる方法

JavaScriptでは、分割代入（デストラクチャリング）の構文を活用することで、あるオブジェクトから値を取り出しながら、別のオブジェクトへ新しいプロパティとして割り当てることができます。本記事では、その具体的な実装方法をサンプルコードとともに解説します。

ポイント：代入先を指定した分割代入

通常、分割代入は宣言した変数へ値を展開するために使われますが、({ a: obj.a } = obj1) のように代入先のプロパティを明示的に指定することで、既存オブジェクトのプロパティへ直接値を代入できます。これにより、一時的な変数を介さずにオブジェクト間でデータをコピーできます。

コード例

<!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;
    }
    .result,.sample {
        font-size: 18px;
        font-weight: 500;
        color: rebeccapurple;
    }
    .result {
        color: red;
    }
</style>
</head>
<body>
<h1>分割代入を使ってオブジェクトに新しいプロパティを割り当てる</h1>
<div class="sample">{"a":11,"b":22,"c":44}</div>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>上のボタンをクリックすると、オブジェクトを分割代入して obj に値が割り当てられます</h3>
<script>
    let resEle = document.querySelector(".result");
    let obj = {};
    let obj1 = {
        a: 11,
        b: 22,
        c: 44,
    };
    ({ a: obj.a, b: obj.b, c: obj.c } = obj1);
    document.querySelector(".Btn").addEventListener("click", () => {
        for (let i in obj) {
            resEle.innerHTML += "key = " + i + " : Value = " + obj[i] + "";
        }
    });
</script>
</body>
</html>

コードの解説

このコードの重要な部分は次の一行です。

({ a: obj.a, b: obj.b, c: obj.c } = obj1);

obj1 の各プロパティ（a、b、c）の値を取り出し、空のオブジェクト obj の同名プロパティへそれぞれ代入しています。なお、式全体を括弧 ( ) で囲む必要がある点に注意してください。これは、波括弧 { } で始まる文がブロックとして解釈されるのを防ぐためです。

実行結果

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

JavaScriptの分割代入（デストラクチャリング）でオブジェクトに新しいプロパティを割り当てる方法

「CLICK HERE」ボタンをクリックすると、obj に割り当てられたキーと値が画面に出力されます。

JavaScriptの分割代入（デストラクチャリング）でオブジェクトに新しいプロパティを割り当てる方法


  1. JavaScriptで配列内オブジェクトのプロパティ名を置き換える方法

    JavaScriptでオブジェクト配列のプロパティ名を置き換える方法 JavaScriptでは、map()メソッドを活用することで、配列に含まれる各オブジェクトのプロパティ名を別の名前に簡単に置き換えることができます。map()は元の配列を変更せずに新しい配列を生成するため、安全かつ効率的なデータ変換処理に適しています。 以下は、オブジェクト配列のプロパティ名 name を fullName に置き換えるサンプルコードです。 サンプルコード <!DOCTYPE html> <html lang="en"> <head> <meta

  2. JavaScriptのforループを使って空のオブジェクトにプロパティを設定する方法

    JavaScriptでは、for...inループを使うことで、既存のオブジェクトから空のオブジェクトへプロパティを簡単にコピーできます。以下に、forループを使用して空のオブジェクトにプロパティを設定するサンプルコードを紹介します。 コード例 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,