1. Array.prototype.map()
配列要素を変換処理して新配列を生成
商品オブジェクトから価格リストを抽出
const products = [{ name: 'Laptop', price: 1200 }, { name: 'Phone', price: 800 }];
const prices = products.map(product => product.price);2. Array.prototype.filter()
条件を満たす要素で新配列を作成
在庫あり商品のみ抽出
const inventory = [{ name: 'Book', stock: 5 }, { name: 'Pen', stock: 0 }];
const available = inventory.filter(item => item.stock > 0);3. Array.prototype.reduce()
配列要素を累積処理して単一値を返却
注文アイテムの合計数量計算
const orderItems = [{ quantity: 2 }, { quantity: 3 }];
const totalQty = orderItems.reduce((acc, item) => acc + item.quantity, 0);4. Array.prototype.forEach()
各要素に対して関数を実行
ナビゲーション項目にクリックイベント追加
document.querySelectorAll('.nav-item').forEach(navItem => {
navItem.addEventListener('click', highlightActive);
});5. Array.prototype.find()
条件に合致する最初の要素を取得
特定IDの商品を検索
const products = [{ id: 'P100', name: 'Keyboard' }, { id: 'P101', name: 'Mouse' }];
const product = products.find(p => p.id === 'P100');6. Array.prototype.some()
条件を満たす要素の存在確認
未入力フォームフィールドのチェック
const formValues = ['John', '', 'Doe'];
const isEmpty = formValues.some(val => val.trim() === '');7. Array.prototype.every()
全要素が条件を満たすか検証
パスワード複雑性要件の検証
const passwordChecks = [true, false, true];
const isValid = passwordChecks.every(check => check);8. Array.prototype.includes()
配列に特定値が含まれるか判定
管理者権限の確認
const permissions = ['read', 'write'];
const hasAdmin = permissions.includes('admin');9. String.prototype.split()
文字列を指定区切りで配列変換
CSVデータのパース
const csvData = 'apple,orange,banana';
const fruits = csvData.split(',');10. String.prototype.trim()
文字列両端の空白除去
検索クエリの正規化
const searchTerm = ' JavaScript ';
const normalized = searchTerm.trim();11. Object.keys()
オブジェクトのキー一覧取得
設定オプションの一覧表示
const config = { theme: 'dark', notifications: true };
const keys = Object.keys(config);12. JSON.parse()
JSON文字列をオブジェクト変換
ローカルストレージデータの復元
const storedData = localStorage.getItem('userSettings');
const settings = JSON.parse(storedData);13. JSON.stringify()
オブジェクトをJSON文字列変換
APIリクエスト用データ変換
const requestData = { userId: 123, action: 'update' };
const jsonPayload = JSON.stringify(requestData);14. document.querySelector()
CSSセレクタに一致する最初の要素取得
モーダルクローズボタンの取得
const closeBtn = document.querySelector('.modal-close');
closeBtn.addEventListener('click', closeModal);15. addEventListener()
DOM要素にイベントハンドラ登録
フォーム送信イベントの処理
document.forms['userForm'].addEventListener('submit', handleSubmit);16. setTimeout()
遅延実行関数を設定
通知メッセージの自動消去
setTimeout(() => {
document.getElementById('notification').style.display = 'none';
}, 3000);17. fetch()
ネットワークリクエスト実行
天気情報APIの呼び出し
fetch('https://weather-api.com/data')
.then(res => res.json())
.then(displayWeather);18. Array.prototype.sort()
配列要素をソート
価格順に商品を並べ替え
const products = [{ price: 20 }, { price: 15 }];
products.sort((a, b) => a.price - b.price);19. Array.prototype.slice()
配列の一部を抽出
検索結果のページネーション
const allResults = getSearchResults();
const pageResults = allResults.slice(10, 20);20. Math.random()
0から1の乱数生成
おすすめ商品のランダム表示
const featuredProducts = getProducts();
const randomProduct = featuredProducts[Math.floor(Math.random() * featuredProducts.length)];21. Object.values()
オブジェクトの値一覧取得
ユーザーデータの表示
const user = { name: 'Sato', age: 30 };
const userValues = Object.values(user);22. Object.entries()
オブジェクトのキーバリューペア取得
設定項目の一括更新
const settings = { theme: 'light', fontSize: 16 };
Object.entries(settings).forEach(([key, value]) => updateSetting(key, value));23. String.prototype.includes()
文字列に部分文字列が含まれるか判定
エラーメッセージの特定文字列検出
const errorMessage = 'Invalid email format';
const isEmailError = errorMessage.includes('email');24. String.prototype.replace()
文字列の置換処理
ユーザー入力のサニタイズ
const userInput = '<script>alert()</script>';
const sanitized = userInput.replace(/<script>.*?<\/script>/g, '');25. Array.prototype.push()
配列末尾に要素追加
リアルタイム通知の追加
const notifications = [];
notifications.push('New message received');26. Array.prototype.pop()
配列末尾要素の削除
操作履歴の取り消し
const history = ['action1', 'action2'];
const lastAction = history.pop();27. setInterval()
定期実行関数を設定
リアルタイムデータの更新
setInterval(fetchLiveData, 5000);28. clearTimeout()
遅延実行のキャンセル
ユーザー操作時のタイマー解除
const timer = setTimeout(showAd, 10000);
document.addEventListener('click', () => clearTimeout(timer));29. Array.prototype.join()
配列要素を結合して文字列生成
タグリストの表示形式変換
const tags = ['frontend', 'javascript', 'web'];
const tagString = tags.join(', ');30. Array.prototype.findIndex()
条件に合致する要素のインデックス取得
カート内商品の位置特定
const cartItems = [{ id: 101 }, { id: 102 }];
const itemIndex = cartItems.findIndex(item => item.id === 102);