配列は複数のデータを順序付けして格納するためのコンテナです。
内部的には、0から始まる連続した数値キーを持つ特殊なオブジェクトであり、lengthプロパティが自動的に管理されます。
配列の生成方法
リテラル記法
const emptyArr = [];
const numArr = [10, 20, 30];
Arrayコンストラクタ
const arrA = new Array(); // []
const arrB = new Array(3); // [undefined × 3]
const arrC = new Array(5, 6, 7); // [5, 6, 7]
Array.of(ES6)
const single = Array.of(5); // [5]
const mixed = Array.of('x', true, {id: 1}); // ['x', true, {id: 1}]
fillによる初期化
const filled = Array(5).fill('ok'); // ['ok','ok','ok','ok','ok']
主要な配列操作メソッド一覧
| メソッド | 用途 | 引数 | 戻り値 | 破壊的 |
|---|---|---|---|---|
| unshift | 先頭に要素追加 | 要素 | 新長さ | ○ |
| push | 末尾に要素追加 | 要素 | 新長さ | ○ |
| shift | 先頭要素削除 | - | 削除要素 | ○ |
| pop | 末尾要素削除 | - | 削除要素 | ○ |
| sort | 並び替え | 比較関数 | 配列自身 | ○ |
| reverse | 逆順 | - | 配列自身 | ○ |
| fill | 範囲置換 | 値, 開始, 終了 | 配列自身 | ○ |
| splice | 挿入/削除 | 位置, 削除数, 要素 | 削除要素群 | ○ |
| slice | 部分抽出 | 開始, 終了 | 新配列 | × |
| filter | 条件抽出 | 判定関数 | 新配列 | × |
| concat | 結合 | 配列/要素 | 新配列 | × |
| reduce | 集約計算 | 集約関数, 初期値 | 計算結果 | × |
| join | 文字列化 | 区切り文字 | 文字列 | × |
配列判定と基本操作
const items = [100, 200, 300];
console.log(Array.isArray(items)); // true
console.log(items.length); // 3
// 長さ変更
items.length = 5; // [100,200,300,undefined,undefined]
items.length = 1; // [100]
// 要素アクセス
console.log(items[0]); // 100
console.log(items[items.length-1]); // 100
console.log(items[99]); // undefined
検索系メソッド
const nums = [5, 8, 12, 8];
// 位置検索
console.log(nums.indexOf(8)); // 1
console.log(nums.lastIndexOf(8)); // 3
// 存在確認
console.log(nums.includes(8)); // true
console.log(nums.includes(99)); // false
// 条件検索
const firstOverTen = nums.find(x => x > 10); // 12
const indexOverTen = nums.findIndex(x => x > 10); // 2
要素操作
let data = [1, 2, 3];
// 直接代入
data[1] = 99; // [1,99,3]
// spliceで挿入
data.splice(1, 0, 'new'); // [1,'new',99,3]
// 先頭/末尾操作
data.unshift('start'); // 先頭追加
data.push('end'); // 末尾追加
data.shift(); // 先頭削除
data.pop(); // 末尾削除
// 指定位置削除
data.splice(2, 1); // インデックス2を削除
文字列変換と結合
const parts = ['apple', 'banana', 'cherry'];
console.log(parts.toString()); // "apple,banana,cherry"
console.log(parts.join('|')); // "apple|banana|cherry"
const more = ['date', 'elderberry'];
const combined = parts.concat(more); // 新配列生成
// スプレッド演算子でも可能
const altCombined = [...parts, ...more];
配列変形
let values = [3, 1, 4];
values.reverse(); // [4,1,3] (破壊的)
values.sort((a,b) => a - b); // [1,3,4] (破壊的)
const subset = values.slice(1, 3); // [3,4] (非破壊)
const replaced = values.fill(0, 0, 2); // [0,0,4] (破壊的)
// 配列平坦化 (ES2019)
const nested = [1, [2, [3, 4]]];
console.log(nested.flat(1)); // [1,2,[3,4]]
console.log(nested.flat(Infinity)); // [1,2,3,4]
配列コピー
const original = [1, 2, 3];
// 浅いコピー
const shallow = [...original];
const shallow2 = original.slice();
const shallow3 = Array.from(original);
// 深いコピー(簡易版)
const deep = JSON.parse(JSON.stringify(original));
// ネスト対応の深いコピー関数
function deepClone(obj) {
if (obj === null || typeof obj !== 'object') return obj;
if (Array.isArray(obj)) {
return obj.map(item => deepClone(item));
}
const cloned = {};
for (let key in obj) {
if (obj.hasOwnProperty(key)) {
cloned[key] = deepClone(obj[key]);
}
}
return cloned;
}
実践例:地域別統計集計
const rawData = [
{ region: '東京', male: 120, female: 150 },
{ region: '大阪', male: 80, female: 90 },
{ region: '東京', male: 110, female: 130 },
{ region: '大阪', male: 75, female: 85 }
];
const summary = {};
rawData.forEach(record => {
const { region, male = 0, female = 0 } = record;
if (!summary[region]) {
summary[region] = { male: 0, female: 0 };
}
summary[region].male += male;
summary[region].female += female;
});
console.log(summary);
// {
// 東京: { male: 230, female: 280 },
// 大阪: { male: 155, female: 175 }
// }