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

記事の目的

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

目次

• 1つ目、indexOfメソッド
• 2つ目、lastIndexOfメソッド
• 3つ目、includesメソッド
• 4つ目、concatメソッド
• つ目、Array.isarray

indexOf

MDNはこちら

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

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

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

サンプルコード3つあります。

サンプルコード1：名前インデックス

const people = ['太郎', '次郎', '三郎', '四郎', '寝太郎', '銀次郎', '友三郎', '健四郎'];

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

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

サンプルコード2：寝太郎が2人

const people = ['太郎', '寝太郎', '次郎', '三郎', '寝太郎', '四郎'];

const NetaroIndex = people.indexOf('寝太郎');
console.log(NetaroIndex); // 1 ← 4番目にも寝太郎あるけど、0番目から探していって1番目に見つかったのでそこで終了！

第二引数として数字を入れると、本来0番目から探すのを、その数字番目から探してくれます。

サンプルコード3：第二引数は何ぞや

const people = ['太郎', '寝太郎', '次郎', '三郎', '寝太郎', '四郎'];

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

lastIndexOf

MDNはこちら

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

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

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

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

サンプルコード：名前インデックス

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はこちら

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

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

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

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

サンプルコード：名前インデックス

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の話に変わりますが、

const arr = [0, 1, NaN];
console.log(arr.indexOf(NaN));

も、2番目にNaNがあるじゃないかと思いますが、結果は「含まれていない」、-1です。

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

サンプルコード：NaNを正しく処理できるのか

const arr = [0, 1, NaN];
console.log(arr.includes(NaN)); // true ← ちゃんと、「含まれている」と判定された！

concat

MDNはこちら

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

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

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

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

サンプルコード1：あいうえおかきくけこ1

const aiueo = ['あ', 'い', 'う', 'え', 'お'];
const kakikukeko = ['か', 'き', 'く', 'け', 'こ'];

const concatArray = aiueo.concat(kakikukeko);

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

サンプルコード2：あいうえおかきくけこ2

const aiueo = ['あ', 'い', 'う', 'え', 'お'];

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

console.log(concatArray); // ['あ', 'い', 'う', 'え', 'お', 'か', 'き', 'く', 'け', 'こ'] ← pushメソッドのようにも使える！

配列のようなオブジェクトにSymbol.isConcatSpreadableプロパティがあったら、concatメソッドでは配列として扱えます。

サンプルコード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はこちら

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

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

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

サンプルコード：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でもできるんじゃないかと思った人もいるかもしれませんが、試してみましょう。

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を使ったらいいと思います。

最後に

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

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