JSのArrayメソッドで破壊非破壊がまとまっている表が欲しいな〜〜
と思ったので作りました。
チートシート
| メソッド名 | 破壊 | 非破壊 | 用途 |
|---|---|---|---|
| splice() | ○ | 配列から配列の一部を取り出し、新しい配列を返す | |
| slice() | ○ | 配列から配列の一部を取り出し、新しい配列を返す | |
| push() | ○ | 配列の末尾に要素を追加し、新たな配列の長さを返す | |
| unshift() | ○ | 配列の先頭に要素を追加し、新たな配列の長さを返す | |
| pop() | ○ | 配列の最後の要素を取り除き、その値を返す | |
| shift() | ○ | 配列の先頭の要素を取り除き、その値を返す | |
| filter() | ○ | 引数として与えられた関数を各配列要素に対して実行し、それに合格したすべての配列要素からなる新しい配列を返す | |
| reduce() | ○ | 引数として与えられた関数を(左から右へ)各配列要素に対して実行し、単一の値にして返す | |
| reduceRight() | ○ | 引数として与えられた関数を(右から左へ)各配列要素に対して実行し、単一の値にして返す | |
| map() | ○ | 配列内の各要素を引数として与えられた関数で順番に加工し、新しい配列を返す | |
| concat() | ○ | 配列に他の配列や値をつないでできた新しい配列を返す | |
| find() | ○ | 引数として与えられた関数を満たす配列内の最初の要素の値を返す | |
| findIndex() | ○ | 引数として与えられた関数を満たす場合、配列内の インデックス を返す | |
| indexOf() | ○ | 引数に与えられた値と同じ値を持つ配列要素の内、最初のものの添字を返す | |
| includes() | ○ | 引数の値が配列に含まれているかどうかを true または false で返す | |
| sort() | ○ | 配列の要素をソートする | |
| reverse() | ○ | 配列の要素を反転させ、配列を書き換える | |
| join() | ○ | 配列の全要素を順に引数の文字列で連結した文字列を新たに作成して返す。区切り文字や指定されない場合、デフォルトは,になる | |
| fill() | ○ | 配列中の開始インデックスから終了インデックスまで固定値に変更する | |
| copyWithin() | ○ | サイズを変更せずに、配列の一部を同じ配列内の別の場所にシャローコピーして返す |
最後に
関数自体を詳しく説明はしていないので、必要があればMDN web docsをご参考ください。
今後も追加していきますが一旦。
4/6追記
@yamotuki さんが、JavaScriptでArrayに対する破壊的メソッドを安全に使う方法を書いてくださいました！
破壊的メソッドの使い方が理解できるのでぜひご一読ください！