JavaScript Jquery 를 이용한 Ajax 개념과 사용방법 / array 정렬 (sort, map, filter 함수)

Ajax 란?

• 서버에 GET, POST 요청을 할 때 새로고침 없이 데이터를 주고받을 수 있게 도와주는 간단한 브라우저 기능
• 새로고침 없이도 쇼핑몰 상품을 더 가져올 수도 있고 새로고침 없이도 댓글을 서버로 전송할 수도 있다.

Ajax 사용하는 방법

• Jquery

$.get('url ~~~'); // 해당 url의 데이터를 가져옴
$.post('url ~~~'); // 해당 url의 데이터를 보냄

$.get('url ~~~')
  .done(function(data){ // 요청 성공시 done 안에 코드를 실행
    console.log(data)
  })
  .fail(function(error){ // 요청 실패시 done 안에 코드를 실행
    console.log('실패함')
  });

• JavaScript

fetch('url ~~~') // 해당 url의 데이터를 가져옴
  .then(res => res.json()) 
  .then(function(data){ // 요청 성공시 done 안에 코드를 실행
    console.log(data)
  })
  .catch(function(error){
    console.log('실패함') // 요청 실패시 done 안에 코드를 실행
  });

Array 정렬

- sort

문자정렬

<오름차순>

var 어레이 = ['다','가','자','아'];

어레이.sort();
console.log(어레이);

---

<내림차순>

var 어레이 = ['다','가','자','아'];

어레이.sort();
어레이.reverse();
console.log(어레이);

or

var 어레이 = ['다','가','자','아'];

어레이.sort(function(a, b){
	if( a > b ){
    	return 1;
    } else {
    	return -1;
    }
});

console.log(어레이);

---

숫자정렬

<오름차순>

var 어레이 = [3,2,6,4];

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

---

<내림차순>

var 어레이 = [3,2,6,4];

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

Array Object 정렬

Array 안에 Object 를 선택하여 정렬하고 싶은 경우

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

product.sort(function(a, b){
	return a.price - b.price
});

Array filter

조건과 true 하는 결과값만 출력

filter() 는 변수에 저장하여 사용해야한다.

var array = [7,3,5,2,40];

var newArray = array.filter(function(a){
  return a < 4
}); 

console.log(newArray);

Array map

array 안의 자료들을 변형하려면 map 함수를 사용한다.

map() 는 변수에 저장하여 사용해야한다.

var array = [7,3,5,2,40];

var newArray = array.map(function(a){
  return a * 4
}); 

console.log(newArray);