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