【JavaScript入門】配列の生成と操作

JavaScriptは値の集合を操作するための方法があります。ここではその一つであるArrayオブジェクトについて扱います。

Arrayオブジェクトとは配列です。配列型の値はごく一般的なもので、どのプログラム言語にも基本的に見られるものですね。

さっそく配列の操作について見ていきましょう。

配列を生成する
1. リテラル表現を使って配列を生成
2. コンストラクター経由で配列を生成
配列のインデックスと値の操作
まとめ

配列を生成する

JavaScriptで配列を生成するには、リテラル表現を使って生成する方法とコンストラクター経由で生成する方法があります。

リテラル表現を使って配列を生成

まず、リテラル表現を使っての配列は次のようなコードの書き方になります。

var langName = ['JavaScript', 'Python', 'Swift', 'HTML'];

console.log(langName);

var langName = ['JavaScript', 'Python', 'Swift', 'HTML'];

console.log(langName);

変数名を宣言して、配列を代入しています。配列は値をカンマで区切って配置し角括弧[]で囲んで生成します。

console.log()でJavaScriptコンソールに表示してみます。

角括弧で値が囲まれて表示されているのがわかります。

コンストラクター経由で配列を生成

次のコンストラクター経由で配列を生成してみます。以下のようにnew Array()を使って生成します。

// var langName = ['JavaScript', 'Python', 'Swift', 'HTML'];
var langName = new Array('JavaScript', 'Python', 'Swift', 'HTML');

console.log(langName);

// var langName = ['JavaScript', 'Python', 'Swift', 'HTML'];

var langName = new Array('JavaScript', 'Python', 'Swift', 'HTML');

console.log(langName);

コメントアウトでリテラル表現と比較してみました。new Array()の中に値を同じように入れているだけですので特に難しくないですね。cosole.log()で表示しても上のリテラル表現の場合と同じになります。

ただし、このコンストラクター表現は配列を次のように生成した時に、ちょっと気をつけないといけないところがあります。

var exArray1 = new Array(10, 20, 30, 40);
var exArray2 = new Array();
var exArray3 = new Array(10);
// var exArray4 = new Array(-10);

console.log(exArray1);
console.log(exArray2);
console.log(exArray3);
// console.log(exArray4);　　// エラー

var exArray1 = new Array(10, 20, 30, 40);

var exArray2 = new Array();

var exArray3 = new Array(10);

// var exArray4 = new Array(-10);

console.log(exArray1);

console.log(exArray2);

console.log(exArray3);

// console.log(exArray4);　　// エラー

最初のものは複数の値を入れています。これは上と同じです。2つ目は空の配列を生成。3つ目は数字を入れています。

console.log()で実行して見ると、次のように表示されます。

最初のものはこれまでと同じです。二つ目は空の配列が生成されています。問題は3つ目です。これは10の値が1つ入った配列ではなく、長さが10の配列（空の要素を10個持つ配列）ということでJavaScriptはサイズを指定していると判断します。配列のデータの長さということなので、コメントアウトしている「-10」を入れた配列生成の場合はエラーになります。

このため生成した意図が曖昧になってしまうので、出来るだけリテラル表現を使って配列を生成するようにします。

空の配列も次のように記述します。

var zeroArray = [];

1	var zeroArray = [];

こういった違いには注意しておきまよう。

配列のインデックスと値の操作

配列は、インデックスと値が対応して管理されています。値は重複しても構いません。

上で扱った配列を再掲します。

var langName = ['JavaScript', 'Python', 'Swift', 'HTML'];

1	var langName = ['JavaScript', 'Python', 'Swift', 'HTML'];

この配列のインデックスと値の関係は次のようになります。

インデックスは「0」から始まり順にそれぞれの値が対応します。

次のように、配列に角括弧を使ってインデックスを指定すれば、その値を取り出すことができます。またメンバーのlengthをドット（.）で接続して使えば配列のサイズを取り出すことができます。

var langName = ['JavaScript', 'Python', 'Swift', 'HTML'];

console.log(langName[1]);
console.log(langName.length);

var langName = ['JavaScript', 'Python', 'Swift', 'HTML'];

console.log(langName[1]);

console.log(langName.length);

JavaScriptコンソールで実行するとこうなります。

インデックスを指定したので、2つ目の「Python」が取り出されているのがわかります。また、配列のサイズが４となっているがわかります。

今度は、インデックスを指定して値を変更してみましょう。

var langName = ['JavaScript', 'Python', 'Swift', 'HTML'];

langName[2] = 'Ruby';
langName[langName.length] = 'PHP';
console.log(langName);

var langName = ['JavaScript', 'Python', 'Swift', 'HTML'];

langName[2] = 'Ruby';

langName[langName.length] = 'PHP';

console.log(langName);

1つ目は、インデックスに2を指定して値に「Ruby」を代入しています。2つ目はインデックスの指定にlengthを使って配列のサイズを使っています。これは配列の一番最後の位置の次の場所を指定しているのと同じです。そこに「PHP」と代入しています。

それぞれの位置の値が変わっているのがわかります。

JavaScriptの配列は、ここまでは文字列型ばかりか数値型ばかりの値で生成してきましたが、真偽値も含めて異なるデータ型を値にして次のような配列を生成することもできます。

var hagaren = ['エドワード', 'エルリック', 16, 'リゼンブール', false];

1	var hagaren = ['エドワード', 'エルリック', 16, 'リゼンブール', false];

文字列、数値、真偽値のを値に持つ配列であることがわかります。

この配列を他のメンバーを使って操作していきます。一気にコードを書いて行きましょう。

var hagaren = ['エドワード', 'エルリック', 16, 'リゼンブール', false];

hagaren.push('アルフォンス');
hagaren.unshift('国家錬金術師.');
console.log(hagaren);

hagaren.pop();
hagaren.pop();
hagaren.shift();
console.log(hagaren);

console.log(hagaren.indexOf('リゼンブール'));
console.log(hagaren.indexOf(14));

var isAlchemist = hagaren.indexOf('ホムンクルス') === -1 ? '彼は錬金術師だ！' : '彼はホムンクルスだ！';
console.log(isAlchemist);