chakkun1121's blog

javascript小ネタ:配列メゾットについて

投稿日:2023/12/9

結論

今回解説するのは以下のメゾットです。

処理内容破壊処理版非破壊処理版
配列の先頭に追加unshiftArray.toSpliced(0,0,items)
配列の後ろに追加pushArray.concat(items)
配列の最初を消去shiftArray.slice(1)
配列の末尾を消去popArray.slice(0, -1)
配列内の並び替えsorttoSorted
配列を逆にするreversetoReversed

はじめに - 破壊処理と非破壊処理について

Javascriptでの配列の操作には破壊処理と非破壊処理があります。破壊処理の場合は処理を行うことでもとの配列を変更します。(戻り値は消されたものや変更後の配列の長さになります。)しかし、非破壊処理の場合はもとの配列は変更せず処理後の配列が戻り値となります。

それぞれのメゾットについて解説

Array.unshift

MDN

Array.unshiftは配列の先頭に引数の要素を追加します。返り値は変更後の配列の長さです。

Array.unshiftの非破壊処理はArray.toSpliced(0,0,items)となります。

Array.push

MDN

Array.pushは配列の末尾に引数の要素を追加します。返り値は変更後の配列の長さです。

Array.pushの非破壊処理はArray.concat(items)です。

1const array1=[1,2,3];
2const array2=array1.concat([4,5]);
3console.log(array2);
4// >[1,2,3,4,5]

Array.shift

Array.shiftArray.unshiftとは逆に配列の最初に追加ではなく削除します。返り値は削除した要素です。

Array.shiftの非破壊処理はArray.slice(1)となります。

Array.pop

Array.popは配列の最後の要素を削除し、その要素を返します。

Array.popの非破壊処理はArray.slice(0, -1)

Array.sort

注意事項

Array.sortの非破壊処理はArray.toSortedです。

Array.reverse

Array.reverseは配列の順序を逆にします。

Array.reverseの非破壊処理はArray.toReversedです。

最後に

今回はjsの配列の基本処理をまとめました。