こんにちは！
今日もモダン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得点とってました‥。
もうこんな選手現れないんでしょうねえ。。。