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

# 概要
JavaScriptを学習、理解を深めるため「[JavaScript Primer 迷わないための入門書](https://jsprimer.net/)」を読み、
理解した内容等を記載していく。

「[【JavaScript】JavaScript入門一覧](https://qiita.com/andota05/items/22fae452225b785fd405)」に他の記事をまとめています。

# この記事で理解できること
* 配列の要素を検索、取得するメソッド

# 配列から要素を検索するメソッド
* ある要素のインデックスを取得する方法(`indexOf`、`findIndex`)
* 条件に一致する要素を取得する方法(`find`)
* 指定範囲の要素を取得する方法(`slice`)
* ある要素が存在するかの真偽値を取得(`includes`、`some`)

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

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

```js
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`を返す。

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

```js
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
* 配列に`指定要素が含まれているかを判定`できる。
* 返り値は`真偽値`。

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

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

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

```js
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
```