ホームページ >ウェブフロントエンド >jsチュートリアル >Array[index] に対する Array.at() の使用
この記事では、配列要素にアクセスする際に、Array.prototype.at()
よりも Array[index]
の方が理想的である理由を探ります。
以前は、配列要素にアクセスする場合、Array[index]
などの Array[1]
を使用していました。これは私がよく知っていることであり、配列要素を取得する方法を学んだ方法です。
しかし、最近コードレビューで同僚が「インデックスを直接使用する代わりに、Array.prototype.at()
を使用しないのはなぜですか?」と質問しました。
<code class="language-javascript">const element = arr[1];</code>彼は次のように変更することを提案しました:
<code class="language-javascript">const element = arr.at(1);</code>このアプローチは非常にシンプルで直感的に見えるので、私にとって際立っています。
は引数として整数を受け取り、配列内の対応する要素を返します。 Array.prototype.at()
<code class="language-javascript">const arr = ["One", "Two", "Three"];</code>電話:
<code class="language-javascript">arr.at(0); // 返回 "One"</code>これは角括弧表記
に相当します。何が違うの?と疑問に思われるかもしれません。次に、このアプローチを使用する利点について詳しく説明します。 array[0]
の代わりに Array.prototype.at()
を使用する必要があるいくつかのシナリオを見てみましょう。 Array[index]
<code class="language-javascript">const sports = ["basketball", "baseball", "football"];</code>配列の最後の要素「フットボール」を取得するには、次のように記述できます:
<code class="language-javascript">const lastElement = sports[sports.length - 1];</code>これは正しいアプローチですが、
メソッドを使用するとより簡潔に記述することができます。
Array.prototype.at()
<code class="language-javascript">const lastElement = sports.at(-1);</code>
型推論
undefined
<code class="language-typescript">const arr: string[] = []; const element = arr[0]; console.log(element); // undefined</code>の型は、
ではなく element
として推論されます。 string
string | undefined
このコードを書くときに TypeScript がコンパイル エラーを起こすことが予想されます。
通常、アクセスされる配列要素が存在することを確認する必要があります。
奇妙なのは、TypeScript が
<code class="language-typescript">const arr: string[] = []; const element = arr[0]; if (typeof element === 'string') console.log(element);</code>として推論する要素の型をチェックしていることです。
string
型アサーションの使用を考えるかもしれません:
しかし、完璧なコードを書くことを自分自身に課すべきではないため、これは理想的ではありません。
<code class="language-typescript">const element: string | undefined = arr[0];</code>
この問題を解決するには、次の 2 つのアプローチを取ることができます:
書き込み型保護機能
noUncheckedIndexedAccess
Array.prototype.at()
<code class="language-typescript">const arr: string[] = []; const element = arr.at(0); // string | undefined console.log(element);</code>の別の値に
を挿入しようとすると、コンパイル エラーが発生します: element
<code class="language-javascript">const element = arr[1];</code>
Array.prototype.at()
を使用して、よりクリーンなコードを作成し、余分な関数や構成の追加を避けます。
Array.prototype.at()
Mozilla Developer Network の説明: リンク (実際のリンクに置き換えてください)
以上がArray[index] に対する Array.at() の使用の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。