JavaScriptのfill()メソッドの使い方！配列を任意の値で埋める方法
JavaScriptのfill()メソッドとは？
JavaScriptのfill()メソッドは、配列の要素を指定した静的な値で一括して埋めるためのメソッドです。開始インデックスと終了インデックスを指定すれば、配列の一部だけを上書きすることもできます。
なお、fill()は元の配列そのものを書き換える（破壊的な）メソッドであり、戻り値として変更後の配列が返される点に注意してください。
fill()メソッドの基本構文
array.fill(val, start, end)
各引数の意味は次のとおりです。
- val：配列に埋める値
- start：埋め込みを開始するインデックス（省略可、初期値は0）
- end：埋め込みを終了するインデックス（省略可、初期値は配列の長さ。このインデックス自体は範囲に含まれません）
それでは、実際にJavaScriptでfill()メソッドを使ってみましょう。
例1：数値の配列をfill()で埋める
<!DOCTYPE html>
<html>
<body>
<h2>Ranking Points</h2>
<button onclick="display()">Fill</button>
<p id="demo"></p>
<script>
var pointsArr = [50, 100, 200, 300, 400, 500, 600];
document.getElementById("demo").innerHTML = pointsArr;
function display() {
document.getElementById("demo").innerHTML = pointsArr.fill(1000);
}
</script>
</body>
</html>このコードでは、7つの数値を格納した配列「pointsArr」を画面に表示し、「Fill」ボタンをクリックするとfill(1000)が実行されて、すべての要素が1000で上書きされます。
実行結果
「Fill」ボタンをクリックすると、配列の全要素が次のように1000で埋められます。
例2：文字列の配列をfill()で埋める
<!DOCTYPE html>
<html>
<body>
<h2>Student Name</h2>
<button onclick="display()">Fill</button>
<p id="demo"></p>
<script>
var stdName = ["John", "Tom", "David"];
document.getElementById("demo").innerHTML = stdName;
function display() {
document.getElementById("demo").innerHTML = stdName.fill("Jacob");
}
</script>
</body>
</html>fill()メソッドは数値だけでなく、文字列の配列に対しても同様に使えます。ここでは、3人の生徒名が入った配列「stdName」の全要素を「Jacob」で上書きしています。
実行結果
「Fill」ボタンをクリックすると、配列の要素が次のようにすべて「Jacob」に置き換わります。
まとめ
fill()メソッドを使えば、配列の全要素または指定範囲の要素を、任意の値で簡単にまとめて置き換えることができます。startとendを組み合わせれば部分上書きも可能なため、配列の初期化や値のリセットなど、さまざまな場面で活用できる便利なメソッドです。
-
JavaScriptの配列some()メソッドの使い方をわかりやすく解説
JavaScriptのArray.some()メソッドは、配列の要素の中に、指定されたテスト（条件）を満たすものが「1つでも存在するかどうか」を判定するためのメソッドです。ここでいうテストとは、配列の各要素に対して順番に実行されるコールバック関数のことを指します。コールバック関数が1つでもtrueを返した時点でsome()はtrueを返し、すべての要素が条件を満たさなかった場合はfalseを返します。なお、空の配列に対して呼び出した場合は常にfalseを返すという仕様になっている点にも注意しましょう。some()メソッドのサンプルコード以下は、配列のsome()メソッドを使った具体的な実装例で
-
【JavaScript】関数から返された配列にアクセスする方法
JavaScriptでは、関数の戻り値として配列を返し、呼び出し元でその配列を受け取って自由に操作することができます。本記事では、関数から返された配列へアクセスする具体的な方法を、実際に動作するサンプルコードとともに解説します。 実装例：関数から配列を返してアクセスする 以下のサンプルでは、引数に渡された数値の1倍〜10倍の値を要素とする配列を生成して返すretTable()関数を定義しています。ボタンをクリックすると、この関数が返した配列を変数で受け取り、画面に表示します。 <!DOCTYPE html> <html lang=ja> <head> &l