配列・オブジェクトの操作
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の回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。