実行環境 Node.js 15.2.1

公開日 March 24, 2021, GMT+9

コード例の出力としてconsole.logを使用しています。

使用方法がわからない場合は以下のページを参照してからコード例を確認してください。

console.logの使用方法

find(Array、配列)

このページでは豊富な例を用いてJavaScript(js)のArrayオブジェクト(配列)のfindの使い方を学ぶことができます。

JavaScript(js)のfindはArrayオブジェクト(配列)のメソッドの1つです。

findメソッドは「呼び出し元の配列の要素」に対して「第1引数に指定した関数(コールバック関数)」を実行し、 「コールバック関数がtrueを返す最初の要素の値」を返り値として返します。
すべての要素に対してコールバック関数がtrueを返さない場合はundefinedが返り値となります。

// 記述例

const コールバック関数がtrueを返す最初の要素の値 = array.find(callback(呼び出し元配列の要素の値))

TL;DR

基本

// 「コールバック関数がtrueを返す最初の要素の値」が返り値となる
// コールバック関数の第1引数は「呼び出し元配列の要素の値」
const array1 = ['js', 'javascript', 'jsx', 'ts'];
const returnValue1 = array1.find((element) => {
  return element === 'jsx';
});
console.log(returnValue1);
==> jsx






// 複数の要素が当てはまる場合は最初に条件を満たす値が返る
const array2 = [0, 1, 2, 3];
const returnValue2 = array2.find((element) => {
  console.log(`callback arg: ${element}`);
  return element > 1;
});
==> callback arg: 0
==> callback arg: 1
==> callback arg: 2

console.log(returnValue2);
==> 2







// 条件を満たす要素が無い場合の返り値はundefined
const array3 = ['js', 'ts'];
const returnValue3 = array3.find((element) => {
  return element === 'javascript';
});
console.log(returnValue3);
==> undefined






// 空配列の場合
const array4 = [];
const returnValue4 = array4.find((element) => {
  return element % 2 === 1;
});
console.log(returnValue4);
==> undefined

要素のインデックス取得

// コールバック関数の第2引数を指定すると、呼び出し元配列のインデックスが取得できる
const array1 = ['js', 'javascript', 'jsx', 'ts'];
const returnValue1 = array1.find((element, index) => {
  console.log(index);
  return index === 3;
});
==> 0
==> 1
==> 2
==> 3

console.log(returnValue1);
==> ts







const array2 = [100, 200, 300, 400];
const returnValue2 = array2.find((element, index) => {
  console.log(index);
  return element === 300;
});
==> 0
==> 1
==> 2

console.log(returnValue2);
==> 300

呼び出し元配列の取得

// コールバック関数の第3引数を指定すると、呼び出し元配列を取得できる
const array1 = ['js', 'javascript', 'jsx', 'ts'];
const returnValue1 = array1.find((e, i, arr) => {
  console.log(arr);
  return e.length === 3;
});
==> [ 'js', 'javascript', 'jsx', 'ts' ]
==> [ 'js', 'javascript', 'jsx', 'ts' ]
==> [ 'js', 'javascript', 'jsx', 'ts' ]

console.log(returnValue1);
==> jsx







const array2 = [100, 200, 300];
const returnValue2 = array2.find((e, i, arr) => {
  return arr[i] >= 150;
});
console.log(returnValue2);
==> 200

コールバック関数内でのthis指定

function Person(id, favoriteNumbers) {
  this.id = id;
  this.favoriteNumbers = favoriteNumbers;
}

// favoriteNumbersから奇数を求める関数
Person.prototype.anyFavoriteOddNumber = function () {
  return this.favoriteNumbers.find(element => {
    return element % 2 === 1;
  }, this);
};

const person1 = new Person(1, [2, 8, 23, 17, 40]);
console.log(person1.anyFavoriteOddNumber());
==> 23

解説

// 記述例

const コールバック関数がtrueを返す最初の要素の値 = array.find(callback(呼び出し元配列の要素の値))

基本

findメソッドは「呼び出し元の配列の要素」に対して「第1引数で指定したコールバック関数」を実行し、 「コールバック関数がtrueを返す最初の要素の値」を返り値として返します。
コールバック関数がtrueを返す要素が無い場合はundefinedが返り値となります。

コールバック関数の第1引数を指定すると、「処理を行っている配列の要素の値」をコールバック関数内で取得することができます。

findメソッドは「要素の値」が返り値となることから、「要素の値」を検索するのには役立ちます。 しかし、「要素のインデックス(添字)」を検索・取得することはできないので注意が必要です。
「要素のインデックス(添字)」を検索したい場合は、findIndexメソッドを使用してください。

const array1 = ['A', 'B', 'C'];
const returnValue1 = array1.find((element) => {
  return element === 'B';
});
console.log(returnValue1);
==> B







// 複数の要素が当てはまる場合は「当てはまる最初の要素の値が返り値」
const array2 = [0, 1, 2, 3, 4];
const returnValue2 = array2.find((element) => {
  console.log(element);
  return element >= 2;
});
==> 0
==> 1
==> 2

console.log(returnValue2);
==> 2







// 条件を満たす値が無い場合
const array3 = ['A', 'B', 'C'];
const returnValue3 = array3.find((element) => {
  return element === 'Z';
});
console.log(returnValue3);
==> undefined






// 空配列の場合
const array4 = [];
const returnValue4 = array4.find((element) => {
  return element === 1;
});
console.log(returnValue4);
==> undefined

要素のインデックス取得

コールバック関数の第2引数を指定すると、「処理を行っている配列の要素のインデックス(添字)」を取得することができます。

const array1 = ['A', 'B', 'C'];
const returnValue1 = array1.find((element, index) => {
  console.log(index);
  return index === 1;
});
==> 0
==> 1

console.log(returnValue1);
==> B







const array2 = [true, false, true];
const returnValue2 = array2.find((element, index) => {
  console.log(index);
  return !element;
});
==> 0
==> 1

console.log(returnValue2);
==> false

呼び出し元配列の取得

コールバック関数の第3引数を指定すると、「呼び出し元の配列」を取得することができます。

この「呼び出し元の配列」をfindメソッドの実行中に変更する場合は、 実装者が意図しない挙動 を起こさないように気をつけてください。

const array1 = ['A', 'B', 'C'];
const returnValue1 = array1.find((element, index, arr) => {
  console.log(arr);
  return element === 'C';
});
==> [ 'A', 'B', 'C' ]
==> [ 'A', 'B', 'C' ]
==> [ 'A', 'B', 'C' ]

console.log(returnValue1);
==> C







const array2 = [50, 60, 70];
const returnValue2 = array2.find((element, index, arr) => {
  return arr[index] === 60;
});
console.log(returnValue2);
==> 60

コールバック関数内でのthis指定

「findメソッドの第2引数」を指定することにより、コールバック関数内でのthisを指定することができます。

コールバック関数としてアロー関数を指定した場合、thisはコンテキストによって決定されることに注意してください。

function Person(id, favoriteNumbers) {
  this.id = id;
  this.favoriteNumbers = favoriteNumbers;
}

// favoriteNumbersから偶数を求める関数
Person.prototype.anyFavoriteEvenNumber = function () {
  return this.favoriteNumbers.find(element => {
    return element % 2 === 0;
  }, this);
};

const person1 = new Person(1, [1, 101, 6, 10]);
console.log(person1.anyFavoriteEvenNumber());
==> 6

1次情報

Array.prototype.find() - MDN web docs