在table中的前端排序

有些时候需要前端进行来排序,排序的时候通常需要对同时包含:数字、字母、中文的对象进行排序;

let data = [

    {name: ‘张三’,age: 12},

    {name: ‘张三’,age: 12}

]

data.sort( // 第一种方式

   (a, b) => this.sortDevName(a['name'], b['name'])

);

data.sort( // 第二种方式 - 仅支持中文

   (a, b) =>  return a['name'].localeCompare(b['name']);

);


(1)第一种方式

在methods中定义:

排序顺序为:数字(0->9)->大写字母(A->Z)->小写字母(a->z)->中文拼音(a->z)

    sortDevName(str1, str2) {

      let res = 0;

      for (let i = 0; ;i += 1) {

        if (!str1[i] || !str2[i]) {

          res = str1.length - str2.length;

          break;

        }

        const char1 = str1[i];

        const char1Type = this.getChartType(char1);

        const char2 = str2[i];

        const char2Type = this.getChartType(char2); // 类型相同的逐个比较字符

        if (char1Type[0] === char2Type[0]) {

          if (char1 === char2) {

            break;

          }

          if (char1Type[0] === 'zh') {

            res = char1.localeCompare(char2);

          } else if (char1Type[0] === 'en') {

            res = char1.charCodeAt(0) - char2.charCodeAt(0);

          } else {

            res = char1 - char2;

          }

          break;

        } else { // 类型不同的,直接用返回的数字相减

          res = char1Type[1] - char2Type[1];

          break;

        }

      }

      return res;

    },

    getChartType(char) {

      // 数字可按照排序的要求进行自定义,我这边产品的要求是

      // 数字(0->9)->大写字母(A->Z)->小写字母(a->z)->中文拼音(a->z)

      if (/^[\u4e00-\u9fa5]$/.test(char)) {

        return ['zh', 300];

      }

      if (/^[a-zA-Z]$/.test(char)) {

        return ['en', 200];

      }

      if (/^[0-9]$/.test(char)) {

        return ['number', 100];

      }

      return ['others', 999];

    },


(2)第二种方式

localeCompare() 方法来实现中文按照拼音排序,貌似仅仅支持中文排序。

把 < 和 > 运算符应用到字符串时,它们只用字符的 Unicode 编码比较字符串,而不考虑当地的排序规则。以这种方法生成的顺序不一定是正确的

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 在C语言中,五种基本数据类型存储空间长度的排列顺序是: A)char B)char=int<=float C)ch...
    夏天再来阅读 3,438评论 0 2
  • SwiftDay011.MySwiftimport UIKitprintln("Hello Swift!")var...
    smile丽语阅读 3,875评论 0 6
  • "use strict";function _classCallCheck(e,t){if(!(e instanc...
    久些阅读 2,068评论 0 2
  • mean to add the formatted="false" attribute?.[ 46% 47325/...
    ProZoom阅读 2,736评论 0 3
  • 1.获取字符 - 和列表获取元素一样 str1 = 'spider man' 1)获取单个字符 print(s...
    Mxtrace阅读 223评论 0 0