【JavaScript入門】配列の生成と操作 – Arrayオブジェクト

JavaScript
スポンサーリンク

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

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

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

スポンサーリンク

配列を生成する

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

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

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

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);

コメントアウトでリテラル表現と比較してみました。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);  // エラー

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

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

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

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

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

var zeroArray = [];

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

スポンサーリンク

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

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

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

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

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

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

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

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

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

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

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

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

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];

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

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

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);

JavaScriptコンソールの実行結果をみながら解説して行きます。

まずpush()は配列の一番最後に指定の要素を追加します。unshift()は逆に配列の先頭に指定の要素を追加します。コンソールの1行目と比較すればわかると思います。

pop()は、配列の末尾の要素を取得して削除します。shift()は配列の先頭の値を取得して削除します。pop()を2回処理して、shift()を1回処理したものがコンソールの2行目に表示されています。

indexOf()は指定した要素に合致した最初の要素のキーを取得します。「リゼンブール」のインデックスは3となっているのがわかります。また、要素が合致しない場合は「-1」が返されます。

最後はこのindexOf()と三項演算子を使って要素の判定をしています。

三項演算子についてはこちらで扱いました。

【JavaScript入門】三項演算子とswitch文
JavaScriptの入門として、三項演算子とswitch文について扱います。三項演算子はif-else文でブロックで分けて書いていたコードを1行で書くことができます。switch文は多岐にわたる条件分岐をスッキリ書くことができます。

ここで扱ったlengthやpop()、indexOf()などのメンバーについてはMDNのサイトにまとめられています。

Array - JavaScript | MDN
Array オブジェクトは、他のプログラミング言語の配列と同様に、複数の項目の集合を単一の変数名の下に格納することができ、共通の配列操作を行うためのメンバーを持っています。

この場で全てに触れることはできませんので、確認しておきましょう。

スポンサーリンク

まとめ

JavaScriptは値の集合を操作するための方法として、Arrayオブジェクトについて扱いました。

Arrayオブジェクトとは配列のことで、複数の要素を角括弧で括ったものになります。配列の要素には異なるデータ型を入れることもできます。

new Array()を使ったコンストラクター経由の配列生成もできますが、要素の意図があいまいになることがあるので、リテラル表現を使って配列を生成すべきだとされています。

配列の要素は0からのインデックスに対応しています。インデックスを指定して要素を取り出したり、メンバーをドット接続して要素の追加や削除など色々な操作をすることができます。

JavaScript
スポンサーリンク
CodeGraffitiをフォローする

コードグラフィティ ~ とにかく進もうプログラミング入門~
タイトルとURLをコピーしました