Array.prototype.sort() - 配列をソートする

2017/09/26

Array.prototype.sort()は、配列を任意のルールでソートするメソッドです。ソート後の配列を返しますが、元の配列が変更されています。

概要

名前: sort
所属: Array.prototype
仕様書: https://tc39.github.io/ecma262/#sec-array.prototype.sort

説明

Array.prototype.sort ( comparefn )

第1引数(comparefn)にソートの優劣を付けるためのコールバック関数を指定します。配列の要素の、結果を出すのに必要なだけの組み合わせ(例: [0]と[1]、[1]と[2]、[2]と[3]、[3]と[0]…)がこの関数にかけられていきます。関数は要素A、要素B、の2つの引数を受け取ります。この関数が正の数を返すと要素Aは要素Bより後にソートされ、負の数を返すと要素Aは要素Bより前にソートされます。0の場合はそのままです。なお、コールバック関数を省略した場合は、単純にアルファベット順にソートされます。

ソート後の配列を返しますが、これは新しい配列ではなく元の配列です。

function callbackfn ( valueA, valueB ) {
	if ( valueA > valueB ) {
		return -1 ;
	} else if ( valueB > valueA ) {
		return 1 ;
	} else {
		return 0 ;
	}
}

チュートリアル

ある配列を数値の小さい順に並べる、というテーマでArray.prototype.sort()を利用してみましょう。

var array = [ 7, 11, 3, 40 ] ;

var comparefn = function ( valueA, valueB ) {
	if( valueA > valueB ) {
		return 1 ;

	} else if( valueA < valueB ) {
		return -1 ;

	} else {
		return 0 ;

	}
}

array.sort( comparefn ) ;	// [ 3, 7, 11, 40, ]

内部では次の流れで処理が行なわれています。

comparefn( 7, 11 ) ;	// -1 ( 返り値が負の数なので、A(7)はB(11)より前になる ) → [ 7, 11, 3, 40 ]
comparefn( 11, 3 ) ;	// +1 ( 返り値が正の数なので、A(11)はB(3)より後になる ) → [ 7, 3, 11, 40 ]
comparefn( 7, 3 ) ;	// +1 ( 返り値が正の数なので、A(7)はB(3)より後になる ) → [ 3, 7, 11, 40 ]
comparefn( 11, 40 ) ;	// -1 ( 返り値が負の数なので、A(11)はB(40)より前になる ) → [ 3, 7, 11, 40 ]

// → [ 3, 7, 11, 40, ]

デモ

Array.prototype.sort()のデモです。

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<html>
<head>
	<style>
body {
	white-space: pre-wrap ;
}
	</style>
</head>
<body>
<script>
/** try it! **/
var comparefn = function ( valueA, valueB ) {
	if( valueA > valueB ) {
		return 1 ;

	} else if( valueA < valueB ) {
		return -1 ;

	} else {
		return 0 ;

	}
}

var a = [ 7, 11, 3, 40 ].sort( comparefn ) ;
var b = [ "S", "Y", "N", "C", "E", "R", ].sort() ;
/** try it! **/

var results = { a:a, b:b, } ;

for( var name in results ) {
	console.log( name, results[name] ) ;
	document.body.appendChild( new Text( name + " = " + JSON.stringify( results[name] ) + "\n" ) ) ;
}
</script>
</body>
</html>