JavaScript Array.findメソッドは、findを実行し、定義されたテスト関数の下で配列内の要素の最初の出現を返す便利な方法です。 干し草の山からシングルの針が必要な場合は、find()に手を伸ばしてください!

Array.findを使用する場合

find()の関数と構文は、 single 要素のみを返すことを除いて、Array.filterメソッドと非常によく似ています。 もう1つの違いは、何も見つからない場合、このメソッドはundefinedの値を返すことです。

したがって、必要な値が1つだけの場合は、find()を使用してください。 複数の値を検索/返す必要がある場合は、代わりにfilter()にアクセスしてください。

Array.findの使用方法

find()の使い方はとても簡単です! このメソッドに必要な唯一のパラメーターはテスト関数であり、必要に応じて単純または複雑にすることができます。 最も基本的な形式:

array.find(testingFunction); // that's it!

簡単な例:

文字列の配列を使用した簡単な例を次に示します。

const trees = [ 
  "birch", 
  "maple", 
  "oak", 
  "poplar" 
];

const result = trees.find(tree => tree.startsWith("m"));

// "maple"

非短縮形、非ES6形式:

const result = trees.find(function(tree) {
  return tree.startsWith("m");
});

// "maple"

オブジェクトでの使用:

find()を使用して、オブジェクトの配列を簡単に検索することもできます。

const trees = [
  { name: "birch", count: 4 },
  { name: "maple", count: 5 },
  { name: "oak", count: 2 }
];

const result = trees.find(tree => tree.name === "oak");

// { name: "oak", count, 2 }

同じ例を使用して、テストに複数の結果がある場合にfind()を使用すると、最初に見つかった値のみが取得されることに注意してください。

const result = trees.find(tree => tree.count > 2);

// { name: "birch", count: 4 }

これは、おそらく代わりにfilter()を使用する必要があるインスタンスです。 違いを見ます?

ヒント:テスト機能を分離する

同じfind()テスト機能を複数の場所で再利用したい場合があります。 その場合、別のテスト関数を作成すると非常に役立ちます。

前の例を拡張して、この手法のデモを行いましょう。

const deciduous = [
  { name: "birch", count: 4 },
  { name: "maple", count: 5 },
  { name: "oak", count: 2 }
];

const evergreens = [
  { name: "cedar", count: 2 },
  { name: "fir", count: 6 },
  { name: "pine", count: 3 }
];

// our testing function
const hasFiveOrMore = el => el.count >= 5;

const decResult = deciduous.find(hasFiveOrMore);
// { name: "maple", count: 5 }

const evgResult = evergreens.find(hasFiveOrMore);
// { name: "fir", count: 6 }

シンプルだがパワフル! 💪

インデックスパラメータの使用

filter()と同様に、使用できるオプションのindexパラメーターがあります。 これが最後の例で、テスト関数の一部として使用しています。

const evergreens = [
  { name: "cedar", count: 2 },
  { name: "fir", count: 6 },
  { name: "pine", count: 3 }
];

// suppose we need to skip the first element
const result = evergreens.find((tree, i) => {
  if (tree.count > 1 && i !== 0) return true;
});

// { name: "fir", count: 6 }

indexは、おそらく頻繁に必要になるものではありませんが、時々利用できるのは素晴らしいことです。

結論

Array.findは、JavaScript配列を検索するためのシンプルですが、非常に便利な方法です。 これは、配列で使用できるいくつかの便利なメソッドの1つです。より完全なガイドについては、 JavaScriptで配列メソッドを使用する方法:反復メソッドを参照してください。

覚えておいてください。single要素を返したい場合にのみfindを使用し、何も見つからない場合はundefinedを返します。 それ以外の場合、複数の要素を返す必要がある場合は、filterメソッドを使用してください。