0歳の俺がモダンJavaScriptを勉強する③

こんにちは！
今日もモダンJavaScriptについて学んだことをアウトプットしていきたいと思います。

mapやfilterを使った配列の処理

従来の処理

const specialSkills = ['無量空処', '自閉円頓裹', '嵌合暗翳庭', '伏魔御厨子', '蓋棺鉄囲山'];
for (let index = 0; index < specialSkills.length; index++){
  console.log(specialSkills[index]);
};

配列の中の要素を取得したり、表示させたい時は従来ではfor文を利用していました。

##　mapを利用した配列の処理

const specialSkills = ['無量空処', '自閉円頓裹', '嵌合暗翳庭', '伏魔御厨子', '蓋棺鉄囲山'];
specialSkills.map((specialSkill)　=> console.log(specialSkill));

mapはアロー関数を利用して、引数の中に配列の一つ一つの要素を取得することができます。
アロー関数で記述を省略ができるので、for文で配列を処理するよりも構文がスッキリしましたね。

Rubyでもmapメソッドってあるので、使ってみました。

specialSkills = ['無量空処', '自閉円頓裹', '嵌合暗翳庭', '伏魔御厨子', '蓋棺鉄囲山']
specialSkills.map{|specialSkill| puts specialSkill}

irbで試してみるとうまく出力されました！！
僕、Rubyのmapメソッドってpaizaのスキルチェックでしか使ったことないんですよね。
しかも入力された値を数値に変える時だけ使ってました。
モダンJavaScriptを学習する中で、Rubyのメソッドと関連付けて学習ができているので非常に楽しいです。

##filterを使った配列の処理

const numbers = [1,2,3,4,5];
const newNumbers = numbers.filter((number) => {
  return number % 2 === 1;
})
console.log(newNumbers);

filterは条件に合致したものを処理することができます。
上記の例だと、newNumbersと言う配列を新しく用意しnumbersの中で奇数のものだけをnewNumbersに格納していきます。

三項演算子

三項演算子は別にES2015で追加されたものでもないらしいですが、Reactでよく使うそうなので学習していきたいと思います！

const num = 1 < 0 ? 'trueです': 'falseです'; 
console.log(num)

出力結果

条件式　? trueの処理: falseの処理;
と書くことでif、elseみたいなことを1行にまとめれるので便利ですね。

次は関数内で三項演算子を利用する方法です。
メッシのあるシーズンの記録です。メッシはリーグ戦とカップ戦の合計が70得点以上だとtrueの処理をして、70以下だとfalseの処理を返します。
まあ、あのレベルの相手に対してシーズン通して70得点取るとかバケモン以外無理ですからね。
流石のメッシでも無理でしょ。

const messiScore = (reague, cup) => {
  return reague + cup > 70 ? 'メッシ気持ちいい〜〜':'不調のメッシです';
}

console.log(messiScore(50,23));

出力結果

メッシすげえ‥。
実際2011-2012シーズン（バルセロナの時）のメッシは73得点とってました‥。
もうこんな選手現れないんでしょうねえ。。。