Vue.js 정렬, 데이터보존 [...array]

- 정렬, 데이터보존 [...array]

 

1)배열 데이터 정렬하기

그냥 배열.sort()를 사용해도 정렬은 되지만 문자 정렬이 기본이다. 그래서 아래와 같이

함수를 만들어줘 a,b파라메터를 a-b형태로 써줘야 숫자형 정렬이 된다.

var array = [3,5,2];
array.sort(function(a,b){
return a-b
// 문자 정렬이 아니라 숫자형 정렬하기 위함
// 음수가 나오면 왼쪽으로 보내는 방식임 외워서 쓰면 됨
});

 

 

2)Object데이터 정렬하기

아래와 같이 만들어진 데이터를 정렬하려고 한다. 정렬 방식은 비슷하지만 약간 다른 방식이 필요하다.

[{
    id : 0,
    title: "Sinrim station 30 meters away",
    image: "https://codingapple1.github.io/vue/room0.jpg",
    content: "18년 신축공사한 남향 원룸 ☀️, 공기청정기 제공",
    price: 340000
    },
    {
    id : 1,
    title: "Changdong Aurora Bedroom(Queen-size)",
    image: "https://codingapple1.github.io/vue/room1.jpg",
    content: "침실만 따로 있는 공용 셰어하우스입니다. 최대 2인 가능",
    price: 450000
    },
    {
    
    ..........

아래와 같이 a.price, b.price를 기준으로 다시 만들어줄 필요가 있다. 겉에 [] 껍데기에 {}형태의 자료들이 덮어져 있기

 

때문이다.

    priceSort(){
      // [{},{},{},....]
      // sort()는 원본이 변형됨 하지만 map(), filter()는 원본을 유지시켜 준다.
      this.oneroom.sort(function(a,b){
        return a.price-b.price
      });
    },

만들어진 결과물

3)array 데이터보존 하면서 복사하는방법 [...array]

기본적으로 배열데이터를 복사할 때 그냥 변수 대입만 해주면 같은 값을 공유해서 사용한다고 보면된다.

 

아래 코드와 같다. 그래서 정렬후 결과, 원본으로 돌리는 경우 아래와같이 [...array]방식을 사용해 줘야한다.

var array = [1,2,3,4,5];

var array2 = array;

var array3 = [...array];

array.push(6);

console.log(array); // 1,2,3,4,5,6
console.log(array2); // 1,2,3,4,5,6
console.log(array3); //1,2,3,4,5