知っておきたい！JavaScriptの配列Arrayの基本的な使い方

JavaScriptの配列Arrayとは？

それでは、ここからはまずJavaScriptの「配列」について説明していきます。

Arrayの使い方

配列Arrayを使うには「Arrayもしくは［］」を使用します。

ちなみに、JavaScriptは自由度の高いプログラミング言語です。なので、配列ひとつにしても様々な書き方があります。

これがJavaScriptの魅力でもあるのですが、初心者には難しく感じるのもまた事実です。

ひとまずは実際のコードを見るのが一番です。なので、以下では配列のコーディングを見ていきます。

配列を作成してみる

ここからは、実際に配列を作っていきます。

これからコードを具体的に記入しながら説明をしていきますが、どれも「hoge という配列を Array もしくは［］で宣言して、0には foo という値を入れ、1には bar という値を入れ、2には piyo という値を入れる」ということをしています。

まずは配列を宣言

配列の宣言の仕方にはさまざまありますが、ここでは大まかに「［ ］と new Array の2つがある」ということを覚えておくとよいでしょう。

ただし、new Array に関しては記述が長くなることや、挙動がややこしいなどのデメリットがあるため、基本的には［ ］（配列リテラル）で書いていくことをオススメします。

配列の宣言については、以下のコードのうちどちらかで行いますね。

var hoge = [ ]; 

// または 

var hoge = new Array( );

// で配列を宣言する

配列に値を追加していく

配列を宣言したところで、次は値を追加していきましょう。

具体的には以下のようなコードになります。

// 宣言はどちらか（前者が望ましい）
var hoge = [ ]; または var hoge = new Array( );

//配列に値を追加する
hoge [ 0 ] = ‘ foo ‘;
hoge [ 1 ] = ‘ bar ‘;
hoge [ 2 ] = ‘ piyo ‘;

配列に限らず、ループなどについても言えることですが、数字は「0から」はじまるのが特徴です。普段の数字は1から数えることもあり、やや違和感を覚えるかもしれません。

ぼくは「10代は10から、20代は20からなのだから、0代は0から」という風に理解しています。

コードをより簡潔に書くには

ここまでは、宣言と値を別々に記入していましたが、まとめて書くことでコードをより簡潔にすることができます。

実際のコードは以下の通り。

// [ ]でまとめて宣言するとこうなる
var hoge = [ ‘foo’ , ‘bar’ , ‘piyo’ ];

// new Arrayでまとめて宣言するとこうなる
var hoge = new Array ( ‘foo’ , ‘bar’ , ‘piyo’ );

実際に値を呼び出してみる

ここまでの項で書いてきた配列から、値を呼び出すときは以下のようにコードを書きます。

hoge [ 0 ]
// foo と表示されます

hoge [ 1 ]
// bar と表示されます

hoge [ 2 ]
// piyo と表示されます

ここまでいろいろなコードを書いていますが、要するに「hoge という配列を Array もしくは［］で宣言して、0には foo という値を入れ、1には bar という値を入れ、2には piyo という値を入れる」ということをしています。

要素を追加する

先頭に追加 - unshift

配列の先頭に値を追加します。

var hoge = [‘bar', ‘piyo'];

hoge.unshift(‘foo');
console.log(hoge); // [‘foo', ‘bar', ‘piyo']

末尾に追加 - push

配列の末尾に値を追加します。

var hoge = [‘foo', ‘bar'];

hoge.push(‘piyo');
console.log(hoge); // [‘foo', ‘bar', ‘piyo']

指定した位置に一つ以上追加 - splice

配列の指定した位置に一つ以上の値を追加します。

var hoge = [‘foo', ‘bar’, ‘piyo'];

hoge.splice(1, 0, ‘FOO'); // 二番目に挿入
console.log(hoge); // [‘foo’ , ’FOO’ , ‘bar’, ‘piyo'];

var hoge = [‘foo', ‘bar’, ‘piyo'];

hoge.splice(2, 0, ‘FOO’ , ‘BAR’ ); // 三番目に複数挿入
console.log(hoge); // [‘foo’ , ‘bar’, ‘FOO’ , ‘BAR’ , ‘piyo'];

配列を結合する

非破壊的な結合 - concat

結合して新しい配列を生成します。もともとの二つの配列には影響を及ぼしません。

var hoge1 = [‘foo', ‘bar'];
var hoge2 = [‘piyo', ‘mogera'];

var hoge = hoge1.concat(hoge2);

console.log(array);  // [‘foo', ‘bar’, ‘piyo’ , ‘mogera']
console.log(hoge1); // [‘foo', ‘bar'];
console.log(hoge2); // [‘piyo', ‘mogera’];

破壊的な結合 - push

一つ目の配列に二つ目の配列を結合します。新しい配列は生成せず、一つ目の配列に影響を及ぼします。

var hoge1 = [‘foo', ‘bar'];
var hoge2 = [‘piyo', ‘mogera'];

Array.prototype.push.apply(hoge1, hoge2);

console.log(hoge1); // [‘foo', ‘bar’, ‘piyo', ‘mogera’];
console.log(hoge2); // [‘piyo', ‘mogera’];

要素を取得する

先頭を取得する

配列の先頭の値を取得します。

var hoge = [‘foo', ‘bar’, ‘piyo’ ];

var value = hoge[0];

console.log(hoge); // [‘foo', ‘bar’, ‘piyo’ ]
console.log(value); // ‘foo'

末尾を取得する

配列の末尾の値を取得します。

var hoge = [‘foo', ‘bar’, ‘piyo’ ];

var value = hoge[hoge.length - 1];

console.log(hoge); // [‘foo', ‘bar’, ‘piyo’ ]
console.log(value); // ‘piyo’

配列の数を取得 - length

配列の数である、要素数を取得します。

var hoge = [‘foo', ‘bar’, ‘piyo’ ];

var l = hoge.length;

console.log(l); // 3

要素を削除する

先頭を削除する

配列の先頭を削除して詰めます。

var hoge = [‘foo', ‘bar’, ‘piyo’ ];

hoge.shift();
console.log(hoge); // [‘bar’, ‘piyo’]

末尾を削除する - pop

配列の末尾を削除します。

var hoge = [‘foo', ‘bar’, ‘piyo’ ];

hoge.pop();
console.log(hoge); // [‘bar’, ‘piyo’]

指定した位置から一つ以上の値を削除 - splice

配列の指定した位置から一つ以上の値を削除します。

var hoge = [‘foo', ‘bar’, ‘piyo’ ];

hoge.splice(1, 1); // 二番目から一つ削除
console.log(hoge); // [‘foo', ‘piyo']

var hoge = [‘foo', ‘bar’, ‘piyo’ ];

array.splice(1, 2); // 二番目から二つ削除
console.log(hoge); // [‘foo’]

配列の全要素を削除(全削除) - length, []

配列の長さを意図的に0にして、配列の全要素の削除をします。

var hoge = [‘foo', ‘bar’, ‘piyo’ ];

hoge.length = 0;
console.log(hoge); // []

空配列を再代入して、初期化することにより配列の全要素の削除をします。

var hoge = [‘foo', ‘bar’, ‘piyo’ ];

hoge = [];
console.log(hoge); // []

まとめ

配列Arrayについて説明しました。

情報量が多く、難しいように感じたかたもいらっしゃるかもしれません。が、最初はだれでも難しいものです。

コードを見て理解するのもよいですが、実際にコードを書いて理解することをおすすめします。結局、自分でコーディングしてみることが上達への近道です。