【初めに】
この問題集では、JavaScript の 配列関数（map, filter, reduce など） の基礎を練習できます。
React のコンポーネント内でもよく使われるので、しっかりマスターしましょう！
💡 各関数特化の問題集はこちら
- ▼
mapの詳しい解説はこちら
-▼ filterの詳しい解説はこちら
-▼ reduceの詳しい解説はこちら
すぐに追加します🙇（当記事はそのままお読みいただけます）
- ▼JavaScript の非同期処理 (Promise, async/await)
問題1: map を使ってリストを変換
以下の配列 numbers を、すべて2倍した新しい配列 doubledNumbers を作成してください。
その配列をコンソールで表示させてください。
const numbers = [1, 2, 3, 4, 5];
// doubledNumbers を作成してください
console.log(doubledNumbers);
解答例
const doubledNumbers = numbers.map(num => num * 2);
console.log(doubledNumbers);
問題2: filter を使って条件に合う要素を抽出
以下の配列 numbers から、偶数のみを抽出した新しい配列 evenNumbers を作成してください。
その配列をコンソールで表示させてください。
const numbers = [10, 15, 20, 25, 30];
// evenNumbers を作成してください
console.log(evenNumbers);
解答例
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers);
問題3: reduce を使って合計を求める
配列 numbers のすべての値の合計 sum を求めてください。
その結果をコンソールで表示させてください。
const numbers = [3, 7, 9, 2, 8];
// sum を求めてください
console.log(sum);
解答例
const sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum);
問題4: スプレッド構文を使って配列を結合
以下の2つの配列を結合し、新しい配列 mergedArray を作成してください。
その配列をコンソールで表示させてください。
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
// mergedArray を作成してください
console.log(mergedArray);
解答例
const mergedArray = [...arr1, ...arr2];
console.log(mergedArray);
問題5: find を使って特定の要素を取得
以下の配列 users から、id が 2 のオブジェクト targetUser を取得してください。
その結果をコンソールで表示させてください。
const users = [
{ id: 1, name: "Alice" },
{ id: 2, name: "Bob" },
{ id: 3, name: "Charlie" }
];
// targetUser を取得してください
console.log(targetUser);
解答例
const targetUser = users.find(user => user.id === 2);
console.log(targetUser);
問題6: some を使って条件に合う要素があるか確認
以下の配列 numbers に、10 以上の数が含まれているかを判定し、
hasLargeNumber に true または false を格納してください。
その結果をコンソールで表示させてください。
const numbers = [4, 7, 9, 2, 15];
// hasLargeNumber を作成してください
console.log(hasLargeNumber);
解答例
const hasLargeNumber = numbers.some(num => num >= 10);
console.log(hasLargeNumber);
問題7: every を使ってすべての要素が条件を満たすか確認
以下の配列 ages がすべて 18 以上かを判定し、
allAdults に true または false を格納してください。
その結果をコンソールで表示させてください。
const ages = [20, 25, 30, 18, 17];
// allAdults を作成してください
console.log(allAdults);
解答例
const allAdults = ages.every(age => age >= 18);
console.log(allAdults);
問題8: sort を使って数値の配列を昇順に並べ替え
以下の配列 numbers を昇順にソートし、新しい配列 sortedNumbers を作成してください。
その結果をコンソールで表示させてください。
const numbers = [25, 10, 5, 40, 30];
// sortedNumbers を作成してください
console.log(sortedNumbers);
解答例
const sortedNumbers = [...numbers].sort((a, b) => a - b);
console.log(sortedNumbers);
問題9: Object.keys を使ってオブジェクトのキーを取得
以下のオブジェクトのすべてのキーを取得し、配列 keys として出力してください。
const person = { name: "Ken", age: 30, city: "Osaka" };
// keys を作成してください
console.log(keys);
解答例
const keys = Object.keys(person);
console.log(keys);
問題10: Promise を使って非同期処理を実装
1秒後に "Hello, World!" をコンソールに表示する Promise を作成してください。
function delayedMessage() {
// delayedMessage を作成してください
}
delayedMessage().then(message => console.log(message));
解答例
function delayedMessage() {
return new Promise(resolve => {
setTimeout(() => resolve("Hello, World!"), 1000);
});
}
delayedMessage().then(message => console.log(message));
【まとめ】
いくつ解けましたでしょうか？？
より効率的な方法やご指摘があればコメントいただければ幸いです！
📌 関連問題集
💡 各関数特化の問題集はこちら
- ▼
mapの詳しい解説はこちら
すぐに追加します🙇（当記事はそのままお読みいただけます）
-▼ filterの詳しい解説はこちら
すぐに追加します🙇（当記事はそのままお読みいただけます）
-▼ reduceの詳しい解説はこちら
すぐに追加します🙇（当記事はそのままお読みいただけます）
- ▼JavaScript の非同期処理 (Promise, async/await)