【JavaScript】Array メソッド | 頑張ることをやめたら人生楽しくなった
2019年5月29日
2019年6月22日
 @sawami

【JavaScript】Array メソッド

よく使う Array ですが、なかなかメソッドを覚えられなくて毎回調べていました。

いい加減、調べずに使えるようにしたいのでここにまとめました。

Array とは

JavaScript の Array オブジェクトは、配列を構築するためのグローバルオブジェクトで、配列とは複数の要素の集合を格納管理するリスト構造です。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array

Array メソッドのまとめ

変更メソッド

これらのメソッドは配列を書き換えます。

（メソッド）（説明）
copyWithin配列内で配列内の要素をコピーします。
fill配列内の指定した開始位置から終了位置までの要素を固定値で埋めます。
pop配列から最後の要素を取得し、戻り値として返します。
push配列の最後に1個以上の要素を追加し、新しい配列の長さを返します。
reverse配列の要素の順番を逆転させます。
shift配列から最初の要素を取り除き、その要素を返します。
sort配列内で要素を整列し、配列を返します。
splice配列に対して複数の要素を追加したり取り除いたりします。
unshift配列の最初に1個以上の要素を追加し、配列の変更後の長さを返します。

アクセサ メソッド

これらのメソッドは呼び出し対象の配列を書き換えず、配列を何らかの形で表したものを返します。

concat複数の配列や値を結合して新しい配列を返します
includes配列が特定の要素を含むかどうか判定し、その結果（Boolean）を返します
indexOf指定された値と等しい値を持つ最初の（展示の一番小さい）要素の展示を返します。見つからない場合は -1 を返します。
join配列のすべての要素を結合した文字列を返します。
lastIndexOf指定された値と等しい値を持つ最後の（展示の一番大きい）要素の展示を変えします。見つからない場合、 -1 を返します。
slice配列の一部を取り出して新しい配列として返します
toSource指定された配列を表す配列リテラルを返します。この値を使って新しい配列を作れます。
toString配列とその要素を表す文字列を返します。
toLocaleString配列とその要素を表すロケールに従った文字列を返します。

反復メソッド

配列を変化させなければならない場合は、代わりに新しい配列にコピーしてください。

entries新しい Array Iterator オブジェクトを返します。このオブジェクトは配列中の角インデックスに対する key/value ペアを保持しています。
every指定したテスト関数を配列中のすべての要素が満たした場合に true を返します。
filter指定したフィルタリング関数が true を返す、配列中の要素を格納した新しい配列を生成します。
find指定したテスト関数を満たす、配列中の要素の値を返します。1個も見つからない場合は undefined を返します。
findIndex指定したテスト関数を満たす、配列中の要素のインデックスを返します。1個も見つからない場合は -1 を返します。
forEach配列中のそれぞれの要素について関数を呼び出します。
keys新しい Array Iterator を返します。このオプジェクトは配列中の各インデックスのキーを保持します。
map配列内のすべての要素に対して与えられた関数を呼び出し、その結果を格納した新しい配列をせいせいします。
reduceアキュムレータと配列のすべての要素に対して（左から右の順で）関数を適用し、単一の値に還元します。
reduceRightアキュムレータと配列内のすべての要素に対して（右から左の順で）関数を適用し、単一の値に還元します。
some指定したテスト関数を配列中の少なくとも1個の要素が満たした場合に true を返します。
values新しい Array Iterator オブジェクトを返します。このオブジェクトは、配列中の各インデックスの値を保持します。

おわりに

Arrayメソッドを調べるために Array の MDN を改めてじっくり読みました。
メソッドもブラウザによって使えないことがあると初めて知りました。
今まで特に考えずに使っていたのですが、これからはブラウザ実装状況をチェックして使うよう気をつけます。

普段はメソッドを見て終わりでしたので、 今回 Array の詳しい説明を読んで知見が深まりました。

さわみ

フォローお願いします

@sawami
  • @sawami
技術系

コメントする

メールアドレスが公開されることはありません。

19 − twelve =