過去の記憶が断片的になってきたと感じる、脳筋フロントエンドエンジニアのザワです。地道な積み重ねでなんとかカバーしていきたいものです。
さて、よちよち進んでいますArrayシリーズ。今回は、Array.prototype.find編です。
find……って、これまた何をするのか名前から簡単に想像できそうですね。
はい、そうです。「見つける」です。
findメソッドを学んでいく中で何かしらを見つけて、未来への何かしらの糧になればと思っています。それでは元気に進めていきましょう！
※ここからの説明は個人的に調べて解釈したざっくりとした説明になります。詳しく知りたい方はこちらへどうぞ。
Array.prototype.find()メソッドとは
配列の中から目的の要素を見つけるメソッドです。
要素が見つかれば要素の値を返し、見つからなければundefinedが返ってきます。
実装例文
さっそく例文です。
See the Pen Array.prototype.find() sample1 by Zawa (@sowork) on CodePen.
結果として36という値がコンソールログに表示されました。
ageList変数には、4つの数値が格納されています。年齢リストといったところでしょうか。
suspect変数には、そのageListの中から、30歳より上、40歳未満の条件式に一致した要素の値が格納されています。suspect、どうやら容疑者を探している様子ですね。リストに上がった4名の中で、36歳の人物が疑わしい、というところまでは探すことができました。
第2引数を使ってみる
物語はさておき、findメソッドにはコールバック関数を引数として渡しています。コールバック関数は配列の各要素に対して行われ、3つの引数を取ることができます。第1引数に配列の要素、第2引数にインデックス、第3引数に呼び出した配列……この例文だとageList変数に格納されている配列ですね。
findメソッドには、コールバック関数のほかに、コールバック関数内でthisとして使用されるオブジェクトを第2引数として取ります。
物語に戻りますと、名前と年齢が記載された容疑者リストが新たに発見された模様です。容疑者リストの中に36歳の人物が存在するのか、そして、名前まで見つけ出すことができるのか？
次の例文を見ていきましょう。
See the Pen Array.prototype.find() sample2 by Zawa (@sowork) on CodePen.
36歳の容疑者の名前が分かりました。「zawa」という人物らしいです。
これで事件解決、かと思いきや……偶然にも4名の容疑者の名前がすべて同じだったため、捜査は迷宮入りしたとさ。。。
終わりに
夢の中の出来事だったのか、刑事ドラマを見た影響なのかは不確かですが、どうやら、過去の自分も未来の自分も自分であることに違いはない、ということがわかりました。
未来の自分はまだundefinedですが、地道に生きていくことにします。
それでは良い制作ライフを！ ザワでした。
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
