js通过两种方式进行对商品价格排序

javascript-illustration.png

js通过两种方式进行对商品价格排序

<template>
  <div class="content"></div>
</template>
<script>
export default {
  data() {
    return {
      user: {
        order_list: [
          { id: 1, title: "java", click: 300, price: 600 },
          { id: 2, title: "react", click: 240, price: 460 },
          { id: 3, title: "vue", click: 506, price: 820 },
          { id: 4, title: "c#", click: 157, price: 765 },
          { id: 5, title: "php", click: 650, price: 100 },
          { id: 6, title: "c语言", click: 80, price: 920 },
        ],
        //方式二
        userOrderSort() {
          this.order_list.reduce((pre, cur) => {
            return pre.price > cur.price ? 1 : -1;
          }, []);
        },
      },
    };
  },
  mounted() {
    this.orderSort();
    this.user.userOrderSort();
  },
  methods: {
    //方式一
    orderSort() {
      this.user.order_list.sort(order("price"));
    },
  },
};
// 封装排序方法
function order(filed, type = "asc") {
  return (a, b) => {
    if (type == "asc") return a[filed] > b[filed] ? 1 : -1;
    return a[filed] > b[filed] ? -1 : 1;
  };
}
</script>

<style lang="scss"></style>

打印出来的结果

[
  {
    "id": 5,
    "title": "php",
    "click": 650,
    "price": 100
  },
  {
    "id": 2,
    "title": "react",
    "click": 240,
    "price": 460
  },
  {
    "id": 1,
    "title": "java",
    "click": 300,
    "price": 600
  },
  {
    "id": 4,
    "title": "c#",
    "click": 157,
    "price": 765
  },
  {
    "id": 3,
    "title": "vue",
    "click": 506,
    "price": 820
  },
  {
    "id": 6,
    "title": "c语言",
    "click": 80,
    "price": 920
  }
]

后期还会带来更多知识点，喜欢的点赞关注来点糖