JS/Vue方法对对象数组按照某一字段(字段值为中文)进行排序归类(el-button按钮触发)

本文链接：https://blog.csdn.net/Amnesiac666/article/details/104252883

待排序数据:

  titleDatalist:[
      {id:1,titleTypes:'填空题',titlescore:1},
      {id:2,titleTypes:'单选题',titlescore:8},
      {id:10,titleTypes:'问答题',titlescore:5},
      {id:15,titleTypes:'单选题',titlescore:2},
      {id:22,titleTypes:'问答题',titlescore:1},
      {id:7,titleTypes:'判断题',titlescore:0}
    ]

时间触发按钮:

 <el-button type="success" plain @click="sortsort">排序</el-button>

JS/vue使用

方法1(默认排序)：

    sortsort() {
      this.titleDatalist.sort(this.sortId);
    },
    sortId(a, b) {
       return a["titleTypes"].localeCompare(b["titleTypes"]);
    },

方法2(指定序列排序规则)：

    sortsort() {
      this.titleDatalist.sort(this.sortId);
    },
    sortId(a, b) {
      let list = ["单选题", "判断题", "多选题", "填空题", "问答题"];
      return list.indexOf(a.titleTypes) - list.indexOf(b.titleTypes);
    },

———————————————————————————————
原理：

使用Array.sort()、localeCompare()

Array.sort()官方文档解释:

语法:
arr.sort([compareFunction])
参数:
①compareFunction 可选
用来指定按某种顺序进行排列的函数。如果省略，元素按照转换为的字符串的各个字符的Unicode位点进行排序。
②firstEl
第一个用于比较的元素。
③secondEl
第二个用于比较的元素。
返回值
排序后的数组。请注意，数组已原地排序，并且不进行复制。

如果为 sortfunction 参数提供了一个函数，那么该函数必须返回下列值之一：

负值，如果所传递的第一个参数比第二个参数小。
零，如果两个参数相等。
正值，如果第一个参数比第二个参数大。

localeCompare()官方文档解释

localeCompare() 方法返回一个数字来指示一个参考字符串是否在排序顺序前面或之后或与给定字符串相同。
语法：
stringObject.localeCompare(target)

说明比较结果的数字。如果 stringObject 小于 target，则 localeCompare() 返回小于 0 的数。如果 stringObject 大于 target，则该方法返回大于 0 的数。如果两个字符串相等，或根据本地排序规则没有区别，该方法返回 0。stringObj.localeCompare(target)中谁比较谁，决定了列表的升序还是降序。