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 メソッドは「先頭の要素を削除する」というものです。
　よって、この配列の最初にある「マトリックス」という要素が削除されました。

５　次回

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

更新記事

『会社四季報 2024年 3集夏号』を読む１１（オリゴマー、エッジＡＩ、ＭＬＣＣ、ジルコニウム、アセチレンガス、ファインケミカル）2024-07-25
『会社四季報 2024年 3集夏号』を読む１０（フラッシュハンドル、自動配膳ロボット、Ｒ－ＳＵＤ、レコメンド機能、マーチャンダイジング、エレクトロニクスガス、コーシャ認証）2024-07-22
『会社四季報 2024年 3集夏号』を読む９（ペロブスカイト太陽電池、プロテイン、銀だこ、尿素ＳＣＲ、エクソソーム）2024-07-19
『会社四季報 2024年 3集夏号』を読む８（ドミナント、ＥＢＩＴＤＡ、ＳＡＦ、消防車、キャンプ用品、ＧＩＧＡスクール、ボウリング場）2024-07-16
『会社四季報 2024年 3集夏号』を読む７（ＭＤ、パーム椰子、ＧＭＳ、ＥＣ、デジタルサイネージ、ハラール認証、ヴィーガンコスメ）2024-07-13
『会社四季報 2024年 3集夏号』を読む６（ＢＩＭ、ＣＭＳ、つけまつげ、ＣＤＭＯ、ＢＮＰＬ、ＥＤＩ、ＣＲＭ）2024-07-10
『会社四季報 2024年 3集夏号』を読む５（アグリゲーション、ＥＭＳ、ＢＰＯ、のれん、カカオ豆、オーツミルク）2024-07-07
『会社四季報 2024年 3集夏号』を読む４（ＳＥＰ、社内起業、ＺＥＰ、ＶＰＰ、ＤＯＥ、バイオセンサー、ＰＢＸ）2024-07-04
『会社四季報 2024年 3集夏号』を読む３（海上油田、シェールオイル、カーボンクレジット、キャッシュフロー経営、軽量気泡コンクリート、医療観光、洋上風力発電）2024-07-01
テーマ株投資（５か月）2024-06-28
『会社四季報 2024年 3集夏号』を読む２2024-06-25
『会社四季報 2024年 3集夏号』を読む１2024-06-22
JavaScript でDOM ２2024-06-18
JavaScript でDOM １2024-06-14
JavaScript でオブジェクト５2024-06-10
JavaScript でオブジェクト４2024-06-06
JavaScript でオブジェクト３2024-06-02
JavaScript でオブジェクト２2024-05-29
JavaScript でオブジェクト１2024-05-25
JavaScript で関数３2024-05-21
JavaScript で関数２2024-05-17
JavaScript で関数１2024-05-13
JavaScript で配列６2024-05-10
JavaScript で配列５2024-05-07
JavaScript で配列４2024-05-04
テーマ株投資（３カ月目）2024-05-02
JavaScript で配列３2024-04-27
JavaScript で配列２2024-04-24
JavaScript で配列１2024-04-21
JavaScript で「繰り返し」２2024-04-18
『チーズはどこへ消えた？』を読む２2024-04-15
『チーズはどこへ消えた？』を読む１2024-04-11
JavaScript で「繰り返し」１2024-04-07
JavaScript で「もし」３2024-04-01
テーマ株投資（２カ月目）2024-03-29
JavaScript で「もし」２2024-03-28
「記憶」本５冊を読む３2024-03-24
「記憶」本５冊を読む２2024-03-20
「記憶」本５冊を読む１2024-03-17
テーマ株投資（１カ月半）2024-03-15
「睡眠」本６冊を読む３（夜間・朝の行動）2024-03-10
「睡眠」本６冊を読む２（昼間の行動）2024-03-03
テーマ株投資（１か月目）2024-03-01
JavaScript で「もし」１2024-02-29
JavaScript で変数３2024-02-27
「睡眠」本６冊を読む１（理論）2024-02-25
JavaScript で変数２2024-02-23
テーマ株投資（第３週目）2024-02-22
JavaScript でヘンな数2024-02-20
「メモ」本６冊を読む２（メモの方法）2024-02-18
テーマ株投資（第２週目）2024-02-16
JavaScript で足し算2024-02-14
「メモ」本６冊を読む１（メモの意義）2024-02-12
テーマ株投資（第１週目）2024-02-09
JavaScript で「こんにちは世界」2024-02-09
「コーチング」本６冊を読む2024-02-06
はじめてのテーマ株投資2024-02-01
JavaScript とは2024-01-30
「怒り」「アンガーマネジメント」本７冊を読む2024-01-27
JavaScript を始めてみる2024-01-22
初めての自動給水器2024-01-21
「ブランディング」本６冊を読む2024-01-20

手習い日記帳

１　コレクション

HTML

ブラウザ

HTML の一部

ブラウザ

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

HTML

ブラウザ

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

HTML の一部（続けて入力）

ブラウザ

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

HTML の一部（続けて入力）

ブラウザ

５　次回

カテゴリー

更新記事

タグ

JavaScript で配列 １

１ コレクション

HTML

ブラウザ

HTML の一部

ブラウザ

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

HTML

ブラウザ

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

HTML の一部（続けて入力）

ブラウザ

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

HTML の一部（続けて入力）

ブラウザ

５ 次回

カテゴリー

更新記事

タグ

JavaScript で配列１

１　コレクション

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

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

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

５　次回