> CMS 튜토리얼 > Word누르다 > JavaScript: 조직 값 정렬

JavaScript: 조직 값 정렬

王林
풀어 주다: 2023-08-30 20:17:02
원래의
726명이 탐색했습니다.

JavaScript: 조직 값 정렬

JavaScript 배열의 기본 사항을 이미 알고 있다면 이제 고급 주제를 통해 기술을 한 단계 더 발전시킬 때입니다. 이 튜토리얼 시리즈에서는 JavaScript 배열을 사용한 프로그래밍의 중간 주제를 살펴보겠습니다.

배열 정렬은 JavaScript로 프로그래밍할 때 가장 일반적인 작업 중 하나입니다. 따라서 JavaScript 프로그래머로서 실제 프로젝트에서 배열을 자주 정렬하게 되므로 배열을 올바르게 정렬하는 방법을 배우는 것이 중요합니다. 잘못된 정렬 기술은 애플리케이션 속도를 크게 저하시킬 수 있습니다!

과거에는 웹 개발자가 jQuery와 같은 타사 라이브러리를 사용하고 목록 모음의 값을 정렬하기 위해 많은 코드를 작성해야 했습니다. 다행스럽게도 JavaScript는 그 이후로 엄청나게 발전했습니다. 이제 타사 라이브러리를 사용하지 않고도 단 한 줄의 코드만으로 수천 개의 값이 포함된 JavaScript 배열을 정렬할 수 있습니다.

이 기사에서는 JavaScript에서 단순하고 복잡한 배열 컬렉션을 정렬하는 방법을 보여 드리겠습니다. 정렬에는 JavaScript sort() 방법을 사용합니다:

  • 숫자 배열
  • 문자열 배열
  • 복잡한 객체의 배열
    • 이름별(문자열)
    • 프레스 아이디(번호)
    • 생년월일(날짜)별

이 튜토리얼을 마치면 JavaScript의 sort() 메소드 작동 방식과 이 메소드를 사용하여 숫자, 문자열 및 객체 배열을 정렬하는 방법을 철저히 이해하게 됩니다.

자바스크립트 sort() 메소드

JavaScript sort() 메서드는 JavaScript에서 가장 유용하고 일반적으로 사용되는 배열 메서드 중 하나입니다. 이를 통해 데이터 요소 배열을 오름차순 또는 내림차순으로 빠르고 쉽게 정렬할 수 있습니다.

이 방법을 사용하면 숫자, 문자열, 날짜 및 개체 배열을 정렬할 수 있습니다. sort() 방법은 요소 배열을 가져와서 몇 가지 기준에 따라 정렬하는 방식으로 작동합니다. 기준은 함수, 비교 연산자 또는 값 배열일 수 있습니다.

숫자 배열 정렬

sort 메소드를 사용하면 숫자 배열을 정렬하는 것이 매우 간단합니다.

으아악

위 코드에서 sort()方法对numbers 메소드는 숫자를 오름차순으로 정렬하는 기본 모드입니다.

숫자를 뒤로 정렬할 수도 있습니다(예: 내림차순). 이렇게 하려면 다음과 같은 사용자 정의 정렬 기능을 만들어야 합니다.

으아악

이 함수는 정렬할 두 값을 나타내는 두 개의 매개변수(ab)를 허용합니다. 양수가 반환되면 ab),它们代表要排序的两个值。如果返回正数,则 sort() 方法将理解 b 应在 a 之前排序。如果它返回负数,则 sort() 将理解 a 应该位于 b 之前。如果 b > a,则该函数将返回正数,这意味着如果 a 小于 b,则 b 将位于 a 메서드는 ba보다 먼저 정렬되어야 한다는 것을 이해합니다. 음수를 반환하는 경우

ab 앞에 와야 한다는 것을 이해합니다. 이 함수는 b > a인 경우 양수를 반환합니다. 즉, ab보다 작으면 ba 앞에 옵니다.

으아악

다음 단계는 문자열 배열을 정렬하는 방법입니다.

Java Script에서 문자열 배열 정렬

문자열 값 정렬도 쉽습니다.

으아악

다음은 동일한 문자열을 내림차순으로 정렬하는 기능입니다.

으아악 1,这意味着第二个名称将在排序数组中排在第一位。否则,我们返回 -1,如果两者相等,则返回 0두 번째 이름이 첫 번째 이름 뒤에 알파벳순으로 오면 함수에서

를 반환합니다.

names 数组运行排序方法,并以 desc이제

를 인수로 사용하면 다른 결과가 나타납니다.

으아악

JavaScript에서 복잡한 객체 배열 정렬

sort()지금까지 우리는 문자열이나 숫자 같은 단순한 값만 정렬했습니다.

메서드를 사용하여 개체 배열을 정렬할 수도 있습니다. 아래 섹션에서 그 방법을 살펴보겠습니다.

이름(문자열 속성)으로 개체 정렬

people 数组,其中包含多个 person 对象。每个对象由 idnamedob여기에는 다음으로 구성된

속성이 있습니다.

으아악 name 属性对此数组进行排序,我们必须创建一个自定义排序函数并将其传递给 sort이 배열을 name 속성으로 정렬하려면 사용자 정의 정렬 함수를 생성하고 이를

메소드에 전달해야 합니다.

으아악 byName

사용자 정의 정렬 기능은 매번 두 개의 개체를 가져와서 두 개의 이름 속성을 비교하여 어느 것이 더 큰지 확인합니다(즉, 알파벳순으로 먼저 옵니다):

으아악

이제 코드를 다시 실행하면 다음과 같은 결과를 얻게 됩니다. 🎜
[
  {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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿