题解 | #数组排序#

思路：使用sort方法对数组按照指定顺序排序并得到一个排序后的数组arr，再使用forEach方法遍历数组arr，并将其元素中的name取出来放入li标签中，再将ul.innerHTML更新为str。

<script>
  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');
  function render(arr)
  {
     var str=""
     //element表示数组元素
     arr.forEach(element=>{
       str+=`<li>${element.name}</li>`
     })
     ul.innerHTML=str
  }
  upbtn.onclick=function(){
  	 //升序
     var uparr=cups.sort(function(a,b){
        return a.sales-b.sales
     })
     render(uparr)
  }
  downbtn.onclick=function(){
  	 //降序
     var downarr=cups.sort(function(a,b){
        return b.sales-a.sales
     })
     render(downarr)
  }
</script>

总结：sort方法对数组排序，其参数是一个回调函数，回调函数接受两个参数a和b，如果希望a排在b前面则返回一个负数，如果希望a排在b后面则返回一个正数，如果a和b相等则返回0。即数组.sort()返回排序后的数组；数组.sort(function(a,b){return a-b})升序，因为如果a比b小则返回负数，即a在b前，如果a比b大则返回正数，即a在b后，这样就是升序排列；数组.sort(function(a,b){return b-a})降序，因为如果a比b小则返回正数，即a在b后，如果a比b大则返回负数，即a在b前，这样就是降序排列。arr.forEach(function(currentValue, index, array){})方法遍历数组，这三个参数是固定的，但是可以省略部分参数，currentValue表示当前正在处理的元素值，index表示当前正在处理的元素下标，array表示当前正在处理的数组。