sort, map, filter 함수 (1)

array 정렬하는 법
- .sort() 사용

array - 순서 개념 有 - 정렬 가능

.sort() - 문자 정렬 - .sort() 이거만 붙이면 됨.

var 어레이 = ["a", "c", "b"];
어레이.sort();
console.log(어레이);

 문자 역순 정렬

var 어레이 = ["a", "c", "b"];
어레이.sort(function(a, b) {
  if (a > b) {
    return -1; // a가 b보다 크면 a를 더 앞으로 배치
  }
  if (a < b) {
    return 1; // a가 b보다 작으면 b를 더 앞으로 배치
  }
  return 0; // 같으면 변경하지 않음
});

var 어레이 = ["a", "c", "b"];
어레이.sort().reverse();

console.log(어레이); // ["c", "b", "a"]

.sort() - 숫자 정렬 = 콜백함수 붙여야 함. (숫자 오름차순 1,2,3)

var 어레이 = [2, 5, 1, 6, 20];
어레이.sort();
console.log(어레이);

이렇게 말고

var 어레이 = [2, 5, 1, 6, 20];
어레이.sort(function (a, b) {
  return a - b;
});
console.log(어레이);

파라미터 a, b 사용

a, b는 각각 배열의 요소들 = 하나하나의 데이터들


 return 오른쪽이 양수면 (사칙연산 한 값이 양수면) a를 오른쪽으로 정렬
 return 오른쪽이 음수면 b를 오른쪽으로 정렬

array 안의 자료들을 계속 뽑아서 a, b에 넣어줌


예를 들면 a, b가 7과 3일 경우 7 - 3 하면 4가 남음
4는 양수. 그러면 7을 3보다 오른쪽으로 보내줌.

내림차순 (321순) 정렬

var 어레이 = [2, 5, 1, 6, 20];
어레이.sort(function (a, b) {
  return b - a;
});
console.log(어레이);

---

버튼 누르면 products를 가격순 정렬

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

array 안에 숫자가 아닌 object

HTML

 

  <div class="container">
      <div class="row"></div>
      <button class="btn btn-danger" id="more">더보기</button>
      <button class="btn btn-danger" id="price">가격순정렬</button>
    </div>

가격순 정렬 버튼 생성 - #price

price 누르면 가격순으로 정렬하기.

$("#price").click(function () {
  products.sort(function (a, b) {});
});

price 에 click 이벤트 리스너 부착. 

= 버튼 클릭할 때마다 안에 코드 실행.

 

a-b : array안의 데이터들.

a 하고 b 는 하나하나의 object 들

// 14) Array 정렬하기
$("#price").click(function () {
  products.sort(function (a, b) {
    return a - b;
  });
});

return 문도 필요해서 

return 문 추가.

// 14) Array 정렬하기
$("#price").click(function () {
  products.sort(function (a, b) {
    return a.price - b.price;
  });
});

가격순 정렬

- object 안에 있는 숫자들을 빼보기

{ } 안에 있는 가격 - { } 안에 있는 가격 

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

products 를 출력해보면 가격순으로 정렬된 거 확인 가능.

---

products 자료 정렬했으니
html 정렬해보기

// 14) Array 정렬하기
$("#price").click(function () {
  products.sort(function (a, b) {
    return a.price - b.price;
  });
  products.forEach((a, i) => {
    var 템플릿 = `
    <div class="col-sm-4">
      <img src="https://via.placeholder.com/600" class="w-100" />
      <h5>${products[i].title}</h5>
      <p>가격 :${products[i]["price"]}</p>
    </div>
  `;
    $(".row").append(템플릿);
  });
});

html 새로 생성 코드 짜기

가격순 정렬 눌렀을 때 이렇게 보임.

 

// 14) Array 정렬하기
$("#price").click(function () {
  products.sort(function (a, b) {
    return a.price - b.price;
  });
  $(".row").html("");
  products.forEach((a, i) => {
    var 템플릿 = `
    <div class="col-sm-4">
      <img src="https://via.placeholder.com/600" class="w-100" />
      <h5>${products[i].title}</h5>
      <p>가격 :${products[i]["price"]}</p>
    </div>
  `;
    $(".row").append(템플릿);
  });
});

$(".row").html(""); 이거 추가.

$(".row").html(""); 
기존의 가격 뒤죽박죽 html 을 싹 비웠다가 새로 생성

추가해주면 가격순 정렬했을 때 이렇게 보임.

---

array에 자주 쓰는 filter 함수
- 원하는 자료만 필터링

// filter
var 어레이 = [7, 2, 5, 10, 20, 4, 0, 1];
어레이.filter(function (a) {});
console.log(어레이);

파라미터 사용 

a - array 에 있던 하나 하나의 자료

= 7, 2, 5, 10, 20, 4, 0, 1

return 문도 필요.

// filter
var 어레이 = [7, 2, 5, 10, 20, 4, 0, 1];
어레이.filter(function (a) {
  return a < 4;
});
console.log(어레이);

return 문에 조건식 사용

 return 우측에 조건식을 넣으면 조건식에 맞는 a만 남겨줌.

 

4 미만의 자료만 남기고 싶은 경우 a < 4 이렇게 코드를 짜주기

= a 를 하나하나 다 검사해서 4보다 미만인 거만 뱉어준다.

// filter
var 어레이 = [7, 2, 5, 10, 20, 4, 0, 1];
var 새어레이 = 어레이.filter(function (a) {
  return a < 4;
});
console.log(새어레이);

새어레이 라는 변수 생성해서 filter 함수 사용해주기.

filter 함수는 변수에 저장해서 써야 함. 

= sort 함수와 달리, 원본 변형 안하기 때문

콘솔로그로 출력된 모습

---

array에 자주 쓰는 map 함수

// filter
var 어레이 = [7, 2, 5, 10, 20, 4, 0, 1];
var 새어레이 = 어레이.map(function (a) {
  return a * 4;
});
console.log(새어레이);

return 에다가 변형할 식을 적어주기.

array 안의 숫자들을 전부 4를 곱해주기

곱해진 것 확인 가능.