JavaScript에서 배열 정렬

정렬은 자바스크립트를 배울 때 사용하게 될 많은 필수 방법 중 하나입니다. 데이터 유형이 다른 정렬 방법을 사용하는 방법을 살펴보겠습니다.


문자열
기본적으로 정렬 방법은 해당 요소를 사전순으로 구성합니다.

const names = ['Sophie', 'Fletcher', 'Emmy', 'Izzy', 'Cooper']

const sortNames = names.sort()

console.log(sortNames)

//['Cooper', 'Emmy', 'Fletcher', 'Izzy', 'Sophie']

이 배열을 역순으로 쉽게 정렬할 수도 있습니다!

const reversedNames = sortNames.reverse()

console.log(reversedNames)

// ['Sophie', 'Izzy', 'Fletcher', 'Emmy', 'Cooper']

번호
숫자를 정렬할 때 콜백 함수를 사용하여 값 비교를 처리합니다.

const nums = [10, 855, 31, 2, 930, 430, 529, 59]

const sortedNums = numbers.sort((a, b) => a - b)

console.log(sortedNums)

//[2, 10, 31, 59, 430, 529, 855, 930]

숫자가 있는 문자열
이 예제는 문자열에 10 미만의 주입된 숫자가 있을 때 적용됩니다. (나중에 예제에서 이 예제의 더 확장된 버전이 있습니다!) 이 예제에서는 슬라이스()를 사용하고 숫자가 삽입된 문자열을 숫자로 변환합니다. 이렇게 하면 모든 요소가 동일한 데이터 유형인 모든 배열 요소를 정렬할 수 있습니다.

const library = ['Book 1', 'Book 6', 'Book 2', 'Book 4', 'Book 3', 'Book 5']

const sortedLibrary = library.sort((a, b) => {
return +a.slice(-1) - +b.slice(-1)
})

console.log(sortedLibrary)
// ['Book 1', 'Book 2', 'Book 3', 'Book 4', 'Book 5', 'Book 6']

긴 숫자가 포함된 문자열
9보다 큰 숫자의 경우 정규식을 사용하여 해당 값을 기준으로 요소를 찾고 정렬하는 방법이 있습니다.

이 예에서는 정규식을 사용합니다.

Regex라고도 하는 정규식은 검색 패턴을 형성하는 일련의 문자입니다. 검색 패턴은 텍스트 검색 및 텍스트 바꾸기 작업에 사용할 수 있습니다.

(Regex는 처음 접했을 때 정말 위협적일 수 있습니다. 저는 개인적으로 여전히 혼란스럽다고 생각합니다. 겉모습은 차치하고 많은 상황에서 유용할 수 있는 매우 유용하고 강력한 유형의 코드입니다.)

먼저 정규식의 모양을 분석해 보겠습니다.

const coolRegex = /\d+/

coolRegex의 첫 번째와 마지막/은 표현식의 경계를 나타냅니다.

\d는 숫자

를 나타냅니다.

+는 '1회 이상'

을 의미합니다.

전체적으로 정규식을 사용하면 9보다 큰 요소를 찾고 배열의 요소를 정렬할 수 있습니다.

전체 예제로 이동해 보겠습니다.

const coolRegex = /\d+/;

const longLibrary = [
    'Book 339',
    'Book 868',
    'Book 23',
    'Book 90',
    'Book 5', 
    'Book 41',
    'Book 375'

]

const sortedLibrary = longLibrary.sort((a, b) => {
   return a.match(coolRegex) - b.match(coolRegex)
})

console.log(sortedLibrary)

//['Book 5', 'Book 23', 'Book 41', 'Book 90', 'Book 339', 'Book 375', 'Book 868']

정규 표현식을 만드는 구문을 더 잘 이해하기 위해 이 게시물의 끝 부분에 리소스를 제공할 것입니다!


사물
개체의 경우 개체의 id 값을 기준으로 이 배열을 정렬합니다.

const users = [
 {id: 4, name: 'Jared' },
 {id: 8, name: 'Nicolette'},
 {id: 2, name: 'Michael'},
 {id: 5, name: 'Sade'},
 {id: 9, name: 'Megan'},
 {id: 1, name: 'Giovanni'},
]

const sorted = users.sort((a, b) => {
 return a.id - b.id 
})


console.log(sorted)

/*
 {id: 1, name: 'Giovanni'}
 {id: 2, name: 'Michael'}
 {id: 4, name: 'Jared'}
 {id: 5, name: 'Sade'}
 {id: 8, name: 'Nicolette'}
 {id: 9, name: 'Megan'}
*/

개인 메모:
Regex는 정말 멋지지만 지금까지 개인적으로 사용한 적이 없습니다. 대부분의 경우 사람들이 정규식을 사용하여 알고리즘과 데이터 유형 문제를 간소화하는 것을 보았습니다. 일상적인 작업에서 정규식을 사용하는 경우 알려주세요! 학습에 사용한 방법과 리소스를 알고 싶습니다.

하지만 이 글을 읽는 초보자는 초조해하지 마시기 바랍니다. 할 수 있는 것을 흡수하려고 노력하되 정규식에 대한 모든 것을 배워야 한다는 압박감을 느끼지 마십시오! 예제에 사용된 정규식의 분류를 이해하려고 노력하십시오.

정규식 리소스:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Character_Classes

https://www.computerhope.com/unix/regex-quickref.htm