자바 스크립트에서 사용자 지정 정렬 순서를 만드는 방법

image from undraw.co

Originally posted on afewminutesofcode.com

일반적으로 배열 numerically 또는 alphabetical order 을 정렬하고 싶지만 사용자 지정 정렬 순서가 필요한 경우도 있습니다.

진행 중인 항목을 먼저 표시한 다음 할 일과 완료한 항목을 표시하려는 아래 예를 살펴보겠습니다.

const tasks = [
  {id:1, title: 'Job A', status: 'done'},
  {id:2, title: 'Job B', status: 'inProgress'},
  {id:3, title: 'Job C', status: 'todo'},
  {id:4, title: 'Job D', status: 'inProgress'},
  {id:5, title: 'Job E', status: 'todo'}
]

먼저 원하는 정렬 순서로 배열을 만듭니다.

const sortBy = ['inProgress', 'todo', 'done']

그런 다음 데이터를 객체로 출력하는 reduce를 사용하여 함수를 만들 것입니다. {inProgress: 0, todo: 1, done: 2} 배열 항목을 키로 사용하고 인덱스를 값으로 사용합니다.

const sortByObject = data => data.reduce(
  (obj,item,index) => ({
    ...obj,
    [item]:index
}), {}
)
console.log(sortByObject(sortBy))
/* {inProgress: 0, todo: 1, done: 2} */

이제 정렬 설정이 있으므로 배열( data ), sortby 배열 및 sortField를 전달하는 재사용 가능한 함수와 함께 모든 것을 가져올 수 있으므로 정렬할 필드를 알 수 있습니다.

const customSort = ({data, sortBy, sortField}) => {
  const sortByObject = sortBy.reduce(
  (obj, item, index) => ({
      ...obj,
      [item]: index
  }), {})
  return data.sort((a, b) => sortByObject[a[sortField]] - sortByObject[b[sortField]])
}

console.log(customSort({data:tasks, sortBy, sortField: 'status'}))

이제 사용자 지정 순서에 따라 정렬되지만 목록에 다른 상태(정렬 순서에 없는 항목)가 있는 항목이 있는 경우 문제가 발생합니다. 따라서 이를 처리하기 위해 정렬에서 원하지 않는 모든 항목을 포착하도록 기본 정렬 필드를 설정합니다.

const tasksWithDefault = tasks.map(item => ({...item, sortStatus: sortBy.includes(item.status) ? item.status:'other'}))

이를 통해 이번에는 업데이트된 정렬 필드를 전달하여 함수를 다시 로그아웃하면 목록 맨 아래에 다른 항목과 함께 올바른 정렬 순서가 표시됩니다.

console.log(customSort({
  data:tasksWithDefault,
  sortBy: [...sortBy,'other'],
  sortField: 'sortStatus'
  }))

더 많은 팁을 찾거나 내 다음 게시물을 사용할 수 있을 때 알림을 받고 싶다면 여기에서 Me Online을 따르십시오.

Facebook
afewminutesofcode.com

Pinterest