JavaScript의 배열을 빠르게 검토합니다.원형sort () 방법

표지 이미지 자막: Hunter x Hunter manga Togashi, meme-ified by yours True<삼.
면접에서 당신이 선택한 언어의 기본 지식을 이해하는 것은 매우 중요하다.이것은 상식처럼 들리지만, 기초 지식의 차이는 당신을 매우 나쁘게 보일 것이다.(응) 불쾌한 경험(빠른 조회MDN documents on JavaScript’s Array.protoype.sort() 방법과 관련)을 겪은 후에 나는 우리가 본 시리즈 앞에서 검색한 같은 JSON 대상으로 간단한 실현을 해체하고 싶다.

분류가 중요해!이 녀석에게 물어봐라, 그는 자신이 무엇을 하고 있는지 잘 안다!

기본 배열.원형sort () 비헤이비어


기본적으로 문자열의 알파벳 순서나 숫자 값을 기반으로 자바스크립트 그룹에서 호출.sort()하면 최저에서 최고까지의 기본 정렬을 시도합니다.그러나 기본 비헤이비어는 문자열의 첫 번째 요소 (첫 번째 문자만) 나 숫자 (첫 번째 숫자만) 만 비교합니다.
다음은 MDN 문서의 각 예입니다.
// sorting strings alphabetically, based on the first letter
var months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();
console.log(months);
// expected output: Array ["Dec", "Feb", "Jan", "March"]

// sorting integers by their first digit
var array1 = [1, 30, 4, 21, 100000];
array1.sort();
console.log(array1);
// expected output: Array [1, 100000, 21, 30, 4]
100000명이 1에서 21 사이를 볼 때 당황할 수도 있다는 것은 이해할 수 있다.다행히도 자바스크립트는 compareFunction 내부.sort()를 사용하여 정렬 동작을 사용자 정의할 수 있는 내장 방식을 제공했습니다!

비교 함수를 사용하여 정렬 동작을 정의합니다.정렬 (함수 (a, b) {...})


기본 정렬 동작을 변경하려면 compareFunction 이라는 익명 함수를 추가할 수 있습니다.우리는 그것을 .sort() 호출에 추가하고 매개 변수 ab 를 전달하여 수조의 원소를 표시합니다.
예를 들어 우리는 정수의 첫 번째 숫자만 비교하고 이를 바탕으로 정렬하는 것이 아니라 ab의 전체 값을 비교할 수 있다.
DN 문서에서 다시 작성:
// sorting integers by their value
var array1 = [1, 30, 4, 21, 100000];

array1.sort(function(a, b) {   // this anonymous function is the compareFunction
    if (a < b) {    // now the entire values of a & b are compared
        return -1;
    };
    if (a > b) {
        return 1;
    };
    // a must be equal to b, no change to index
    return 0;
});

console.log(array1);
// expected output: Array [1, 4, 21, 30, 100000]
너무 좋아요.현재, 현식 비교ab의 전체 값을 통해 그들의 첫 번째 숫자뿐만 아니라, 우리는 예상한 숫자 정렬을 얻었다.
익명 compareFunction 은 음(-1), 0 (0) 또는 정 (1) 의 반환을 찾고 있기 때문에 특수합니다.
Negative  =>  lower index
Zero      =>  no change
Positive  =>  higher index
따라서 우리는 최종적으로 마이너스/0값/양값을 되돌려 주기를 원하는 모든 조건을 만들 수 있다.

네스트된 속성 기반 JSON 정렬


TL;DR: 중첩 속성을 비교 논리에서 쉽게 사용할 수 있는 변수에 할당합니다!"title" 속성의 알파벳 순서에 따라 https://www.reddit.com/r/popular.json 의 JSON을 정렬하는 더 복잡한 예시를 살펴보겠습니다.
참고로 JSON은 data.children 그룹의 속성을 기반으로 정렬됩니다.

우리는 같은 node-fetch package를 사용할 것이다.
const url = "https://www.reddit.com/r/popular.json"


// use the node-fetch package to retrieve JSON from the URL above
const fetch = require('node-fetch');


let settings = {
    method: "Get"
};

fetch(url, settings)
.then(res => res.json())
.then((json) => {
    sortJson(json);
});
sortJson() 함수에서 다음 단계를 사용합니다.
  • 우리는 속성을 선택하여 data.children 그룹의 모든 대상을 읽고 data.children[i].data[property] 을 통해 접근합니다.
  • 우리는 compareFunction를 정의했다. 이것은 우리가 정의한 ab 의 속성을 비교한다.우리는 끼워 넣는 값을 접근하기 쉬운 변수 ”property”property1 에 분배할 것이다.

  • 비교property2property1.일반적으로 이러한 비교는 음수 값(-1), 0 (0) 또는 양수 값(1)을 반환합니다.원본 그룹은 속성에 따라 다시 정렬됩니다.

  • 

이것은 우리의 함수입니다. property2 속성을 사용하여 상향 투표에 따라 정렬합니다.
    // sort Array json.data.children alphabetically by "title"
    function sortJson(json) {
    
        // you can easily change this to any property, such as “ups” or “author_fullname"
        let property = "title";  
    
    
        json.data.children.sort(function(a, b) {
    
            // create new variables to easily access nested data for sorting
            let propertyA = a.data[property];
            let propertyB = b.data[property];
    
            if (propertyA < propertyB) {    // checks for a “lower” alphabetical order
                return -1
            };
            if (propertyA > propertyB) {    // checks for a “higher” alphabetical order
                return 1
            };
            return 0    // if titles are equal
    
        });
    
    
    // First 3 Objects in Array json.data.children BEFORE sort():
    // [0].data.title: What do you NEVER f*** with?
    // [1].data.title: [Game Thread] Florida vs. Miami (7:00PM ET)
    // [2].data.title: 🎉 100.000.000 SUBSCRIBERS 🎉
    
    // First 3 Objects in Array json.data.children AFTER sort():
    // [0].data.title: 'Like you've been fired from your job': YouTubers have lost thousands of dollars after their channels were mistakenly demonetized for months
    // [1].data.title: Disney+ episodes will release on a weekly basis, instead of the all at once “binge” model
    // [2].data.title: Employee spits in food for Instagram likes
    
    출력에 정상적인 JavaScript 문자열 알파벳 정렬 규칙(예: 알파벳 D 이전의 삐침표)이 적용됩니다.

    결론


    정렬은 모든 언어에서 없어서는 안 될 기능이기 때문에 기술 도전을 하기 전에 반드시 연습을 해야 한다!또한 자바스크립트와 루비 등 언어에 대해 정렬 방법이 백그라운드에서 어떻게 이루어지는지 깊이 있게 이해하십시오. 맞춤형 정렬 기능을 만들 수 있기 때문입니다.
    그리고 MDN 문서에 익숙해지는 데 여느 때처럼 시간이 걸리더라도 쉽게 참조할 수 있습니다. MDN docs for Array.protoype.sort()
    아래에 추가 정렬 힌트나 기교를 논평해 주십시오!

    19 년 8 월 28 일 업데이트


    방금 JavaScript”title”에 gotchas와 불일치성에 대한 믿을 수 없는 글이 발표되었습니다.구체적으로 말하면 그는 두 가지 중요한 주제를 포괄했다. 이 두 가지 주제는 이번 심사에 대한 보충이다.
  • null(문자열 "null"또는 정수 0 강제)
  • 정의되지 않은 값이 있는 미정의 항목/객체를 처리하는 방법
  • 좋은 웹페이지 즐겨찾기