findIndex（Array、配列）
このページでは豊富な例を用いてJavaScript（js）のArrayオブジェクト（配列）のfindIndexの使い方を学ぶことができます。
JavaScript（js）のfindIndexはArrayオブジェクト（配列）のメソッドの1つです。
findIndexメソッドは、「呼び出し元の配列の要素」に対して「第1引数で指定した関数（コールバック関数）」を実行し、
「コールバック関数が最初にtrueを返す要素のインデックス」を返り値として返します。
呼び出し元の配列のすべての要素に対してコールバック関数がtrueを返さない場合は、-1が返り値となります。
// 記述例
const コールバック関数が最初にtrueを返す要素のインデックス = array.findIndex(callback(呼び出し元配列の要素の値))TL;DR
基本
// 第1引数で指定した関数（コールバック関数）がtrueとなる要素のインデックスを返す
// コールバック関数の第1引数で、呼び出し元配列の要素値を取得できる
const array1 = ['js', 'ts', 'javascript'];
const returnValue1 = array1.findIndex((value) => {
return value === 'javascript';
});
console.log(returnValue1);
==> 2
// 複数の要素がコールバック関数でtrueを返す場合は、最初に当てはまる要素のインデックスを返す
const array2 = [100, 200, 300, 100];
const returnValue2 = array2.findIndex(function (value) {
return value === 100;
});
console.log(returnValue2);
==> 0
// コールバック関数がどの要素の値に対してもtrueを返さない場合、返り値は-1となる
const array3 = ['js', 'ts', 'jsx', 'tsx'];
const returnValue3 = array3.findIndex(value => value === 'java');
console.log(returnValue3);
==> -1
// 空配列の場合
const array4 = [];
const returnValue4 = array4.findIndex(val => val === false);
console.log(returnValue4);
==> -1要素のインデックス取得
// コールバック関数の第2引数を指定することで「処理している要素のインデックス」を取得できる
const array1 = ['js', 'javascript', 'ts', 'typescript'];
const returnValue1 = array1.findIndex((value, index) => {
console.log(`${index}: ${value}`);
return value === 'ts';
});
==> 0: js
==> 1: javascript
==> 2: ts
console.log(returnValue1);
==> 2
const array2 = ['js', 1, true];
const returnValue2 = array2.findIndex(function (value, index) {
return typeof value === 'number' && index === value;
});
console.log(returnValue2);
==> 1呼び出し元配列の取得
// コールバック関数の第3引数を指定すると、呼び出し元の配列を取得できる
const array1 = ['js', 'javascript'];
const returnValue1 = array1.findIndex((value, index, array) => {
console.log(array, array[index]);
return array[index] === 'javascript';
});
==> [ 'js', 'javascript' ] js
==> [ 'js', 'javascript' ] javascript
console.log(returnValue1);
==> 1コールバック関数内でのthis指定
function Student(name, mostFavoriteSubject, favoriteSubjects) {
this.name = name;
this.mostFavoriteSubject = mostFavoriteSubject;
this.favoriteSubjects = favoriteSubjects;
}
Student.prototype.findMostFavoriteSubjectIndex = function () {
return this.favoriteSubjects.findIndex(value => {
return value === this.mostFavoriteSubject;
}, this);
};
const student1 = new Student('Josh', 'math', ['reading', 'writing', 'math']);
const returnValue1 = student1.findMostFavoriteSubjectIndex();
console.log(returnValue1);
==> 2解説
// 記述例
const コールバック関数が最初にtrueを返す要素のインデックス = array.findIndex(callback(呼び出し元配列の要素の値))基本
findIndexメソッドは呼び出し元の配列の要素に対して、第1引数で指定した関数（コールバック関数）を実行し、
「コールバック関数の返り値が最初にtrueとなる要素のインデックス」を返り値として返します。
コールバック関数の返り値がすべての要素の実行に対してfalseとなる場合、返り値は-1となります。
「コールバック関数の第1引数」を指定すると、「コールバック関数を実行している要素の値」を取得することができます。
const array1 = [1, 2, 3];
const returnValue1 = array1.findIndex(function (value) {
return value === 2;
});
console.log(returnValue1);
==> 1
// コールバック関数がtrueを返す要素が複数ある場合
const array2 = ['A', 'B', 'C', 'A'];
const returnValue2 = array2.findIndex((value) => {
return value === 'A';
});
console.log(returnValue2);
==> 0
// コールバック関数がすべてtrueとならない場合
const array3 = [false, false, undefined];
const function3 = function (value) {
return value;
};
const returnValue3 = array3.findIndex(function3);
console.log(returnValue3);
==> -1
// 空配列の場合
const array4 = [];
const returnValue4 = array4.findIndex(val => val);
console.log(returnValue4);
==> -1要素のインデックス取得
「コールバック関数の第2引数」を指定すると、「コールバック関数を実行している要素のインデックス」を取得することができます。
const array1 = ['A', 'B', 'C'];
const returnValue1 = array1.findIndex(function (value, index) {
console.log(index + ': ' + value);
return value === 'B';
});
==> 0: A
==> 1: B
console.log(returnValue1);
==> 1
const array2 = [true, true, true, true];
const returnValue2 = array2.findIndex((v, i) => {
return i > 1 && v;
});
console.log(returnValue2);
==> 2呼び出し元配列の取得
「コールバック関数の第3引数」を指定すると、「呼び出し元の配列」を取得することができます。
「呼び出し元の配列」をfindIndexメソッドの実行中に変更する場合、 実装者が意図しない挙動 が発生する可能性があります。 変更する場合は注意して実装してください。
const array1 = ['A', 'B'];
const returnValue1 = array1.findIndex((value, index, array) => {
console.log(array, array[index]);
return array[index] === 'B';
});
==> [ 'A', 'B' ] A
==> [ 'A', 'B' ] B
console.log(returnValue1);
==> 1コールバック関数内でのthis指定
「findIndexメソッドの第2引数」を指定すると、コールバック関数内でのthisを決定することができます。
コールバック関数としてアロー関数を指定した場合はthisはコンテキストによって決定されてしまうので注意してください。
function Student(name, mostFavoriteSubject, favoriteSubjects) {
this.name = name;
this.mostFavoriteSubject = mostFavoriteSubject;
this.favoriteSubjects = favoriteSubjects;
}
Student.prototype.findMostFavoriteSubjectIndex = function () {
return this.favoriteSubjects.findIndex(value => {
return value === this.mostFavoriteSubject;
}, this);
};
const student1 = new Student('Nash', 'reading', ['reading', 'writing', 'math']);
const returnValue1 = student1.findMostFavoriteSubjectIndex();
console.log(returnValue1);
==> 0