JavaScriptには、sortメソッドという配列などのデータを昇順や降順に並び替える便利なメソッドが用意されています。
しかし、このsortメソッドは、ソートする際の参照元のデータもソートされてしまいます。
本記事では、参照元のデータの並びは、そのままにしてsortメソッドを用いる方法を紹介します。
【おさらい】sortメソッド
参照元もソートされるというのは、どういうことか下のコードで説明します。
notSortedArray = ['a','z','c','x'];
sortingArray = notSortedArray.sort();
console.log(notSortedArray); //[ 'a', 'c', 'x', 'z' ]
console.log(sortingArray); //[ 'a', 'c', 'x', 'z' ]
1行目のnotSortedArrayを昇順にソートしたいということで、
2行目でsortメソッドを用いてソートし、sortingArrayに代入しています。
しかし、sortメソッドは参照元のデータもソートするので、notSortedArrayもソートされ、sortingArrayと同じ並び順になってしまいます。
参照元はそのままでソートする方法
方法1sliceメソッド
sliceメソッドは、配列をコピーして、別のオブジェクトとして返します。
引数で一部の配列をコピーすることも可能で、その場合、第一引数にコピーしたい最初のインデックス、第二引数にコピーしたい最後のインデックスを指定します。
今回は、配列をすべてコピーしたいので、slice(0,notSortedArray.length)
とします。
また、すべてコピーしたい場合は、引数を省略でき、slice()
で配列をまるまるコピーできます。
notSortedArray = ['a','z','c','x'];
sortingArray = notSortedArray.slice().sort();
console.log(notSortedArray); //[ 'a', 'z', 'c', 'x' ]
console.log(sortingArray); //[ 'a', 'c', 'x', 'z' ]
方法2concatメソッド
concatメソッドは、配列同士を結合するために使用します。
このメソッドは既存の配列を変更せず、別のオブジェクトとして返します。
notSortedArray = ['a','z','c','x'];
sortingArray = notSortedArray.concat().sort();
console.log(notSortedArray); //[ 'a', 'z', 'c', 'x' ]
console.log(sortingArray); //[ 'a', 'c', 'x', 'z' ]