実行環境 Node.js 15.2.1

公開日 March 31, 2021, GMT+9

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

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

console.logの使用方法

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

1次情報

Array.prototype.findIndex() - MDN web docs