sort（）メソッドでjavascriptのオブジェクトの配列を並べ替えます-jsチュートリアル-php.cn

Sort an Array of Objects in JavaScript with the sort() method

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

コアポイント

メソッドを使用してオブジェクト配列を並べ替えて、比較関数を使用して、文字列、数字、日付、その他のプロパティのソートロジックを定義できます。 Array.sort
メソッドは、ソートされた元の配列を変更します。これを回避するために、Array.sortメソッドまたは拡張オペレーターを使用して新しい配列インスタンスを作成してソートできます。 Array.slice

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

Array.sortなぜ32が5より前にあるのか興味があるかもしれません。不合理に思えますよね？実際、そうではありません。これは、配列内の各要素が最初に文字列に変換され、「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でオブジェクト配列をソートする方法

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

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

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

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

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 {} ]

ログイン後にコピー

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

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

数字の単純な配列を見てみましょう：

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を減算することも値を返すため、いくつかのリファクタリングを行うことができます。この比較関数は、数字の配列を小さいものから大部分に並べ替えます：

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 反转返回值
  return comparison * -1;
}

ログイン後にコピー

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

ご覧のとおり、比較関数は多くの方法で記述でき、

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

動的なソート関数を作成

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

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)

ログイン後にコピー

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

hasOwnProperty

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

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

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

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

array-sort

underscore.js
sugarjs
lodash

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

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

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

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

ログイン後にコピー

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

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 反转返回值
  return comparison * -1;
}

ログイン後にコピー

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

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

関数の観点から、これはこのように書くことができることを意味します。

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)

ログイン後にコピー

結論

localeCompare

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

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

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

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

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

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

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

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

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

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

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

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

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