[ Javascript ] 配列の初期化と要素の追加

Pocket

最近、なかなかヘルニアがよくならなくて困っています。最近では小学生や中学生の頃からプログラミングを学習している人がいるようですので、プログラミングについても本日より掲載していこうと思います。特に javascript には限定するつもりはありません。

スポンサーリンク

Javascript はグーグルマップの登場以降、一気に進化を遂げました有名なスクリプト言語です。ここでは配列の扱い方について述べていこうと思います。

配列の初期化

配列の初期化にも様々な方法はありますが、管理人が一般的だと思う初期化の方法を示していきます。

// 配列の要素数 0 ですっからかんにする場合 
var arrayempty = []; // 配列の初期化

// 要素を指定して静的な初期化
var array13 = ['1月', '2月', '3月'];

// array.length は配列の要素数を返します
for(var i=0; i < array13.length; i++) {
    // コンソールに出力
    console.log(array13[i]);
}

// new Array を使用した静的な初期化
var array46 = new Array('4月', '5月', '6月');
for(var i=0; i < array46.length; i++) {
    console.log(array46[i]);
}

配列は javascript に限らずどの言語でも多く使用しますし、使い方も大差はありません。

配列に要素を追加

配列の初期化を行いましたが、ここでは一旦初期化した配列に要素を追加していきます。javascript の場合、一旦初期化した後も要素を追加していくことができます。c言語などでは、配列を一旦初期化するとサイズが固定され変更することができませんが、javascript はできてしまいます。便利な機能です。

// 静的な初期化
var array = ['1月', '2月', '3月'];

// javascript は配列のインデックスが0から始まるため
// 初期化の時点では
// array[0] は '1月'
// array[1] は '2月'
// array[2] は '3月'

// 最後尾に要素を追加します
array[array.length] = '7月';  // array.lenght は 3
array[array.length] = '8月';  // array.lenght は 4
array[array.length] = '9月';  // array.lenght は 5

// array.lenght は 6
for(var i=0; i < array.length; i++) {
    console.log(array[i]);
}

要素の追加も簡単でしたね。ただし、要素の追加位置は最後尾になります。

連想配列の初期化

ここまでは配列の要素を指定する場合に 0 から始まるインデックスを指定する方法で配列を使用してきましたが、配列の要素を指定するのに数字(インデックス)では、わかりにくい場合もありますよね。そんなときにはインデックスの変わりに、人が識別しやすい文字列を指定することもできます。このような配列は連想配列、またはハッシュ配列と呼ばれています。

// 連想配列の初期化
var hash1 = { jan: '1月', feb: '2月', mar: '3月' };

// 連想配列の要素を動的に追加
var hash2 = {}; // 配列の初期化 
hash2.jan = '1月';
hash2.feb = '2月';
hash2.mar = '3月';

// 連想配列の要素を動的に追加
var hash3 = {}; // 配列の初期化
hash3['jan'] = '1月';
hash3['feb'] = '2月';
hash3['mar'] = '3月';

// 連想配列の要素のすべてのキーを繰り返し取得する
for (var key in hash1) {
  console.log(hash1[key]);
  
  // key  hash1[key]
  // ---------------------------
  // jan  1月
  // feb  2月
  // mar  3月

}

いかがでしょうか?インデックスの変わりに文字列(キー)を自由に指定することで非常にわかりやすくなったと感じられたと思います。今後もプログラミングについては、初心者の方向けに掲載していこうと思います。

スポンサーリンク


Pocket

Leave a Comment

Your email address will not be published. Required fields are marked *