당신이 모르는 자바스크립트의 정렬 방법-JS 튜토리얼-php.cn

당신이 모르는 자바스크립트의 정렬 방법

일상 비즈니스 개발에서 배열(Array)은 우리가 자주 사용하는 데이터 유형이므로 루프를 사용하여 배열 방식을 순회하는 것을 제외하면 배열을 정렬하는 것도 매우 일반적입니다. 데이터를 정렬하려면 JS 배열의 기본 메서드 sort를 사용하여 정렬하세요(예, 저는 JS 기본의 강력한 기능을 선호합니다).

[관련 강좌 추천: JavaScript 동영상 튜토리얼]

1 밤을 주세요

배열 정렬에 직접 사용할 수 있는 메서드는 다음과 같습니다: reverse() 및 sort(), reverse() 메서드는 유연하지 않기 때문 충분합니다.sort() 방법. 기본적으로 sort() 메서드는 배열을 오름차순으로 정렬합니다.

var arr=[1,3,5,9,4];
console.log(arr.sort());
// 输出: [1, 3, 4, 5, 9]

로그인 후 복사

이때 데이터가 작은 것부터 큰 것까지 정렬되어 있는 것을 발견하여 문제가 없으므로 배열을 다음과 같이 변경했습니다. var arr=[101,1,3,5,9,4 ,11];, 그런 다음 sort() 메서드를 호출하여 정렬된 결과를 인쇄합니다.

var arr=[101,1,3,5,9,4,11];
console.log(arr.sort());
// 输出: [1, 101, 11, 3, 4, 5, 9]

로그인 후 복사

이때 배열 101과 11이 3위보다 먼저 순위가 매겨진 것을 발견했습니다. 왜냐하면 sort() 메서드가 toString() 변환 메서드를 호출하기 때문입니다. 배열을 확인한 다음 결과를 비교합니다. 배열의 각 항목이 숫자 값인 경우에도 sort() 메서드는 문자열을 비교합니다.

그럼 문자열은 어떻게 정렬되나요? 문자열의 유니코드 인코딩에 따라 작은 것부터 큰 것까지 정렬됩니다. 다음으로 배열의 각 항목에 대한 유니코드 인코딩을 인쇄하여 살펴보겠습니다.

...
// 转码方法
function getUnicode (charCode) {
    return charCode.charCodeAt(0).toString(16);
}
// 打印转码
arr.forEach((n)=>{
  console.log(getUnicode(String(n)))
});
// 输出: 31 31 31 33 34 35 39

로그인 후 복사

1,101,11의 문자열 유니코드 인코딩이 모두 31이라는 사실에 놀랐습니다

2 비교 함수에 전달하여 순서를 지정합니다#. 🎜🎜## 🎜🎜# 위에서 sort() 메서드가 원하는 순서대로 정렬되지 않은 것을 발견했습니다. 그러면 이를 해결하는 방법은 무엇입니까? sort() 메서드는 비교 함수를 매개변수로 받을 수 있습니다. 어떤 값이 어떤 값 앞에 있는지 지정합니다.

비교 함수(비교)는 두 개의 매개변수를 받습니다. 첫 번째 매개변수가 두 번째 매개변수보다 앞에 있으면 음수를 반환합니다. 두 매개변수가 같으면 0을 반환합니다. 두 번째 매개변수 앞에는 0이 반환됩니다. 그 이후에는 정수가 반환됩니다.

function compare(value1,value2){
  if (value1 < value2){
    return -1;
  } else if (value1 > value2){
    return 1;
  } else{
    return 0;
  }
}

로그인 후 복사

sort() 메소드에 비교 함수를 전달하고 arr 배열을 정렬하면 인쇄 결과는 다음과 같습니다.

var arr=[101,1,3,5,9,4,11];
console.log(arr.sort(compare));
// 输出: [1, 3, 4, 5, 9, 11, 101];

로그인 후 복사

없음을 확인할 수 있습니다. 작은 것에서 큰 것으로 정렬하는 데 문제가 있습니다.

3. 객체 배열 정렬

sort() 메서드는 비교 함수를 전달하여 숫자형 배열을 정렬하지만 개발 단계에서는 id, age 등과 같은 객체 배열의 특정 속성을 정렬할 예정인데 어떻게 해결해야 할까요?

이 문제를 해결하려면 함수를 정의하고 속성 이름을 수신한 다음 이 속성 이름을 기반으로 비교 함수를 만들고 이를 반환 값으로 반환할 수 있습니다(JS의 함수는 값으로 사용됨) 이를 사용하면 매개변수 전달처럼 하나의 함수를 다른 함수에 전달할 수 있을 뿐만 아니라 하나의 함수를 다른 함수의 결과로 반환할 수도 있습니다. 함수가 JS에서 일급 시민인 이유가 있습니다. 실제로 매우 유연합니다.) 코드는 다음과 같습니다.

function compareFunc(prop){
  return function (obj1,obj2){
    var value1=obj1[prop];
    var value2=obj2[prop];
    if (value1 < value2){
        return -1;
    } else if (value1 > value2){
        return 1;
    } else{
        return 0;
    }
  }
}

로그인 후 복사

배열 사용자 정의, sort() 메서드를 호출하고 CompareFunc(prop)을 전달하여 출력 결과를 인쇄합니다.

var users=[
    {name:&#39;tom&#39;,age:18},
    {name:&#39;lucy&#39;,age:24},
    {name:&#39;jhon&#39;,age:17},
];
console.log(users.sort(compareFunc(&#39;age&#39;)));
// 输出结果
[{name: "jhon", age: 17},
{name: "tom", age: 18},
{name: "lucy", age: 24}]

로그인 후 복사

기본적으로 sort() 메서드 비교 함수를 입력할 때 sort() 메서드는 각 개체의 toString() 메서드를 호출하여 순서를 결정합니다. CompareFunc('age') 메서드를 호출하여 비교 함수를 만들 때 정렬은 기반으로 이루어집니다. 객체의 연령 속성에 대해.

4. XML 노드 정렬

이제 많은 백그라운드 반환 데이터가 매우 가볍고 구문 분석하기 쉬운 JSON 형식이지만. 하지만 이전 프로젝트에서는 백그라운드에서 반환되는 데이터가 모두 XML 문자열이었기 때문에 프런트엔드에서 데이터를 받은 후 직렬화해야 했고, 일부는 정렬도 해야 했습니다. 그렇게 하는 데에는 문제가 없지만 코드가 매우 중복되고 번거롭다고 생각됩니다. 나중에 문득 얻은 xml도 배열형 객체라는 생각이 들었습니다. 배열형 객체를 배열로 변환하면 바로 정렬이 가능하지 않을까요?

// 1.模拟后端返回的XML字符串
var str=`
<root>
  <user>
    <name>tom</name>
    <age>18</age>
  </user>
  <user>
    <name>lucy</name>
    <age>24</age>
  </user>
  <user>
    <name>jhon</name>
    <age>17</age>
  </user>
<root>
`   
// 2.定义比较函数
function compareFunction(prop){
  return function (a, b) {
      var value1= a.getElementsByTagName(prop)[0].textContent;
      var value2= b.getElementsByTagName(prop)[0].textContent;
      if (value1 < value2){
        return -1;
      } else if (value1 > value2){
        return 1;
      } else{
        return 0;
    }
  }
}
// 3.xml字符串转换成xml对象
var domParser = new DOMParser();
var xmlDoc = domParser.parseFromString(str, &#39;text/xml&#39;);
var userElements=xmlDoc.getElementsByTagName(&#39;user&#39;));
// 4.userElements类数组对象转换成数组再排序
var userElements=Array.prototype.slice.call(xmlDoc.getElementsByTagName(&#39;user&#39;));
var _userElements=userElements.sort(compareFunction(&#39;age&#39;));
// 5.打印排序后的结果
_userElements.forEach((user)=>{
  console.log(user.innerHTML);
});

로그인 후 복사

정렬된 결과 인쇄

XML 노드가 연령에 따라 작은 것부터 큰 것 순으로 정렬되어 있는 것을 확인할 수 있습니다.

5. 요약

JS 배열의 정렬 방법은 들어오는 비교 기능으로 인해 정렬이 훨씬 더 유연해지며 시간을 기준으로 합니다. , 한어병음 첫 글자 기준으로 정렬하는 등 비교 함수를 전달하여 두 객체의 속성값을 명확하게 비교하고, 그 비교를 통해 객체의 정렬 순서를 결정한다는 것만 기억하면 됩니다. 속성 값. 저도 직장에서 문제를 겪었고 이를 해결하기 위해 새로운 아이디어를 찾았습니다. 부족한 점이 있으면 바로잡아주세요.

참조:

《JavaScript Advanced Tutorial》

이 기사는

js 튜토리얼

칼럼에서 가져온 것입니다. 오신 것을 환영합니다. 배우다!

위 내용은 당신이 모르는 자바스크립트의 정렬 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!