Sort 메서드 정렬방식

쫀구·2022년 7월 30일
0
post-custom-banner

✅ 동작

기본적으로 .sort() 를 한다면 정렬이 되는것을 알고있다. 메서드 안에 compareFunction 를 설정하지 않으면 요소를
문자열로 변환하고 유니 코드 코드 포인트 순서로 문자열을 비교하여 정렬된다.

즉 문자열에서는 ㄱ-ㅎ 순으로 정렬되고, 숫자 정렬에서는 3이 250보다 앞에 오지만 숫자는 문자열로 변환되기 때문에 "250"은 유니 코드 순서에서 "3"앞에옵니다.
(앞글자인 2와 3을 비교하는듯)

let b = [250, 30, 14, 7, 9 , 3, 23, 1 ];
b.sort()
// [1, 14, 23, 250, 3, 30, 7, 9]

이렇게 동작하는데 compareFunction 을 설정하도록 한다.

let b = [250, 30, 14, 7, 9 , 3, 23, 1 ]
b.sort((a,b) => a - b );
// [1, 3, 7, 9, 14, 23, 30, 250]

a 와 b 를 연산한 값을 기준으로 정렬한다. (a - b)

  • a가 음수 인경우 b보다 앞으로 온다 (a < 0)
  • 0인경우 순서를 바꾸지 않는다. ( a === 0)
  • a가 양수 인경우 b 뒤로간다. (a > 0 )

a - b 를 하는경우 오름차순 b - a 는 내림차순으로 정렬된다.

객체 정렬

MDN 에서 가져온 내용이다. name , value 기준 정렬 가능하다.

const items = [
  { name: 'Edward', value: 21 },
  { name: 'Sharpe', value: 37 },
  { name: 'And', value: 45 },
  { name: 'The', value: -12 },
  { name: 'Magnetic', value: 13 },
  { name: 'Zeros', value: 37 }
];

// value 기준으로 정렬
items.sort(function (a, b) {
  if (a.value > b.value) {
    return 1;
  }
  if (a.value < b.value) {
    return -1;
  }
  // a must be equal to b
  return 0;
});

// name 기준으로 정렬
items.sort(function(a, b) {
  const nameA = a.name.toUpperCase(); // ignore upper and lowercase
  const nameB = b.name.toUpperCase(); // ignore upper and lowercase
  if (nameA < nameB) {
    return -1;
  }
  if (nameA > nameB) {
    return 1;
  }

  // 이름이 같을 경우
  return 0;
});

한글 정렬도 가능하다

const user = [
  { name: '하동훈', age: 42 },
  { name: '길성준', age: 43 },
  { name: '정준하', age: 50 },
  { name: '노홍철', age: 45 },
  { name: '유재석', age: 48 },
  { name: '박명수', age: 51 }
];


user.sort(function(a, b) {
  const userA = a.name.toUpperCase(); // ignore upper and lowercase
  const userB = b.name.toUpperCase(); // ignore upper and lowercase
  if (userA < userB) {
    return -1;
  }
  if (userA > userB) {
    return 1;
  })

  [
  {name: '길성준', age: 43} 
  {name: '노홍철', age: 45}
  {name: '박명수', age: 51}
  {name: '유재석', age: 48}
  {name: '정준하', age: 50} 
  {name: '하동훈', age: 42}
  ]
profile
Run Start 🔥
post-custom-banner

0개의 댓글