JavaScriptのfind()とfindIndex()メソッドの使い方と具体例

2021年2月11日2022年11月26日JavaScript

JavaScriptの配列やオブジェクトから見つけ出すfind()メソッドとfindIndex()メソッドを紹介します。

JavaScriptのfind()メソッド

find()メソッドは、コールバック関数を引数に持ちます。そして、filter()メソッドのように、booleanとなる条件を設定します。

そして、次のことがfilter()メソッドとは異なる点なのですが、条件に対して一番最初に見つかった値を返します。
filter()メソッドは新しい配列を返すのに対し、find()メソッドは最初に見つめた値のみを返します。

//find()メソッド
const movements = [5,2,4,1,15,8,3,-1,-2,-7];
const firstWith = movements.find(mov => mov < 0);
console.log(firstWith);//-1

JavaScriptのfindIndex()メソッド

findIndex()メソッドはfind()メソッドとほぼ同じですが、名前の通り見つけたら値ではなくインデックス番号を返します。

まずはbooleanの条件を入れて、条件でtrueになるインデックス番号を返します。

indexOf()メソッドにも似ていますが、indexOf()メソッドは、配列内で値を探すことができますので、用途が異なります。

{
  const account1 = {
    name: 'yamada',
    pin: '111',
  };
  const account2 = {
    name: 'Saito',
    pin: '222',
  };
  const account3 = {
    name: 'Kondo',
    pin: '333',
  };
  let accounts = [account1, account2, account3];
  console.log(accounts);
  //(3) [{…}, {…}, {…}]
  //0: {name: "yamada", pin: "111"}
  //1: {name: "Saito", pin: "222"}
  //2: {name: "Kondo", pin: "333"}

  const currentAcount = account1;
 const index = accounts.findIndex(acc => acc.name === currentAcount.name);
 console.log(index);//0: {name: "yamada", pin: "111"}がindexに代入される
 accounts.splice(index, 1);//0: {name: "yamada", pin: "111"}を削除
  console.log(accounts);
  //(2) [{…}, {…}]
  //1: {name: "Saito", pin: "222"}
  //2: {name: "Kondo", pin: "333"}

}