map()を利用すると、元になった配列の要素を順番に処理していき新しい配列を生み出すことができます。mapは元になった配列を変更しません。
/** * 2乗する */ const list = [1, 2, 3, 4, 5] const newlist = list.map( value => value * value) // [1, 4, 9, 16, 25] console.log(newlist)
mapはよくforEachと比較されますが、forEachは戻り値を返さない特徴があります。戻り値を利用しない場合はforEachを使った方が一般的に高速に処理が行なえます。
利用例
データ型を変換する
すべての要素にNumber()関数を通して文字列型を整数へと変換します。
const str = ['10', '20', '30'] const num = str.map( value => Number(value) ) // [ 10, 20, 30 ] console.log(num)
すべて大文字/小文字に変換する
toLowerCase()ですべて小文字、toUpperCase()ですべて大文字に変換できますので、これをmapですべての要素に適用します。
const list = ['Apple', 'Orange', 'Banana'] const lower = list.map( value => value.toLowerCase()) const upper = list.map( value => value.toUpperCase()) console.log(lower) // ['apple', 'orange', 'banana'] console.log(upper) // ['APPLE', 'ORANGE', 'BANANA']
空文字列をundefineに変換する
空文字列だけを変換する例です。元の値を変更したくない場合はそのままreturnしてやります。
const list = ['Apple', '', 'Banana'] const newlist = list.map( value => (value === '')? undefined:value) // ['Apple', undefined, 'Banana'] console.log(newlist)
querySelectorAllの戻り値を順番に処理する
document.querySelectorAll()の戻り値をスプレッド構文で一般的な配列に変換することで、取り出したHTMLを順番に処理することができます。
以下ではliの中の文字列を配列として取り出しています。
<ul> <li>Apple</li> <li>Orange</li> <li>Banana</li> </ul> <script> const list = [...document.querySelectorAll('ul li')].map( (elem) => elem.textContent ) // ["Apple", "Orange", "Banana"] console.log(list) </script>
なおforEachで同様の処理を書くと次のようになります。mapを利用した場合は一発で代入できますが、forEachは戻り値を返さないため予め結果を格納するための変数を用意しておく必要があります。
const result = [ ] document.querySelectorAll('ul li').forEach( (elem) => result.push(elem.textContent) )
