まとめ（7）配列

配列とは

  • 配列とは、同じ用途で用いる複数の変数を１つにまとめたもの
配列は要素の集合体
  • 配列は変数の集まりによって構成されます
  • 個々の変数のことを「要素」と呼びます
  • 各要素を識別するために「インデックス」と呼ばれる番号（０から始まる整数値）が割り振られます
  • インデックスは「添字（そえじ）」とも呼ばれます


※変数の集まりである配列は、部屋の集まりであるアパートと似ている

配列の書き方

配列の宣言
  • 変数と同じように「var」を使います
  • ブラケット[ ]内には、要素に代入する値をカンマ区切りで指定します



var 配列名 = [ 値1, 値2, 値3, … ];

配列の初期化
var number = [ 10, 20, 30 ];


配列に数値を代入

var year = [ 11, 13, 17 ];


配列に文字列を代入

var fruits = [ 'りんご', 'みかん', 'もも' ];


配列に理論値を代入

var fruits = [ true, false, true ];


配列の要素を指定してデータを代入



　配列が入った変数名 = [ インデックス ] ;

要素の参照
  • インデックスは「0」から始まる
  • １つの変数の中には、配列は１つしか入れられません
  • 配列が入っていれば、変数=配列ということになります



配列名 [ インデックス ];

<script>
  var number = [ 10, 20, 30 ];
  console.log(number[1]);
</script>


※「０番目」が「10」

要素への代入
  • 各要素に対して、個別に値を代入できます



配列名 [ インデックス ] = 値 ;

<script>
  var number = [ 10, 20, 30 ];
  number[1] = 50;
  console.log(number[1]);
</script>


※「１番目」の要素の値を上書きしています

要素の追加
  • 配列内に存在しないインデックスを指定することで、要素を追加することもできます
  • 要素を追加するとき、インデックスは連続した番号でなくてもかまいません
<script>
  var number = [ 10, 20, 30 ];
  number[3] = 99;
</script>

<script>
  var number = [ 10, 20, 30 ];
  number[9] = 99;
</script>
空配列の作成
  • 配列の要素に指定する値が最初から決まっていない場合は、まず空の配列を作っておいて後から要素を追加します
<script>
  var number = [];
  number[0] = 10;
  number[1] = 20;
  number[2] = 30;
</script>
要素数の取得
  • 配列名の後ろに「.length」をつけると、配列が保持する要素の数を表します



配列名.length

<script>
  var number = [ 10, 20, 30 ];
  console.log(number.length);
</script>


  • 厳密には「最大インデックス + 1」を表すので、インデックスに欠番がある場合は、要素数ではなくなります

二次元配列

  • 配列の集合体を「二次元配列」と呼びます
<script>
  var number = [ [ 10 , 20 , 30 ] , [ 40 , 50 , 60 ] ];
  console.log(number[0][0]);
  console.log(number[0][1]);
  console.log(number[0][2]);
  console.log(number[1][0]);
  console.log(number[1][1]);
  console.log(number[1][2]);
</script>


先頭の要素を削除する

  • shift()メソッド
先頭の要素を削除する


　変数名 . shift()

shift()メソッドを使ったサンプル
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>shift()メソッドを使って要素を削除</title>
</head>
<body>
<h1>shift()メソッドを使って要素を削除</h1>
<script>
  //shiftメソッド
  var h = [10, 20, 30];
  h.shift();
  window.alert(h[0] + ',' + h[1] + ',' + h[2]);
</script>
</body>
</html>
  • h[0] つまり10 が削除され、20 が h[0] 、30 が h[1] になり h[2] が見つからない（未定義）と表示されます

先頭に要素を追加する

  • unshift()メソッド
先頭に要素を追加する


　変数名 . unshift( 代入するデータ )

unshift()メソッドを使ったサンプル
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>unshift()メソッドを使って要素を追加</title>
</head>
<body>
<h1>unshift()メソッドを使って要素を追加</h1>
<script>
  //unshiftメソッド
  var h = [20, 30];
  h.unshift(10);
  window.alert(h[0] + ',' + h[1] + ',' + h[2]);
</script>
</body>
</html>

末尾の要素を削除する

  • pop()メソッド
末尾の要素を削除する


　変数名 . pop()

pop()メソッドを使ったサンプル
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>pop()メソッドを使って末尾の要素を削除</title>
</head>
<body>
<h1>pop()メソッドを使って末尾の要素を削除</h1>
<script>
  //popメソッド
  var h = [10, 20, 30];
  h.pop();
  window.alert(h[0] + ',' + h[1] + ',' + h[2]);
</script>
</body>
</html>

末尾に要素を追加する

  • push()メソッド
末尾に要素を追加する


　変数名 . push( 代入するデータ )

push()メソッドを使ったサンプル
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>push()メソッドを使って末尾に要素を追加</title>
</head>
<body>
<h1>push()メソッドを使って末尾に要素を追加</h1>
<script>
  //pushメソッド
  var h = [10, 20];
  h.push(30);
  window.alert(h[0] + ',' + h[1] + ',' + h[2]);
</script>
</body>
</html>

要素を削除する

  • splice()メソッド
要素を削除する


　変数名 . splice( インデックス, 削除する要素の数 )

splice()メソッドを使ったサンプル
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>プログラム実行テスト</title>
</head>
<body>
<h1>プログラム実行テスト</h1>
<script>
  //spliceメソッド
  var h = [10, 20, 30];
  h.splice(1, 2);
  window.alert(h[0] + ',' + h[1] + ',' + h[2]);
</script>
</body>
</html>

  • 似たようなデータを大量に扱う場合は配列に入れる
  • 配列の初期値は、ブラケット[ ]で囲む
  • 配列の要素にはインデックス（添字）と呼ばれる識別番号が付けられる