How to implement A-Z sorting of Chinese Pinyin in js

This time I will show you how to implement the A-Z sorting of Chinese Pinyin in js, and what are the precautions for implementing the A-Z sorting of Chinese Pinyin in js. The following is a practical case, let's take a look.

To implement Chinese according to the A-Z method, you can write in the methods of vue:

methods:{
        pySort:function(arr,empty){
          var $this = this;
          if(!String.prototype.localeCompare)
            return null;
          var letters = "ABCDEFGHJKLMNOPQRSTWXYZ".split('');
          var zh = "阿八嚓哒妸发旮哈讥咔垃痳拏噢妑七呥扨它穵夕丫帀".split('');
          var arrList = [];
          for(var m =0;m<arr.length;m++){
            arrList.push(arr[m].name);
          }
          var result = [];
          var curr;
          for(var i=0;i<letters.length;i++){
            curr = {letter: letters[i], data:[]};
            if(i!=26){
              for(var j =0;j<arrList.length;j++){
                var initial = arrList[j].charAt(0);//截取第一个字符
                if(arrList[j].charAt(0)==letters[i]||arrList[j].charAt(0)==letters[i].toLowerCase()){  //首字符是英文的
                  curr.data.push(arrList[j]);
                }else if(zh[i]!=&#39;*&#39;&&$this.isChinese(initial)){   //判断是否是无汉字,是否是中文
                  if(initial.localeCompare(zh[i]) >= 0 &&(!zh[i+1]||initial.localeCompare(zh[i+1]) <0)) {  //判断中文字符在哪一个类别
                    curr.data.push(arrList[j]);
                  }
                }
              }
            }else{
              for(var k =0;k<arrList.length;k++){
                var ini = arrList[k].charAt(0);      //截取第一个字符
                if(!$this.isChar(ini)&&!$this.isChinese(ini)){
                  curr.data.push(arrList[k]);
                }
              }
            }
            if(empty || curr.data.length) {
              result.push(curr);
              //curr.data.sort(function(a,b){
              //  return b.localeCompare(a);    //排序,英文排序,汉字排在英文后面
              //});
            }
          }
          return result;
        },
        isChinese:function(temp){
          var re=/[^\u4E00-\u9FA5]/;
          if (re.test(temp)){return false;}
          return true ;
        },
        isChar:function(char){
          var reg = /[A-Za-z]/;
          if (!reg.test(char)){return false ;}
          return true ;
        }
       }

Convert the jsonobject obtained from php into an array, and call it directly in vue ->this.pySort(arr); js can directly call the pySort(arr) method. Implement sorting in A-Z format

The format shown in the console output is as follows:

The key value A-Z

is stored in letter data: stores the sorted array

As for vue that needs to be placed on the page, use v-for loop v-for="(key, value) in arr"

To get the value of the data array, continue to use v-for="tmp in (key.data)" to loop through the elements you want to enter and place.

The writing is relatively simple, and this method is also common in js

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

How to deal with the option overlay of select

The vue mobile UI framework implements the side menu plug-in effect

The above is the detailed content of How to implement A-Z sorting of Chinese Pinyin in js. For more information, please follow other related articles on the PHP Chinese website!