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

JavaScriptのネストした分割代入（デストラクチャリング）の使い方

JavaScriptの分割代入（デストラクチャリング）は、オブジェクトや配列から値を取り出して個別の変数に代入できる便利な構文です。オブジェクトや配列が入れ子（ネスト）になっている場合でも、データ構造に合わせたパターンを記述することで、深い階層にある値まで一度に展開できます。

以下は、ネストしたオブジェクトと配列を分割代入するJavaScriptのサンプルコードです。

サンプルコード

<!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,.result {
        font-size: 18px;
        font-weight: 500;
        color: red;
    }
    .result {
        color: rebeccapurple;
    }
</style>
</head>
<body>
<h1>JavaScriptでのネストした分割代入</h1>
<div><pre class="sample"></pre></div>
<div><pre class="result"></pre></div>
<button class="Btn">CLICK HERE</button>
<h3>上のボタンをクリックすると、ネストした配列とオブジェクトが分割代入されます</h3>
<script>
    let sampleEle = document.querySelector(".sample");
    let resultEle = document.querySelector(".result");
    let obj = {
        Name: {
            firstName: "Rohan",
            lastName: "Sharma",
        },
        age: 22,
    };
    let arr = [22, 33, ["a", "b"]];
    sampleEle.innerHTML = '{Name:{firstName: "Rohan", lastName: "Sharma"},age: 22} <br>';
    sampleEle.innerHTML += "[22,33,['a','b']";
    let {
        Name: { firstName, lastName },
        age,
    } = obj;
    let a, b, c, d;
    [a, b, [c, d]] = arr;
    document.querySelector(".Btn").addEventListener("click", () => {
        resultEle.innerHTML += `firstName=${firstName} lastName=${lastName} age=${age}
        '<br>`;
        resultEle.innerHTML += `a=${a} b=${b} c=${c} d=${d} '<br>`;
    });
</script>
</body>
</html>

出力結果

上記のコードを実行すると、次のような画面が表示されます。

JavaScriptのネストした分割代入（デストラクチャリング）の使い方

「CLICK HERE」ボタンをクリックすると、分割代入によって取り出された各変数の値が結果エリアに出力されます。

JavaScriptのネストした分割代入（デストラクチャリング）の使い方

コードのポイント

  • let { Name: { firstName, lastName }, age } = obj; のように記述すると、obj.Name.firstName や obj.Name.lastName を直接変数として受け取れます。
  • 配列の場合は [a, b, [c, d]] = arr; とすることで、内側のネストした配列の要素までまとめて展開できます。
  • ボタンのクリックイベントリスナー内でこれらの変数を出力しているため、「CLICK HERE」を押すと結果が表示されます。
  1. JavaScriptにおけるオブジェクトの分割代入（Destructuring）の使い方

    JavaScriptでは、分割代入（Destructuring）と呼ばれる構文を使うことで、オブジェクトから特定のプロパティを簡単に取り出し、個別の変数に代入することができます。従来の方法では、obj.firstName のようにプロパティへ一つずつアクセスする必要がありましたが、分割代入を使えば1行で簡潔に記述できます。オブジェクトの分割代入の基本構文基本的な書き方は以下の通りです。let { プロパティ名1, プロパティ名2, プロパティ名3 } = オブジェクト;波括弧 {} の中に取り出したいプロパティ名を列挙するだけで、同名の変数にそれぞれの値が代入されます。実装例以下は、オブジェク

  2. JavaScriptの分割代入（Destructuring Assignment）とは？オブジェクトと配列から値を取り出す方法

    分割代入（Destructuring Assignment）とは分割代入（Destructuring Assignment）は、ES6（ECMAScript 2015）で導入されたJavaScriptの特殊な構文です。オブジェクトのプロパティや配列の要素を分解し、それぞれを個別の変数に代入することができます。従来の方法では、オブジェクトや配列から値を取り出す際に、プロパティ名やインデックスを一つずつ指定する必要がありました。分割代入を使えば、こうした操作をより簡潔で読みやすいコードで記述できます。分割代入の主なメリットコードの簡潔化： 複数の変数への代入を1行でまとめて記述できます可読性の向上