JavaScriptにおける配列の基本操作説明 (配列の宣言、生成、基本的な要素操作)

初期化時の代入#

let array1 = [1, 2, 3];
console.log(array1);
// => [ 1, 2, 3 ]

/* コンストラクタの呼び出しによる方法 */
let array2 = new Array(1, 'a', new Date());
console.log(array2);
// => [ 1, 'a', 2022-09-19T01:50:33.019Z ]

let array3 = [array1, array2];
console.log(array3);
// => [ [ 1, 2, 3 ], [ 1, 'a', 2022-09-19T01:50:33.019Z ] ]

結合による生成#

let concArray = array1.concat(array2, array3);
console.log(concArray);
// [
//      1, 2, 3, 1, 'a', 2022-09-19T01:50:33.019Z,
//      [ 1, 2, 3 ], [ 1, 'a', 2022-09-19T01:50:33.019Z ]
// ]

切り出しによる生成#

let subArray = array1.slice(1, 3);
console.log(subArray);
// => [ 2, 3 ]

文字列からの生成#

let myString = "This is a test code";
let arrayFromString = myString.split(' ');
console.log(arrayFromString);
// => ['This', 'is', 'a', 'test', 'code']

/* おまけ: 逆に文字列へ変換 */
let toString = arrayFromString.join(' ');
console.log(toString);
// => "This is a test code"

読み出し#

let array4 = [3, 4, 5];
console.log(array4[0]);
// => 3
console.log(array4[1]);
// => 4
console.log(array4[2]);
// => 5
console.log(array4[3]);
// => undefined

console.log(array4.at(0));
// => 3
console.log(array4.at(-1));
// => 5

/* 配列の長さを取得 */
console.log(array4.length)
// => 3

/* for による読み出し */
for (var i = 0; i < array4.length; i++) {
    console.log(array4[i]);
}
// => array4 の中身が順次出力される

/* forEach による読み出し */
array4.forEach((elem) => {
    console.log(elem);
})
// => array4 の中身が順次出力される (同上)

書き込み(追加)#

let array5 = [1, 2, 3];

array5[3] = 4;
console.log(array5);
// => [ 1, 2, 3, 4 ]

/* 末尾に追加 */
array5.push(5)
console.log(array5);
// => [ 1, 2, 3, 4, 5 ]

/* 複数の要素を一度に書き込むことも可能 */
array5.push(6, 7, 8)
console.log(array5);
// => [ 1, 2, 3, 4, 5, 6, 7, 8 ]

/* 先頭に追加 */
array5.unshift(-1, 0)
console.log(array5);
// => [ -1, 0, 1, 2, 3, 4, 5, 6, 7, 8 ]

書き変え(上書き)#

let array6 = [1, 2, 3, 'a'];

array6[0] = 'string';
console.log(array6);
// => [ 'string', 2, 3, 'a' ]

読み出しと同時に削除#

let array7 = [1, 2, 3, 4, 5];

/* 末尾を取得して削除 */
let tail = array7.pop();
console.log(tail);
// => 5
console.log(array7);
// => [ 1, 2, 3, 4 ]

/* 先頭を取得して削除 */
let head = array7.shift();
console.log(head);
// => 1
console.log(array7);
// => [ 2, 3, 4 ]

初期化時の代入#

配列の作成と初期値の代入を以下の2種類の方式でサンプルに例示しています。

• [] を利用した方法

• Array コンストラクタを利用する方法

上記2種の操作は見た目が少し異なりますが与えるパラメータは同じです。

配列にはどのようなデータも含めることができる ため、数値や文字列といったJavaScriptが本来持っているデータ型[1] はもちろん、自作のデータタイプも含めることができます。

上記の例では数値や文字列に加えて Date という日付時刻を取り扱うためのデータ型や、配列を含んだ配列の例を示しています。配列に配列を含めた場合には 2次元配列 などの多次元配列と呼ばれる状態となり、アクセスのための添え字が複数必要になります。

また本ページでは例示していないですが、 Array.from() を呼び出して配列を生成することもできます。こちらは配列のようなオブジェクト、あるいは反復可能なオブジェクト[2] を配列に変換する際に用いられるものです。

結合による生成#

配列を結合する場合には concat() を利用します。

こちらは配列の宣言時に配列を与えたものと若干似ていますが、多次元配列の状態にならず中身だけをつなげた配列を新たに生成してくれる点で異なります。

let arrayA = [1, 2, 3];
let arrayB = [4, 5, 6];
let assignedArray = [arrayA, arrayB];
let concatedArray = arrayA.concat(arrayB);
console.log(assignedArray);
// => [ [1, 2, 3], [4, 5, 6] ]
console.log(concatedArray);
// => [1, 2, 3, 4, 5, 6]

切り出しによる生成#

すでに存在している配列をもとに新たな配列を作成したい場合には slice() 関数を利用した方法で配列を作成することがあります。 既存の配列の一部を切り出したいときや単純に配列のコピーを作成したいときに利用 されます。

slice() の引数にはもととなる配列のどこからどこまでを切り出すかを指定することができますが、指定を省略した場合には配列のコピーを作成する動作となります。

また指定する範囲ですが、始点は含まれ終点は含まれない (数学記号で言うと [始点, 終点) ) 形で指定します。

let toBeSliced = [1, 2, 3, 4];

/* 開始位置のみを指定 */
let sliceA = toBeSliced.slice(1);
/* 開始位置と終了位置を指定 */
let sliceB = toBeSliced.slice(1, 3);
/* 指定なし = コピー */
let sliceC = toBeSliced.slice();

console.log(sliceA);
// => [2, 3, 4]
console.log(sliceB);
// => [2, 3]
console.log(sliceC);
// => [1, 2, 3, 4]

文字列からの生成#

配列を文字列から作成することができます。この場合には String に備わっている split() を利用します。

split() は引数として区切り文字を受け取り、その 区切り文字の個所でデータを区切って配列を生成してくれます 。ちょうど逆の操作を join() により行うことができます。

let myString = "This is a test code";
let arrayFromString = myString.split(' ');
console.log(arrayFromString);
// => ['This', 'is', 'a', 'test', 'code']

/* おまけ: 逆に文字列へ変換 */
let toString = arrayFromString.join(' ');
console.log(toString);

読み出し#

配列に格納されている値を読み出す方法として以下が挙げられます。

• 添え字 (index) によるアクセス

• at() によるアクセス

let arraIndexTest = [3, 4, 5];
console.log(arraIndexTest[0]);
// => 3
console.log(arraIndexTest[1]);
// => 4
console.log(arraIndexTest[2]);
// => 5
console.log(arraIndexTest[3]);
// => undefined

let atTest = [3, 4, 5];
console.log(atTest.at(0));
// => 3
console.log(atTest.at(-1));
// => 5
console.log(atTest.at(-3));
// => 3

let array4Each = [3, 4, 5];
array4Each.forEach((elem) => {
    console.log(elem);
})
// => array4Each の中身が順次出力される (同上)

書き込み(追加)#

JavaScriptでは配列を一度作成した後にも要素を追加していくことができます。要素の追加には主に以下の関数が利用されます。

• indexによる直接指定

• push() 関数

• unshift() 関数

let addArrayByIndex1 = [1, 2, 3];

addArrayByIndex1[3] = 4;
console.log(addArrayByIndex1);
// => [ 1, 2, 3, 4 ]

let addArrayByIndex2 = [1, 2, 3];

addArrayByIndex2[4] = 4;
console.log(addArrayByIndex2);
// => [ 1, 2, 3, empty, 4 ]

let addArrayByPush = [1, 2, 3, 4];
/* 末尾に追加 */
addArrayByPush.push(5)
console.log(addArrayByPush);
// => [ 1, 2, 3, 4, 5 ]

/* 複数の要素を一度に書き込むことも可能 */
addArrayByPush.push(6, 7, 8)
console.log(addArrayByPush);
// => [ 1, 2, 3, 4, 5, 6, 7, 8 ]

let addArrayByUnshift = [1, 2, 3, 4];
/* 先頭に追加 */
addArrayByUnshift.unshift(-1, 0)
console.log(addArrayByUnshift);
// => [ -1, 0, 1, 2, 3, 4 ]

書き変え(上書き)#

配列のデータを書き換えるためには、書き換える対象要素の index の値を利用します。ちょうど index で値を追加する操作と同様の方法で上書を行うことができます。

let array6 = [1, 2, 3, 'a'];

array6[0] = 'string';
console.log(array6);
// => [ 'string', 2, 3, 'a' ]

読み出しと同時に削除#

配列からの要素の削除には以下の方法があります。

• pop() を利用する

• shift() を利用する

let arrayToBePopped = [1, 2, 3, 4, 5];

/* 末尾を取得して削除 */
let poppedTail = arrayToBePopped.pop();
console.log(poppedTail);
// => 5
console.log(poppedTail);
// => [ 1, 2, 3, 4 ]

let arrayToBeShifted = [1, 2, 3, 4, 5];
/* 先頭を取得して削除 */
let shiftedHead = arrayToBeShifted.shift();
console.log(shiftedHead);
// => 1
console.log(arrayToBeShifted);
// => [ 2, 3, 4, 5 ]