javascript-illustration.png
js通過兩種方式進(jìn)行對商品價格排序
<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>
打印出來的結(jié)果
[
{
"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
}
]
