JavaScript で配列 1

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


1 コレクション

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

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

書式

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

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

配列

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

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

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

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

配列

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


2 配列の操作(要素の変更)

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

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

配列

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


3 配列の操作(要素の追加)

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

配列

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


4 配列の操作(要素の削除)

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

配列

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


5 次回

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

カテゴリー

更新記事

タグ

break (1) class (3) collection (6) continue (1) CSS (2) DOM (2) for (1) function (3) HTML (8) if (2) JavaScript (28) object (5) pop (1) push (1) shift (1) switch (1) unshift (1) VBA (1) while (2) アンガーマネジメント (1) インソース (1) ココナラ (8) コーチング (1) チーズ (2) ネズミ (2) ノート (2) ブランディング (1) ブランド (1) プログリット (1) ポート (1) メモ (2) リスキリング (1) 変数 (3) 学習 (1) 小人 (2) 怒り (1) 株式 (6) 睡眠 (3) 給水器 (1) 記憶 (3) Aoba-BBT (8) IGS (8) Kラーニング (1)


[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]

確かな力が身につくJavaScript「超」入門 第2版 [ 狩野 祐東 ]
価格:2,728円(税込、送料無料) (2024/2/16時点)


[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]

1冊ですべて身につくJavaScript入門講座 [ Mana ]
価格:2,794円(税込、送料無料) (2024/2/23時点)



Categories: