LINDORのAdvent Calendar(本物)の4日目を開けたところ。
配列とかおれおれAdvent Calendar2018 – 04日目

その名の通り find() で見つける (find) ことができます。

オブジェクトの配列相手に使うのが普通。

const users = [
  { id: '101', name: 'Alice' },
  { id: '102', name: 'Bob' },
  { id: '103', name: 'Charlie' },
];

const id = '102';
const targetUser = users.find((v) => v.id === id);
console.log(targetUser);
// => { id: '102', name: 'Bob' }

仕様

配列のこれ系のメソッドと同じです。

find() は引数に、関数オブジェクトをひとつ受け取ります。 その関数が最初に true (ないし truthy なもの)を返した際の要素を返します。

与える関数は、3つの引数が与えられます。 また前述のように boolean 値を返してください。

  • value … 配列の要素
  • index … インデックス
  • array … 操作中の配列本体

戻り値

条件に合致した要素があればそれを返します。

なければ undefined です。

細かいところ

  • 先頭から順に呼ばれる
  • 繰り返しの途中で配列の要素が変更されると、変更後の値で呼ばれる
  • 繰り返しの途中で配列の要素数が変更されても、元の回数だけ呼ばれる。削除された要素は undefined として呼ばれる
  • 第2引数にオブジェクトを与えると、コールバック関数の this として利用できる(もちろんこれはアロー関数には影響しない)
  • 22.1.3.8 Array.prototype.find ( predicate [ , thisArg ] )

その他のメソッド

「ひとつ見つける」以外の用途に合うメソッドがあるので、それぞれ使い分けよう。

全部探すなら filter()

条件に合うひとつじゃなくて全部を配列で返してくれます。 見つからなかったら空の配列。

const targetUsers = users.filter((v) => v.active);
console.log(targetUsers.length);

位置を探すなら findIndex()

削除したいとかそういう目的でインデックスが欲しい場合は、 findIndex() というのもあります。

const users = [
  { id: '101', name: 'Alice' },
  { id: '102', name: 'Bob' },
  { id: '103', name: 'Charlie' },
];

const id = '102';
const index = users.findIndex((v) => v.id === id);
console.log(index); // => 2
console.log(users[index]); // => { id: '102', name: 'Bob' }

削除は splice() で。

見つからなかったら -1 になります。

あるかどうかだけわかれば良いなら some()

const existing = users.some((v) => v.id === targetId);
if (existing) {
  console.log('あったよ。');
}
else {
  console.log('なかったよ。');
}

おしまい

find() は割とよく使うので覚えておいて損はないです。

豆知識: 英語の find

「見つける」という意味です。

「探す」なら look for xxx 。

参考