JavaScriptで配列の要素の値や数を指定してダミーの配列などを作りたいときがあります。
そんな時はArrayとfillを使うと簡単に作成することができます。
ここでは要素の数を指定し同じ要素を繰り返して配列を作る方法と、具体的なArrayとfillの使い方を実例で解説しています。
要素の数を指定して配列を作る方法（同じ値を繰り返す）
要素の数を指定して、同じ要素を繰り返して配列を作るには以下のコードを実行するだけです。
Array(要素数).fill(要素の値)実例１
例えば、「AAA」という10個の要素を持つ配列を作りたいとします。
["AAA", "AAA", "AAA", "AAA", "AAA", "AAA", "AAA", "AAA", "AAA", "AAA"]手入力したり、コピペで作れないこともありませんが、スマートとはいえません。
そんなときはArrayとfillを使って、これで解決です。
Array(10).fill("AAA");
結果を変数に格納して、concole.logで出力すると欲しい結果が得られていることがわかります。
let arr = Array(10).fill("AAA");
console.log(arr);実例２
少し応用編として、変数を使い同じ要素を繰り返す配列を作成することもできます。
let len = 10;
let elem = "AAA";
let arr = Array(len).fill(elem);
console.log(arr);
↓ 実行結果
["AAA", "AAA", "AAA", "AAA", "AAA", "AAA", "AAA", "AAA", "AAA", "AAA"]
以下でArrayとfillの解説をしていきます。
Array コンストラクターの使い方
Arrayとは何か？
一番最初に使用しているArrayはコンストラクターと呼ばれるもので、配列を作成します。
一般的に配列を作成するときは[ ]を使います。これを「配列を作成する！」と宣言してより明示的にしたのがArrayコンストラクターです。
整数を指定して、指定した要素を持つ配列を作ることもできます。配列の値は「undefined」になります。
Array(整数)他にも、配列の中に入る値を直接指定することもできます。
Array(要素を指定)指定した数の要素を持つ配列の作成｜値はundefined
Array(整数)引数に整数を指定すると指定した数の要素を持つ配列を生成します。
実例
let arr = Array(4)
console.log(arr);
console.log(arr.length);
↓ 実行結果
[undefined, undefined, undefined, undefined]
4配列の中に入る値を直接指定する
配列の中に入る値を直接指定することもできます。[要素1, 要素2,,,]とするのと同じです。
Array(要素を指定)実例
let arr = Array("AAA", "BBB", "CCC", 123, 456, 789)
console.log(arr);
console.log(arr.length);
↓ 実行結果
["AAA", "BBB", "CCC", 123, 456, 789]
6newありでもなしでも使える
Arrayを使って配列を作成するときは、Arrayの前に新たに生成することを明示する「new」をつけても生成することができます。
new Array()↑↓ 同じ
Array()fillメソッドの使い方
基本構文
fillは指定した値で配列を埋めてくれる便利なメソッドです。実は引数を３つとることができます。
fill(値, 開始位置, 終了位置)fill(値)｜すべての要素を埋める
fillの引数で開始位置と終了位置は省略することができます。どちらも省略した場合はすべての要素を指定した値で置き換えます。
fill(値)実例
let arr = Array(5).fill("ABC");
console.log(arr);
↓ 実行結果
["ABC", "ABC", "ABC", "ABC", "ABC"]fill(値, 開始位置)｜開始位置以降の全ての値を埋める
fillの引数で開始位置を指定すると、指定したインデックス番号以降の要素を指定した値で置き換えます。
fill(値, 開始位置)実例
let arr = Array(5).fill("ABC", 2);
console.log(arr);
↓ 実行結果
[undefined, undefined, "ABC", "ABC", "ABC"](値, 開始位置, 終了位置)｜開始位置から終了位置までの値を埋める
fillの引数で開始位置と終了位置を指定すると、指定したインデックス番号の要素を指定した値で置き換えます。
fill(値, 開始位置, 終了位置)実例
let arr = Array(5).fill("ABC", 2, 4);
console.log(arr);
↓ 実行結果
[undefined, undefined, "ABC", "ABC", undefined]
なお、配列の値を置き換えることはspliceメソッドでも可能です。
