VanillaJavaScriptを使用して配列の最後の要素を取得する方法

3つの異なる方法を使用して、プレーンJavaScriptで配列の最後の要素を取得する方法を学びましょう。まず、アイテムの配列を設定して、作業するものを用意します。この場合、演習のリストを使用します。

エクササイズ配列を作成

const exercises = ['pull-up', 'push-up', 'squat', 'deadlift']

リストの最初のものを取得する場合は、exercises[0]を使用します 、2番目の使用を取得するにはexercises[1] しかし、リストにある運動の総数がわからない場合はどうなりますか？

問題ありません。それを行う方法はいくつかあります。

1。 array.length

最初の方法では、JavaScriptのarray.lengthを使用します 財産。これを使用するには、最初に変数を設定してから、配列をそれに割り当てる必要があります。

const lastExercise = exercises[exercises.length - 1]

ここで、console.log(lastExercise)を実行すると コンソールは配列の最後の要素（彼の場合はdeadlift）を出力します 。

2。 pop（）を使用して最後の要素を検索する

pop()と呼ばれるJavaScript配列メソッドを使用することもできます これも配列の最後の要素を取得しますが、方法は異なります。試してみてください：

exercises.pop()

pop（）メソッドは実際に配列の最後の要素を対象としていますが、配列の最後の要素を見つけるだけでなく、削除することに注意してください。

console.log(exercises)の場合 exercises.pop()のすぐ下 配列には、元の4つではなく3つの要素が含まれていることがわかります。これは、ユースケースに応じて、必要な要素である場合とそうでない場合があります。

3。 Arrayslice（）メソッドで最後の要素を検索する

最後に紹介したい方法は、lengthに似ています。 メソッドですが、ここではslice()を使用します 代わりに、次のようになります：

const lastExercise = exercises.slice(-1)

ここで、console.log(lastExercise) lengthと同じ結果が得られます 例。多くの開発者はsliceを見つけます lengthよりも読みやすい方法 方法ですが、残念ながらはるかに遅い パフォーマンス面で。

私が何を意味するかを確認するには、jsperf.comでこのスライスと長さの比較テストを実行してみてください

では、最もパフォーマンスの高い、または最も読みやすい配列メソッドを使用する必要がありますか？正解も不正解もありません。状況によって異なります。

一般に、私は経験則として、利便性よりもパフォーマンスを選択することに引き寄せられる傾向があります。画像を操作するとき。しかし、それは白黒の質問ではありません。単純な配列の最後の要素を見つけるという点では、slice間のパフォーマンスの違いに気付くことさえありません。 およびlength 1秒間に数百万の関数を実行している場合を除き、アプリで。

常にコンテキストに基づいて決定を下します。