javaScriptネイティブArray.sortメソッドは、オブジェクト配列を簡単にソートすることもできます！この記事では、メソッドを使用して文字列、數(shù)値、および日付を含むオブジェクトの配列をソートする方法を示し、ケースの感度、配列コピー、および共通ライブラリを処理するための実用的なヒントを提供します。 Array.sort

コアポイント

JavaScriptのネイティブ
• メソッドを使用してオブジェクト配列を並べ替えて、比較関數(shù)を使用して、文字列、數(shù)字、日付、その他のプロパティのソートロジックを定義できます。 Array.sort
javaScriptの比較関數(shù)は數(shù)値を返し、ソート順序を決定します。整數(shù)が0未満の場合、2番目の要素の前に表示されます。
文字列または數(shù)値を使用してオブジェクトの配列を並べ替えることができる動的なソート関數(shù)を作成できます。この関數(shù)は、指定されたキーに従って昇順または下降するとソートできます。
javaScriptの
• メソッドは、ソートされた元の配列を変更します。これを回避するために、Array.sortメソッドまたは拡張オペレーターを使用して新しい配列インスタンスを作成してソートできます。 Array.slice

基本的な配列ソート（およびそれが機能しない理由）デフォルトでは、JavaScript メソッドは、文字列にソートする必要がある配列內(nèi)の各要素を変換し、Unicodeコードポイント順序で比較します。

Array.sortなぜ32が5より前にあるのか興味があるかもしれません。不合理に思えますよね？実際、そうではありません。これは、配列內(nèi)の各要素が最初に文字列に変換され、「32」がUnicode順に「5」の前にあるためです。

const foo = [9, 1, 4, 'zebroid', 'afterdeck'];
foo.sort(); // 返回 [ 1, 4, 9, 'afterdeck', 'zebroid' ]

const bar = [5, 18, 32, new Set, { user: 'Eleanor Roosevelt' }];
bar.sort(); // 返回 [ 18, 32, 5, { user: 'Eleanor Roosevelt' }, Set {} ]

オブジェクト配列を並べ替えるためにのみ

を使用することは、効率的にソートすることはできません。幸いなことに、メソッドは、オブジェクト配列をソートするために使用できるオプションの

パラメーターを受け入れます。 Array.sort sortcompareFunctionjavascriptでオブジェクト配列をソートする方法

オブジェクトの配列を並べ替えるには、比較関數(shù)を使用してメソッドを使用します。比較関數(shù)は、カスタムロジックに従ってルールを適用し、配列を並べ替えます。それらは、文字列、整數(shù)、日付、またはその他のカスタム屬性によってオブジェクトの配列を並べ替えることができます。この記事の後半で比較機能がどのように機能するかを説明します。

このデモでは、歌手の配列を使用して、バンド名でアルファベット順に並べ替えます。

sort()次の比較関數(shù)は、各バンドの（capsular）名前を比較しています。

ソート順序を反転するには、比較関數(shù)の返品値を反転させることができます。

const foo = [9, 1, 4, 'zebroid', 'afterdeck'];
foo.sort(); // 返回 [ 1, 4, 9, 'afterdeck', 'zebroid' ]

const bar = [5, 18, 32, new Set, { user: 'Eleanor Roosevelt' }];
bar.sort(); // 返回 [ 18, 32, 5, { user: 'Eleanor Roosevelt' }, Set {} ]

比較機能はどのように機能しますか

比較関數(shù)は、2つの入力（AとB）を比較することにより、ソート順序を決定するために使用される數(shù)を返します。簡単に言えば、整數(shù)が0未満の場合、bが0よりも大きい場合は、bが正確に表示されます。しかし、この數(shù)をどのように判斷するかはあなたに依存します。

數(shù)字の単純な配列を見てみましょう：

const singers = [
  { name: 'Steven Tyler', band: 'Aerosmith', born: 1948 },
  { name: 'Karen Carpenter', band: 'The Carpenters', born: 1950 },
  { name: 'Kurt Cobain', band: 'Nirvana', born: 1967 },
  { name: 'Stevie Nicks', band: 'Fleetwood Mac', born: 1948 },
];

AからBを減算することも値を返すため、いくつかのリファクタリングを行うことができます。この比較関數(shù)は、數(shù)字の配列を小さいものから大部分に並べ替えます：

function compare(a, b) {
  // 使用 toUpperCase() 忽略字符大小寫
  const bandA = a.band.toUpperCase();
  const bandB = b.band.toUpperCase();

  let comparison = 0;
  if (bandA > bandB) {
    comparison = 1;
  } else if (bandA < bandB) {
    comparison = -1;
  }
  return comparison;
}

singers.sort(compare);

/* 返回 [
  { name: 'Steven Tyler', band: 'Aerosmith',  born: 1948 },
  { name: 'Stevie Nicks', band: 'Fleetwood Mac', born: 1948 },
  { name: 'Kurt Cobain', band: 'Nirvana', born: 1967 },
  { name: 'Karen Carpenter', band: 'The Carpenters', born: 1950 }
] */

他の場所で比較関數(shù)を定義せずに矢印関數(shù)として表現(xiàn)することもできます。

function compare(a, b) {
  // ...
  // 通過乘以 -1 反轉(zhuǎn)返回值
  return comparison * -1;
}

矢印関數(shù)に慣れていない場合は、こちらの詳細については、javascriptの矢印関數(shù)をご覧ください。

ご覧のとおり、比較関數(shù)は多くの方法で記述でき、

メソッドは指示に従って実行されます。 sort()

動的なソート関數(shù)を作成

以前の例を完了して、より動的にしましょう。値が文字列または數(shù)字であるオブジェクトの配列を並べ替えるために使用できるソート関數(shù)を作成しましょう。この関數(shù)には2つのパラメーターがあります。ソートしたいキーと結(jié)果の順序（つまり、上昇または下降）：

const nums = [79, 48, 12, 4];

function compare(a, b) {
  if (a > b) return 1;
  if (b > a) return -1;

  return 0;
}

nums.sort(compare);
// => 4, 12, 48, 79

これを使用する方法：

上記のコードでは、指定された屬性が各オブジェクトに定義され、プロトタイプチェーンを介して継承されていないかどうかを確認するために

function compareNums(a, b) {
  return a - b;
}
nums.sort(compareNums)

メソッドを使用します。両方のオブジェクトで定義されていない場合、関數(shù)は0を返します。これにより、ソート順序が変更されたままになります（つまり、オブジェクトは互いに変わらないままです）。

hasOwnProperty

オペレーターは、プロパティ値のタイプを確認するためにも使用されます。これにより、関數(shù)が配列をソートする正しい方法を決定できます。たとえば、指定されたプロパティの値が文字列である場合、

メソッドはすべての文字を大文字に変換するために使用されるため、ソート時に文字ケースは無視されます。 typeof toUpperCase他のデータ型や、スクリプトが必要とする他のニーズに合わせて上記の機能を調(diào)整できます。

人気のある配列ソートライブラリ

ネイティブJavaScriptで獨自のソート機能を作成する時間や忍耐がない場合があります。時間はお金であり、コードには時間がかかります。幸いなことに、すべての配列選別ニーズを満たすことができるさまざまなライブラリがあります。ソート機能を含むいくつかの補助ライブラリの短いリストがあります...特定の順序はありません;）

array-sort

• underscore.js
• sugarjs
• lodash

クイックヒント：日付でオブジェクト配列をソート

日付文字列でオブジェクトの配列を並べ替えるには、最初に日付文字列を解析し、互いに減算する比較関數(shù)を提供する必要があります。

クイックヒント：配列を変更せずに並べ替え

nums.sort((a, b) => a - b);

他の多くのJavaScriptアレイ関數(shù)とは異なり、Array.sortは、新しい配列を返す代わりに、ある種の配列を変更（変更）するメソッドの1つです。これを回避するために、ソートされる配列の新しいインスタンスを作成して変更できます。これを使用して、配列メソッドまたは拡張機能構(gòu)文を使用して配列のコピーを作成できます。

const foo = [9, 1, 4, 'zebroid', 'afterdeck'];
foo.sort(); // 返回 [ 1, 4, 9, 'afterdeck', 'zebroid' ]

const bar = [5, 18, 32, new Set, { user: 'Eleanor Roosevelt' }];
bar.sort(); // 返回 [ 18, 32, 5, { user: 'Eleanor Roosevelt' }, Set {} ]

Array.slice：

を使用して配列コピーを作成します

const singers = [
  { name: 'Steven Tyler', band: 'Aerosmith', born: 1948 },
  { name: 'Karen Carpenter', band: 'The Carpenters', born: 1950 },
  { name: 'Kurt Cobain', band: 'Nirvana', born: 1967 },
  { name: 'Stevie Nicks', band: 'Fleetwood Mac', born: 1948 },
];

または、拡張機能擔當者を使用して同じ効果を得ることができます。

function compare(a, b) {
  // 使用 toUpperCase() 忽略字符大小寫
  const bandA = a.band.toUpperCase();
  const bandB = b.band.toUpperCase();

  let comparison = 0;
  if (bandA > bandB) {
    comparison = 1;
  } else if (bandA < bandB) {
    comparison = -1;
  }
  return comparison;
}

singers.sort(compare);

/* 返回 [
  { name: 'Steven Tyler', band: 'Aerosmith',  born: 1948 },
  { name: 'Stevie Nicks', band: 'Fleetwood Mac', born: 1948 },
  { name: 'Kurt Cobain', band: 'Nirvana', born: 1967 },
  { name: 'Karen Carpenter', band: 'The Carpenters', born: 1950 }
] */

どちらの場合も、出力は同じであり、オブジェクト配列をソートする前に使用できます。

function compare(a, b) {
  // ...
  // 通過乘以 -1 反轉(zhuǎn)返回值
  return comparison * -1;
}

クイックヒント：無感覚な方法で文字列ごとにアレイをソートする 前の例では、文字列または數(shù)字である値を持つオブジェクトの配列を並べ替えたいと考えていました。ただし、値が文字列であるオブジェクトのみを処理することがわかっている場合は、JavaScriptのメソッドを使用してコードを整理できます。

このメソッドは、文字列が並べ替えられた順序で指定された文字列と同じかどうかを示す數(shù)値を返します。これにより、配列のケースに依存しない並べ替えが可能になります localeCompare

関數(shù)の観點から、これはこのように書くことができることを意味します。

const nums = [79, 48, 12, 4];

function compare(a, b) {
  if (a > b) return 1;
  if (b > a) return -1;

  return 0;
}

nums.sort(compare);
// => 4, 12, 48, 79

の詳細については、MDNをご覧ください。 compareValues

function compareNums(a, b) {
  return a - b;
}
nums.sort(compareNums)

結(jié)論

localeCompare

それだけです - ネイティブJavaScriptを使用してオブジェクトの配列をソートするのは簡単です。多くのライブラリは、この動的な並べ替え機能を提供していますが、示されているように、この機能を自分で実裝することは難しくありません。さらに、舞臺裏で何が起こっているのかを知ることも役立ちます。

ネイティブJavaScriptの基礎(chǔ)をより包括的な理解を構(gòu)築するには、JavaScript：初心者からNinjasに至ることをお勧めします。 ES6を含むJavaScriptをゼロから學(xué)び、さまざまなプロジェクトを通じて新しい知識を?qū)g踐してください。 JavaScriptのオブジェクト配列をソートする方法についての

FAQ javascriptでオブジェクト配列をソートできますか？

はい。 JavaScriptは、配列要素をソートするのに役立つ組み込みの方法を提供します。

JavaScriptでオブジェクト配列をソートする方法は？

メソッドを使用し、カスタム比較関數(shù)を提供して、JavaScriptのオブジェクトの配列をソートすることができます。比較関數(shù)は、各オブジェクトの関連プロパティを比較する必要があります。

keyによってJavaScriptのオブジェクトの配列を並べ替えるにはどうすればよいですか？

比較関數(shù)にキーを提供することにより、オブジェクトの配列を動的にソートできます。これにより、さまざまな屬性でソートできます。 JavaScriptの特定のキー（プロパティ）でオブジェクトの配列を並べ替えるには、各オブジェクトの目的キーの値を比較するカスタム比較関數(shù)を使用できます。

JavaScriptでオブジェクト配列を動的にソートする方法は？

実行時に決定されたキー（プロパティ）に基づいてJavaScriptのオブジェクトの配列を動的にソートするには、パラメーターとして配列とキーを受け入れる関數(shù)を作成できます。この関數(shù)は、Array.prototype.sort()メソッドとカスタム比較関數(shù)を使用して、ソート用の動的に提供されたキーにアクセスできます。

オブジェクト配列の並べ替えを簡素化するライブラリはありますか？はい、LodashやUnderscore.jsなどのライブラリは、機能と利便性を備えたオブジェクトの配列をソートするためのユーティリティ関數(shù)を提供します。ただし、JavaScriptの組み込みsort()メソッドは通常、基本的なソートニーズを満たすのに十分です。

オブジェクトキーケースによるソートは敏感ですか？はい、デフォルトでは、オブジェクトキーによるソートはケースに敏感です。 localeCompare()メソッドを使用して、ケース非感受性のソートを?qū)g行できます。

以上がsort（）メソッドでjavascriptのオブジェクトの配列を並べ替えますの詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。