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

JavaScriptの配列で使えるスプレッド演算子（...）の使い方

スプレッド構文（...）を使うと、配列などのイテラブルなオブジェクトを、0個以上の引数が期待される場所で展開することができます。これにより、配列の要素をまとめて関数の引数として渡すことが可能になります。

スプレッド演算子の基本

例えば、5つの引数を受け取る関数に対して5つの要素を持つ配列を渡したい場合、従来の書き方では各要素を個別に指定する必要がありました。しかし、スプレッド演算子を使えば「add(...arr)」のように記述するだけで、配列の各要素が順番に引数として展開されて渡されます。

スプレッド演算子は、配列の結合やコピーなど、さまざまな場面でも活用できる便利な構文です。

以下は、JavaScriptで配列にスプレッド演算子を使用したコード例です。

コード例

<!DOCTYPE html>
<html lang="en">
<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;
      color: blueviolet;
   }
   .sample {
      color: red;
}
</style>
</head>
<body>
<h1>Spread operator for arrays JavaScript</h1>
<div class="sample">[22,55,11,19,55]</div>
<div class="result"></div>
<br />
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to call the add function and pass the above
array as parameter</h3>
<script>
   let BtnEle = document.querySelector(".Btn");
   let resEle = document.querySelector(".result");
   function add(num1, num2, num3, num4, num5) {
      return num1 + num2 + num3 + num4 + num5;
   }
   let arr = [22, 55, 11, 19, 55];
   BtnEle.addEventListener("click", (event) => {
      resEle.innerHTML = "The sum of the above array = " + add(...arr);
   });
</script>
</body>
</html>

出力結果

JavaScriptの配列で使えるスプレッド演算子（...）の使い方

「CLICK HERE」ボタンをクリックすると、次のように配列の合計値が表示されます。

JavaScriptの配列で使えるスプレッド演算子（...）の使い方


まとめ

このように、スプレッド演算子（...）を使うことで、配列の要素を簡単に関数の引数として渡すことができます。可変長のデータを扱う際に非常に便利な構文なので、ぜひ活用してみてください。

  1. JavaScriptにおける配列とSetの違いとは？重複値の扱いと要素アクセスをわかりやすく解説

    JavaScriptのSet（セット）オブジェクトは、ES2015（ES6）で新たに導入されたデータ型です。従来から広く使われている配列（Array）と比べると、いくつか重要な違いがあります。 配列とSetの主な違い 重複した値の扱い： 配列は同じ値をいくつでも格納できますが、Setでは同一の値は1つしか保持されません。重複した値は自動的に除外されるのが大きな特徴です。 要素へのアクセス方法： 配列ではインデックス（例：arr[0]）を使って任意の位置の要素へ直接アクセスできます。一方、Setにはインデックスの概念がなく、要素は挿入された順序どおりに先頭から順番に辿ることしかできません。

  2. 【JavaScript】スプレッド演算子（...）で配列を関数の引数として渡す方法

    スプレッド構文（spread syntax）とは、配列などのイテラブル（反復可能なオブジェクト）を展開し、関数呼び出しの際に0個以上の引数として渡すことができるJavaScriptの便利な機能です。 通常、配列の各要素を個別の引数として関数に渡すには、一つずつ指定する必要がありますが、「...」（ドット3つ）を付けるだけで、配列の中身が自動的に展開され、それぞれ独立した引数として扱われます。これにより、コードがシンプルになり、可読性も大きく向上します。 スプレッド演算子を使った関数呼び出しのサンプルコード 以下は、関数呼び出しでスプレッド演算子を使用する具体例です。このサンプルでは、4つの引数