map sort slice

• 总的数据
• .sort()
• .slice()
• .map()

总的数据

以下面的数据为例来分析更加清晰

// 共10组数据
[{
    "name": "商家1",
    "value": 99
}, {
    "name": "商家2",
    "value": 102
}, {
    "name": "商家3",
    "value": 83
}, {
    "name": "商家4",
    "value": 49
}, {
    "name": "商家5",
    "value": 200
}, {
    "name": "商家6",
    "value": 152
}, {
    "name": "商家7",
    "value": 76
}, {
    "name": "商家8",
    "value": 23
}, {
    "name": "商家9",
    "value": 87
}, {
    "name": "商家10",
    "value": 223
}]

.sort()

// 总数据是this.allData，通过.sort()按照每一项value值进行排序
this.allData.sort((a, b) => {
        return a.value - b.value // 从小达大排序
        // 若要从大达小排序，则：return b.value - a.value
      })

.slice()

// 总数据是this.allData
// 将排好序的数据通过slice方法切成了5份
const showData = this.allData.slice(0, 5)

// 如下：
[{
    "name": "商家8",
    "value": 23
}, {
    "name": "商家4",
    "value": 49
}, {
    "name": "商家14",
    "value": 57
}, {
    "name": "商家7",
    "value": 76
}, {
    "name": "商家3",
    "value": 83
}]

// 可以通过控制start和end的值来处理数据，动态获取当前需要的数据
const showData = this.allData.slice(start, end)

.map()

// 通过map赋给一个新的数组
// 将切片后的数据showData通过map方法循环导出单个属性name及其值
const sellerNames = showData.map((item) => {
        return item.name
      })

// 假设是前面排好序的切成5个的name
```javascript
["商家8", "商家4", "商家14", "商家7", "商家3"]
// 分别对应：从小到大
[23, 49, 57, 76, 83]