[Vue] Vue의 기초(8) - sort 정렬, spread operator

 sort()

 

sort()는 문자정렬이 된다.

priceSort(){
  var array = [3,5,2];
  array.sort();
  console.log(array); // [2, 3, 5]
}

 

숫자정렬을 하려면 function(a,b)를 넣어 만든다. a - b가 음수면 a가 왼쪽으로 가면서 숫자 정렬이 된다.

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

 

spread operator

sort() 함수는 원본이 변형되므로 기존 데이터를 보존하기 위해서 spread operator [... 데이터]를 사용한다.

그러면 array/object 데이터의 각각 별개의 사본을 만들 수 있다. [...array자료]

spread operator를 사용하지 않으면 같은 값을 공유한다.

(map(), filter() 등은 원본을 보존해준다.)

<template>
  <button @click="priceSort">가격순정렬</button>
  <button @click="sortBack">되돌리기</button>
</template>

<script>
import data from './assets/oneroom';

export default {
  name: 'App',
  data(){
    return {
      oneroomOriginal : [...data],
      oneroom : data,
    }
  },
  methods : {
    priceSort(){
      this.oneroom.sort(function(a,b){
        return a.price - b.price
      });
    },
    sortBack(){
      this.oneroom = [...this.oneroomOriginal];
    },
  },
}
</script>

 

정렬기능 활용: 가격낮은순, 가격높은순, 가나다순, 되돌리기

<template>
  <button @click="priceLow">가격낮은순</button>
  <button @click="priceHigh">가격높은순</button>
  <button @click="sortABC">가나다순</button>
  <button @click="sortBack">되돌리기</button>
</template>

<script>
import data from './assets/oneroom';

export default {
  name: 'App',
  data(){
    return {
      oneroomOriginal : [...data],
      oneroom : data,
    }
  },
  methods : {
    priceLow(){
      this.oneroom.sort(function(a,b){
        return a.price - b.price
      });
    },
    priceHigh(){
      this.oneroom.sort(function(a,b){
        return b.price - a.price
      });
    },
    sortABC(){
      this.oneroom.sort(function(a,b){
        return a.title.localeCompare(b.title)
      });
    },
    sortBack(){
      this.oneroom = [...this.oneroomOriginal];
    },
  },
}
</script>