ITコラム

Vintage mailbox

JavaScript

2017.10.12

JavaScript【 array 】1 ~ 配列という便利なデータ構造

配列は、プログラムを組む際に便利に使用できるデータ構造です。
配列構造を持つ変数を使うと、1つの変数で沢山のデータを保持することができます。
今回は、このような配列について紹介します。

目次

1.配列とは
2.Arrayオブジェクトとは

1.配列とは

あるグループの名簿管理をしようとして、メンバーの名前を変数に代入する場合、「var name1 = “有田”」のような形で変数を作ると、人数分の変数を用意する必要があります。

    var name1 = "有田"
    var name2 = "上田"
    var name3 = "徳井"
    var name4 = "名倉"
    var name5 = "原田"
    var name6 = "堀口"
    var name7 = "福田"
        ・
        ・
        ・

沢山の変数を管理する事自体も大変ですが、メンバーの数が増えた時など、さらに煩雑になってしまいます。

これを、配列を使った変数を用いて表すと、次のようになります。

    var name = new Array();

    name[0] = "有田";
    name[1] = "上田";
    name[2] = "徳井";
    name[3] = "名倉";
    name[4] = "原田";
    name[5] = "堀口";
    name[6] = "福田";
        ・
        ・
        ・

name という変数に、データが全て入っている状態です。

このように、配列を使うと、1つの変数に複数のデータを格納することができます。

配列は、Arrayオブジェクトを使用して次のように記述します。

var 変数名 = new Array();

変数名[0] = 値1;
変数名[1] = 値2;
変数名[2] = 値3;


また、配列は、Arrayオブジェクトを使用せずに、次のようにも記述できます。

var 変数名 = [];

変数名[0] = 値1;
変数名[1] = 値2;
変数名[2] = 値3;


次のような記述で、値を代入することもできます。
(下の例は宣言と同時に値を代入していますが、宣言後に値を代入する場合でも同じように記述できます。)

// Arrayオブジェクトを使用する場合
var 変数名 = new Array (値1, 値2, 値3);

// Arrayオブジェクトを使用しない場合
var 変数名 = [値1, 値2, 値3];

変数の宣言の仕方や値の代入方法に関係なく、変数を呼び出す際は次のように記述します。

alert(変数名[0]);

配列のインデックスは 0 から数えるので、1番目の値を呼び出す際は「変数名[0]」となります。

▲目次へ戻る

2.Arrayオブジェクトとは

Array は、配列用に用意されたクラスです。

Array オブジェクトを使った配列変数の宣言は、次のように行います。

(1) var 変数名 = new Array( );

(2) var 変数名 = new Array([サイズ]);

(3) var 変数名 = new Array( 値1, 値2, 値3 );

(1)は、Array オブジェクトの変数であることのみを宣言したシンプルな記述方法です。

(2)は、サイズを指定して宣言する方法です。
サイズは配列の数を表しますが、これ自体に拘束力はなく、「ver name = new Array([5])」と宣言した後に、6番目以降の値を格納することもできます。

(3)は、宣言と同時に値を代入する方法です。
それぞれの値をカンマ(,)区切りで記述すると、左の値から順に「[0]、[1]、[2]」とインデックスが付きます。
配列のインデックスは 0 から始まります。
 
 

Array オブジェクトには、次のようなプロパティがあります。

constructor 配列を作成する関数を指定する
length 配列のサイズ(配列変数の最大インデックスより 1 大きい数)を返す
prototype 配列のプロトタイプへの参照を返す

配列変数に格納された値の数を使用したい場合は、次のように記述します。

    var name = ("有田", "上田", "徳井");
    alert("配列変数nameの中には" + name.length + "人分のデータが入っています。");

配列変数nameに、値を3つ代入しているので、これを実行すると、「配列変数nameの中には3人分のデータが入っています。」とアラート表示されます。
 
 

Array オブジェクトには、次のようなメソッドが用意されています。

concat (Array) 2 つの配列を連結した新しい配列を返す
entries 配列のキーと値のペアを含む反復子を返す
every 配列のすべての要素に対して、定義されたコールバック関数が true を返すかどうかをチェックする
fill 指定された値を配列に設定する
filter 定義されたコールバック関数を配列の各要素に対して呼び出し、コールバック関数が true を返す値の配列を返す
findIndex コールバック関数で指定したテスト条件を満たしている最初の配列の値のインデックス値を返す
forEach 配列の各要素に対して、定義されたコールバック関数を呼び出す
hasOwnProperty 指定した名前のプロパティがオブジェクトにあるかどうかをtrue又はfalseで返す
indexOf (Array) ある値が配列内で最初に見つかった位置のインデックスを返す
isPrototypeOf オブジェクトが、別のオブジェクトのプロトタイプ チェーンに存在するかどうかをtrue又はfalseで返す
join 配列内のすべての要素を連結して 1 つの String オブジェクトとして返す
keys 配列のインデックス値を含む反復子を返す
lastIndexOf (Array) 指定した値が配列内で最後に見つかった位置のインデックスを返す
map 定義されたコールバック関数を配列の各要素に対して呼び出し、結果を含む配列を返す
pop 配列の最後の要素を削除し、削除した要素を返す
propertyIsEnumerable 指定したプロパティがオブジェクトの一部であるかどうか、および列挙可能かどうかをtrue又はfalseで返す
push 配列に新しい要素を追加し、その要素を追加した後の配列の長さを返す
reduce 定義されたコールバック関数を配列のすべての要素に対して呼び出し、単一の結果に累積する
コールバック関数の戻り値は累積された結果で、コールバック関数の次の呼び出しの引数として提供される
reduceRight 定義されたコールバック関数を配列のすべての要素に対して降順に呼び出し、単一の結果に累積する
コールバック関数の戻り値は累積された結果で、コールバック関数の次の呼び出しの引数として提供される
reverse 要素が反転した Array オブジェクトを返す
shift 配列の先頭の要素を削除し、削除した要素を返す
slice (Array) 配列の一部を返す
some 配列の任意の要素に対して、定義されたコールバック関数が true を返すかどうかをチェックする
sort 要素の順序を並べ替えた Array オブジェクトを返す
splice 配列から要素を削除し、必要に応じて新しい要素を削除位置に挿入し、削除した要素を返す
toLocaleString 現在のロケールを使用して文字列を返す
toString 配列の文字列表現を返す
unshift 配列の先頭に新しい要素を挿入する
valueOf 配列への参照を取得する
values 配列の値を含む反復子を返す

▲目次へ戻る

SHARE

最新記事

IMG_004

卒業生インタビュー

2019.08.20

【卒業生の声:渡邉さん】宮城の大学とプログラマカレッジへ通学を両立!限られた時間を有効活用し、希望するWEB系の会社へ内定。

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 某WEB系会社 プログラマカレッジ卒業生の渡邉さんにお話しをお伺いしました! 目次 新卒採用の切符を捨て、アイデアを形にできる仕事を目指す 質問が […]

続きを見る

DSC_3661

卒業生インタビュー

2019.08.16

【卒業生の声:前田さん】大学中退の未経験エンジニアが4社から内定獲得!初めての就活を成功させた秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 株式会社リヴァンプ プログラマカレッジ卒業生のマエダさん(23歳)にお話しをお伺いしました! 目次 勉強に興味が持てなくて大学中退 就職できるか不 […]

続きを見る

DSC_0077

卒業生インタビュー

2019.08.08

【卒業生の声:オチアイさん】高校教師からプログラマーへ転身!最初の2ヶ月は理解に苦しむ日々。楽しめるまでに至った秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 プライムソリューションズ株式会社 プログラマカレッジ卒業生のオチアイさんにお話しをお伺いしました! 目次 大学院卒業後は高校教師に そこから思い切 […]

続きを見る

無料相談する

INTERNOUS,inc. All rights reserved.