【JavaScript】人生いろいろ 配列操作もいろいろ ～初級編～

こんにちは、どいこです。

タイトル、島倉千代子を意識しましたが語呂が悪い。
（♪人生いろいろ　男もいろいろ～）

今回はJavaScriptの配列操作のメソッドと
それを使った関数の例を取り上げていきます。

※「処理の流れ」はイメージしやすさを考慮して書いたため
　 厳密にいうと実際の処理順とは異なる場合があります。

#findIndex()

findIndex() メソッドは、配列内の指定されたテスト関数を満たす最初の要素の位置を返します。
テスト関数を満たす要素がない場合を含め、それ以外の場合は -1 を返します。
Array.prototype.findIndex() -MDN web docs

##関数例
配列arrayの中から指定した文字charを部分文字列として持つ
最初の要素のインデックスを返す
ただし、配列の中に該当する要素が見つからなかった場合は-1を返す

function findIndexOfIncludeChar(array, char) {
  const result = array.findIndex(item => {
      return item.includes(char)
    })
  return result
}

###処理の流れ
①　findIndex()で配列の要素を頭から順番にチェック
②　includes()で要素をチェック ⇒ char（該当の文字）が含まれる場合はtrueが返される
③　trueの場合は該当する要素のインデックスを返し処理を終了
　　含まれる要素が見つからなかった場合は-1が返される

#filter()

filter() メソッドは、与えられた関数によって実装されたテストに合格したすべての配列からなる
新しい配列を生成します。
Array.prototype.filter() -MDN web docs

##関数例
与えられた配列arrayの要素から
偶数のみを取り出して新しい配列を返す
偶数値がなかった場合は空の配列を返す

function filterEvenNumber(array) {
  const evenValue = 2
  const result = array.filter(value => {
    return value % evenValue === 0
  })
  return result
}

###処理の流れ
①　filter()で配列の要素を順番にチェック
②　偶数（2で割り切れる値）だった場合はtrueとなり新しい配列に追加される
　　奇数だった場合はfalseとなりスキップされる
③　チェックが終わったら新しい配列を返す

#map()

map() メソッドは、与えられた関数を配列のすべての要素に対して呼び出し
その結果からなる新しい配列を生成します。
Array.prototype.map() -MDN web docs

##関数例
配列arrayの各要素の値を2倍した新しい配列を返す

function multiplyDouble(array) {
  const doubleValue = 2
  const result = array.map(value => {
    return value * doubleValue
  })
  return result
}

###処理の流れ
①　map()で配列の要素に対して順番に処理を行う（値に2をかける）
②　処理を行うごとに処理後の値が新しい配列に追加される
③　処理が終わったら新しい配列を返す

#あとがき
よく使うであろう配列操作のメソッドを取り上げてみました。
次回は中級編と題して、少し難易度が上がるものを紹介する予定です。

記事を読んでいただいて、「こう書いた方がわかりやすいのでは？」などアドバイスありましたら
お気軽に頂けると幸いです。
（言い方は優しくしてくれると喜びまする ）

お読みいただき、ありがとうございました◎