JavaScript入門 配列の使い方(追加/取得/検索/結合/分割/削除)

スポンサーリンク

JavaScript

今回の記事では、JavaScript配列の使い方について扱います。
配列の作成方法をはじめ、配列要素の追加・取得・検索・結合・分割・削除といった基本操作を学びます。

配列は、プログラミングをする上で使う場面が結構多いです。
複数のデータをまとめて扱うことができで非常に便利ですので…。
ぜひこの機会に使い方を覚えましょう!

スポンサーリンク

配列とは?

配列というのは、複数のデータをまとめて扱うことができるものです。

変数では、通常(オブジェクト型以外)は1つのデータしか扱えませんよね。
もしデータを10個、100個、…と扱いたくなった場合、変数をいちいち作るのは非常に大変です。

そこで、配列の出番です!
配列を使うことで、複数のデータをまるで1つのデータのように扱えるようにしてくれるのです。

配列の作成方法

配列を作成するには、まず宣言をする必要があります。
宣言の方法には、大きく2種類のやり方があります。
1つは配列リテラル([])を使う方法、もう1つはArrayを使う方法です。

以下のサンプルプログラムを見てください。
ちなみに、console.log()は、コンソールに引数の値を表示するメソッドです。

// 配列リテラル
var array1 = ["One", "Two", "Three"];

// Array
var array2 = new Array("One", "Two", "Three");

console.log(array1);
console.log(array2);

この例では、array1を配列リテラル、array2をArrayで作成しています。
この場合、結果は同じで以下のような配列が作成されます。

["One", "Two", "Three"]
["One", "Two", "Three"]

基本的には、どちらの方法でも配列は作れるのですが…。
数値を1つだけ指定した場合、挙動が異なります。

// 配列リテラル
var array1 = [3];

// Array
var array2 = new Array(3);

console.log(array1);
console.log(array2);

このようなプログラムを作成したとすると…。
一見、要素が3のみの配列がどちらもできそうで、実はできないのです。
実際には以下のようになります。

[3]
[ , , ]

配列リテラルでは、意図したような要素が3のみの配列が作成されますが…。
Arrayで作成した場合、要素数が3でそれぞれ空要素の配列が作成されます。
これは、非常に間違いやすいですので注意してください。

基本的には、配列を作成するときには、配列リテラルの方法を使うのが無難です。

配列の初期化

配列を初期化する場合には…。
配列の宣言時に値を指定しなければ良いです。

具体的には、以下のようにします。

// 配列リテラル
var array1 = [];

// Array
var array2 = new Array();

console.log(array1);
console.log(array2);

非常に簡単ですね。

[]
[]

配列要素の取得

まずは、配列要素の取得です。
配列要素を取得するには、取得したい配列要素の位置(インデックス)を指定してやります。
インデックスは、0から始まりますので注意してください。

var array = [1, 2, 3, 4, 5];
console.log(array[0]);
console.log(array[2]);
console.log(array[4]);
console.log(array[5]);
1
3
5
undefined

ちなみに、配列の範囲外の要素を参照しようとすると、undefinedが返ってきます。
例えば、上記の例で言えば、6番目の要素(インデックスが5)を参照しようとした場合などです。
undefinedというのは、未定義であることを表しています。

要素の追加(push)

要素の追加は、pushメソッドを使います。
pushメソッドを使うと、配列の末尾に新しい要素を追加します。

var array = [1, 2, 3, 4, 5];
console.log(array);
array.push(6);
console.log(array);
array.push(7);
console.log(array);
[1, 2, 3, 4, 5]
[1, 2, 3, 4, 5, 6]
[1, 2, 3, 4, 5, 6, 7]

要素の検索(indexOf, lastIndexOf)

要素の検索には、indexOfもしくはlastIndexOfメソッドを使います。
ともに検索したい値を指定します。
indexOfメソッドは最初、lastIndexOfメソッドは最後に見つかった位置(インデックス)を返します。

var array = [1, 2, 5, 4, 5];
console.log(array.indexOf(5));
console.log(array.lastIndexOf(5));
2
4

配列の結合(join)

配列の結合(連結)には、joinメソッドを使います。
joinメソッドの引数には、区切り文字を指定します。
引数を指定しない場合、カンマ区切りの文字列になります。

var array = ["Hello", "World"];
console.log(array);
var result = array.join();
console.log(result);
["Hello", "World"]
"Hello,World"

配列の分割(slice)

配列の分割には、sliceメソッドを使います。
sliceメソッドの引数には、分割の境目になるインデックスを指定します。
指定したインデックスから末尾までの要素を含んだ配列が返ってきます。

var array = [1, 2, 3, 4, 5];
console.log(array);
var result = array.slice(2);
console.log(result);
[1, 2, 3, 4, 5]
[3, 4, 5]

要素の削除(delete, shift, pop, splice)

要素の削除は、delete演算子を使います。

var array = [1, 2, 3, 4, 5];
console.log(array);
delete array[2];
console.log(array);
[1, 2, 3, 4, 5]
[1, 2, , 4, 5]

配列の先頭要素を削除したい場合には、shiftメソッドを使います。

var array = [1, 2, 3, 4, 5];
console.log(array);
array.shift();
console.log(array);
[1, 2, 3, 4, 5]
[2, 3, 4, 5]

配列の末尾の要素を削除したい場合には、popメソッドを使います。

var array = [1, 2, 3, 4, 5];
console.log(array);
array.pop();
console.log(array);
[1, 2, 3, 4, 5]
[1, 2, 3, 4]

配列の指定要素を削除したい場合には、spliceメソッドを使います。
spliceメソッドでは、引数にインデックスと削除する要素数を指定します。

var array = [1, 2, 3, 4, 5];
console.log(array);
array.splice(2, 1);
console.log(array);
[1, 2, 3, 4, 5]
[1, 2, 4, 5]

まとめ

今回の記事では、配列の基本的な使い方について見てきました。
よく使いそうな基本操作を列挙してみましたが…。
実は他にもまだまだ配列操作メソッドがあったりします。
数が結構多いですので、この記事で挙げたものを中心にしながら少しずつ覚えていきましょう。

次回は、JavaScriptで繰り返し処理を行うfor文の使い方を扱います。
ぜひ楽しみにしていてくださいね。

前回 ≫ JavaScript入門 関数(function)の定義方法と使い方
次回 ≫ JavaScript入門 繰り返し処理を行うfor文の使い方

コメント