【JavaScript】配列② 〜配列から要素を検索するメソッド〜

概要

JavaScriptを学習、理解を深めるため「JavaScript Primer 迷わないための入門書」を読み、
理解した内容等を記載していく。

「【JavaScript】JavaScript入門一覧」に他の記事をまとめています。

この記事で理解できること

• 配列の要素を検索、取得するメソッド

配列から要素を検索するメソッド

• ある要素のインデックスを取得する方法(indexOf、findIndex)
• 条件に一致する要素を取得する方法(find)
• 指定範囲の要素を取得する方法(slice)
• ある要素が存在するかの真偽値を取得(includes、some)

ある要素のインデックスを取得する方法(indexOf、findIndex)

indexOf

• 内部的に厳密等価演算子（===）で比較する。
• 一致する要素が存在する場合その要素のインデックスを返し、存在しない場合は-1を返す。
• 対となるメソッドとして、後部から検索、対象要素のインデックスを返すlastIndexOfメソッドも存在する。

const array = ["one", "two", "three", "four"];

console.log(array.indexOf("two"))       // => 1(array内のインデックス)
console.log(array.lastIndexOf("two"))   // => 1(array内のインデックス)

console.log(array.lastIndexOf("five"))  // => -1(array内には存在しない要素)

findIndex

• 配列の要素としてオブジェクトが存在し、オブジェクトが持つ同じ値のものを見つけたいときに有効なメソッド。
• 引数に配列の各要素をテストするコールバック関数を指定する。

const userList = [
  { name: "Taro", hobby: "baseball"},
  { name: "Hanako", hobby: "tennis" },
  { name: "Jhon", hobby: "soccer" }
];

// 前項のindexOfで検索した例
const targetIndex1 = userList.indexOf({name: "Taro", hobby: "baseball"});
console.log(targetIndex1);
// => -1(オブジェクトは、持っているプロパティが同じでも別オブジェクトだと異なるものとして扱われる)

// findIndexの引数に配列の要素をテストするコールバック関数を指定する
const targetIndex2 = userList.findIndex(user => {
  return user.hobby === "baseball"
});
console.log(targetIndex2); // => 0(要素のインデックス)

// console.log(userList[0]) と同じ結果になる
console.log(userList[targetIndex2]); // => { name: 'Taro', hobby: 'baseball' }

条件に一致する要素を取得する方法(find)

• より明確に(配列のインデックスではなく)要素を取得したいという場合に有効なメソッド。
• findIndexメソッドと同様に引数にテストする関数をコールバック関数として渡す。
• 返り値は、要素そのもので、要素が存在しない場合はundefinedを返す。

const family = [
  { name: "Taro", age: 12 },
  { name: "Takesi", age: 40 },
  { name: "Sachiko", age: 39 },
];

const son = family.find(member => {
  return member.name === "Taro";
});

console.log(son); // => { name: 'Taro', age: 12 }

指定範囲の要素を取得する方法(slice)

• 配列から指定した範囲の要素を切り出し、新しい配列を返す。
• 第一引数に開始位置(インデックス)、第二引数に終了位置(インデックス)を指定する。
  ※第二引数に指定した場合、そのインデックスの要素は結果に含まない
• 第二引数は省略可で、その場合配列の末尾の要素まで取得される。

const userList = [
  { name: "Taro", hobby: "baseball"},
  { name: "Hanako", hobby: "tennis" },
  { name: "Jhon", hobby: "soccer" }
];

console.log(userList.slice(0));
// => [
// =>  { name: 'Taro', hobby: 'baseball' },
// =>  { name: 'Hanako', hobby: 'tennis' },
// =>  { name: 'Jhon', hobby: 'soccer' }
// =>]


// 第二引数にインデックスを指定した場合は、その要素を含まないことに注意
console.log(userList.slice(0, 2));
// => [
// =>  { name: 'Taro', hobby: 'baseball' },
// =>  { name: 'Hanako', hobby: 'tennis' }
// => ]

ある要素が存在するかの真偽値を取得(includes、some)

includes

• 配列に指定要素が含まれているかを判定できる。
• 返り値は真偽値。

const fruitList = ["Orange", "Apple", "Grape"];

console.log(fruitList.includes("Orange")); // => true
console.log(fruitList.includes("Apple"));  // => true
console.log(fruitList.includes("Cherry")); // => false

some

• 配列の要素としてオブジェクトが存在し、オブジェクトが持つ同じ値のものを見つけたいときに有効なメソッド。
• 引数に配列の各要素をテストするコールバック関数を指定する。

const fruitList = [
  { name: "Orange", price: 200 },
  { name: "Apple", price: 120 },
  { name: "Grape", price: 320 }
];

// includesで探したいオブジェクトを直接指定してみる
console.log(fruitList.includes({ name: "Grape", price: 320 }));
// => false(オブジェクトは、持っているプロパティが同じでも別オブジェクトだと異なるものとして扱われる)

// someメソッドで真偽値を取得できる
const hasGrape = fruitList.some(fruit => {
  return fruit.name === "Grape";
})

console.log(hasGrape); // => true