はじめに
JavaScriptの配列は可変長です。C言語のように最初に要素数を設定する必要はありません。
MDNのページでも解説されている通り、JavaScriptの配列とはArrayオブジェクトです。C#などの言語で言うところのリスト構造です。
例えば要素数が取得できたり（C言語はできない）、配列の先頭や末尾に自由に要素を追加出来たり、などなど便利なメソッド（命令）が沢山用意されているよ、という事です。
MDNのサイトでJavaScriptの配列について簡潔な説明があります。1度ご覧になることをお勧めします。（MDNのサイトを見れば本サイトを見る必要がない気もする）
JavaScript配列の宣言と代入方法
配列の宣言
配列hogeを宣言して初期化しています。
別の記述として
という記述方法もあります。()内には要素数の指定もできます。
ただ、前述のlet hoge = [];の方が簡潔で分かりやすいと思います。
代入
数値型の場合
hoge[1] = 20;
hoge[2] = 30;
hoge[3] = 40;
hoge[4] = 50;
文字列の場合
hoge[1] = “こんにちは”;
hoge[2] = “你好”;
hoge[3] = “Hola”;
hoge[4] = “Bonjour”;
宣言と同時に代入（上記の代入と同じ状態）
数値
文字列
配列の中身を初期化する
配列の宣言に使ったa = [];という記述は代入済みの配列の初期化にも利用できます。
この場合、要素数は0に戻ります。
// 配列宣言
let colors = ["red", "green", "yellow", "black", "blue"];
// 配列を初期化する
colors = [];
JavaScript配列のプロパティとメソッドについて
JavaScriptで配列を宣言するとArrayクラスのプロパティとメソッドが利用できます。
特にメソッドは沢山あるので、ここでは少しだけ紹介するのにとどめます。
配列の要素数取得（lengthプロパティ）
console.log(hoge.length);
この場合、コンソールには「3」と表示される。
配列の先頭要素を取り除く（shiftメソッド）
hoge.shift();
結果はhoge = [5, 6]となる。（先頭の要素が取り除かれ、かつ要素数も減る）
プロパティ
配列名.プロパティ名
メソッド
配列名.メソッド名()
プロパティやメソッドは沢山あります。MDNのサイトで確認してみてください。
Array – MDN
JavaScriptの配列はかなり柔軟
例えばこんなこともできます。
a[1000] = 300;
上記の場合、
a[1] = 102;
a[1000] = 300;
となります。途中の要素a[2]~a[999]の中身は何もない状態で入れ物だけが作成されます。
a[2]~a[999]の内容は「undefined」としてJavaScriptでは定義されます。
JavaScript配列を使ったサンプルプログラム
数値配列と文字列配列を宣言してコンソールに表示する
js_hairetu1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>配列</title>
</head>
<body>
<h1>配列</h1>
<script>
// 数値配列を宣言
let a = [10, 20, 30, 40, 50];
// 4番目の要素を表示
console.log(a[3]);
// 配列aの要素数を表示
console.log("配列aの要素数: " + a.length);
// 配列aを全て表示
for(let i=0; i<a.length; i++){
console.log("a[" + i + "] = " + a[i]);
}
// 文字列の配列の場合
let b = ["red", "green", "yellow", "black", "blue"];
// 配列bを全て表示
for(let i=0; i<b.length; i++){
console.log("b[" + i + "] = " + b[i]);
}
</script>
</body>
</html>
実行結果
※コンソールに表示されます。（Chromeなら右クリック-検証でConsoleタブに表示）
配列aの要素数: 5
a[0] = 10
a[1] = 20
a[2] = 30
a[3] = 40
a[4] = 50
b[0] = red
b[1] = green
b[2] = yellow
b[3] = black
b[4] = blue
配列内の指定した文字列を検索してインデックス番号を表示する
js_hairetu2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>配列内の指定した文字列を検索してインデックス番号を表示する</title>
</head>
<body>
<h1>配列内の指定した文字列を検索してインデックス番号を表示する</h1>
<script>
// 配列宣言
let colors = ["red", "green", "yellow", "black", "blue"];
// 文字列「yellow」を検索して見つかったらインデックス番号（要素番号）を返す
let index = colors.indexOf("yellow");
// コンソールに表示
console.log("yellowは" + index + "番目です");
</script>
</body>
</html>
実行結果
※コンソールに表示されます。（Chromeなら右クリック-検証でConsoleタブに表示）
コメント