题解 | #数组排序#

var cups = [
      { type: 1, price: 100, color: 'black', sales: 3000, name: '牛客logo马克杯' },
      { type: 2, price: 40, color: 'blue', sales: 1000, name: '无盖星空杯' },
      { type: 4, price: 60, color: 'green', sales: 200, name: '老式茶杯' },
      { type: 3, price: 50, color: 'green', sales: 600, name: '欧式印花杯' }
    ]
    var ul = document.querySelector('ul');
    var upbtn = document.querySelector('.up');
    var downbtn = document.querySelector('.down');

    
    upbtn.onclick = () => {
      cups.sort(ascendingOrder)

      render()
    }

    downbtn.onclick = () => {
      cups.sort(descendingOrder)

      render()
    }

    function ascendingOrder(a, b) {
      return a.sales - b.sales
    }

    function descendingOrder(a, b) {
      return b.sales - a.sales
    }

    function render() {
      let lis = cups.reduce((lis, cup) => {
        lis += `<li>${cup.name}</li>`
        return lis
      }, '')

      ul.innerHTML = lis
    }

任务可分为三步执行：

1. 点击事件

2.排序数组

3..渲染数组的内容