アジェンダ

配列は Array() オブジェクトを使用して作成され、様々なプロパティやメソッドを提供しています。
ここでは、そのArray() オブジェクトの基礎から配列操作の詳細まで簡単にまとめます。

`Array()` オブジェクトの基礎

Array() は JavaScript の組み込みオブジェクトの一つで、複数の要素を格納するために使用されます。
配列は、整数のインデックスを持つリスト状のデータ構造で、各要素にアクセスして操作することができます。

配列の生成方法

配列は、リテラル形式や Array() コンストラクタを使用して生成できます。

// リテラル形式
let arr1 = [1, 2, 3];
console.log(arr1) // [1, 2, 3]

// Array() コンストラクタ
let arr2 = Array(1, 2, 3); // または let arr2 = new Array(1, 2, 3);
console.log(arr2) // [1, 2, 3]

let arr3 = Array(5);
console.log(arr3); // [empty × 5]

上記のように、Arrayオブジェクトは、new演算子なしでインスタンスを生成することができます。
MDNでは以下のように記述されています。

Array() は new を付けてもつけなくても呼び出せます。どちらも新しい Array のインスタンスを生成します。

`Array()` オブジェクトのプロパティとメソッド

Array() オブジェクトには、配列を操作するための多様なプロパティとメソッドが存在します。以下はその一部です。

length: 配列の要素数を示します。

let arr = [1, 2, 3];
console.log(arr.length); // 3

push(): 配列の末尾に一つまたは複数の要素を追加します。

let arr = [1, 2];
arr.push(3, 4);
console.log(arr); // [1, 2, 3, 4]

pop(): 配列の末尾の要素を削除し、その要素を返します。

let arr = [1, 2, 3];
let lastElement = arr.pop();
console.log(arr); // [1, 2]
console.log(lastElement); // 3

concat(): 二つの配列を結合して新しい配列を生成します。

let arr1 = [1, 2];
let arr2 = [3, 4];
let newArr = arr1.concat(arr2);
console.log(newArr); // [1, 2, 3, 4]

`Array.prototype` のプロパティとメソッド

Array.prototype には、すべての配列インスタンスが共通で使用できるプロパティやメソッドが定義されています。以下はその代表例です。

forEach(): 配列の各要素に対して指定した関数を実行します。

let arr = [1, 2, 3];
arr.forEach(function(element) {
  console.log(element);
});
// 出力: 1, 2, 3

map(): 配列の各要素に関数を適用し、その結果を持つ新しい配列を生成します。

let arr = [1, 2, 3];
let newArr = arr.map(function(element) {
  return element * 2;
});
console.log(newArr); // [2, 4, 6]

filter(): 条件を満たす要素だけで構成される新しい配列を生成します。

let arr = [1, 2, 3, 4];
let filteredArr = arr.filter(function(element) {
  return element > 2;
});
console.log(filteredArr); // [3, 4]

要素の追加と変更

配列の要素は、インデックスを使って追加したり、既存の要素を変更することができます。

let arr = [1, 2, 3];
arr[1] = 10; // 要素を変更
arr.push(4); // 要素を追加
console.log(arr); // [1, 10, 3, 4]

length プロパティとインデックスの活用

配列の length プロパティは、配列の要素数を表します。また、インデックスを使用して特定の要素にアクセスできます。

let arr = [1, 2, 3];
console.log(arr.length); // 3
console.log(arr[0]); // 1

length プロパティを使った要素の追加・削除

length プロパティを手動で設定することで、配列の要素を追加したり削除したりできます。

let arr = [1, 2, 3];
arr.length = 2; // 要素を削除
console.log(arr); // [1, 2]

arr.length = 5; // 要素を追加
console.log(arr); // [1, 2, empty × 3]

多次元配列の作成

配列の中に配列を格納することで、多次元配列を作成することができます。

let matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];
console.log(matrix[1][2]); // 6

配列の要素をループする方法

配列の要素を前からループするには for ループや forEach() メソッドを使用し、後ろからループするには逆順の for ループを使用します。

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

// 前からループ
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

// 後ろからループ
// パターン1
for (let i = arr.length - 1; i >= 0; i--) {
  console.log(arr[i]);
}

// パターン2
// iが0(falsy)になるまでループを回す
for (let i = arr.length; i;) {
  console.log(arr[--i]);
}

参考

配列を征する者はJSを制す。JavaScriptのスマートな配列操作テクニック - ICS MEDIA