본문 바로가기
JavaScript

[JavaScript]배열 정렬하기 feat. sort, map, filter /리액트 응용

by hans-j 2023. 1. 30.

! ! ! !

이름과 인덱스로 참조되는 정렬된 값의 집합

자세한 설명은 넘어가고 바로  예시로 고고.


문자 정렬 (A-Z,가-하 오름차순)

**sort함수는 원본을 변형시키니 주의!-

//어레이는 변수명
어레이.sort();

숫자 정렬(오름차 순)

어레이.sort(
        function (a,b) {
          return a - b;
        }
      );
      console.log(어레이);

return 오른쪽이 양수면 a를 오른쪽으로 보냄.

return 오른쪽이 음수면 b를 오른쪽으로 보냄.


숫자 정렬(내림차 순)

어레이.sort(
        function (a,b) {
          return b - a;
        }
      );
 	console.log(어레이);

배열의 객체들을 값 오름차순으로 정렬한 예제

let products = [
        { id: 0, price: 70000, title: "Blossom Dress" },
        { id: 1, price: 50000, title: "Springfield Shirt" },
        { id: 2, price: 60000, title: "Black Monastery" },
      ];

        $('#price').click(function () {
          products.sort(function (a,b) {
            return a.price - b.price
          });
          console.log(products);
        })

배열에 원하는 데이터들만 걸러서 보는 filter 함수

*sort처럼 원본을 변형하지 않음. 따라서 새로운 변수에 담아써야한다.

ex)3만원 이상 상품들만 보기

var 어레이 = [7,3,5,2,40];

var 새어레이 = 어레이.filter(function(a){
  return a < 4
});

배열의 데이터들을 변형하는 map 함수

*sort처럼 원본을 변형하지는 않음*

ex) 달러를 원화로 변형하여 보기

var 어레이 = [7,3,5,2,40];

var 새어레이 = 어레이.map(function(a){
  return 수식같은거
});
//function(a)는 array에 있던 데이터를 의미함

map 함수는 

1. array/배열 자료 갯수만큼 함수안의 코드를 실행해줌

2. return으로 반환하는 값을 array/배열로 담아줌


코딩애플 강의를 듣고 작성하는 글입니다.

'JavaScript' 카테고리의 다른 글

[JavaScript]로컬스토리지  (1) 2023.01.30
[JavaScript]DOM이란?  (0) 2023.01.30
[JavaScript]Ajax란?  (0) 2023.01.29
[JavaScript]이벤트 버블링  (1) 2023.01.28
[JavaScript]Jquery +사용법  (0) 2023.01.25