JavaScript で配列１

　今回は配列というものを理解します。これを使うと大量のデータをわかりやすく、効率的に管理できます。

１　コレクション

　コレクションには、配列、連想配列などの種類があります。

　変数と同じように使えますが、複数のデータも保持できる仕組みとなります。
　配列の中に入れた個々のデータを要素といい、その要素を管理するときには一連番号を使いますがその数字は 添え字 とよばれています。なお、添え字は例によって「０」から始まることに注意です。
　また、便宜上、配列に入れたデータの数を 配列の長さ といっています。

書式

let 変数名 = [値１, 値２, 値３,・・・];

　簡単ですね。 ( ) ではなく、[ ] を使います。

　まずは簡単な例から見ていきましょう。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<title>配列</title>
<meta charset="UTF-8">
</head>
<body>

<script>
    let matrix = ["リローデッド", "レボリューション"];
    document.write("<p>" + matrix[0] + "</p>");
    document.write("<p>" + matrix[1] + "</p>");
    document.write("<p>" + matrix + "</p>");
</script>

</body>
</html>

ブラウザ

配列

　まず、<script> 以下の１行目。
　どこかで見たカタカナですが、変数 matrix を宣言し、その要素として「リローデッド」「レボリューション」を代入しています。

　次にその要素を表示してみます。
　２行目で matrix[0] と記述されています。これは０は 添え字 であり最初の要素を取得するということです。
　最初の要素は「リローデッド」ですから、そのとおり表示されていますね。
　３行目は matrix[1] としていますので、次の「レボリューション」が表示されます。

　次の４行目は、配列 matrix をすべて確認するもので、「リローデッド,レボリューション」と表示されています。

　つぎに配列の長さも確認してみましょう。

HTML の一部

let matrix = ["リローデッド", "レボリューション"];
document.write("<p>" + matrix.length + "</p>");

ブラウザ

配列

　配列もオブジェクトですので、プロパティがあります。
　したがって、length プロパティにより、配列の長さを確認することができます。

２　配列の操作（要素の変更）

　配列の要素に対して、後からさまざまな変更を加えることができます。

　ＳＦ映画に詳しい方ならおわかりでしょうが、「レボリューション」ではなく「レボリューションズ」ですよね。
　訂正してみます。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<title>配列</title>
<meta charset="UTF-8">
</head>
<body>
<script>

    let matrix = ["リローデッド", "レボリューション"];
    document.write("<p>" + matrix + "</p>");

    matrix[1] = "レボリューションズ";
    document.write("<p>" + matrix + "</p>");

</script>
</body>
</html>

ブラウザ

配列

　「レボリューション」は２つ目の要素ですので、<script> 以下の３行目において配列に [1] をつけて新しい要素を入力しています。
　なお、２行目で変更前の要素の表示を、４行目で変更後の要素の表示を指示しています。

３　配列の操作（要素の追加）

　この映画には１作目と４作目があります。
　付け加えてみましょう。

HTML の一部（続けて入力）

matrix.unshift("マトリックス")
document.write("<p>" + matrix + "</p>");
matrix.push("レザレクションズ")
document.write("<p>" + matrix + "</p>");

ブラウザ

配列

　この例では、上記の HTML の <script> 内に続けて入力しているものとします。
　まず１行目の unshift メソッドは「先頭に要素を追加する」というものです。
　よって、この配列の最初に「マトリックス」という要素が追加されています。
　次に３行目の push メソッドは「末尾に要素を追加する」というものです。
　よって、この配列の最後に「レザレクションズ」という要素が追加されました。

４　配列の操作（要素の削除）

　追加ができるのであれば、削除もできるはずです。

HTML の一部（続けて入力）

matrix.pop();
document.write("<p>" + matrix + "</p>");
matrix.shift();
document.write("<p>" + matrix + "</p>");

ブラウザ

配列

　この例でも、上記の HTML の <script> 内に続けて入力しているものとします。
　まず１行目の pop メソッドは「末尾の要素を削除する」というものです。
　よって、この配列の最後にある「レザレクションズ」という要素が削除されています。
　次に３行目の shift メソッドは「先頭の要素を削除する」というものです。
　よって、この配列の最初にある「マトリックス」という要素が削除されました。

５　次回

　さて次回は、多次元配列というしくみを理解します。

手習い日記帳

１　コレクション

HTML

ブラウザ

HTML の一部

ブラウザ

２　配列の操作（要素の変更）

HTML

ブラウザ

３　配列の操作（要素の追加）

HTML の一部（続けて入力）

ブラウザ

４　配列の操作（要素の削除）

HTML の一部（続けて入力）

ブラウザ

５　次回

カテゴリー

更新記事

タグ

JavaScript で配列 １

１ コレクション

HTML

ブラウザ

HTML の一部

ブラウザ

２ 配列の操作（要素の変更）

HTML

ブラウザ

３ 配列の操作（要素の追加）

HTML の一部（続けて入力）

ブラウザ

４ 配列の操作（要素の削除）

HTML の一部（続けて入力）

ブラウザ

５ 次回

カテゴリー

更新記事

タグ

JavaScript で配列１

１　コレクション

２　配列の操作（要素の変更）

３　配列の操作（要素の追加）

４　配列の操作（要素の削除）

５　次回