配列メソッド
JavaScript
map、filter、reduce、find など
配列の基本操作
作成、アクセス、追加・削除
// 作成
const arr = [1, 2, 3];
const from = Array.from('hello'); // ['h','e','l','l','o']
const fill = Array.from({ length: 5 }, (_, i) => i * 2); // [0,2,4,6,8]
const of = Array.of(1, 2, 3); // [1,2,3]
// アクセス
arr[0]; // 1
arr.at(-1); // 最後の要素(ES2022)
arr.at(-2); // 最後から2番目
// 末尾の追加・削除
arr.push(4); // [1,2,3,4] — 末尾追加
arr.pop(); // [1,2,3] — 末尾削除・返却
// 先頭の追加・削除
arr.unshift(0); // [0,1,2,3] — 先頭追加
arr.shift(); // [1,2,3] — 先頭削除・返却
// 任意位置の操作
arr.splice(1, 1); // [1,3] — index1から1個削除
arr.splice(1, 0, 'a','b'); // [1,'a','b',3] — 挿入
// 検索
arr.indexOf(2); // 1(見つからない場合-1)
arr.includes(2); // true
arr.findIndex(x => x > 2); // 2イテレーション系メソッド
forEach、map、filter、reduce
const nums = [1, 2, 3, 4, 5];
// forEach: 副作用のみ(返り値なし)
nums.forEach((n, i) => console.log(i, n));
// map: 各要素を変換した新配列
const doubled = nums.map(n => n * 2); // [2,4,6,8,10]
const users = ids.map(id => fetchUser(id));
// filter: 条件を満たす要素の新配列
const evens = nums.filter(n => n % 2 === 0); // [2,4]
const active = users.filter(u => u.isActive);
// find: 最初に条件を満たす要素(または undefined)
const first = nums.find(n => n > 3); // 4
// findIndex: 最初に条件を満たすインデックス
const idx = nums.findIndex(n => n > 3); // 3
// some: 1つでも条件を満たすか
const hasEven = nums.some(n => n % 2 === 0); // true
// every: 全て条件を満たすか
const allPositive = nums.every(n => n > 0); // true
// reduce: 累積処理
const sum = nums.reduce((acc, n) => acc + n, 0); // 15
const max = nums.reduce((a, b) => a > b ? a : b);
const flat = [[1,2],[3,4]].reduce((a, b) => a.concat(b), []); // [1,2,3,4]変換・整形メソッド
flat、flatMap、sort、slice、concat
// sort(デフォルトは文字列順!)
[10, 1, 5].sort(); // [1, 10, 5] ← バグ注意
[10, 1, 5].sort((a, b) => a - b); // [1, 5, 10] ← 正しい数値ソート
[10, 1, 5].sort((a, b) => b - a); // [10, 5, 1] ← 降順
users.sort((a, b) => a.name.localeCompare(b.name)); // 文字列比較
// flat / flatMap
[1, [2, [3, [4]]]].flat(); // [1, 2, [3, [4]]] — 1層
[1, [2, [3, [4]]]].flat(Infinity); // [1, 2, 3, 4]
[[1,2],[3,4]].flatMap(x => x); // [1,2,3,4]
[1, 2, 3].flatMap(n => [n, n * 2]); // [1,2, 2,4, 3,6]
// slice(元配列変更なし)
[1,2,3,4,5].slice(1, 3); // [2,3]
[1,2,3,4,5].slice(-2); // [4,5]
// concat
[1,2].concat([3,4], [5,6]); // [1,2,3,4,5,6]
[...a, ...b, ...c]; // スプレッド推奨
// join / split
['a','b','c'].join('-'); // 'a-b-c'
'a-b-c'.split('-'); // ['a','b','c']
// reverse(元配列を変更!)
[1,2,3].toReversed(); // ES2023: 非破壊版
[1,2,3].toSorted((a,b) => b-a); // ES2023: 非破壊sortよく使うパターン
重複削除、グループ化、zip など
// 重複削除
const unique = [...new Set([1, 2, 2, 3, 3])]; // [1,2,3]
// オブジェクト配列の重複削除
const uniqueById = [...new Map(users.map(u => [u.id, u])).values()];
// グループ化(Object.groupBy — ES2024)
const grouped = Object.groupBy(users, u => u.role);
// { admin: [...], user: [...] }
// グループ化(reduceで)
const grouped = users.reduce((acc, u) => {
(acc[u.role] ??= []).push(u);
return acc;
}, {});
// 配列の分割
const [first, second, ...rest] = [1,2,3,4,5];
// first=1, second=2, rest=[3,4,5]
// zip(2配列を組み合わせ)
const zip = (a, b) => a.map((v, i) => [v, b[i]]);
zip([1,2,3], ['a','b','c']); // [[1,'a'],[2,'b'],[3,'c']]
// チャンク分割
const chunk = (arr, size) =>
Array.from({ length: Math.ceil(arr.length / size) },
(_, i) => arr.slice(i * size, i * size + size));
chunk([1,2,3,4,5], 2); // [[1,2],[3,4],[5]]