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

JavaScriptにおける配列の分割代入（Destructuring）の基本と使い方

分割代入（Destructuring）とは、配列から値を取り出して個別の変数に展開するための構文です。ES2015（ES6）で導入されたこの機能を使うと、配列の各要素を簡潔かつ読みやすく変数に割り当てることができます。

配列の分割代入のサンプルコード

以下は、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;
   }
   .result,.sample {
      font-size: 20px;
      font-weight: 500;
   }
</style>
</head>
<body>
<h1>JavaScriptでの配列の分割代入</h1>
<div class="sample"></div>
<div style="color: green;" class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>上のボタンをクリックすると、配列が分割代入されます</h3>
<script>
   let sampleEle = document.querySelector(".sample");
   let resEle = document.querySelector(".result");
   let arr = ["F", "G", 22, 44];
   sampleEle.innerHTML = "arr = " + arr;
   let a, b, c, d;
   document.querySelector(".Btn").addEventListener("click", () => {
      [a, b, c, d] = arr;
      resEle.innerHTML = "分割代入後の配列：<br> ";
      resEle.innerHTML += `a=${a} b=${b} c=${c} d=${d}`;
   });
</script>
</body>
</html>

実行結果

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

JavaScriptにおける配列の分割代入（Destructuring）の基本と使い方

「CLICK HERE」ボタンをクリックすると、以下のように配列の各要素が変数a〜dに展開されて表示されます。

JavaScriptにおける配列の分割代入（Destructuring）の基本と使い方

解説

このコードのポイントは [a, b, c, d] = arr; の一行です。右辺の配列arrの要素が、左辺に並べた各変数へ順番に代入されます。つまり、aには「F」、bには「G」、cには「22」、dには「44」が格納されます。

従来の方法では a = arr[0]; b = arr[1]; のように一つずつ代入する必要がありましたが、分割代入を使えば1行で済み、コードの可読性も大幅に向上します。なお、必要な変数の数が配列の要素数より少なくても問題なく動作し、その場合は先頭から順に値が代入されます。

  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行でまとめて記述できます可読性の向上