配列・オブジェクトの操作

map filter reduce spread at

JavaScriptの配列・オブジェクト操作の頻出パターンをまとめます。モダンメソッドも積極的に活用しましょう。

デモ:filter / sort / reduce

合計: 367点 / 平均: 73.4点(reduce)
Alice82
Bob61
Charlie95
Diana74
Eve55

配列の頻出操作

js
const arr = [1, 2, 3, 4, 5];

// 変換
arr.map(x => x * 2);              // [2, 4, 6, 8, 10]

// 絞り込み
arr.filter(x => x > 3);           // [4, 5]

// 集計
arr.reduce((acc, x) => acc + x, 0); // 15

// 検索
arr.find(x => x > 3);             // 4(最初の1件)
arr.findIndex(x => x > 3);        // 3(インデックス)
arr.some(x => x > 4);             // true(1つでも)
arr.every(x => x > 0);            // true(全て)
arr.includes(3);                  // true

// 変形
arr.flat();                        // ネスト配列を平坦化
arr.flatMap(x => [x, x * 2]);     // map後にflat

// コピー・結合(非破壊)
[...arr, 6, 7];                    // スプレッド
arr.concat([6, 7]);               // [1,2,3,4,5,6,7]

// 並び替え(破壊的)
[...arr].sort((a, b) => b - a);   // 降順(コピーして)

// ✅ 末尾から取得(ES2022)
arr.at(-1);   // 5(末尾)
arr.at(-2);   // 4(末尾から2番目)

オブジェクトの頻出操作

js
const obj = { a: 1, b: 2, c: 3 };

// キー・値・エントリ取得
Object.keys(obj);              // ["a", "b", "c"]
Object.values(obj);            // [1, 2, 3]
Object.entries(obj);           // [["a",1], ["b",2], ["c",3]]

// マージ・コピー(非破壊)
const merged = { ...obj, d: 4 };
Object.assign({}, obj, { d: 4 });

// 配列からオブジェクト生成
Object.fromEntries([["a", 1], ["b", 2]]); // {a:1, b:2}
// Map → Object
Object.fromEntries(myMap);

// 分割代入
const { a, b, ...rest } = obj;            // rest = {c:3}

// ネストも分割代入
const { user: { name, age = 0 } } = data; // デフォルト値付き

// ✅ Object.hasOwn(ES2022)※ hasOwnProperty の改善版
Object.hasOwn(obj, 'a');  // true
// obj.hasOwnProperty('a') より安全(プロトタイプ汚染に強い)

NEW最近追加された配列メソッド(ES2023+)

元の配列を変更せず新しい配列を返す「コピー版」メソッドが追加されました。

js
const arr = [3, 1, 4, 1, 5];

// 末尾から検索(ES2023)
arr.findLast(x => x < 4);       // 1
arr.findLastIndex(x => x < 4);  // 3

// 非破壊ソート・逆順(ES2023)✅
arr.toSorted((a, b) => a - b);  // [1,1,3,4,5](元は変わらない)
arr.toReversed();               // [5,1,4,1,3](元は変わらない)
arr.toSpliced(1, 2, 99);        // [3,99,5](元は変わらない)
arr.with(0, 99);                // [99,1,4,1,5](特定インデックスを置換)

// Array.from の拡張
Array.from({ length: 5 }, (_, i) => i * 2); // [0,2,4,6,8]

🤖 AIプロンプトテンプレート

以下の要件でJavaScriptの配列・オブジェクト操作のサンプルを実装してください。

【実装内容】
- 配列操作:map / filter / reduce / find / some / every / flat / flatMap を使ったサンプル
- オブジェクト操作:Object.keys / values / entries / fromEntries / assign / スプレッド構文
- 分割代入(デフォルト値付き)とネストオブジェクトへの対応
- ES2022以降の新メソッド(Array.at / Object.hasOwn / toSorted / toReversed)を含める

【技術】React(useState + 表示用コンポーネント)

【動作要件】
- サンプルデータ(ユーザー一覧など)を用意し、filter/sort/reduceを組み合わせて絞り込み・集計を行う
- 各メソッドの結果をUIに表示する
- 非破壊操作と破壊操作の違いを明示すること

【使用例】
ユーザーリストをスコアでフィルタし、降順に並べ替えて平均値を算出するインタラクティブなデモ

⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。