Array[index] に対する Array.at() の使用

この記事では、配列要素にアクセスする際に、Array.prototype.at() よりも Array[index] の方が理想的である理由を探ります。

モチベーション

以前は、配列要素にアクセスする場合、Array[index] などの Array[1] を使用していました。これは私がよく知っていることであり、配列要素を取得する方法を学んだ方法です。

しかし、最近コードレビューで同僚が「インデックスを直接使用する代わりに、Array.prototype.at() を使用しないのはなぜですか?」と質問しました。

私のコードは次のとおりです:

const element = arr[1];

彼は次のように変更することを提案しました:

const element = arr.at(1);

このアプローチは非常にシンプルで直感的に見えるので、私にとって際立っています。

Array.prototype.at() の使用方法

は引数として整数を受け取り、配列内の対応する要素を返します。 Array.prototype.at()

たとえば、配列の場合:

const arr = ["One", "Two", "Three"];

電話:

arr.at(0); // 返回 "One"

これは角括弧表記

に相当します。何が違うの?と疑問に思われるかもしれません。次に、このアプローチを使用する利点について詳しく説明します。 array[0]

Array[index] が理想的ではないのはなぜですか?

の代わりに Array.prototype.at() を使用する必要があるいくつかのシナリオを見てみましょう。 Array[index]

配列の最後の要素を取得します

文字列の配列があるとします:

const sports = ["basketball", "baseball", "football"];

配列の最後の要素「フットボール」を取得するには、次のように記述できます:

const lastElement = sports[sports.length - 1];

これは正しいアプローチですが、

メソッドを使用するとより簡潔に記述することができます。 Array.prototype.at()

読みやすくなりましたか？

const lastElement = sports.at(-1);

型推論

TypeScript では、角かっこ表記は型推論に

を含みません。

undefined

const arr: string[] = [];
const element = arr[0];
console.log(element); // undefined

の型は、

ではなく element として推論されます。 string string | undefinedこのコードを書くときに TypeScript がコンパイル エラーを起こすことが予想されます。

通常、アクセスされる配列要素が存在することを確認する必要があります。

奇妙なのは、TypeScript が

const arr: string[] = [];
const element = arr[0];
if (typeof element === 'string') console.log(element);

として推論する要素の型をチェックしていることです。

string型アサーションの使用を考えるかもしれません:

しかし、完璧なコードを書くことを自分自身に課すべきではないため、これは理想的ではありません。

const element: string | undefined = arr[0];

この問題を解決するには、次の 2 つのアプローチを取ることができます:

書き込み型保護機能

コンパイラ オプションを使用します
2. noUncheckedIndexedAccess
どちらの方法もうまく機能しますが、

を使用する場合は両方を行う必要はありません。

Array.prototype.at()

型

const arr: string[] = [];
const element = arr.at(0); // string | undefined
console.log(element);

の別の値に

を挿入しようとすると、コンパイル エラーが発生します: element

const element = arr[1];

結論

Array.prototype.at() を使用して、よりクリーンなコードを作成し、余分な関数や構成の追加を避けます。

Array.prototype.at() Mozilla Developer Network の説明: リンク (実際のリンクに置き換えてください)

以上がArray[index] に対する Array.at() の使用の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。