こんにちは、すぐるです！
sugulogをお読みいただきありがとうございます！！
このブログは、「 過去の無知な自分に向けてわかりやすく説明するなら？？ 」を基準に書いています。
少しでもお役に立てれば幸いです。
今回は、JavaScriptの配列ということで
-
配列を取り扱うメソッド
について簡単に解説します！！
その為このブログを読むことで、新しい配列に関するJavaScriptメソッドに出会えたり、何か困ったときのカンニングペーパーとして参考になること間違いなしです！
また、新しい配列に関するJavaScriptメソッドに出会うたびに追記していきます！！
是非最後までご愛読ください。
・配列に関するJavaScriptメソッド
配列に関するJavaScriptメソッドに出会った順に書いてます。
配列と顔見知りになるぐらい学習した思い出順なのでご了承ください。
・配列定義
配列を定義する際は主に[]を使い定義する。
例）const array = ["suguru", "takashi", "kazutoshi"]
また配列は格納されたデータに先頭から0、1、2...と番号（インデックス）を割り当てる。そのため配列からデータを取得する際は配列名[インデックス]で取得できる。
例)array[2] → kazutoshi
・length
指定した配列の要素数を取得する。
例)array.length → 3
・unshift()
指定した配列の先頭に要素を追加する。引数に追加したい要素を指定する。
例)array.unshift("shinji") → ["shinji", "suguru", "takashi", "kazutoshi"]
・push()
指定した配列の末尾に要素を追加する。引数に追加したい要素を指定する。
例)array.unshift("shinji") → ["suguru", "takashi", "kazutoshi", "shinji"]
・shift()
指定した配列の先頭の要素を削除する。
例)array.shift() → ["takashi", "kazutoshi"]
・pop()
指定した配列の末尾の要素を削除する。
例)array.pop() → ["suguru", "takashi"]
・splice()
指定した配列の要素の一部を置き換える。第一引数にインデックスで追加位置を指定し、第二引数でそこから取り除く要素数を指定し、第三引数以降で追加したい要素を指定する。
例)array.splice(1, 1, "shinji") → ["suguru", "shinji", "kazutoshi"]
因みに第二引数を0にすると追加の処理のみ行われる。
例)array.splice(1, 0, "shinji") → ["suguru", "shinji", "takashi", "kazutoshi"]
・concat()
指定した配列に引数で指定した配列を結合する。
例)array.concat(["tenma"]) → ["suguru", "takashi", "kazutoshi", "tenma"]
またスプレッド演算子（...）を用いて...配列名とすることで結合することもできる。
例)[...array, ...array2] → ["suguru", "takashi", "kazutoshi", "tenma"]
・join()
指定した配列の要素を結合し文字列として出力する。引数には結合する際の要素間の文字列を指定する。
例)array.join("さん、") → suguruさん、takashiさん、kazutoshi
末尾の要素には適用されないので注意が必要。
また引数の値を省略した場合はコンマ（,）で区切られる。
例)array.join() → suguru,takashi,kazutoshi
・indexOf()
指定した配列内の要素を検索し指定した要素が最初に見つかるインデックスを取得する。第一引数で検索したい要素を指定し、第二引数で検索開始位置をインデックスで指定する。第二引数を省略した場合はインデックス0から検索する。
例)array.indexOf("takashi") → 1
・lastIndexOf()
指定した配列内の要素を検索し指定した要素が最後に見つかるインデックスを取得する。引数に関してはindexOfと同じ。
例)array.lastIndexOf("kazutoshi") → 2
・includes()
指定した配列内の要素を検索し指定した要素が含まれているかどうかを真偽値で返す。引数に関してはindexOfと同じ。
例)array.includes("suguru", 1) → false
・find()
指定した配列で引数で指定した条件を満たす最初の要素を取得する。基本的な記述方法としては、配列.find*1 → ["kazutoshi", "suguru", "takashi"]
・map()
指定した配列から新しい配列を生成する。基本的な記述方法としては、配列.map((各要素を順番に代入する変数) => 新しい配列に格納する要素の形)。
例)array.map((value) => "名前は" + value) → ["名前はsuguru", "名前はtakashi", "名前はkazutoshi"]
・filter()
指定した配列から引数で指定した条件に合格した要素のみからなる新しい配列を生成する。基本的な記述方法としては、配列.filter((各要素を順番に代入する変数) => 条件文)。
例)array.filter((value) => value === "suguru") → ["suguru"]
・reduce()
指定した配列から各要素を左から右に処理し単一の値を生成する。基本的な記述方法としては、配列.reduce((前回までの要素を代入する変数), (各要素を順番に代入する変数) => 処理)。
例)array.reduce((a,b) => a + "と" + b) → suguruとtakashiとkazutoshi
・reduceRight()
指定した配列から各要素を右から左に処理し単一の値を生成する。基本的な記述方法はreduceメソッドと同じ。
例)array.reduce((a,b) => a + "と" + b) → kazutoshiとtakashiとsuguru
<おまけ>
・ArrayLikeオブジェクト
lengthプロパティーで長さを取得したり、インデックスで要素を管理したりなど配列に似た特徴を持つオブジェクトのこと。そのため見た目は配列だがfilterメソッドなどの配列用メソッドは使えない 。
例)文字列、NodeListオブジェクト...
またArrayLikeオブジェクトを配列に変換する際はスプレッド演算子(...)を用いる。
例)[...ArrayLikeオブジェクト]
以上、今回のブログでした。
新しい配列に関するJavaScriptメソッドに出会えたり、何か困ったときのカンニングペーパーとして参考になりそうですか？？
また新しい知識をどんどん蓄えていきますね(^_^)/
最後に！！
今後も、「 過去の無知な自分に向けてわかりやすく説明するなら？？ 」を基準にブログを書いていきます。
少しでも気になった方はお試しでもいいので1度、読者登録お願いします！
またTwitterでもプログラミングに関することを中心に情報を発信してます。
宜しければそちらのフォローもお願いします。
最後までご愛読いただきありがとうございました！！
*1:各要素を順番に代入する変数) => 条件文)。
例)array.find((element) => element === "suguru") → suguru
・findIndex()
指定した配列で引数で指定した条件を満たす最初のインデックスを取得する。基本的な記述方法としては、配列.findIndex((各要素を順番に代入する変数) => 条件文)。
例)array.findIndex((element) => element === "suguru") → 0
・reverse()
指定した配列要素の並び順を反転させる。
例)array.reverse() → ["kazutoshi", "takashi", "suguru"]
・sort()
指定した配列要素の並び順を引数の比較関数（省略可能）に合わせてソートする。配列要素の先頭から次の値を比べてその値の差異がプラス、0、マイナスかで並び替えを繰り返し行うことでソートしている。また比較関数を設定する際は比較される2つの要素を受け取り、戻り値の大小によって順番をソートする。省略した場合は文字列としてユニコード（文字コード）順にソートされる。
例)array.sort() → ["kazutoshi", "suguru", "takashi"]
・localCompaere()
指定した文字列と引数の文字列とを大文字と小文字を識別せずに比較する。sortメソッドの比較関数を用いて文字列の順番を比較する際などに用いる。
例)array.sort((a,b) => a.localCompaere(b