配列を使う

JavaScriptで配列を使う

JavaScriptの配列は「Arrayオブジェクト」として用意されており、変数の集合体として扱うことができます。
他のプログラミング言語を使った経験があれば、同じ感覚で使うことができると思います。

配列はArrayオブジェクトのインスタンスを作成して使用します。

JavaScript コード例

// パターン1：Arrayオブジェクトのインスタンス作成
let test1 = new Array();

// 値を追加
test1[0] = 1;
test1[1] = 2;
test1[2] = 3;

// 出力
console.log(test1); // (3) [1, 2, 3]

冒頭の「new Array();」でArrayオブジェクトのインスタンスを作成し、変数test1に入れます。
これで配列を使用できるようになります。

続いて配列に値を入れていきます。
キーを0、1、2と指定して、それぞれに数値を入れていきます。
ここでは例として値を3つ設定していますが、実際は必要な数だけ値を設定することができます。

最後に配列の内容をconsole.logメソッドで出力します。
先頭についている「(3)」は配列の長さを表し、続く「[1, 2, 3]」が配列に入っている値です。

ここまでで配列を最低限使用することができますが、以降はArrayオブジェクトのインスタンスを作成するパターンや標準で使用できるメソッドなどを紹介していきます。

配列を作成

配列は使う前に必ずArrayオブジェクトのインスタンスを作成する必要がありますが、作成はいくつかパターンがあります。

JavaScript コード例

// パターン1：Arrayオブジェクトのインスタンスを作成してからキーと値を追加
let test1 = new Array();
test1[0] = 1;
test1[1] = 2;
test1[2] = 3;
console.log(test1);
// (3) [1, 2, 3]


// パターン2：インスタンス作成と同時に値を設定
let test2 = [1,2,3];
console.log(test2);
// (3) [1, 2, 3]


// パターン3：オブジェクトを含む配列を作成
let test4 = [
  {
    id: 150001,
    username: 'cat',
    type: 3,
    regist_datetime: '2018-01-01 10:20:00'
  },
  {
    id: 150002,
    username: 'dog',
    type: 2,
    regist_datetime: '2018-01-03 11:22:00'
  },
  {
    id: 150002,
    username: 'mouse',
    type: 1,
    regist_datetime: '2018-01-04 12:30:00'
  }
];
console.log(test4);
// (3) [{…}, {…}, {…}]
// 0: {id: 150001, username: "cat", type: 3, regist_datetime: "2018-01-01 10:20:00"}
// 1: {id: 150002, username: "dog", type: 2, regist_datetime: "2018-01-03 11:22:00"}
// 2: {id: 150002, username: "mouse", type: 1, regist_datetime: "2018-01-04 12:30:00"}


// パターン4：2次元配列を作成
let test5 = [
  [1,2,3],
  [4,5,6],
  [7,8,9]
];
console.log(test5);
// (3) [Array(3), Array(3), Array(3)]
// 0: (3) [1, 2, 3]
// 1: (3) [4, 5, 6]
// 2: (3) [7, 8, 9]

パターン1は冒頭で紹介した方法で、最も基本的な配列の作成方法です。

パターン2はパターン1をコンパクトにしたもので、Arrayオブジェクトのインスタンス作成と値の設定を同時に行います。
値は先頭から配列の要素として代入され、キーは自動連番で0、1、2…と設定されます。

パターン3はオブジェクトを含む配列です。
例えば、3つ目の要素のidを参照するときは「test4[2].id」のように行います。

パターン4は配列の中に配列が入る「多次元配列」を作成しています。
ここでは配列の中に配列が入る2重構造になっているので、「2次元配列」と呼ぶ場合もあります。
配列の構造はさらに増やしていくことも可能で、必要に応じて3次元配列や4次元配列も作成することができます。

擬似的な連想配列を作成する

JavaScriptには要素のキーに文字列を使った「連想配列」の機能はありません。
その代わり、オブジェクトのプロパティにブラケット記法を使うことで連想配列に似たものを作ることができます。

JavaScript コード例

let test3 = new Array();
test3["aaa"] = "cat";
test3["bbb"] = "dog";
test3["ccc"] = "mouse";
console.log(test3);
// [aaa: "cat", bbb: "dog", ccc: "mouse"]

値を参照するときも、「test3["ccc"]」のように配列と同じ形式で行います。

JavaScript コード例

let test3 = new Array();
test3["aaa"] = "cat";
test3["bbb"] = "dog";
test3["ccc"] = "mouse";

console.log(test3["ccc"]);
// mouse

ただし、要素はあくまで通常のオブジェクトのプロパティになるため、配列のlengthプロパティや各種メソッドは使用することができません。

JavaScript コード例

let test3 = new Array();
test3["aaa"] = "cat";
test3["bbb"] = "dog";
test3["ccc"] = "mouse";

console.log(test3.length); // 0
console.log(test3.pop()); // undefined

よく使う配列の操作

配列でよく使う操作を解説していきます。

配列の作成

JavaScript コード例

// パターン1：Arrayオブジェクトのインスタンスを作成してから値を設定
let animals = new Array();
animals[0] = 'cat';
animals[1] = 'dog';
animals[2] = 'mouse';
animals[3] = 'fish';
animals[4] = 'penguin';

//  パターン2：Arrayオブジェクトのインスタンス作成と同時に値を設定
let animals = [ 'cat', 'dog', 'mouse', 'fish', 'penguin'];

パターン1とパターン2は同じ配列を作成します。
パターン1ではArrayオブジェクトのインスタンスを作成してから値を追加していく方法、パターン2はArrayオブジェクトのインスタンス作成と値の設定を同時に行う方法です。

配列の長さを取得

JavaScript コード例

console.log(animals.length);
// 5

配列の長さ（要素の数）はlengthプロパティから取得します。

配列の要素を取得

JavaScript コード例

// 配列の全要素を出力
console.log(animals);
// (5) ["cat", "dog", "mouse", "fish", "penguin"]

// 配列の要素を取得
console.log(animals[2]);
// mouse

// 末尾の値を取得
console.log(animals[animals.length -1]);
// penguin

配列の要素を参照するときは「キー」で位置を指定します。
配列の末尾にある要素を参照するときは、要素のキーは0から始まるため、配列の長さを取得するlengthプロパティから-1した値を指定します。

上記の配列ではlengthプロパティの値は5ですがキーは0〜4までしかないため、「animals.length -1」で4を参照するよう指定します。

配列の末尾に要素を追加

JavaScript コード例

// 要素を追加する前の配列を出力
console.log(animals);
// (5) ["cat", "dog", "mouse", "fish", "penguin"]

// 配列の末尾に値を追加
animals.push("bear");
animals.push("fox");

// 要素を追加した後の配列を出力
console.log(animals);
// (7) ["cat", "dog", "mouse", "fish", "penguin", "bear", "fox"]

pushメソッドは配列の末尾に要素を追加します。

配列の末尾から要素を取り出すpopメソッドの対になるメソッドです。

配列の先頭に要素を追加

JavaScript コード例

// 要素を追加する前の配列を出力
console.log(animals);
// (7) ["cat", "dog", "mouse", "fish", "penguin", "bear", "fox"]

// 配列の先頭に値を追加
animals.unshift("rhino");
animals.unshift("tiger");

// 要素を追加した後の配列を出力
console.log(animals);
// (9) ["tiger", "rhino", "cat", "dog", "mouse", "fish", "penguin", "bear", "fox"]

unshiftメソッドは配列の先頭に要素を追加します。

配列の先頭から要素を取り出すshfitメソッドの対になるメソッドです。

配列の末尾から要素を取り出す

JavaScript コード例

// 要素を取り出す前の配列を出力
console.log(animals);
// (9) ["tiger", "rhino", "cat", "dog", "mouse", "fish", "penguin", "bear", "fox"]

// 配列の末尾から要素を取り出す
let fox = animals.pop();
console.log(fox); // fox

// 取り出した要素は配列から削除される
console.log(animals);
// (8) ["tiger", "rhino", "cat", "dog", "mouse", "fish", "penguin", "bear"]

popメソッドは配列の末尾から要素を取り出します。
配列からは取り出した要素は削除され、長さも短くなります。

配列の末尾に要素を追加するpushメソッドの対になるメソッドです。

配列の先頭から要素を取り出す

JavaScript コード例

// 要素を取り出す前の配列を出力
console.log(animals);
// (8) ["tiger", "rhino", "cat", "dog", "mouse", "fish", "penguin", "bear"]

// 配列の先頭から要素を取り出す
let tiger = animals.shift();
console.log(tiger); // tiger

// 取り出した要素は配列から削除
console.log(animals);
// (7) ["rhino", "cat", "dog", "mouse", "fish", "penguin", "bear"]

shiftメソッドは配列の末尾から要素を取り出します。
配列からは取り出した要素は削除され、長さも短くなります。

配列の先頭に要素を追加するunshiftメソッドの対になるメソッドです。

指定した位置の要素を取り出す

JavaScript コード例

// 要素を取り出す前の配列を出力
console.log(animals);
// (7) ["rhino", "cat", "dog", "mouse", "fish", "penguin", "bear"]

// 指定した位置の要素を取り出す
let animals2 = animals.splice( 2, 1);

// 元の配列から取り出して作成した配列
console.log(animals2);
// ["dog"]

// 元の配列
console.log(animals);
// (6) ["rhino", "cat", "mouse", "fish", "penguin", "bear"]

spliceメソッドは第1パラメータで指定した位置から、第2パラメータで指定する数の要素を取り出します。
元の配列からは取り出した要素は削除され短くなります。

複数の要素を取り出す

JavaScript コード例

// 要素を取り出す前の配列を出力
console.log(animals);
// (6) ["rhino", "cat", "mouse", "fish", "penguin", "bear"]

// 指定した位置から複数の要素を取り出す
let animals2 = animals.splice( 1, 3);

// 元の配列から取り出して作成した配列
console.log(animals2);
// (3) ["cat", "mouse", "fish"]

// 元の配列
console.log(animals);
// (3) ["rhino", "penguin", "bear"]

spliceメソッドで複数の要素を取り出します。

配列のループ処理

JavaScript コード例

// 配列のループ処理
animals.forEach( function( item, index, array){
  console.log(item);
  console.log(index);
  console.log(array);
});

// 1回目のループ
// item:rhino
// index:0
// array:(3) ["rhino", "penguin", "bear"]

// 2回目のループ
// item:penguin
// index:1
// array:(3) ["rhino", "penguin", "bear"]

// 3回目のループ
// item:bear
// index:2
// array:(3) ["rhino", "penguin", "bear"]

forEachメソッドは配列にある要素の数だけループ処理を実行します。
ループ処理の中で要素の値やキーを引数として受け取ることができます。

配列をコピーする

JavaScript コード例

// 配列をコピー
let copy_animals = animals.slice();

// 元の配列
console.log(animals);
// (3) ["rhino", "penguin", "bear"]

// コピーして作成した配列
console.log(copy_animals);
// (3) ["rhino", "penguin", "bear"]

sliceメソッドはパラメータを指定しないで使うと元の配列をそのままコピーすることができます。

配列を部分的にコピーする

JavaScript コード例

// 配列を部分的にコピーする
let copy_animals = animals.slice( 1, 3);

// 元の配列
console.log(animals);
// (3) ["rhino", "penguin", "bear"]

// コピーして作成した配列
console.log(copy_animals);
// (2) ["penguin", "bear"]

sliceメソッドの第1パラメータにコピーの開始位置、第2パラメータに終了位置を指定します。
第2パラメータに「3」を指定すると3番目の要素まで（配列の位置としては2まで）をコピーします。

配列の要素を検索する

JavaScript コード例

// 検索する配列
console.log(animals);
// (3) ["rhino", "penguin", "bear"]

// 配列の要素を検索する
let index = animals.indexOf("bear");

// 一致した要素の位置
console.log(index);
// 2

indexOfメソッドに検索する文字列を指定して、配列から一致する値を持つ要素を検索します。
要素が見つかった場合は要素の位置を返し、見つからない場合は-1を返します。

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。