JavaScriptの配列のメソッドの使い方～indexOf・lastIndexOf・includes・concat・Array.isarray～

# 記事の目的

どもー、N予備校でプログラミングを勉強中のふーちんです！
この記事ではJavaScript配列関係のメソッドの使い方、5つ紹介・説明しまーす。
`indexOf`・`lastIndexOf`・`includes`・`concat`・`Array.isarray`です！
初心者にもわかりやすく（自分も初心者ですが）説明したつもりです。

# 目次

- [1つ目、indexOfメソッド](https://qiita.com/fuuchin/items/f610049a283d94465bf5#indexof)
- [2つ目、lastIndexOfメソッド](https://qiita.com/fuuchin/items/f610049a283d94465bf5#lastindexof)
- [3つ目、includesメソッド](https://qiita.com/fuuchin/items/f610049a283d94465bf5#includes)
- [4つ目、concatメソッド](https://qiita.com/fuuchin/items/f610049a283d94465bf5#concat)
- [つ目、Array.isarray](https://qiita.com/fuuchin/items/f610049a283d94465bf5#arrayisarray)

# indexOf

[MDNはこちら](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf)

##### 《 おもなメソッドの役割 》

◎ どの要素が何番目にあるか、インデックスを返す（0番目から探す）
◎ 含まれていなかったら、`-1`が返る。

呼び出された`元の配列は何も変化しない`。使われるだけ。

サンプルコード3つあります。
```javascript: サンプルコード1：名前インデックス
const people = ['太郎', '次郎', '三郎', '四郎', '寝太郎', '銀次郎', '友三郎', '健四郎'];

const NetaroIndex = people.indexOf('寝太郎');
console.log(NetaroIndex); // 4 ← 寝太郎が4番目（5つ目）にあります！

const SomeoneIndex = people.indexOf('平五郎');
console.log(SomeoneIndex);// -1 ← 「平五郎」は配列に含まれていない！
```

```javascript: サンプルコード2：寝太郎が2人
const people = ['太郎', '寝太郎', '次郎', '三郎', '寝太郎', '四郎'];

const NetaroIndex = people.indexOf('寝太郎');
console.log(NetaroIndex); // 1 ← 4番目にも寝太郎あるけど、0番目から探していって1番目に見つかったのでそこで終了！
```
第二引数として数字を入れると、本来0番目から探すのを、その数字番目から探してくれます。
```javascript: サンプルコード3：第二引数は何ぞや
const people = ['太郎', '寝太郎', '次郎', '三郎', '寝太郎', '四郎'];

const NetaroIndex = people.indexOf('寝太郎', 2);
console.log(NetaroIndex); // 4 ← 2番目から探すので、1番目の寝太郎は無視される！
```

# lastIndexOf

[MDNはこちら](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf)

##### 《 おもなメソッドの役割 》

◎ どの要素が何番目にあるか、インデックスを返す（`最後の要素から`から探す）

基本的に、`indexOf`と同じですが、`indexOf`は左から右に探すのに対し、
`lastIndexOf`は右から左に見ていきます。

呼び出された`元の配列は何も変化しない`。使われるだけ。

```javascript: サンプルコード：名前インデックス
const people = ['太郎', '次郎', '寝太郎', '三郎', '寝太郎', '銀次郎', '友三郎'];

const NetaroIndex = people.lastIndexOf('寝太郎');
console.log(NetaroIndex); // true ← 2番目にも寝太郎あるけど、右からなので寝太郎が5番目（6つ目）の寝太郎！

const SomeoneIndex = people.lastIndexOf('平五郎');
console.log(SomeoneIndex);// -1 ← 「平五郎」は配列に含まれていない！

const NetaroIndex2 = people.lastIndexOf('寝太郎', 3);
console.log(NetaroIndex2);// 2 ← 3番目から0番目に向かって探すので、先の2番目の寝太郎！
```

# includes

[MDNはこちら](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/includes)

##### 《 おもなメソッドの役割 》

◎ とある要素が配列に含まれているのか、trueかfalseかを返す

includeは英語で「含む」という意味です。

呼び出された`元の配列は何も変化しない`。使われるだけ。

```javascript: サンプルコード：名前インデックス
const people = ['太郎', '次郎', '三郎', '四郎', '寝太郎', '銀次郎', '友三郎', '健四郎'];

const NetaroInclude = people.includes('寝太郎');
console.log(NetaroInclude); // true ← 4番目に寝太郎！

const SomeoneInclude = people.includes('平五郎');
console.log(SomeoneInclude);// false ← 「平五郎」は配列に含まれていない！
```

---

ところでなんですが、`NaN === NaN`は`false`なんですよね～初心者な僕はつい最近知りました。
なんでっていうかそういう仕様っていうか、
こんな記事も見つけました。
https://yosuke-furukawa.hatenablog.com/entry/2018/01/30/174425
それと同じで、`indexOf`の話に変わりますが、
```javascript:
const arr = [0, 1, NaN];
console.log(arr.indexOf(NaN));
```
も、2番目に`NaN`があるじゃないかと思いますが、結果は「含まれていない」、`-1`です。

それに対して、`includes`は`true`か`false`かしか調べられませんが、正しく`NaN`を処理できます。

```javascript: サンプルコード：NaNを正しく処理できるのか
const arr = [0, 1, NaN];
console.log(arr.includes(NaN)); // true ← ちゃんと、「含まれている」と判定された！
```

# concat

[MDNはこちら](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/concat)

##### 《 おもなメソッドの役割 》

◎ 配列を、他の配列や要素と結合させて1つの配列にする

呼び出された`元の配列は何も変化しない`。使われるだけ。

サンプルコードは3つ用意しました

```javascript: サンプルコード1：あいうえおかきくけこ1
const aiueo = ['あ', 'い', 'う', 'え', 'お'];
const kakikukeko = ['か', 'き', 'く', 'け', 'こ'];

const concatArray = aiueo.concat(kakikukeko);

console.log(concatArray); // ['あ', 'い', 'う', 'え', 'お', 'か', 'き', 'く', 'け', 'こ'] ← つながった！！
```

```javascript: サンプルコード2：あいうえおかきくけこ2
const aiueo = ['あ', 'い', 'う', 'え', 'お'];

const concatArray = aiueo.concat('か', 'き', 'く', 'け', 'こ');

console.log(concatArray); // ['あ', 'い', 'う', 'え', 'お', 'か', 'き', 'く', 'け', 'こ'] ← pushメソッドのようにも使える！
```
配列のようなオブジェクトに`Symbol.isConcatSpreadable`プロパティがあったら、concatメソッドでは配列として扱えます。

```javascript: サンプルコード3：こんな形で結合
const arrayPeople = ['太郎', '次郎'];

const objectPeople = {
  0: '三郎',
  1: '寝太郎',
  [Symbol.isConcatSpreadable]: true,
  length: 2
};

const concatArray = arrayPeople.concat(objectPeople);

console.log(concatArray); // ['太郎', '次郎', '三郎', '寝太郎'] ← 0と1のところが追加された！
```

# Array.isArray

[MDNはこちら](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray)

##### 《 おもなメソッドの役割 》

◎ そのオブジェクトが配列であるのかどうか、`true`か`false`を返す

呼び出された`元の配列は何も変化しない`。

```javascript: サンプルコード：hoge・fuga・foo・bar
const someArray = ['hoge', 'fuga', 'foo', 'bar'];
const someObject = {hoge: 'fuga', foo: 'bar'};

console.log(Array.isArray(someArray)); // true ← 配列！
console.log(Array.isArray(someObject)); // false ← 配列じゃない（オブジェクト）！
```
`typeof`でもできるんじゃないかと思った人もいるかもしれませんが、試してみましょう。
```javascript: typeofでも試してみよう
const someNumber = 123456;
const someString = 'hoge';
const someArray = ['hoge', 'fuga', 'foo', 'bar'];
const someObject = {hoge: 'fuga', foo: 'bar'};

// 数値の場合
console.log(typeof someNumber);
// 文字列の場合
console.log(typeof someString);
// 配列の場合
console.log(typeof someArray);
// オブジェクトの場合
console.log(typeof someObject);
```
Chromeのデベロッパーコンソールなどにコピペして試してみてください。
数値の場合は、`number`と返ってきます。
文字列の場合は、`string`と返ってきます。

ここまでは良さそうですが、次の配列の場合、オブジェクトの場合のときの結果はどうでしょうか。
両方`object`と返ってきました。

どうゆうことかと言うと、配列は言語の型を作らず、オブジェクトに基づいているので、
`typeof`では区別できないのです。

数値なのか文字列なのかは、`typeof`を使ったらいいと思いますが、
配列かどうかを区別するときは、`Array.isarray`を使ったらいいと思います。

#### 最後に

ほかのメソッドもまた別の記事などに追加していこうと思います。

ありがとうございました～