react.js 공부 useState 데이터 정렬하기 #4-1

해당 내용은 유튜브 코딩애플님의 채널에서 공부하여 작성된 내용임을 밝힙니다.

 

 

자바스크립트 정렬에는 sort함수를 사용한다.

function 정렬바꾸기(){ 
    //useState는 직접 변경이 불가능하기 떄문에 특정 변수에 값을 복사한다음 진행한다.
    var newArray = [...글제목];
    newArray = newArray.sort();
    글제목변경(newArray)
  }

 

여기서 sort함수에 대해서 더 공부하게되었는데,

codingbroker.tistory.com/41

위 주소의 글을 읽고 공부한 내용을 적는다.

const arr = [5, 100, 20];
console.log(arr); // [5, 100, 20]

이런 배열이 있을때, sort함수를 사용하게되면, 문자열로 변환되어 숫자의 크기와는 상관없이 첫자리 숫자순으로 오름차순된다.

 

const arr = [5, 100, 20];
console.log(arr); // [5, 100, 20]

arr.sort();
console.log(arr); // [100, 20, 5]

정상적인 오름차순이라면, [5,20,100]이여야 하지만 결과를 보면 첫자리 숫자의 오름차순으로[1,2,5]여서 [100,20,5]로 배열되었다.

 

정상으로 숫자의 오름차순을 하기 위해선 비교 함수를 통해 가능하다.

const arr = [5, 100, 20];
console.log(arr); // [5, 100, 20]

arr.sort((a, b) => {
  if (a > b) {
    return 1;
  } else if (a < b) {
    return -1;
  } else {
    return 0;
  }
});
console.log(arr); // [5, 20, 100]

※비교함수 규칙

• 매개변수로 두개의 값(a, b)을 전달합니다.

• 배열내의 임의의 요소 a와 b를 비교할 때 반환되는 값이 0보다 크면 a가 b보다 앞에 옵니다.

• 반환되는 값이 0보다 작으면 b가 a보다 앞에 옵니다.

• 반환되는 값이 0이면 순위를 변경하지 않습니다.

이렇게 긴걸 줄여서도 쓸 수있다고 한다.

const arr = [5, 100, 20];
console.log(arr); // [5, 100, 20]

arr.sort((a, b) => a - b);
console.log(arr); // [5, 20, 100]

 

 

내림차순은

a와 b를 바꿔주면 된다고 한다.

const arr = [5, 100, 20];
console.log(arr); // [5, 100, 20]

arr.sort((a, b) => b - a);
console.log(arr); // [100, 20, 5]

 

이를 수정해서 임의정렬도 할수있는데,

 

10으로 나눈 나머지를 기준으로 오름차순 정렬

const arr = [55, 19, 31];
console.log(arr); // [55, 19, 31]

arr.sort((a, b) => (a % 10) - (b % 10));
console.log(arr); // [31, 55, 19]

 

문자배열에서 각 문자열의 길이를 기준으로 오름차순 정렬

const arr = ["strawberry", "apple", "orange"];
console.log(arr); // ["strawberry", "apple", "orange"]

arr.sort((a, b) => a.length - b.length);
console.log(arr); // ["apple", "orange", "strawberry"]