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

JavaScriptのfill()メソッドとは？使い方とパラメータをわかりやすく解説

JavaScriptのfill()メソッドは、配列の要素を指定した静的な値で埋めるために使用されます。既存の配列の内容を直接書き換える（破壊的な操作）点が特徴で、戻り値としては変更後の配列が返されます。

fill()メソッドのパラメータ

fill()メソッドには、以下の3つの引数を指定できます。

  • value − 配列に埋め込む値を指定します。
  • begin − 埋め込みを開始するインデックス番号です。省略した場合は配列の先頭（0）から処理されます。
  • end − 埋め込みを終了するインデックス番号です。この位置自体は含まれない点に注意してください。省略した場合は配列の末尾まで処理されます。

サンプルコード

次のコードを実行すると、fill()メソッドの実際の動作を確認できます。ここでは、インデックス2から3の手前まで（つまり「Three」の部分だけ）を「Six」で置き換えています。

<!DOCTYPE html>
<html>
   <body>
      <script>
         var num = ["One", "Two", "Three", "Four", "Five"];
         document.write(num);

         // インデックス2〜3の手前まで「Six」で埋める
         document.write("<br>" + num.fill("Six", 2, 3));
      </script>
   </body>
</html>

実行結果

上記のコードを実行すると、以下のように出力されます。

One,Two,Three,Four,Five
One,Two,Six,Four,Five

補足：fill()メソッドを使う際のポイント

fill()メソッドを使用する際には、いくつか注意しておきたいポイントがあります。

  • 元の配列が変更される：fill()は新しい配列を作るのではなく、元の配列そのものを書き換えます。元の配列を残したい場合は、事前にslice()やスプレッド構文などでコピーしておきましょう。
  • endは範囲に含まれない：num.fill("Six", 2, 4)と指定した場合、置き換えられるのはインデックス2と3の要素のみです。
  • 負の値も指定可能：beginやendに負の数を指定すると、配列の末尾からの相対位置として解釈されます。
  • 対応ブラウザ：fill()はES6（ECMAScript 2015）で導入されたため、古いブラウザ（IE11以前など）では動作しません。
  1. JavaScriptの_.union()メソッドとは？配列の重複を除去して結合する使い方を解説

    _.union()メソッドの基本_.union()は、JavaScriptの便利なライブラリであるunderscore.jsに用意されているメソッドです。この関数は、複数の配列を受け取り、それらすべてに含まれる要素を統合したうえで、重複のない新しい配列（いわゆる「和集合」）を返します。各配列の値をすべて精査し、ユニークな値だけを新しい配列へと取り込んでくれるため、データの整理や重複排除の処理を簡潔に記述できるのが大きな魅力です。構文_.union( array1, array2, .... );引数として渡せる配列の数に制限はなく、2つでも3つでも、必要な数だけ指定できます。使用例：数値配列の

  2. JavaScriptの_.size()メソッドとは？配列のサイズを取得する方法を解説

    _.size()メソッドとは_.size()は、JavaScriptの定番ユーティリティライブラリであるunderscore.jsに用意されている関数です。主に配列の要素数（サイズ）を取得するために使われます。このメソッドを使用する前に、underscore.jsのCDNをページに読み込んでおく必要がある点に注意してください。構文_.size(array);例1：通常の配列の場合次の例では、数値を格納した通常の配列を_.size()メソッドに渡し、配列のサイズを取得しています。<html> <body> <head> <script src =