こんにちはフロントエンドエンジニアのまさにょんです！
今回は、JavaScriptのmapメソッドで、条件分岐とundefinedを消す処理をする方法について解説していきます。
目次
mapメソッドで条件分岐&returnとundefinedを消す処理をする方法
JavaScriptのmapメソッドで条件分岐 & returnを使用した際は、条件に一致しない場合のreturnを明示しないとundefined が配列に返ります。
そこで、mapメソッドの実行結果の配列の中から、undefinedを消して、新しい配列を作成するSampleCodeを紹介します。
const numbers = [1, 2, 3, 4, 5];
// 1. 2の倍数だけ、加工処理をして配列に追加する
const filterNumbers = numbers.map((num) => {
if (num % 2 === 0) {
return `2の倍数: ${num}`;
}
});
console.log('filterNumbers', filterNumbers);
// filterNumbers (5) [undefined, '2の倍数: 2', undefined, '2の倍数: 4', undefined]
// 2. 配列の中から、undefinedを消して、新しい配列を作成する
const prettyNumbers = filterNumbers.filter(num => num !== undefined);
console.log('prettyNumbers', prettyNumbers);
// prettyNumbers (2) ['2の倍数: 2', '2の倍数: 4']関連記事
JavaScript書籍 Ver. 中級-上級者向け
JavaScript書籍 Ver. 初級者向け
Twitterやってます！Follow Me！
神聖グンマー帝国の逆襲🔥
神聖グンマー帝国の科学は、世界一ぃぃぃぃぃぃ！！！！！
最近の投稿
【SQL】1回のINSERTで、複数行のレコードを一括挿入・一括追加する方法
JavaScriptでランダムなuuidを作成する方法(randomUUIDの使い方)
PythonでCSVをJSONに変換する方法
PythonでCSV・Dataframeを指定の行数まで切り取る方法
JavaScript(TypeScirpt)のfor-of文でindexの値も取得する方法と、Type IterableIteratorエラーの解決方法
VSCode上のPython import文の「インポート “XXXXX” をソースから解決できませんでした」エラーの解決方法
