一、常规

  1. <!DOCTYPE html>
  2. <html lang="en">
  4.   <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.   </head>
  11.   <body>
  12.     <div id="box">
  13.       <!-- 点击添加事件 -->
  14.       <button @click="sortTicket(1)">升序排列</button>
  15.       <button @click="sortTicket(2)">降序排列</button>
  16.       <!-- 遍历books -->
  17.       <p v-for="book in books">书名：{{book.name}}月票：{{book.ticket}}</p>
  18.     </div>
  19.     <!-- 引入vue -->
  20.     <script src="./vue.js"></script>
  21.     <script>
  22.       new Vue({
  23.         el: "#box",
  24.         data: {
  25.           books: [{
  26.             id: 1,
  27.             name: "明克街13号",
  28.             ticket: 152
  29.           }, {
  30.             id: 2,
  31.             name: "人族镇守使",
  32.             ticket: 100
  33.           }, {
  34.             id: 3,
  35.             name: "星门",
  36.             ticket: 210
  37.           }, {
  38.             id: 4,
  39.             name: "重生之似水流年",
  40.             ticket: 175
  41.           }, {
  42.             id: 5,
  43.             name: "我的云养女友",
  44.             ticket: 972
  45.           }]
  46.         },
  47.         methods: { /* 添加函数 */
  48.           sortTicket(type) {
  49.             if (type == 1) {
  50.               /* 利用sort排序 升序 */
  51.               this.books.sort((a, b) => {
  52.                 return a.ticket - b.ticket
  53.               })
  54.             } else if (type == 2) {
  55.               /* 利用sort排序  降序*/
  56.               this.books.sort((a, b) => {
  57.                 return b.ticket - a.ticket
  58.               })
  59.             }
  60.           }
  61.         }
  62.       })
  63.     </script>
  64.   </body>
  66. </html>

二、按照对象中的某个属性排序

  1. var  obj={name:'test'}
  2. let propertyName='name'
  4. console.log(obj.propertyName);//undefined
  5. //可以通过点语法来存取，比如obj.name指的是访问obj对象上的name属性，但是此时对象上要有这个name属性，否则访问到的就是undefined。
  7. console.log(obj[propertyName]);//test
  8. /*
  9. 1.使用中括号来存取属性，要在括号内使用属性名的字符串形式，也就是可以通过变量访问属性。
  10. 2.如果属性名中包含可以会导致语法错误的字符或者包含关键字、保留字时使用中括号语法。比如 first name中间有空格，不能使用点语法。
  11. */
  1. //sort()会在每一项上调用String()转型函数，然后比较字符串来决定顺序，即使数组的元素都是数值，也会先把数组转换为字符串再比较排序。
  3. let nums=[0,1,5,10,15]
  4. console.log(nums.sort());
  5. //0,1,10,15,5

sort() 方法可以接收一个比较函数，用于判断哪个值应该排在前面。
比较函数规则：

  1. 如果第一个参数应该排在第二个参数前面，就返回负值；
  2. 如果两个参数相等，就返回0；
  3. 如果第一个参数应该排在二个参数后面，就返回正值。 ```javascript function compare(value1,value2){ if(value1value2){ return -1 }else{ return 0 } } let values=[0,23,1,4,2]

// sort方法传入比较函数，数组中的数值在排序后保持了正确的顺序 console.log(values.sort(compare));// [23, 4, 2, 1, 0] //使用箭头函数的形式简写 console.log(values.sort((a,b)=>ab?-1:0));// [23, 4, 2, 1, 0] //都是数值的时候可以更简洁点 console.log(values.sort((a,b)=>b-a));

  1. 如果数组的元素是数值，或者是其valueOf方法返回数值的对象如Date对象，可以直接用第二个值减去第一个值。比较函数就是要返回小于0、0和大于0的数值
  2. ```javascript
  3. //常规
  4. function sortBy(property){
  5.   return function(value1,value2){
  6.     let a=value1[property]
  7.     let b=value2[property]
  8.     return b-a
  9.   }
  10. }
  12. //是否升序
  13. function sortBy1(property,asc){
  14.   return function (value1, value2) {
  15.     let a = value1[property]
  16.     let b = value2[property]
  17.     // 默认升序
  18.     if(asc==undefined){
  19.       return a-b
  20.     }else{
  21.       return asc? a-b:b-a
  22.     }
  23.   }
  24. }
  25. console.log(value.sort(sortBy1('age',true)));

三、将一个对象数组根据另一个数组的顺序进行排序

  1. const origin = [
  2.   { id: 4, name: 'name4' }, 
  3.   { id: 3, name: 'name3' }, 
  4.   { id: 9, name: 'name9' }, 
  5.   { id: 1, name: 'name1' }
  6. ]
  8. const sortKey =  [
  9.   { sortId: 3, age: '333' }, 
  10.   { sortId: 1, age: '111'}, 
  11.   { sortId: 9, age: '999' }, 
  12.   { sortId: 4, age: '444' }
  13. ]
  15. //将sortKey的sortId，与对象数组origin的id关联，并根据sortId对origin进行排序，期望结果：
  16. const origin = [
  17.   { id: 3, name: 'name3' }, 
  18.   { id: 1, name: 'name1' }, 
  19.   { id: 9, name: 'name9' }, 
  20.   { id: 4, name: 'name4' }
  21. ]
  23. //方案
  24. const result = origin.sort(function(a, b){
  25.   return sortKey.map(s => s.sortId).indexOf(a.id) < 
  26.          sortKey.map(s => s.sortId).indexOf(b.id) ? -1 : 1;
  27. });
  28. // result: [{ id: 3, name: 'name3' }, { id: 1, name: 'name1' }, { id: 9, name: 'name9' }, { id: 4, name: 'name4' }]