JavaScript: 組織の値を並べ替える

王林
リリース: 2023-08-30 20:17:02
オリジナル
579 人が閲覧しました

JavaScript: 組織の値を並べ替える

JavaScript 配列の基本をすでに理解している場合は、より高度なトピックでスキルを次のレベルに引き上げましょう。この一連のチュートリアルでは、JavaScript で配列を使用したプログラミングの中級トピックを学習します。

配列の並べ替えは、JavaScript でプログラミングする場合に最も一般的なタスクの 1 つです。したがって、JavaScript プログラマーとして、配列を正しく並べ替える方法を学ぶことは、実際のプロジェクトで頻繁に行うことになるため、非常に重要です。間違った並べ替え手法を使用すると、アプリケーションの速度が大幅に低下する可能性があります。

以前は、Web 開発者は jQuery などのサードパーティ ライブラリを使用し、リスト コレクション内の値を並べ替えるために多くのコードを記述する必要がありました。幸いなことに、JavaScript はそれ以来大幅に進化しました。サードパーティのライブラリを使用せずに、わずか 1 行のコードで数千の値を含む JavaScript 配列を並べ替えることができるようになりました。

この記事では、JavaScript で単純な配列コレクションと複雑な配列コレクションを並べ替える方法を説明します。 JavaScript sort() メソッドを使用して並べ替えます:

  • 数値配列
  • 文字列配列
  • 複雑なオブジェクト配列
    • 名前 (文字列) で指定
    • プレスID(数字)
    • 生年月日(日付)順

このチュートリアルを終えるまでに、JavaScript の sort() メソッドがどのように機能するか、およびそれを使用して数値、文字列、オブジェクトの配列を並べ替える方法を完全に理解できるはずです。

JavaScript sort() メソッド

JavaScript sort() メソッドは、JavaScript で最も便利でよく使用される配列メソッドの 1 つです。これにより、データ要素の配列を昇順または降順にすばやく簡単に並べ替えることができます。

このメソッドを使用すると、数値、文字列、日付、さらにはオブジェクトの配列を並べ替えることができます。 sort() このメソッドは、要素の配列を取得し、いくつかの基準に基づいて並べ替えることによって機能します。基準には、関数、比較演算子、または値の配列を使用できます。

数値の配列を並べ替える

数値配列の並べ替えは、sort メソッドを使用すると非常に簡単です。 リーリー

上記のコードでは、

sort() メソッドは numbers を昇順でソートします。これがデフォルトのモードです。

数値を逆方向 (降順) に並べ替えることもできます。これを行うには、次のカスタム並べ替え関数を作成する必要があります:

リーリー

この関数は、並べ替える 2 つの値を表す 2 つのパラメーター (

ab) を受け取ります。正の数が返された場合、sort() メソッドは、ba の前にソートする必要があることを認識します。負の数が返された場合、sort()ab の前に来る必要があることを認識します。 b > a の場合、関数は正の数を返します。つまり、ab より小さい場合、b は次のようになります。前 a で。 リーリー

次のステップは、文字列配列をソートする方法です。

Java スクリプトでの文字列配列のソート

文字列値の並べ替えも同様に簡単です:

リーリー

次は、同じ文字列を降順に並べ替える関数です:

リーリー

2 番目の名前がアルファベット順で最初の名前の後に来る場合、関数から

1 が返されます。これは、2 番目の名前がソートされた配列の最初に来ることを意味します。それ以外の場合は、-1 を返し、等しい場合は 0 を返します。

ここで、

names 配列に対して、引数として desc を指定して sort メソッドを実行すると、次のような別の出力が得られます。 リーリー JavaScript で複雑なオブジェクトの配列を並べ替える

これまでは、文字列や数値などの単純な値のみを並べ替えてきました。

sort()

メソッドを使用してオブジェクトの配列を並べ替えることもできます。以下のセクションでその方法を見てみましょう。

オブジェクトを名前で並べ替える (文字列属性)

ここには、複数の人物オブジェクトを含む

people

配列があります。各オブジェクトは、idname、および dob プロパティで構成されます。 リーリー この配列を name

プロパティで並べ替えるには、カスタム 並べ替え関数を作成し、それを

sort メソッドに渡す必要があります。 リーリー This byName カスタム ソート関数は毎回 2 つのオブジェクトを受け取り、それらの 2 つの名前プロパティを比較してどちらが大きいかを確認します (つまり、アルファベット順に最初)。 リーリー

ここでコードを再度実行すると、次の結果が得られます:

[
  {id: 17, name: "Aladdin", dob: '1989-06-21'},
  {id: 15, name: "Blessing", dob: '1999-04-09'},
  {id: 29, name: "John", dob: '1992-11-09'},
  {id: 54, name: "Mark", dob: '1985-01-08'},
  {id: 32, name: "Prince", dob: '2001-09-09'}
]
ログイン後にコピー

按 ID 排序(数字属性)

在前面的示例中,我们按名称(字符串)进行排序。在此示例中,我们将按每个对象的 ID 属性(数字)进行排序。

为此,我们可以使用以下函数:

function byID(a, b) {
  return parseInt(a.id) - parseInt(b.id)
}
ログイン後にコピー

在函数中,我们使用 parseInt() 来确保该值是一个数字,然后我们将两个数字相减以获得负值、正值或零值。使用此函数,您可以按公共数字属性对任何对象数组进行排序。

console.log(students.sort(byID))
/*
[
  {id: 15, name: "Blessing", dob: '1999-04-09'},
  {id: 17, name: "Aladdin", dob: '1989-06-21'},
  {id: 29, name: "John", dob: '1992-11-09'},
  {id: 32, name: "Prince", dob: '2001-09-09'}
  {id: 54, name: "Mark", dob: '1985-01-08'},
]
*/
ログイン後にコピー

按日期排序

假设您想要构建一个应用程序,允许用户从数据库下载姓名列表,但您希望根据出生日期(从最年长到最年轻)按时间顺序排列姓名.

此函数按年、月、日的时间顺序对出生日期进行排序。

function byDate(a, b) {
   return new Date(a.dob).valueOf() - new Date(b.dob).valueOf()
}
ログイン後にコピー

Date().valueOf() 调用返回每个日期的时间戳。然后,我们执行与前面示例中相同的减法来确定顺序。

演示:

console.log(students.sort(byDate))

/*
[
  {id: 54, name: "Mark", dob: '1985-01-08'},
  {id: 17, name: "Aladdin", dob: '1989-06-21'},
  {id: 29, name: "John", dob: '1992-11-09'},
  {id: 15, name: "Blessing", dob: '1999-04-09'},
  {id: 32, name: "Prince", dob: '2001-09-09'}
]
*/
ログイン後にコピー

这种特殊方法在涉及日期顺序的情况下非常方便,例如确定谁有资格获得养老金或其他与年龄相关的福利的申请。

结论

总的来说,使用各种内置方法时,在 JavaScript 中对元素进行排序非常简单。无论您需要对数字、字符串、对象还是日期数组进行排序,都有一种方法可以轻松完成这项工作。借助这些方法,您可以快速轻松地对 JavaScript 应用程序中的任何数据进行排序。

以上がJavaScript: 組織の値を並べ替えるの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!