【JSリファレンス】Array.prototype.toSorted()

更新日：2024/06/14

初出：ECMAScript2023


Array.prototype.toSorted()は、Arrayオブジェクト(Arrayコンストラクターのインスタンス)のプロトタイプチェーンに組み込まれるメソッドです。
新規配列を生成して、元となる配列要素を昇順に並び替えた結果をセットして返します。
並び替え方法は、コールバック関数によるカスタマイズが可能です

同様の機能を持つArray.prototype.sort()は元となる配列を変更しましたが、このメソッドは元となる配列を変更しません。

欠番インデックスおよびundefinedは、コールバック関数呼び出しされません。
またコールバック関数の有無にかかわらず、ソート後の配列において、undefined、欠番の順で後方にセットされます。

 

■構文


Array.prototype.toSorted ( comparefn )
  1. comparefn: 省略可能。
    要素の比較を行う関数を指定する。
生成された配列

 

■comparefnの構文


comparefn ( x , y ){  }
  1. x: 現在比較対象となっている要素の値
  2. y: 現在比較対象となっている要素の値
x と y の大小関係を、次の表に従って返す

■戻り値とxとyの関係
大小関係戻り値
y の方が大きい( x < y ) 負の値
x の方が大きい( x < y ) 正の値
同じ値( x = y )0

comparefnの省略時は、抽象比較 x < y が true なら -1、x > y が true なら 1、それ以外なら 0 をcomparefnが返したとみなす。

 

■使用例

▶昇順ソート

const array = [,5,undefined,,2,7];
const array2 = array.toSorted( (a,b)=> a - b );
console.log( array2 ); 
   // [ 2, 5, 7, undefined, undefined, undefined ]
console.log( array ); 
   // [ <1 empty item>, 5, undefined, <1 empty item>, 2, 7 ]

▶降順ソート

const array = [,5,undefined,,2,7];
const array2 = array.toSorted( (a,b)=> b - a );
console.log( array2 );
   // [ 7, 5, 2, undefined, undefined, undefined ]
console.log( array ); 
   // [ <1 empty item>, 5, undefined, <1 empty item>, 2, 7 ]

▶オブジェクトをソート

const objArray =[
    { value:5 },{ value:2 },{ value:7 },{ value:1 }
];
const array = objArray.toSorted( (a,b)=>a.value - b.value);
console.log( array );
  // [ { value: 1 }, { value: 2 }, { value: 5 }, { value: 7 } ]
console.log( objArray );
  // [ { value: 5 }, { value: 2 }, { value: 7 }, { value: 1 } ]

 

■備考

call()等でアレイライクオブジェクトを対象にすることも可能です。

const arrayLike = { 0:3 ,1:1 , 2:7, length:3 };
const array =  Array.prototype.toSorted.call( arrayLike, (x,y)=>x-y );
console.log( array );  // [ 1, 3, 7 ]
console.log( arrayLike ); 
    // { '0': 1, '1': 3, '2': 7, length: 3 }

 

関連ページ

●【JavaScript】Arrayのsort()とtoSorted()の違い

更新日：2024/06/14

書いた人（管理人）：けーちゃん

スポンサーリンク

記事の内容について

null

こんにちはけーちゃんです。
説明するのって難しいですね。

「なんか言ってることおかしくない？」
たぶん、こんなご意見あると思います。

裏付けを取りながら記事を作成していますが、僕の勘違いだったり、そもそも情報源の内容が間違えていたりで、正確でないことが多いと思います。
そんなときは、ご意見もらえたら嬉しいです。

掲載コードについては事前に動作確認をしていますが、貼り付け後に体裁を整えるなどをした結果動作しないものになっていることがあります。
生暖かい視線でスルーするか、ご指摘ください。

ご意見、ご指摘はこちら。
https://jsref.affi-sapo-sv.com/info.php

 

このサイトは、リンクフリーです。大歓迎です。