配列とは

並びを持ったデータ構造です。

1つの変数に複数の値を入れることができます。

データ構造の基礎として最初に抑えるのがおすすめです。

呼び方

• 英語
  • Array
  • List
• 日本語
  • 配列
  • リスト

メリット

1つの変数に複数の値を並びを持った状態で持つことができます。

並びがあることによって「最初から取り出していく」「後ろから取り出す」「N番目の要素を取り出す」といったことが可能になります。

少しアルゴリズム的な話で言うと、線形的な並びを持ったデータ構造です。

用途

ウェブアプリケーション含めアプリケーションを開発していると配列のデータ構造でデータを扱うことは多くあります。

例: ブログ記事

const posts = [<post1>, <post2>, <post3>, ...<postN>]

以上のようにブログ記事が複数個データベースから取り出されてサーバーサイドから取り出される時の例です。

配列の中にpostの連想配列（オブジェクト）が入っているケースなどが大半多いです。

配列の簡単な例

例1

const array = [0,0,0,0];

0が4つ入ってます。

例2

const array = [1,1,1,2];

1が3つ入ってて最後に2が入ってます。

例3

const array = [1,1,2,1,0];

1,1と続いて2が入っていて、1がきて、最後に0が入っています。

例4

const array = ["a", "i", "u", "e", "o"];

先頭から"a", "i", "u", "e", "o"と文字列が入っています。

例5

const array = [true, true, false, true, true];

true, true, false, true, trueといった並びで真偽値がarrayという変数に入っています。

練習

実際に真似して打ち込んで出力を見てみましょう。

1. 配列をループで回して最初から取り出していく

const array = [1,2,3,4,5,6,7,8,9,10];

array.forEach((num) => console.log(num));

// 1 ~ 10まで出力される

const array = [1,2,3,4,5,6,7,8,9,10];

for (num of array) {
  console.log(num);
}

// 1 ~ 10まで出力される

2. 配列をループで回して最後から取り出していく

reverseメソッドは破壊的に変更を加えるので、スプレッド構文で浅いコピーを行っています。

const array = [1,2,3,4,5,6,7,8,9,10];

[...array].reverse().forEach((num) => console.log(num));

// 10 -> 1まで出力される

const array = [1,2,3,4,5,6,7,8,9,10];

for (num of [...array].reverse()) {
  console.log(num);
}

// 10 -> 1まで出力される

3. 特定の要素をindex番号から取り出す

index番号: 要素の並びの順番に関する番号のことです。

0から始まります。

[1,2,3,4,5,100]

上の例の場合は、1がindex番号0、2がindex番1、3がindex番2,...100がindex番号5になります。

以下は、実際に配列から要素を取りだす操作です。

const array = [1,2,3,4,5,6,7,8,9,10];

console.log(array[0]); // 1, 最初の要素を取り出す
console.log(array[1]); // 2, 2番目の要素を取り出す
console.log(array[3]); // 4, 4番目の要素を取り出す

console.log(array[array.length - 1]); // 10, 最後の要素を取り出す

console.log(array[0] + array[array.length - 1]); // 0 + 10 = 11, 最初と最後の要素を取り出して足す
console.log(array[1] + array[3]); // 2 + 4 = 6, 2個目と4個目の要素を取り出して足す

4. データの入れ替え

index番号を指定して配列の中のデータを入れ替えることができます。

const array = [1,2,3,4,5];
array[0] = 5; // 最初の要素に5を入れる
array[array.length - 1] = 1; // 最後の要素に1を入れる

console.log(array); // [5,2,3,4,1];

const array = [1,2,3,4,5];
array[0] = 999; // index番号2に999を入れる
array[array.length - 1] = 9999; // index番号4に9999を入れる

console.log(array); // [999, 2, 3, 4, 9999]

5. 配列の破壊的操作

元々の配列の中身が書きかわる操作です。

const array = [1,2,3,4];

const reversed = array.reverse();

console.log(reversed, array);

// [4,3,2,1], [4,3,2,1]
// arrayのほうもreverseされています

const array = [1,2,3,4];

const reversed = [...array].reverse();

console.log(reversed, array);

// [4, 3, 2, 1],  [1, 2, 3, 4]
// arrayのほうはスプレッド構文で展開して浅いコピーをしたので、変わっていません

6. N次元配列

2次元配列、3次元配列、、、N次元配列などの配列の中に配列が入っているデータ構造もあります。

// 2次元
const array = [[1,2,3], [1,2,3], [1,2,3]];

// 3次元
const array = [[[1,2,3],[1,2,3],[1,2,3]], [[1,2,3],[1,2,3],[1,2,3]]];

基本的には2次元配列程度までしか使いません。

3次元以上になると、データ構造として非常に複雑になってしまうからです。

7. 線形探索(Linear Search)

• 線形探索とは
  • 最初から最後まで前から1個ずつ順番に見ていく探索方法
  • よく比較される例としては二分探索（Binary Search）

// 最初の1を探す
const array = [5,5,5,5,5,5,1];
console.log(array.find(a => a === 1)); // 1, index番号6の1が取り出される

// idが3のpostを探す(1)
const posts = [{id: 1, name: "post1"}, {id: 2, name: "post2"}, {id: 3, name: "post3"}];
console.log(posts.find((p) => p.id === 3)); // {id: 3, name: 'post3'}

// categoryが"lvl"のPostを探す
const posts = [{id: 1, name: "post1", category: "apple"}, {id: 2, name: "post2", category: "lvl"}, {id: 3, name: "post3", category: "lvl"}];

// {id: 2, name: 'post2', category: 'lvl'}, 3個目ではなくて2個目の要素が取り出される
console.log(posts.find((p) => p.category === "lvl"));