JavaScriptでのArray.findメソッドの使用

投稿日: 2022-04-20 2022-10-07
タグ: javascript

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

Array.findを使用する場合

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

したがって、単一の値のみが必要な場合は、 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 }

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

結論

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

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

getdocs

13036