[JavaScript] 配列の全要素に処理を行い新しい配列を作成する – map()

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) )

参考ページ

• Array.prototype.map() – JavaScript | MDN
• Document.querySelectorAll() – Web API | MDN
• スプレッド構文 – JavaScript | MDN

このブログを応援する

お寄せいただいたお気持ちは全額サーバ代や次の記事を執筆するための原資として活用させていただいております。この記事が参考になった場合などぜひご検討ください。

PayPalで300円支払う
※金額は任意で変更できます。
※100円でも泣いて喜びますw
※住所の入力欄が現れた場合は「no needed」を選択ください
これまでのご協力者さま

- Sponsored Link -