JavaScript数组sort方法结合vue例题回顾

sort方法可用来对数组中的元素进行排序，会影响原数组，默认按照Unicode排序

在sort()函数中添加一个回调函数指定排序规则，回调函数需要定义两个形参，浏览器将会分别使用数组中的元素作为实参去调用回调函数，使用哪个元素不确定，但是数组中的a一定在b前面。

浏览器会根据回调函数的返回值决定元素的顺序。

（1）如果回调函数返回的是一个大于0的值，元素就会变换位置

（2）如果回调函数返回的是一个小于0的值，元素位置不变

（3）如果回调函数返回0，则认为两个元素相等

arr=[1,9,3,7,3,2]
arr.sort(function(a,b){
  if(a>b){
    return 1;
  }else if(a<b){
    return -1;
 }else{
    return 0;
 })

或者
arr.sort(function(a,b){
 return a-b; //升序排列
 return b-a;//降序排列
  })

console.log(arr)

 与vue结合相关的例题

  <div id="root">
          <h2>人员信息</h2>
          <input type="'text" placeholder="请输入名字" v-model="keyword">
          <button @click="sortType=2">年龄升序</button>
          <button @click="sortType=1">年龄降序</button>
          <button @click="sortType=0">原顺序</button>
          <ul>
            <li v-for='(p,index) of filPersons' :key="index">
            {{p.name}}-{{p.age}}-{{p.sex}}
            </li> 
          </ul>
      </div>
<script type='text/javascript'>
  Vue.config.productionTip=false// 以阻止 vue 在启动时生成生产提示
    //用computed实现
    new Vue({
     el:'#root',
     data:{
      keyword:'',
      sortType:0,//0原顺序 1降序 2升序
       persons:[
           {id:'001',name:'马冬梅',age:'18',sex:'女'},
           {id:'002',name:'周冬雨',age:'20',sex:'女'},
           {id:'003',name:'周杰伦',age:'36',sex:'男'},
           {id:'004',name:'温兆伦',age:'3',sex:'男'}
       ],
     },
     computed:{
      /*
      第一个return返回的是过滤所得到的值，储存在arr中，第二个return返回条件中最终的判断结果，最 
       后一个return返回到新的数组filPersons中最为最后真实页面所显示的结果，不要忘记写最后一个 
       return
        */
       filPersons(){
         const arr=this.persons.filter((p)=>{
          return p.name.indexOf(this.keyword)!==-1
         })
         //判断一下是否需要排序 此处要记住返回值
         if(this.sortType){
           arr.sort((p1,p2)=>{
            return this.sortType===1?p2.age-p1.age:p1.age-p2.age
           }
           )}
           return arr
       }
     }

     })