JavaScript の find メソッドで要素が見つからない場合をエレガントに処理する

この記事は、JavaScript で Array.prototype.find メソッドを使用するときにターゲット要素が見つからない場合に発生する可能性がある未定義エラーを解決することを目的としています。 OR 演算子、オプションの連鎖演算子、および null 合体演算子を使用してこの状況を適切に処理する方法を示し、デモ用のサンプル コードを提供します。

JavaScript の Array.prototype.find メソッドを使用する場合、提供されたテスト関数を満たす要素が配列内にない場合、find メソッドは未定義を返します。未定義のプロパティに直接アクセスするとエラーが発生します。これを回避するには、find メソッドにアクセスする前に、その結​​果が未定義でないことを確認する必要があります。いくつかの処理方法を次に示します。

1. OR 演算子 (||) を使用します。

OR 演算子を使用すると、find メソッドが未定義を返したときに使用されるデフォルト値を指定できます。この例では、空の array[] をデフォルト値として使用します。

 const 人 = {
    グループA : ['エイミー','ベス'],
    グループB : ['ベン','マット'],
    グループC : ['ジェン'、'イーライ']
};

let Person = (Object.entries(People).find(([,values])=>values.includes('Ele')) || [])[0];

console.log(人); // 出力: 未定義

find メソッドで「Ele」を含むグループが見つからない場合は、unknown が返されます。 OR 演算子は未定義を [] に置き換えるため、[][0] の結果は未定義となり、エラーが回避されます。

2. オプションの連鎖演算子 (?.) を使用します。

オプションの連鎖演算子を使用すると、null または未定義の可能性があるプロパティにアクセスするときに安全に操作できます。演算子の左側の値が null または unfineed の場合、式はショートサーキットし、エラーをスローせずに unknown を返します。

 const 人 = {
    グループA : ['エイミー','ベス'],
    グループB : ['ベン','マット'],
    グループC : ['ジェン'、'イーライ']
};

let Person = Object.entries(People).find(([,values])=>values.includes('Ele'))?.[0];

console.log(人); // 出力: 未定義

find メソッドが unknown を返した場合、unknown?.[0]は、未定義のプロパティにアクセスしようとすることを回避し、未定義を直接返します。

3. NULL 値合体演算子 (??) を使用します。

null 合体演算子 (??) は、null または未定義の値を処理する簡潔な方法を提供します。左側のオペランドが null または未定義の場合は、右側のオペランドが返されます。それ以外の場合は、左のオペランドが返されます。

 const 人 = {
    グループA : ['エイミー','ベス'],
    グループB : ['ベン','マット'],
    グループC : ['ジェン'、'イーライ']
};

let Person = (Object.entries(People).find(([,values])=>values.includes('Ele')) ?? [])[0];

console.log(人); // 出力: 未定義

OR 演算子と同様に、find メソッドが未定義を返した場合、null 合体演算子はエラーを避けるために未定義を [] に置き換えます。

要約する

JavaScript で Array.prototype.find メソッドを使用する場合は、要素が見つからない場合に必ず対処してください。 OR 演算子、オプションの連鎖演算子、および null 合体演算子はすべて、この状況に対処する効果的な方法です。どの方法を選択するかは、特定のコーディング スタイルとニーズによって異なります。オプションの連鎖演算子と null 結合演算子を使用することをお勧めします。これらの演算子のほうが簡潔で理解しやすく、最新の JavaScript コーディング規約との整合性が高いためです。

以上がJavaScript の find メソッドで要素が見つからない場合をエレガントに処理するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。