[Javascript] Arrayメソッドチート表 [非破壊・破壊・return・MDNリンク]

目的

• メソッド利用時に、splitにarray渡してしまったり、spliceが非破壊破壊的か忘れるのでここらでまとめて、is not functionを撲滅したい。

今日やること

• メソッドを安全に使えるような表をつくる。

そもそも非破壊的、破壊的ってなによ？

非破壊とは、渡した値を変換せずに処理をすること。

非破壊的なもの

let array = [1,2,3]
let newarray = array.forEach(e=>e+1)

console.log(array) //[1,2,3]
console.log(array) //[2,3,4]

破壊的とは、渡した値を変換すること

破壊的なもの

let array = [1,2,3]
let newarray = array.pop()

console.log(array) //[2,3,4]
console.log(array) //[2,3,4]

値を返すかどうかは非破壊的、破壊的によらずメソッド次第。

非破壊的と破壊的をどう使い分ければよいの？

上のとおり破壊的であると元の値が、処理後の値になってしまいます。
これは、同じ配列に対し繰り返し処理をしたい場合に元の配列を起点に繰り返し処理がしづらいので、使い回しがしづらくなることを示しています。

なので、繰り返し処理をしたい場合は非破壊を使うべし。です。

でも、だったら、なんで破壊的メソッドがあるの？

これについてはわかりませんでした。
一度しか使わない限定的な条件かでなら安全かつ早いのでしょうか？

よければこっそりコメントください。

@nagtkkさまに破壊的メソッドを利用する目的を教えていただきました！

破壊しない、と言うことは、変化がない部分に関してコピーを作るのとほぼ同義ですから、
速度に加えて、大きい配列の場合メモリ消費量的に良い場合もありますね。
例えば pop が非破壊であった場合、
1000 個の配列に対して 999 個の値をコピーした配列を作る、
と言った操作になるわけで。

メモリ消費は速度以外のパフォーマンスにも影響する？ようです。
うまく調べられなかったのでおいおい記述します・・！

メソッドチート表

参照しやすいようにメソッド名にはMDNリンクを貼りました。

メソッド名	渡す型	非破壊	破壊	return	使用例
forEach()	Array	○		なし	配列の各要素に対して、コールバック関数で処理をしたい。
map()	Array	○		新配列	配列の各要素に対して、コールバック関数の処理を実行した新しい配列を返したい
filter()	Array	○		新配列	配列の各要素に対して、コールバック関数でtrueになる要素のみで構成される新しい配列を返したい
reduce()	Array	○		単一の値(acc)	配列の各要素に対して、コールバック関数の処理を実行した単一の値にして返したい第二引数の初期値は設定しておくべき
reduceRight()	Array	○		単一の値(acc)	reduceの処理を右から左へしたもの
splice()	Array		○	破壊後の配列	配列から配列の一部を抽出、削除、追加し、破壊後の配列を返したい
slice()	Array	○		新配列	配列から配列の一部を取り出し、新しい配列を返したい引数はインデックス番号　第一引数<=x<=第二引数
concat()	Array/String	○		新配列/文字列	配列に他の配列や値をつないでできた新しい配列を返したい(文字列の場合も同様）
join()	Array	○		新配列	配列の各要素を第一引数の区切り文字で区切った新しい配列を返した。区切り文字のデフォルトは,
push()	Array		○	破壊後の配列の要素数	配列の末尾に要素を追加し、破壊後の配列の長さを返したい。
unshift()	Array		○	破壊後の配列の要素数	配列の先頭に要素を追加し、破壊後の配列の長さを返したい。
pop()	Array		○	取り除いた値	配列の最後の要素を取り除き、その値を返す
shift()	Array		○	取り除いた値	配列の先頭の要素を取り除き、その値を返す
includes()	Array/String	○		true/false	配列に引数の値が含まれているかどうかを true か false で返したい
find()	Array	○		最初の要素	コールバック関数を満たす配列内の最初の要素の値を返したい
findIndex()	Array	○		最初のインデックス	コールバック関数を満たす場合、配列内の 最初のインデックス を返したい
indexOf()	Array/String	○		最初のインデックス/-1	引数に与えられた値と合致する最初の要素のインデックスを返したい。存在しなければ-1を返す
sort()	Array		○	破壊後の配列を返す	配列の要素をソートし破壊後の配列を返したい。新しい配列は用意されない
reverse()		○		破壊後の配列を返す	配列の要素を反転させ、配列を書き換えたい
fill()	Array		○	破壊後の配列を返す	配列中の開始インデックスから終了インデックスまで固定値に変更したい
copyWithin()	Array		○	破壊後の配列を返す	サイズを変更せずに、配列の一部を同じ配列内の別の場所にシャローコピーして返したい