.sort()

sort()メソッドは配列の要素を適切にソートし、その配列を返します。 ソートは、必ずしもstableではありません。 デフォルトのソート順は、文字列のUnicodeのコードポイントに従います。

文法

arr.sort([compareFunction])
引数 説明
compareFunction ソート順を定義する関数を指定します。 省略すると配列は各要素の文字列変換に応じ、 各文字のUnicodeのコードポイント値に従ってソートされます。

説明

compareFunctionが提供されなかった場合、 要素は文字列に変換されUnicodeのコードポイント順に文字列比較されてソートされます。 例えば、"Cherry"は"banana"の前になります。 数値のソートであれば、9は80の前になりますが、数値は文字列へ変換され、Unicode順では"80"が"9"の前になります。

var fruit = ["apples", "bananas", "Cherries"];
fruit.sort(); // ["Cherries", "apples", "bananas"];

var scores = [1, 2, 10, 21];
scores.sort(); // [1, 10, 2, 21]

var things = ["word", "Word", "1 Word", "2 Words"];
things.sort(); // ["1 Word", "2 Words", "Word", "word"]
// Unicodeの順番では、数値は大文字より前に、大文字は小文字より前になります。

compareFunctionが提供されると、配列要素はその比較関数の戻り値に従ってソートされます。 aとbの2つの要素が比較されるとすると、次のようになります。

  • compareFunction(a, b)の結果が0より少なければ、 aはbより前のインデックスになり、この例ではaが先になります。
  • compareFunction(a, b)が0を返すと、aとbはお互いに変更されないままになりますが、 他の全ての要素でのソートは行われます。 注意: ECMAscript標準ではこの振る舞いを保証しないため、 全てのブラウザ(例えば、Mozillaの少なくとも2003以前のバージョン)で、これを遵守していません。
  • compareFunction(a, b)が0より大きい場合、bはaより前のインデックスになります。
  • compareFunction(a, b)は、引数に特定の要素のペアがaとbを与えられたのであれば、 常に同じ結果を返さなければいけません。 結果に一貫性が無い場合、ソート順を定義することが出来ません。

そのため、比較関数は次のような形式を持ちます。

function compare(a, b) {
  if (ソート順に基づき、aはbより小さい)
     return -1;

  if (ソート順に基づき、aはbより大きい)
     return 1;

  // aはbと等しい(ここに到達する場合は等しいはずである)
  return 0;
}

文字では無く数値を比較するには、比較関数で単純にaからbの引き算をします。 下記の関数は、配列の昇順で並び替えます。

function compareNumbers(a, b) {
  return a - b;
}

ソートのメソッドは、関数式(とクロージャ)を使用して簡略化して書くことが出来ます。

var numbers = [4, 2, 5, 1, 3];
numbers.sort(function(a, b) {
    return a - b;
});
print(numbers);

オブジェクトは、それらのプロパティのいずれかの指定された値でソートすることが可能です。

var items = [
  { name: "Edward", value: 21 },
  { name: "Sharpe", value: 37 },
  { name: "And", value: 45 },
  { name: "The", value: -12 },
  { name: "Magnetic" },
  { name: "Zeros", value: 37 }
];
items.sort(function (a, b) {
    if (a.name > b.name)
      return 1;
    if (a.name < b.name)
      return -1;
    // a must be equal to b
    return 0;
});

例

配列の作成、表示、ソート

下記の例は4つの配列を作成し、その元の配列を表示して、配列をソートします。 数値の配列は比較関数が無い場合、ある場合でソートを行っています。

var stringArray = ["Blue", "Humpback", "Beluga"];
var numericStringArray = ["80", "9", "700"];
var numberArray = [40, 1, 5, 200];
var mixedNumericArray = ["80", "9", "700", 40, 1, 5, 200];

function compareNumbers(a, b) {
  return a - b;
}

// 出力関数(console.log)が定義されているとします。
console.log("stringArray:", stringArray.join());
console.log("stringArray(sort実行):", stringArray.sort());

console.log("numberArray:", numberArray.join());
console.log("比較関数無しでソート:", numberArray.sort());
console.log("比較関数(compareNumbers)でソート:", numberArray.sort(compareNumbers));

console.log("numericStringArray:", numericStringArray.join());
console.log("比較関数無しでソート:", numericStringArray.sort());
console.log("比較関数(compareNumbers)でソート:", numericStringArray.sort(compareNumbers));

console.log("mixedNumericArray:", mixedNumericArray.join());
console.log("比較関数無しでソート:", mixedNumericArray.sort());
console.log("比較関数(compareNumbers)でソート:", mixedNumericArray.sort(compareNumbers));

この例は下記のように出力されます。 比較関数を使用した出力を見てみると、数値として正しくソートされていることが確認出来ます。

stringArray: Blue,Humpback,Beluga
stringArray(sort実行): Beluga,Blue,Humpback

numberArray: 40,1,5,200
比較関数無しでソート: 1,200,40,5
比較関数(compareNumbers)でソート: 1,5,40,200

numericStringArray: 80,9,700
比較関数無しでソート: 700,80,9
比較関数(compareNumbers)でソート: 9,80,700

mixedNumericArray: 80,9,700,40,1,5,200
比較関数無しでソート: 1,200,40,5,700,80,9
比較関数(compareNumbers)でソート: 1,5,9,40,80,200,700

非ASCII文字のソート

例えば英語以外の言語のアクセント付き文字の文字列(e, é, è, a, ä, 他)である非ASCII文字による文字列のソートでは、 String.localeCompareを使用します。 この関数は、それらの正しい順序で表示するように文字を比較することが出来ます。

var items = ["réservé", "premier", "cliché", "communiqué", "café" ,"adieu"];
items.sort(function (a, b) {
    return a.localeCompare(b);
});

// items is [ 'adieu', 'café', 'cliché', 'communiqué', 'premier', 'réservé' ]

Sorting maps

compareFunctionは、配列内の要素ごとに複数回実行されます。 compareFunctionの処理によっては、高いオーバーヘッドが生じてしまうかもしれません。 多くの作業をcompareFunctionに行わせて、多くの要素をソートするのであれば、 ソート処理にmapの使用を検討する事は賢明な判断かもしれません。 この考え方は、一時的な配列に実際にソートに使用する値を抜き出して、その一時的な配列をソートし、 一時的な配列から元の配列を正しい順序で取得します。

// ソート対象の配列
var list = ["Delta", "alpha", "CHARLIE", "bravo"];

// 一時的な変数mapへ位置とソート順の値を保持します
var map = list.map(function(e, i){
  return {index: i, value: e.toLowerCase()}
})

// 減算値を使用してmapをソートします
map.sort(function(a, b) {
  return a.value > b.value ? 1 : -1;
});

// 結果の順序を反映して取得します
var result = map.map(function(e){
  return list[e.index]
})

仕様

ブラウザ互換性

デスクトップ
機能 Chrome Firefox
(Gecko)
IE Opera Safari
基本 1.0 1.0 (1.7 or earlier) 5.5 ◯ ◯
モバイル
機能 Android Chrome for
Android
Firefox
Mobile
IE
Mobile
Opera
Mobile
Safari
Mobile
基本 ◯ ◯ ◯ ◯ ◯ ◯

関連項目

 Back to top

© 2017 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.

このページは、ページトップのURL先のMozilla Developer Network(以下、MDN)のコンテンツを翻訳した内容を基に構成されています。 構成について異なる点も含まれますので、下記の項目を確認し、必要に応じて元のコンテンツをご確認ください。 もし、誤訳などの間違いを見つけましたら、 @tomofまで教えていただければ幸いです。

  • 特定のブラウザに特化しすぎている情報やあまりにも古い情報、 または試験的に導入されているようなAPIや機能については、省略していることがあります。
  • 例やデモについて、実際にページ内で動作させる関係で一部ソースコードを変更している場合や、 その例で使用しているコンテンツの単語や文章などを日本人向けに変更しいてる場合があります。
  • MDNの更新頻度が高いため、元のコンテンツと比べ情報が古くなっている可能性があります。
  • "訳注:"などの断わりを入れた上で、日本人向けの情報の追記を行っている事があります。