JavaScriptで配列を非破壊的にsortする

TOC

sort()メソッド

JavaScriptの配列でソート処理をしたいときは、多くの場合sort()メソッドを使用すると思います。

しかしsort()メソッドは、map()メソッドやfilter()メソッドと違い、新たな配列を返すわけでは無いので、元の配列を変更してしまう破壊的なメソッドとなります。

const array = [4, 2, 1, 3]
const array2 = array.sort()

console.log(array2) // [1, 2, 3, 4] 
console.log(array) // [1, 2, 3, 4]  ... 元の配列も変更されてしまう

非破壊的にソートを行う

シチュエーションによっては元の配列を変更せず（非破壊的）に、sort()メソッドを実行したい場合があると思います。 そのような場合は、sort()メソッドを実行する前に、Array.from()メソッドを実行し、元の配列のシャローコピーを生成してから配列に対しソート処理を実行すると、非破壊的にソートを行う事ができます。

const array = [4, 2, 1, 3]
const array2 = Array.from(array).sort() // 配列のコピーを生成後sort()を実行
console.log(array2) // [1, 2, 3, 4] 
console.log(array) // [4, 2, 1, 3]  ... 元の配列は変更されていない

破壊的な配列メソッドを、非破壊的に実行したい全てのシチュエーションで使えるので、覚えておくと役に立つかもしれません。

その他

sort()メソッドの前に配列をコピーすれば良いので、slice()メソッドでも同じ結果を得る事ができます。

const array = [4, 2, 1, 3]
const array2 = array.slice().sort() // slice()後にsort()を実行

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

Array.from()メソッドは、polyfillなど入れてない場合Internet Explorerには対応していないので、IE対応を行う場合はこちらのslice()メソッドを使用する方法で実装する必要があります。