JavaScript Array Sort - In Depth(및 몇 가지 편리한 정렬 유틸리티)

이 게시물은 값 배열, 개체 배열 및 키를 기준으로 개체 정렬의 예와 함께 JavaScript의 배열 정렬 방법을 설명합니다.

간단한 예

Array.prototype.sort() 배열을 제자리에 정렬합니다(즉, 원래 배열을 변경함).

숫자를 정렬하려면:

const numbers = [4, 8, 2, 0]
numbers.sort()
console.log(numbers) // -> [0, 2, 4, 8]

문자열을 정렬하려면:

const strings = ['c', 'd', 'b', 'a']
strings.sort()
console.log(strings) // -> ["a", "b", "c", "d"]

개체를 정렬하려면 사용자 정의 정렬 기능을 사용해야 합니다.

위의 2가지 예에 해당하는 정렬 기능은 다음과 같습니다.

function defaultSort(a, b) {
  if (a < b) {
    return -1 // A negative result moves `a` before `b` to a lower
              // array index.
  }

  if (b < a) {
    return 1 // A positive result moves `a` after `b` to a higher
             // array index.
  }

  return 0 // A zero result leaves 'a' and 'b' in the same order,
           // relative to each other
           // (other array items might get sorted above them)
}

이 정렬 기능을 사용하려면:

const numbers = [4, 8, 2, 0]
numbers.sort(defaultSort)
console.log(numbers) // -> [0, 2, 4, 8]

es6을 사용하면 이 정렬 기능을 단순화할 수 있습니다.

const numbers = [4, 8, 2, 0]
numbers.sort((a, b) => a - b)
console.log(numbers) // -> [0, 2, 4, 8]

속성별로 객체 배열 정렬하기

다음은 작업할 객체 배열입니다.

const employees = [
    {
        name: 'Jane',
        salary: 20000,
        role: 'Programmer'
    },
    {
        name: 'Dave',
        salary: 25000,
        role: 'Programmer'
    },
    {
        name: 'Ben',
        salary: 10000,
        role: 'Programmer'
    },
    {
        name: 'Carol',
        salary: 50000,
        role: 'Manager'
    },
    {
        name: 'Bob',
        salary: 25000,
        role: 'Programmer'
    },
    {
        name: 'Alice',
        salary: 15000,
        role: 'Programmer'
    },
    {
        name: 'Carol',
        salary: 100000,
        role: 'CEO'
    },
    {
        name: 'Dave',
        salary: 20000,
        role: 'Programmer'
    }
]

속성별로 개체를 정렬합니다.

function sortByName({name: a}, {name: b}) {
  if (a < b) {
    return -1
  }

  if (b < a) {
    return 1
  }

  return 0
}

employees.sort(sortByName)

이것을 일반화하여 모든 속성에 적용할 수 있습니다.

const sortByProp = (prop) => (a, b) => {
  if (a[prop] < b[prop]) {
    return -1
  }

  if (b[prop] < a[prop]) {
    return 1
  }

  return 0
}

다음과 같이 사용할 수 있습니다.

const sortByName = sortByProp('name')

employees.sort(sortByName)

여러 속성을 기준으로 개체 정렬

트릭은 이전 정렬 기준이 '0'을 반환하는 경우에만 후속 정렬 기준을 적용하는 것입니다.

이것은 단일 정렬 기능으로 수행할 수 있지만 order 기능을 사용하여 정렬 기능을 구성하는 것이 훨씬 쉽다는 것을 알았습니다.

const order = (...fns) => (...args) => {
    let res = 0, i = 0;
    while (
        fns[i] !== undefined &&
        (res = fns[i++](...args)) === 0
    );

    return res
}

const byName = sortByProp('name')
const bySalary = sortByProp('salary')
const byRole = sortByProp('role')

employees.sort(
  order(
    byName,
    bySalary,
    byRole,
  )
)

console.log(employees)

이 코드는 훨씬 읽기 쉽고 정렬 기준의 순서를 변경하려면 함수의 순서를 바꾸기만 하면 됩니다.

employees.sort(
  order(
    byRole,
    bySalary,
    byName,
  )
)

추가 이점은 각 작은 정렬 기능에 대한 개별 단위 테스트를 훨씬 쉽게 작성할 수 있다는 것입니다!

키로 객체 정렬하기

마지막으로 키로 개체를 정렬하려면 Object.entries 및 Object.fromEntries 메서드를 사용합니다.

const fruits = {
  'oranges': {
    cost: .8,
    quantity: 3
  },
  'bananas': {
    cost: .75,
    quantity: 5
  },
  'apples': {
    cost: .5,
    quantity: 10
  }
}

const sorted = Object.fromEntries(
  Object.entries(
    fruits
  ).sort(([key]) => key)
)

console.log(sorted)

어떻게 작동합니까?

Object.entries(fruits)는 배열의 배열을 반환합니다. 각 하위 배열에는 key 및 object의 두 가지 요소가 있습니다.

[
  ["oranges", {
    cost: 0.8,
    quantity: 3
  }], ["bananas", {
    cost: 0.75,
    quantity: 5
  }], ["apples", {
    cost: 0.5,
    quantity: 10
  }]
]

.sort(([key]) => key) es6 화살표 함수와 구조 분해를 사용하여 첫 번째 요소를 기준으로 각 배열을 정렬합니다. key

Object.fromEntries "배열 배열"을 다시 개체로 변환합니다.