JavaScriptのArray.prototype.sort()メソッドは、配列の要素を並べ替えるために非常に便利な機能ですが、デフォルトの動作にはいくつかの意外な挙動があります。特に、数値の配列をソートする際に、文字列として比較されるために予期しない結果が生じることがあります。この記事では、sort()メソッドの意外な挙動とその回避方法について詳しく解説します。
1. sort()メソッドの基本的な動作
sort()メソッドは、配列の要素を並べ替え、元の配列を変更します。デフォルトでは、要素は文字列として比較され、Unicodeコードポイントの順序でソートされます。これにより、数値の配列をソートする際に、意図しない結果が生じることがあります。
サンプルコード
以下のコードは、数値の配列をsort()メソッドでソートした例です。
const numbers = [10, 100, 20, 25, 40];
numbers.sort();
console.log(numbers); // 出力: [10, 100, 20, 25, 40]この結果は、数値の大小関係を反映していません。sort()メソッドは、各要素を文字列として扱い、文字列の順序で並べ替えています。
2. 文字列としての比較の影響
sort()メソッドが文字列として要素を比較するため、数値の配列をソートする際には、意図しない順序になることがあります。たとえば、"100"は"20"よりも小さいと見なされるため、100が20の前に来てしまいます。
サンプルコード
次のコードは、文字列として比較されることによる問題を示しています。
const mixedNumbers = [10, 100, 20, 25, 40];
mixedNumbers.sort();
console.log(mixedNumbers); // 出力: [10, 100, 20, 25, 40]3. 数値として正しくソートする方法
数値の配列を正しくソートするためには、比較関数を提供する必要があります。比較関数は、2つの引数を受け取り、これらの値の大小を比較して数値を返します。数値の昇順にソートする場合、次のように比較関数を定義します。
サンプルコード
以下のコードは、数値の配列を正しくソートする方法を示しています。
const numbers = [10, 100, 20, 25, 40];
numbers.sort((a, b) => a - b);
console.log(numbers); // 出力: [10, 20, 25, 40, 100]このように、比較関数を使用することで、数値の大小関係に基づいて正しくソートされます。
4. sort()メソッドの安定性
JavaScriptのsort()メソッドは、ECMAScript 2019（ES10）以降、安定したソートを保証しています。これは、同じ値を持つ要素の順序が元の配列の順序を保持することを意味します。たとえば、同じ数値を持つオブジェクトがある場合、元の順序が維持されます。
サンプルコード
以下のコードは、安定性を示す例です。
const students = [
{ name: "Alice", grade: 90 },
{ name: "Bob", grade: 90 },
{ name: "Charlie", grade: 85 },
];
students.sort((a, b) => a.grade - b.grade);
console.log(students);
// 出力: [
// { name: "Charlie", grade: 85 },
// { name: "Alice", grade: 90 },
// { name: "Bob", grade: 90 }
// ]この例では、AliceとBobは同じ成績を持っていますが、元の順序が保持されています。
5. sort()メソッドの他の意外な挙動
sort()メソッドには、他にも意外な挙動があります。たとえば、undefinedやnullの扱いです。これらの値は、ソート時に特別な扱いを受け、通常は配列の最後に移動します。
サンプルコード
以下のコードは、undefinedやnullを含む配列をソートする例です。
const values = [10, null, 20, undefined, 30];
values.sort();
console.log(values); // 出力: [10, 20, 30, null, undefined]このように、nullやundefinedは配列の最後に移動します。
6. まとめ
JavaScriptのArray.prototype.sort()メソッドは、非常に便利ですが、デフォルトの動作にはいくつかの意外な挙動があります。特に、数値の配列をソートする際には、比較関数を提供することが重要です。以下のポイントを押さえておくと、sort()メソッドをより効果的に利用できます。
- デフォルトの動作:
sort()メソッドは、要素を文字列として比較します。 - 比較関数の使用: 数値の配列を正しくソートするためには、比較関数を提供する必要があります。
- 安定性: ES2019以降、
sort()メソッドは安定したソートを保証します。 - 特別な値の扱い:
undefinedやnullは、通常、配列の最後に移動します。
これらの知識を活用して、JavaScriptの配列を効果的に操作しましょう。
