本記事ではJavaScriptの配列について解説します。
配列を使えると複数データを同時に扱うことが出来て便利です。
配列の作り方や配列からデータを取り出す方法、などをみていきましょう。
JavaScriptの配列とは？
配列とは、共通点のある複数のデータを格納したものです。
複数データを配列に格納することで、ソースコードが見やすくなります。
たとえば、1から10までのデータを変数に格納すると
var number1=1;
var number2=2;
var number3=3;
var number4=4;
…
…みたいな感じになりますよね。
しかしこれでは、コードの行数が多くなってしまいます。
また、変数もたくさん使うことになり、後で何の変数を定義したか、分からなくなりがちです。
配列を使えば、以下のように一行で書けます。
var numbers = new Array(1,2,3,4,5,6,7,8,9,10);配列に格納すれば、このようにすっきりしますね。
また、配列に格納することで、格納したデータを一変に操作することが可能です。
たとえば、数値をまとめて2倍したり、まとめて削除したり、といったことができます。
配列を使うと、このようなメリットがあるのです。
JavaScriptの配列の使い方
それではJavaScriptの配列の使い方をみていきましょう。
ここでは以下の項目に分けて解説します。
- 配列を作る
- 配列にデータを追加する
- 配列からデータを削除する
- 配列のデータを検索する
これらを覚えれば、ひとまず配列の基礎は理解できます。
配列を作る
まずは配列を作る方法から解説します。
○コード例
<!DOCTYPE html>
<html>
<head>
<title>テスト画面</title>
</head>
<body>
<script>
var list = new Array("太郎", "花子", "二郎");
document.write(list[0]);
</script>
</body>
</html>○実行結果
配列を作る場合、
new Array({データ一覧})
というように記述します。
上記では「太郎」「花子」「二郎」という3つのデータを、list配列に格納しています。
このように記述すれば、配列は作成可能です。
配列のデータを取り出す場合は、「配列名[{データの位置}]」というように記述します。
上記では「list[0]」により、0番目の「太郎」を取り出していますね。
注意点ですが、プログラムでは1からではなく0から数えるのが基本です。
そのため0番目が、配列の一番最初になります。
また、配列のデータを全て取り出す場合は、for文を活用します。
○コード例
<script>
var list = new Array("太郎", "花子", "二郎");
for(var i=0; i<3; i++){
document.write(list[i] + " ");
}
</script>○実行結果
for文を使ってデータ位置を順に指定することで、配列の全てのデータを取り出しています。
配列にデータを追加する
つづいて、元からある配列にデータを追加する方法をみていきましょう。
○コード例
<!DOCTYPE html>
<html>
<head>
<title>テスト画面</title>
</head>
<body>
<script>
var list = new Array("太郎", "花子", "二郎");
list[3] = "綾子";
for(var i=0; i<4; i++){
document.write(list[i] + " ");
}
</script>
</body>
</html>○実行結果
データを追加する場合は、「list[3] = “綾子”;」というように記述します。
これは配列の3番目に「綾子」が格納されました。
このように、配列のデータ位置を指定すれば、その位置にデータを入れられます。
配列からデータを削除する
逆に、配列からデータを削除する方法をみていきましょう。
○コード例
<!DOCTYPE html>
<html>
<head>
<title>テスト画面</title>
</head>
<body>
<script>
var list = new Array("太郎", "花子", "二郎");
delete list[1];
for(var i=0; i<3; i++){
document.write(list[i] + " ");
}
</script>
</body>
</html>○実行結果
データを削除する場合、「delete文」を使います。
delete 削除したいデータ;
このように記述することで、そのデータが削除されます。
上記の例ではlist配列の1番目のデータの「花子」を削除しています。
配列のデータを検索する
最後に配列のデータを検索する方法を解説します。
○コード例
<!DOCTYPE html>
<html>
<head>
<title>テスト画面</title>
</head>
<body>
<script>
var list = new Array("太郎", "花子", "二郎");
document.write(list.indexOf("花子"));
</script>
</body>
</html>○実行結果
データを検索する際は、「indexOf」というものを使います。
配列名.indexOf({検索したいデータ})
と、記述することで、データの検索が可能です。
もしそのデータがある場合、データの位置を返します。
上記では、「花子」を配列から検索しています。
「花子」は1番目にあるため「1」が表示されていますね。
まとめ
本記事では、JavaScriptの配列について解説しました。
配列の作り方や削除方法、検索方法などがお分かり頂けたかと思います。
配列を使えるようになると、複数データを同時に扱えて便利なので、ぜひやり方を覚えてくださいね。
次回はJavaScriptのオブジェクトをみていきましょう。
