はじめに
自分用に、Array操作で破壊的なのか非破壊的なのかまとめとこうと思い、備忘録で残します〜！
誰かの参考になれば幸いです。
そもそも破壊的？非破壊的？ってなに
JavaScriptのArrayメソッドには、破壊的メソッドと非破壊的メソッドがあります。違いは、元の配列に変更を加えるかどうかです。
破壊的メソッド
破壊的メソッドは、元の配列を変更します。これらのメソッドを使用すると、配列の要素が追加、削除、または変更され、配列の状態が変わります。
非破壊的メソッド
非破壊的メソッドは、元の配列を変更しません。これらのメソッドを使用しても、元の配列の状態はそのまま保たれます。代わりに、新しい配列が生成されたり、特定の値が返されたりします。
破壊的メソッドと非破壊的メソッドを適切に使い分けることで、配列操作を効果的に行うことができます。
元の配列の状態を保持したい場合は、非破壊的メソッドを使用し、状態の変更が必要な場合は、破壊的メソッドを使用するイメージでしょうか。
まとめ
| 破壊的メソッド | 説明 | 非破壊的メソッド | 説明 |
|---|---|---|---|
push() |
配列の最後に要素を追加する | concat() |
既存の配列に1つまたは複数の配列を結合した新しい配列を返す |
pop() |
配列の最後の要素を削除し、その要素を返す | slice() |
配列の一部を新しい配列として返す |
shift() |
配列の最初の要素を削除し、その要素を返す | map() |
配列のすべての要素に関数を適用し、結果を新しい配列として返す |
unshift() |
配列の先頭に1つまたは複数の要素を追加する | filter() |
配列の要素のうち、指定した関数を満たすものだけを新しい配列として返す |
splice() |
配列の要素を削除/追加し、削除された要素の配列を返す | find() |
配列の要素のうち、指定した関数を満たす最初の要素を返す |
reverse() |
配列の要素の並びを逆にする | findIndex() |
配列の要素のうち、指定した関数を満たす最初の要素のインデックスを返す |
sort() |
配列の要素をソートする | includes() |
配列が特定の要素を含むかどうかを返す |
fill() |
配列の要素を指定した値で埋める | indexOf() |
指定した要素が最初に現れるインデックスを返す |
lastIndexOf() |
指定した要素が最後に現れるインデックスを返す | ||
reduce() |
配列の要素を1つの値にまとめる（左から右へ） | ||
reduceRight() |
配列の要素を1つの値にまとめる（右から左へ） | ||
every() |
配列のすべての要素が指定した関数を満たすかどうかを返す | ||
some() |
配列のいずれかの要素が指定した関数を満たすかどうかを返す |